/**
 * ---------------------------------------------------------------------
 * GLPI - Gestionnaire Libre de Parc Informatique
 * Copyright (C) 2015-2021 Teclib' and contributors.
 *
 * http://glpi-project.org
 *
 * based on GLPI - Gestionnaire Libre de Parc Informatique
 * Copyright (C) 2003-2014 by the INDEPNET Development Team.
 *
 * ---------------------------------------------------------------------
 *
 * LICENSE
 *
 * This file is part of GLPI.
 *
 * GLPI is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * GLPI is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with GLPI. If not, see <http://www.gnu.org/licenses/>.
 * ---------------------------------------------------------------------
 */

.grid-stack .grid-stack-item {
   z-index: 3;
   opacity: 1;
}

.clear_picture .grid-stack .grid-stack-item {
   .grid-stack-item-content,
   &::after {
      background: none !important;
   }
}

.grid-stack-item {
   /** should be erased by lib, defined for case without lib **/
   &:not(.lock-bottom) .grid-stack-item-content {
      font-size: 11px;
      text-align: center;
      overflow: hidden;
      cursor: move;

      /* fallback */
      cursor: grab;
      cursor: grab;
      cursor: grab;

      &:active {
         cursor: move;

         /* fallback */
         cursor: grabbing;
         cursor: grabbing;
         cursor: grabbing;
      }
   }
}

.grid-stack-item-content a {
   font-size: 1em;
   font-weight: bold;
}

.clear_text:not(.clear_picture) .grid-stack .grid-stack-item .itemrack_name {
   display: none;
}

#viewgraph:not(.clear_picture) .with_picture .grid-stack-item-content {
   .itemrack_name {
      background-color: rgba(255, 255, 255, 65%);
      color: #000 !important;
   }

   .rel-link {
      opacity: 0.6;
   }
}

.grid-stack-item-content {
   .rel-link {
      position: absolute;
      right: 3px;
      bottom: 3px;
      opacity: 0;

      a i.fa {
         color: #000;
      }
   }

   &:hover .rel-link {
      opacity: 0.8;
   }
}

.grid-stack {
   .grid-stack-item {
      .grid-stack-item-content,
      .placeholder-content {
         left: 0;
         right: 0;
      }
   }

   .grid-stack-placeholder > .placeholder-content {
      border: 1px dashed #bcbf33;
      background-color: rgba(229, 245, 105, 50%);
   }
}

#viewgraph table.outbound {
   width: 400px;
   margin-bottom: 20px;
}

div#viewgraph table.outbound td div {
   padding: 0;

   .grid-stack-item-content {
      box-shadow: none;
   }
}

ul.indexes {
   list-style-type: none;
   margin: 0;
   padding: 0;
   text-align: center;
   font-size: 0.7em;
   color: silver;
   float: left;
}

.cell_add {
   box-sizing: border-box;
   display: block;
   opacity: 0;
   z-index: 2;
   position: relative;

   &::after {
      content: "\f067";
      left: 45%;
      font-size: 1em;
      color: grey;
      top: 1px;
      font-family: "Font Awesome 5 Free";
      position: absolute;
      font-weight: 900;
   }

   &:hover {
      opacity: 1;
      cursor: pointer;
   }
}

.grid-room {
   box-sizing: content-box;
   margin: 10px 0 10px 10px;
   float: left;
   padding: 15px 0 0 15px;

   *,
   ::before,
   ::after {
      box-sizing: content-box;
   }

   .blueprint {
      margin-left: 15px;
      width: calc(100% - 16px);
   }

   .racks_add {
      border: 1px solid $table-border-color;
      border-width: 0 1px 1px 0;
      background-size: 40px 39px;
      background-image:
         linear-gradient(
            to right,
            $table-border-color 1px,
            transparent 1px
         ),
         linear-gradient(
            to bottom,
            $table-border-color 1px,
            transparent 1px
         );
      margin-left: 15px;

      .cell_add {
         height: 39px;
         width: 40px;
         float: left;

         &::after {
            left: 15px;
            top: 10px;
         }
      }
   }

   .grid-stack {
      float: left;
   }

   .grid-stack-item {
      border: 1px solid rgb(68, 68, 68);
      box-sizing: border-box;

      &::after {
         position: absolute;
         content: " ";
         background-color: rgba(3, 2, 2, 30%);
      }

      &.room_orientation_1::after {
         // NORTH
         top: 0;
         left: 0;
         width: 100%;
         height: 4px;
      }

      &.room_orientation_2::after {
         // EAST
         top: 0;
         right: 0;
         width: 4px;
         height: 100%;
      }

      &.room_orientation_3::after {
         // SOUTH
         bottom: 0;
         left: 0;
         width: 100%;
         height: 4px;
      }

      &.room_orientation_4::after {
         // WEST
         top: 0;
         left: 0;
         width: 4px;
         height: 100%;
      }

      .grid-stack-item-content {
         padding-top: 4px;
      }

      &.lock-bottom {
         display: none;
      }
   }

   ul.indexes {
      list-style-type: none;
      margin: 0;
      padding: 0;
      text-align: center;
      font-size: 0.7em;
      color: $table-color;
      float: left;

      &.indexes-x {
         width: 100%;
         float: none;
         height: 15px;
         padding-left: 15px;

         li {
            float: left;
            width: 40px;
         }
      }

      &.indexes-y {
         width: 15px;

         li {
            width: 10px;
            height: 39px;
            line-height: 40px;
         }
      }
   }
}

.clear_blueprint .grid-room .blueprint {
   background: none !important;
}

.clear_grid .grid-room {
   ul.indexes {
      visibility: hidden;
   }

   .racks_add {
      background-image: none;
   }
}

#viewgraph {
   .rooms a {
      &.fa {
         color: $table-color;
         position: absolute;
         right: 0;
         top: 0;
         padding: 0.5em;

         &:link {
            color: $table-color;
            position: absolute;
            right: 0;
            top: 0;
            padding: 0.5em;
         }
      }

      .fa {
         color: $table-color;
         position: absolute;
         right: 0;
         top: 0;
         padding: 0.5em;
      }

      &.itemlink .fa {
         right: 1.2em;
      }
   }

   table.rooms {
      th,
      td {
         height: 5em;
      }

      th {
         color: $table-head-color;
         background-color: steelblue;
      }

      td {
         border-left: 1px solid $table-head-border-color;

         div {
            border: none !important;
            position: relative;
            z-index: 10;
            color: white;
            height: 100%;
            display: flex;
            padding: 0 1%;
            flex-direction: column;
            justify-content: center;
            max-height: 5em;

            /** Fix height when dragging */
            &.rack-add {
               color: #e0e0e0;

               &:hover {
                  background-color: rgba(0, 128, 0, 50%);
                  cursor: pointer;
               }
            }
         }
      }
   }
}

/*** Racks ***/

.racks_row {
   width: 100%;
}

.racks_col {
   margin-left: 2px;
   float: left;
   position: relative;

   &:not(:last-child) {
      margin-right: 40px;
   }
}

.rack_side {
   float: left;
   text-align: center;
   background: $table-bg;
   border: 1px solid $table-border-color;
   color: $table-color;
   padding-top: 18px;
}

.racks_col h2 {
   font-size: 14px;
   font-weight: bold;
   color: $table-head-color;
   background-color: $table-head-bg;
   height: 30px;
   margin: 0;
   padding: 5px 0;
   text-align: center;
}

.racks_add {
   position: absolute;
   display: block;
   width: 100%;
   z-index: 2;
}

.grid-rack {
   *,
   ::before,
   ::after {
      box-sizing: content-box;
   }

   .racks_add {
      .cell_add {
         height: 20px;
         margin-bottom: 1px;
         width: 100%;
      }
   }

   width: 217px;
   background:
      $table-bg repeating-linear-gradient(
         transparent,
         transparent 21px,
         $table-striped-bg 21px,
         $table-striped-bg 42px
      );
   z-index: 1;
   border: 1px solid $table-border-color;
   float: left;
}

.virtual_pdu_space {
   height: 20px;
   clear: both;
}

.side_pdus_float {
   float: left;
   min-height: 100%;
   width: 20px;
}

.side_pdus.side_pdus_nofloat {
   clear: left;
   margin: 0 2px 2px;
}

.side_pdus_nofloat .grid-stack-item:not(.lock-bottom) .grid-stack-item-content {
   cursor: initial;
}

.side_pdus {
   background-color: $table-striped-bg;
   margin: 0 1px;

   .grid-stack-item:not(.lock-bottom) {
      background-color: #ff9d1f;
      overflow: hidden;
   }
}

.side_pdus_float {
   .grid-stack-item {
      .grid-stack-item-content {
         border: 0 solid rgba(4, 4, 4, 40%);
         border-width: 4px 1px;

         .rotated_text {
            transform: rotate(-90deg);
            transform-origin: bottom left;
            position: absolute;
            bottom: 25px;
            left: 15px;
            white-space: nowrap;
         }
      }

      .item_rack_icon {
         position: absolute;
         bottom: 1px;
         left: 0;
      }
   }

   .grid-stack-item-content .rel-link {
      left: 3px;
      top: 3px;
      bottom: unset;
      right: unset;
   }

   .grid-stack-item::after {
      content: "";
      position: absolute;
      height: 20px;
      bottom: 4px;
      left: 20px;
      z-index: -1;
      transform: rotate(-90deg);
      transform-origin: bottom left;
   }
}

.side_pdus_nofloat .grid-stack-item .grid-stack-item-content,
.grid-rack .grid-stack-item:not(.lock-bottom) .grid-stack-item-content {
   position: relative;
   color: #2c3e50;
   border: 0 solid rgba(4, 4, 4, 40%);
   border-width: 1px 4px;
   box-shadow: 1px 1px 5px 0 #656565;
}

#viewgraph:not(.clear_picture) .grid-rack .grid-stack-item.with_picture .grid-stack-item-content {
   border-color: rgba(4, 4, 4, 25%);
   border-width: 0 4px;
}

.grid-rack .grid-stack-item {
   &.reserved .grid-stack-item-content {
      border: 1px solid #ff7c24;
      box-shadow: none;

      a.itemrack_name {
         color: #7f4723 !important;
      }
   }

   &.item_rear {
      background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 15%), rgba(0, 0, 0, 15%) 10px, rgba(59, 59, 59, 15%) 10px, rgba(59, 59, 59, 15%) 20px);
   }

   &.reserved {
      background: repeating-linear-gradient(115deg, #ff8a3c, #ff8a3c 30px, #ffd7bc 30px, #ffd7bc 60px);
   }
}

.grid-stack-item .item_rack_icon {
   float: left;
   opacity: 0.6;
   padding: 3px 0 0 2px;
   font-size: 14px;
}

#viewgraph:not(.clear_picture) .grid-rack .grid-stack-item.with_picture .item_rack_icon {
   display: none;
}

.rack_tipcontent {
   span {
      display: block;
   }

   label {
      font-weight: bold;
      margin-right: 3px;
   }
}

.grid-rack .grid-stack-item.lock-bottom {
   background: $table-bg;
   width: 101% !important;
   margin: 0 -1px;
}

.racks_row ul.indexes li {
   height: 20px;
   width: 20px;
   margin-bottom: 1px;
   box-sizing: border-box;
   line-height: 20px;
}

.rack_side_block {
   width: 200px;
   border: 1px solid $table-border-color;
   background-color: $table-head-bg;
   color: $table-head-color;
   text-align: left;
   font-size: 11px;
   margin-bottom: 20px;
}

.rack_side_block_content {
   padding: 10px 5px;
}

.rack_side_block {
   h3 {
      color: $table-color;
      margin: 0;
      font-size: 11px;
      font-weight: bold;
   }
}

.rack_side_block_content i {
   margin: 0 3px;
}

div#viewgraph .rack_side_block .pdu_list {
   background: none;

   td {
      text-align: left;
      border: 1px solid rgba(0, 0, 0, 20%);
      padding: 0 3px;
   }
}

.pdu_list {
   .rack_position {
      width: 20px;
   }

   i.fa {
      color: rgba(0, 0, 0, 60%);
   }
}