/* Colors */
@gray-dark: #aaa;
@gray-semi-dark: #bbb;
@gray-semi-light: #ccc;
@gray-light: #ddd;
@gray-very-light: #eee;
@blue: #00A6D6;
@blue-dark: #0087b5;
@blue-very-dark: #006182;
@blue-light: #deebf7;

/* Sizes, Margins and Paddings*/
@document-padding: 20px;
@inter-element-margin: 5px;
@standard-border-radius: 5px;
@side-menu-width: 350px;
@color-indicator-width: 140px;

@global-padding: 30px;
@transition-length: 150ms;
@side-bar-width: 250px;
@navbar-height: 50px;

html, body {
  width: 100%;
  height: 100%;
  margin: 0;

  font-family: Helvetica, Verdana, sans-serif;

  overflow: hidden;

  background: #eee;
}

a:hover {
  text-decoration: none;
}

#main-canvas {
  float: left;
}

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

  z-index: 1;
}

/* Mixin for cross-platform prevention of user-text-selection */
.user-select-def {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Mixin for cross-platform transitions */
.transition-def(@property, @time) {
  -webkit-transition: @property @time;
  -moz-transition: @property @time;
  -ms-transition: @property @time;
  -o-transition: @property @time;
  transition: @property @time;
}

/* Mixin for cross-platform border-radius properties */
.border-radius-def(@length) {
  -webkit-border-radius: @length;
  -moz-border-radius: @length;
  border-radius: @length;
}

/* General Button Abstractions */
.clickable {
  cursor: pointer;
  .user-select-def;
}

.button {
  text-align: center;
  padding: 5px;

  background-color: @gray-semi-dark;

  .border-radius-def(@standard-border-radius);
  .clickable;

  .transition-def(all, 200ms);
}

.button:hover {
  background-color: @gray-semi-light;
}

.button:active {
  background-color: @gray-dark;
}

/* Container for menu panels */
.side-menu-container {
  display: inline-block;
  position: absolute;
  top: @document-padding;
  width: @side-menu-width;
  height: calc(100% - @document-padding);
  margin-top: 10px;

  pointer-events: none;
}

.left-side {
  left: @document-padding;
}

.right-side {
  right: @document-padding;
}

.right-middle-side {
  right: @document-padding * 2 + @side-menu-width;
}

/* Collapsible menu panel */
.menu-container {
  margin-bottom: 10px;
  border: 1px solid @gray-dark;

  -webkit-border-radius: @standard-border-radius;
  -moz-border-radius: @standard-border-radius;
  border-radius: @standard-border-radius;

  overflow: hidden;
  pointer-events: all;
}

.menu-header-bar {
  display: block;
  padding: 5px;

  font-weight: bold;

  background-color: @gray-semi-light;
  border-bottom-width: 0;
}

.menu-body {
  display: block;
  padding: 10px 5px;

  background-color: @gray-very-light;

  .dropdown {
    margin: @inter-element-margin 0;
    display: inline-block;
  }

  .dropdown-label {
    display: inline-block;
    margin-right: 10px;
  }
}

.menu-body.simulation {
  display: none;
}

.side-menu-container .menu-collapse, .side-menu-container .menu-exit {
  display: inline-block;
  float: right;
  width: 20px;
  height: 20px;

  text-align: center;
  line-height: 20px;
  padding: 0;
  font-size: 9pt;

  color: #777;
}

#room-menu {
  .input-group {
    margin-bottom: 5px;
  }

  label {
    margin-top: 10px;
  }
}

#room-construction-cancel {
  display: none;
}

/* DC components */
.dc-component-container {
  .border-radius-def(@standard-border-radius);

  margin-bottom: @inter-element-margin;
  padding: 10px;

  cursor: pointer;

  .transition-def(background-color, 150ms);

  .dc-component {
    display: inline-block;
    width: 50px;
    height: 50px;
    float: left;

    border: 4px solid #000;
  }

  .dc-component-label {
    display: inline-block;
    padding-left: 20px;
    line-height: 50px;
    font-size: 1.3em;
  }
}

.dc-component-container:hover {
  background-color: @gray-semi-dark;
}

.dc-component-container:active {
  background-color: @blue-dark;
}

.dc-component-container[data-active="true"] {
  background-color: @blue;
}

/* DC Object colors */
.dc-rack {
  background-color: rgb(170, 170, 170);
}

.dc-psu {
  background-color: rgb(230, 50, 60);
}

.dc-cooling-item {
  background-color: rgb(40, 50, 230);
}

/* Rack menu */
.node-list-container {
  border: 2px solid #000000;
  overflow: auto;
  max-height: 300px;

  margin: @inter-element-margin 0;
  padding: 0;
  @node-height: 50px;

  .node-element {
    position: relative;

    @img-size: 34px;
    height: @node-height;
    cursor: hand;

    background-color: @gray-semi-light;

    .node-element-btn {
      display: inline-block;
      float: left;
      width: 40px;
      height: @node-height - 1px;

      color: #000;

      line-height: @node-height - 1px;
      text-align: center;
    }

    .node-element-btn:hover {
      text-decoration: none;
    }

    .node-element-content {
      @element-padding-top: 2px;
      @element-padding-left: 12px;
      @img-margin: 7px;

      position: relative;

      display: inline-flex;
      overflow: hidden;
      margin: 5px;
      padding: @element-padding-top @element-padding-left;

      border: 1px solid #000;
      background: #eeeeee;

      img {
        width: @img-size;
        height: @img-size;
      }

      img:not(:last-of-type) {
        margin-right: @img-margin;
      }

      .icon-overlay {
        position: absolute;
        top: @element-padding-top;
        width: @img-size;
        height: @img-size;

        background: #eeeeee;
        opacity: 0.6;
      }

      .overlay-cpu {
        left: @element-padding-left;
      }

      .overlay-gpu {
        left: @element-padding-left + @img-size + @img-margin;
      }

      .overlay-memory {
        left: @element-padding-left + (@img-size + @img-margin) * 2;
      }

      .overlay-storage {
        left: @element-padding-left + (@img-size + @img-margin) * 3;
      }

      .overlay-network {
        left: @element-padding-left + (@img-size + @img-margin) * 4;
      }
    }

    .node-element-number {
      display: inline-block;
      float: right;
      width: 30px;
      height: 100%;

      line-height: 50px;
      text-align: right;
      padding-right: 10px;
    }
  }

  .node-element:not(:last-of-type) {
    border-bottom: 1px solid #666;
  }

  .node-element:last-of-type .node-element-content {
    margin-bottom: 0;
  }

  .node-element-overlay {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: @node-height;

    background: #eeeeee;
    opacity: 0.6;

    z-index: 100;
  }
}

#node-menu {
  .nav-tabs {
    li.active, li.active a {
      background-color: @gray-very-light;
    }

    img {
      width: 30px;
      height: 30px;
    }
  }

  .tab-content {
    overflow: hidden;

    .panel-heading .accordion-toggle:after {
      //noinspection CssNoGenericFontName
      font-family: 'Glyphicons Halflings';
      content: "\e114";
      float: right;
      color: grey;
    }

    .panel-heading .accordion-toggle.collapsed:after {
      content: "\e080";
    }
  }

  .remove-unit:hover {
    text-decoration: none;
  }

  .unit-add-input {
    margin-bottom: 10px;
  }

  .spec-table td {
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
  }

  .spec-table tr td:first-child {
    width: 50px;
    text-align: right;
  }

  .spec-table tr td:nth-child(2) {
    width: 200px;
  }

  .spec-table tr td:nth-child(3) {
    width: 50px;
  }
}

/* Tasks menu */
#tasks-menu .menu-body {
  overflow-y: auto;
  max-height: 350px;
}

#tasks-menu .menu-body .task-element {
  height: 70px;

  .task-icon {
    @icon-size: 35px;

    display: inline-block;
    position: relative;
    float: left;

    top: 13px;
    left: 10px;

    width: @icon-size;
    height: @icon-size;
    font-size: @icon-size;

  }

  .task-info {
    display: inline-block;
    width: 270px;
    float: right;

    .task-time {
      display: block;
    }

    .progress {
      margin-bottom: 0;
    }

    .task-flops {
      display: block;
    }
  }

  &:not(:last-child) {
    border-bottom: 1px solid #bbb;
    margin-bottom: 10px;
  }
}

#statistics-chart, #machine-statistics-chart {
  display: block;
  height: 200px;
  margin-right: 15px;
}

/* Container for Zooming buttons */
.tool-panel {
  display: inline-block;
  position: absolute;
  bottom: @document-padding;
  left: @document-padding;

  z-index: 1000;
}

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;

  border-color: @gray-dark;
}

/* Indicators*/
.indicators {
  display: inline-block;
  position: absolute;
  bottom: @document-padding;
  right: @document-padding;
}

/* Scale indicator */
.scale-indicator {
  display: inline-block;
  width: 100px;
  height: 18px;
  line-height: 18px;

  text-align: right;

  border-top-width: 0;
  border-right-width: 0;
  border-bottom: 2px solid #000;
  border-left: 2px solid #000;

  .user-select-def;
}

/* Color indicator */
.color-indicator {
  @color-indicator-padding: 7px;
  @element-width: (@color-indicator-width - @color-indicator-padding * 2) / 4;

  display: inline-block;
  position: relative;
  top: 5px;
  margin-left: 15px;
  cursor: pointer;
  padding: @color-indicator-padding;
  .border-radius-def(@standard-border-radius);
  .transition-def(background, @transition-length);
  z-index: 100;

  width: @color-indicator-width;

  &:hover {
    background: rgba(127, 127, 127, 0.5);
  }

  .intensity-labels {
    height: 20px;
    line-height: 20px;

    font-size: 8pt;

    div {
      display: inline-block;
      width: @element-width;
      margin-right: -3px;

      text-align: center;
    }

    div:first-of-type {
      width: @element-width / 2;
      text-align: left;
    }

    div:last-of-type {
      width: @element-width / 2;
      text-align: right;
    }
  }

  .intensity-colors {
    height: 15px;

    div {
      display: inline-block;
      width: @element-width + 1;
      height: 100%;
      margin-right: -5px;
      border: 1px solid #444;
    }

    .intensity-low {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      background: rgba(197, 224, 180, 1);
    }

    .intensity-mid-low {
      background: rgba(255, 230, 153, 1);
    }

    .intensity-mid-high {
      background: rgba(248, 203, 173, 1);
    }

    .intensity-high {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      background: rgba(249, 165, 165, 1);
    }
  }
}

@global-control-height: 40px;

/* Mode switch */
.mode-switch {
  display: block;
  width: 100%;
  height: @global-control-height;
  line-height: @global-control-height;

  margin-bottom: 10px;
  pointer-events: all;

  background-color: #fff;
  border: 1px solid @gray-dark;
  .border-radius-def(@standard-border-radius);
  overflow: hidden;

  div {
    display: inline-block;
    width: 50%;
    height: 100%;
    text-align: center;

    font-size: 1.2em;
    .clickable;
  }

  div:first-child {
    float: left;
  }

  div:last-child {
    float: right;
  }
}

#save-version-btn {
  width: 50%;
  height: @global-control-height;
  line-height: @global-control-height;
  text-align: center;
  margin-bottom: 10px;
  font-size: 1.2em;
  color: #fff;

  .clickable;
  pointer-events: all;
  .border-radius-def(@standard-border-radius);
}

#save-version-btn[data-saved="true"] {
  background-color: #4dba31;

  &:hover {
    background: #3b8e25;
  }
}

#save-version-btn[data-saved="false"] {
  background-color: #d69931;

  &:hover {
    background: #af7b2d;
  }
}

.mode-switch[data-selected="construction"] {
  #construction-mode-switch {
    background: @blue;
    color: #fff;
  }

  #construction-mode-switch:hover {
    background: @blue-dark;
  }

  #simulation-mode-switch {
    background: #fff;
    color: #000;
  }

  #simulation-mode-switch:hover {
    background: #eee;
  }
}

.mode-switch[data-selected="simulation"] {
  #construction-mode-switch {
    background: #fff;
    color: #000;
  }

  #construction-mode-switch:hover {
    background: #eee;
  }

  #simulation-mode-switch {
    background: @blue;
    color: #fff;
  }

  #simulation-mode-switch:hover {
    background: @blue-dark;
  }
}

#experiment-menu h2 {
  margin-top: 0;
  font-size: 12pt;
}

/* Timeline controls */
.timeline-bar {
  display: block;
  position: absolute;
  left: 0;
  bottom: @document-padding;
  width: 100%;
  text-align: center;
}

.timeline-container {
  @container-size: 500px;
  @play-btn-size: 40px;
  @border-width: 1px;
  @timeline-border: @border-width solid @gray-semi-dark;

  display: inline-block;
  margin: 0 auto;
  text-align: left;

  width: @container-size;

  .labels {
    display: block;
    height: 25px;
    line-height: 25px;

    div {
      display: inline-block;
    }

    .start-time-label {
      margin-left: @play-btn-size - @border-width;
      padding-left: 4px;
    }

    .end-time-label {
      padding-right: 4px;
      float: right;
    }
  }

  .controls {
    display: flex;
    border: @timeline-border;
    overflow: hidden;

    // Fix for border-radius overflow in Chrome/Webkit
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

    .border-radius-def(@standard-border-radius);

    .play-btn {
      width: @play-btn-size;
      height: @play-btn-size + @border-width;
      line-height: @play-btn-size + @border-width;
      text-align: center;
      float: left;

      margin-top: -@border-width;

      font-size: 16pt;
      background: #333;
      color: #eee;

      .transition-def(background, @transition-length);

      .user-select-def;
      .clickable;

      // Loading icon
      img {
        display: none;
        position: relative;
        width: 70%;
        height: 70%;
        margin-top: -10px;
      }
    }

    .play-btn::before {
      position: relative;
      top: -1px;
      left: 1px;
    }

    .play-btn:hover {
      background: #656565;
    }

    .play-btn:active {
      background: #000;
    }

    .timeline {
      position: relative;
      flex: 1;
      height: @play-btn-size;
      line-height: @play-btn-size;
      float: right;

      background: @blue-light;

      z-index: 500;

      div {
        .transition-def(all, @transition-length);
      }

      .time-marker {
        position: absolute;
        top: 0;
        left: 0;

        width: 6px;
        height: 100%;

        background: @blue-very-dark;

        .border-radius-def(2px);

        z-index: 503;
      }

      .section-marker {
        position: absolute;
        top: 0;
        left: 0;

        width: 3px;
        height: 100%;

        background: #222222;

        z-index: 504;
      }

      .cache-section {
        position: absolute;
        top: 0;
        left: 0;

        width: 0;
        height: 100%;

        background: @blue;

        z-index: 501;
      }

      .task-indicator {
        display: inline-block;
        position: absolute;
        bottom: 0;
        width: 10px;
        height: 10px;

        border: 1px solid #000;

        z-index: 502;
      }

      .task-queued {
        background: #fff340;
      }

      .task-started {
        background: #ff72a0;
      }

      .task-finished {
        background: #c036ff;
      }
    }
  }
}

/* Informational message container, for communicating events to the user */
.info-balloon {
  display: none;
  position: absolute;
  bottom: @document-padding;
  right: @document-padding;

  padding-left: 15px;
  padding-right: 15px;

  height: 30px;
  line-height: 30px;

  background: @blue;
  color: #fff;

  .border-radius-def(15px);

  span {
    line-height: 30px;
    margin-right: 10px;
  }
}

/* Loading overlay, shown during setup */
.loading-overlay {
  z-index: 1000;
  position: absolute;
  width: 100%;
  height: 100%;

  background: rgba(0, 124, 159, 0.7);

  .loading-overlay-content {
    text-align: center;
    display: inline-block;

    width: 300px;
    height: 200px;

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;

    img {
      position: relative;
      bottom: -10px;

      animation: bounce 3s ease infinite;
    }

    .loading-text {
      padding: 3px 10px;
      background-color: #eeeeee;
      .border-radius-def(@standard-border-radius);
    }
  }
}

@keyframes bounce {
  0% {
    bottom: -10px;
  }
  50% {
    bottom: 40px;
  }
  100% {
    bottom: -10px;
  }
}

/* Experiments */
.experiment-list {
  display: block;
  font-size: 12pt;
  border: 0;

  .list-head, .list-body .experiment-row {
    display: block;
    position: relative;
  }

  .list-head div, .list-body .project-row div {
    padding: 0 10px;
    display: inline-block;
  }

  .list-head {
    font-weight: bold;
  }

  .list-body {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .experiment-row {
    background: #f8f8f8;
    border: 1px solid #b6b6b6;
    height: 40px;
    line-height: 40px;
    clear: both;

    .transition-def(background, @transition-length);
    .clickable;
  }

  .experiment-row:hover {
    background: #fff;
  }

  .experiment-row:active {
    background: #cccccc;
  }

  .experiment-row:not(:first-of-type) {
    margin-top: -1px;
  }

  // Sizing of table columns
  .experiment-row, .list-head {
    div {
      display: inline-block;
      width: 20%;

      padding-left: 5px;
      margin-right: -4px; // Address default margin between inline-blocks
    }

    div:last-of-type {
      text-align: right;
      padding-right: 10px;
    }
  }
}

.no-experiments-alert {
  display: none;
  position: relative;
  padding-left: 50px;
  span {
    position: absolute;
    top: 11px;
    left: 10px;
    bottom: 10px;
    font-size: 20pt;
  }
}

.window-overlay {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, 0.5);

  z-index: 5000;
}

.experiments-window {
  width: 80%;
  height: 80%;

  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;

  overflow: hidden;

  .window-body {
    width: 100%;
    height: 500px;

    padding: 10px;

    background: rgba(230, 230, 230, 0.9);

    .border-radius-def(5px);

    .window-heading {
      font-size: 20pt;
      color: #000000;

      .user-select-def;

      font-weight: bold;

      padding-left: 5px;
    }

    .experiment-add-form {
      margin: 20px;

      input, select {
        width: 200px;
      }

      label {
        width: 80px;
        text-align: right;

        .user-select-def;
      }
    }

    .experiments-table-label {
      display: block;
      padding-left: 20px;
      margin-bottom: 5px;

      font-size: 18px;

      .user-select-def;
    }

    .experiment-name-alert {
      position: absolute;
      bottom: 0;
      left: 20px;
      display: none;
    }
  }

  .window-footer {
    width: 100%;
    height: 60px;

    background: rgba(56, 56, 56, 0.9);

    padding: 12px 10px;

    .btn.pull-left {
      margin-right: 5px;
    }

    .btn.pull-right {
      margin-left: 5px;
    }
  }
}

.window-close {
  display: inline-block;
  font-size: 16pt;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  color: #888888;
}

/* Internal page */
/* Main content body (side-menu and main-body) */
.content {
  position: relative;
  top: -@navbar-height;
  width: 100%;
  height: 100%;
  padding-top: @navbar-height;
  z-index: 1;
}

/* Content body */
.main-body {
  position: relative;
  display: block;
  margin: auto;
  width: 900px;
  max-width: 900px;
  height: 100%;
  padding: 40px;

  border-left: 1px solid #bbb;
  border-right: 1px solid #bbb;
  background: #f7f7f7;

  h2 {
    font-weight: bold;
    margin: 10px 0 20px 0;
  }
}

.modal {
  z-index: 10000;
}