/**
 * ---------------------------------------------------------------------
 * 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/>.
 * ---------------------------------------------------------------------
 */

.kanban {
   position: relative;
   height: 100%;

   .kanban-toolbar {
      display: flex;
      margin-bottom: 15px;
      font-size: 14px;
      padding: 10px;

      .fas {
         margin: auto auto auto 10px;
         font-size: 1.2em;
         cursor: pointer;
      }

      .select2 {
         min-width: 150px;
      }
   }

   .kanban-form {
      text-align: left;
      padding: 10px;
      z-index: 10;

      input {
         &[type="checkbox"] {
            margin-right: 5px;
         }

         &:not([type="checkbox"]) {
            display: block;
         }

         &[type="submit"] {
            margin: auto;
         }

         &[type="button"] {
            width: 100%;
         }
      }

      .kanban-item-subtitle {
         font-style: italic;
         font-weight: normal;
      }

      .kanban-item-content {
         margin-bottom: 5px;

         .kanban-columns-list {
            max-height: 50vh;
            overflow-y: auto;
            margin: 10px 0;
            list-style: none;

            li {
               padding: 5px 0 0;
            }
         }
      }
   }

   .kanban-container {
      overflow: auto;

      .kanban-dropdown {
         position: fixed;
         width: max-content;
         min-width: 100px;
         text-align: left;
         list-style: none;
         padding-left: 0;

         li {
            margin-top: 2px;
            position: relative;

            a,
            span {
               color: inherit;
               cursor: pointer;
               display: block;

               i {
                  color: inherit;
               }
            }

            ul {
               position: absolute;
               left: 100%;
               top: 0;
               display: block;
               width: max-content;
               min-width: 100px;// Use outline instead of border on submenus to avoid them being aligned off by one pixel
               margin-left: 1px;
               list-style: none;
            }

            i {
               margin-right: 1em;
            }
         }

         li:first-of-type {
            margin-top: 0;
         }

         li.dropdown-trigger {
            a::after {
               content: "\f054";
               font-family: "Font Awesome 5 Free";
               font-weight: 900;
               padding-left: 10px;
            }
         }
      }

      .kanban-columns {
         width: max-content; /* Fix overflow when collapsed */
         display: flex;

         .kanban-column {
            margin-right: 16px;
            width: 350px;
            height: 600px;
            border-radius: 5px;
            flex-direction: column;
            flex: 1 0 auto;
            text-align: center;
            border-top: 5px solid $header-border-color;

            &[data-drop-only="true"] .kanban-body {
               background: #fffa90;
               color: #777620;
            }

            &.collapsed {
               min-width: unset;
               width: calc(1.2em + 20px);

               .kanban-column-header {
                  box-shadow: unset;

                  .kanban-column-header-content {
                     flex-direction: column;

                     .kanban-collapse-column,
                     .kanban-column-title,
                     .kanban_nb {
                        transform: rotate(90deg);
                        transform-origin: center;
                        display: inline-block;
                        margin: calc(50% - 8px) 0;
                        white-space: nowrap;
                     }

                     .kanban-collapse-column {
                        margin: 0 0 8px;
                     }

                     .kanban-column-toolbar {
                        display: none;
                     }
                  }
               }

               .kanban-body {
                  display: none;
               }
            }

            .kanban-column-header {
               font-size: 1.2em;
               padding: 10px;
               margin-bottom: 5px;

               .kanban-column-header-content {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
               }

               .pointer {
                  opacity: 0.3;

                  &:hover {
                     opacity: 1;
                  }
               }

               i.fas {
                  cursor: pointer;
                  flex: 0 1 auto;
                  position: relative;

                  // Increase click area to make it easier to collapse/expand boards
                  &::after {
                     content: "";
                     position: absolute;
                     top: -50%;
                     left: -50%;
                     width: 200%;
                     height: 200%;
                  }
               }

               .kanban-column-title {
                  margin-left: 2px;
                  padding: 3px 12px;
               }

               .kanban_nb {
                  margin-left: 10px;
               }

               .kanban-column-toolbar {
                  margin-left: auto;
                  flex-direction: column;
                  flex: 0 1 auto;

                  i {
                     margin-left: 0.2rem;
                  }
               }
            }

            .kanban-body {
               min-height: 150px;
               padding: 0 5px;
               height: calc(100% - (1.2em + 35px));
               overflow-y: auto;
               overflow-x: hidden;

               .kanban-add-form {
                  padding-top: 10px !important;
                  padding-bottom: 10px !important;

                  input {
                     margin: 8px 0 0;
                  }

                  textarea {
                     margin: 8px 0;
                  }
               }

               .kanban-item,
               .kanban-add-form {
                  text-align: left;
                  padding-left: 0;
                  box-shadow: 0 1px 2px rgba(0, 0, 0, 10%);
                  min-height: 50px;
                  margin-top: 10px;
                  border-radius: 5px;
                  min-width: 250px;

                  &.filtered-out {
                     display: none;
                  }

                  .kanban-item-header,
                  .kanban-item-header a {
                     .fas {
                        &:hover {
                           text-decoration: none;
                        }

                        float: right;
                        cursor: pointer;
                     }

                     .kanban-item-title .fas {
                        float: none;

                        &:last-of-type {
                           margin-right: 5px;
                        }
                     }

                     padding: 5px 10px 0;
                     font-weight: bold;

                     a:hover {
                        text-decoration: underline;
                     }

                     a {
                        padding: unset;
                     }
                  }

                  .kanban-item-content {
                     padding: 0 10px;

                     .kanban-core-content {
                        display: flex;
                        flex-wrap: wrap;
                        margin: 10px 0;
                     }
                  }

                  .kanban-item-team {
                     display: flex;
                     padding-right: 10px;
                     padding-bottom: 10px;

                     span:first-of-type {
                        margin-left: auto;
                     }

                     span {
                        margin-right: 2px;

                        img {
                           border-radius: 50%;
                        }

                        &.fa-stack {
                           width: 2em;
                        }
                     }
                  }
               }
            }
         }

         > .sortable-placeholder {
            min-width: 200px;
            height: 600px;
            margin: 0 8px 0 0;
            border-radius: 5px;
         }
      }
   }

   .kanban-color-preview,
   .kanban-column-title {
      &.itilstatus {
         &.assigned,
         &.new {
            background-color: #49bf4d;
            color: #000f01;
         }

         &.accepted {
            background-color: green;
            color: rgb(255, 255, 255);
         }

         &.refused {
            background-color: rgb(167, 47, 0);
            color: rgb(19, 5, 0);
         }

         &.test,
         &.qualif,
         &.waiting {
            background-color: orange;
            color: rgb(27, 18, 0);
         }

         &.approval {
            background-color: #8cabdb;
            color: rgb(18, 24, 36);
         }

         &.eval {
            background-color: lightblue;
            color: rgb(30, 38, 41);
         }

         &.closed,
         &.solved,
         &.observe,
         &.canceled {
            background-color: black;
            color: white;
         }

         &.planned {
            background-color: #1b2f62;
            color: #f3f3f5;
         }
      }
   }

   .kanban-color-preview {
      width: 1em;
      height: 1em;
      display: inline-block;
      margin-right: 5px;
      vertical-align: middle;
   }

   .sortable-placeholder {
      border: 2px dashed #dad55e;
      background: #fff99038;
      color: #777620;
      height: 40px;
      margin-top: 5px;

      &.invalid-position {
         border: 2px dashed #d3413c;
         background: #ff7370;
         color: #792220;
      }
   }

   .item-details-panel {
      width: 360px;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 100;
      height: calc(100% - 10px);

      .card-header .card-title {
         display: flex;
         justify-content: space-between;
         width: 100%;
      }

      ul.team-list li {
         img {
            border-radius: 50%;
         }

         button {
            display: none;
            padding: unset;
         }

         button:hover,
         button i:hover,
         &:hover button {
            display: inline-flex;
         }

         .member-details > span {
            margin-right: 2rem;
         }
      }
   }
}

.flex-break {
   width: 100%;
}