/*
This file is part of the Meeds project (https://meeds.io/).
Copyright (C) 2020 Meeds Association
contact@meeds.io
This program is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 3 of the License, or (at your option) any later version.
This program 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
Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public License
along with this program; if not, write to the Free Software Foundation,
Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
*/
@import "../../../variables.less";
@import "../../../mixins.less";

.spacesAdministration {
  padding: 20px 10px;

  .avatar {
    width: 30px;
    border-radius: 10%;
  }

  .uiTabInPage {
    .nav-tabs {
      padding: 10px 10px 0px 10px;
    }
    .tab-content {
      padding: 20px 10px;
    }
  }

  .manageSpaces, .spacesPermissions {
    .table {
      th {
        border-right: 1px solid @borderColor;
      }

      tr > td:nth-of-type(1) {
        width: 25%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      tr > td:nth-of-type(2) {
        width: 60%;
        overflow-wrap: break-word;
        word-break: break-word;
      }
      tr > td:nth-of-type(3) {
        width: 15%;
      }

      td {
        .title {
          font-size: 15px;
          font-weight: bold;
        }
      }
    }
  }
  
  .bindingReports {
    .inProgress {
      span {
        color: grey;
        font-style: italic;
      }
    }
    .nameGroupBinding {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: default;
    }
    .reportsFilterSearch {
      margin-bottom: 16px!important;
      i {
        color: grey!important;
      }
      .layout {
        height: 40px!important;
      }
      .v-input__prepend-inner {
        margin-top: 6px!important;
      }
      .v-text-field {
        padding-top: 0!important;
        margin-top: 0!important;
      }
      .v-text-field__slot {
        height: 48px!important;
      }
      .v-input__slot {
        height: 36px!important;
      }
      .filter {
        max-width: 11%!important;
        .btn.dropdown-toggle {
          border: 1px solid @greyColorDefault!important;
        }
        .dropdown-menu {
          padding-left: 0!important;
          a {
            color: @darkGrey;
            &:hover {
              color: white;
            }
          }
        }
      }
    }

    .v-data-footer {
      .v-data-footer__select {
        .v-select__slot {
          height: 30px!important;
        }
        .v-text-field {
          padding-top: 0!important;
        }
        .v-select__selections {
          height: 100%!important;
        }
        .v-input__append-inner {
          margin-top: 0!important;
        }
      }
    }
  }

  .manageSpaces {
    .uiSearchInput {
      margin: 0px 0px 12px 4px;;
      float: right;

      .showInputSearch {
        border: 1px solid @borderColor;
        width: 380px;
      }
    }
    
    .uiIconSpaceBinding.uiIconGroup.bound {
      color: #0fb895;
    }
  }

  .modal-mask {
    display: flex;
    align-items: center;
    justify-content: center;
    &, &.uiPopupWrapper {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 999;
    }
    .modal-content {
      width: 600px;
      position: relative;
      user-select: none;

      .popupTitle {
        cursor: auto;
      }
    }
  }

  .manageSpaces {
    .v-overlay {
      z-index: 1055!important;
      position: fixed !important;
    }

    #GroupBindingDrawer {
      z-index: 1055!important;
      position: fixed !important;

      v-navigation-drawer__content {
        overflow-y: hidden!important;
      }

      .title {
        height: 6.7vh;
        min-height: 52px;
        border-bottom: 1px solid rgba(13,13,13,0.05);
        box-sizing: border-box;
        padding: 0px!important;

        span {
          color: #4d5466;
          font-size: 18px;
          font-weight: bold;
          line-height: 20px;
          padding-left: 4%;
        }
      }

      .content {        
        .spaceName {
          span {
            color: #578dc9;
            font-size: 18px;
            font-weight: bold;
            line-height: 20px;
            padding-left: 0;
          }
        }
        
        span {
          color: #4d5466;
          font-size: 18px;
          font-weight: bold;
          line-height: 20px;
          padding-left: 4%;
        }

        .selectize-input {
          max-height: inherit;
          min-height: 80px;
          height: max-content;
          padding: 8px;

          .item {
            padding-right: 35px !important;
            background: #ccddef;
            color: #568dc9;
            border: 1px solid #568dc9;
            border-radius: 15px;
            margin: 4px 10px 4px 4px;
            font-size: 13px;
            max-width: -webkit-fill-available;
            word-wrap: break-word;

            a {
              color: #ccddef;
              background-color: #568dc9;
              border-radius: 50%;
              font-size: 12px;
              width: 16px;
              height: 17px;
              top: 3px;
              right: 10px;
            }
          }
        }
      }

      .secondDrawer {
        height: 100vh;
        .title {
          .treeGroupSearch {
            padding-top: 0;
            .v-input__control {
              min-height: 40px;
            }
            button {
              color: rgba(0, 0, 0, 0.54)!important;
            }
          }
        }
        .content {
          display: grid!important;
          overflow: auto!important;
          max-height: 84vh;
          box-sizing: border-box!important;
          
          .v-treeview-node__root.bound, .v-treeview-node__content.bound {
            color: grey!important;
          }
          
          button:disabled {
            color: grey!important;
          }
        }
      }

      .boundGroups {
        padding-left: 1%;
        overflow-y: auto;
        max-height: 57vh!important;
      }
      .delete {
        margin-right: 7%;

        .uiIconLightGray {
          color: @greyColorLighten1;
          font-size: 12px;
        }
      }

      .closeIcon {
        color: @borderColor !important;
      }

      .close {
        margin-right: 2%;
      }
      .uiIconEcmsGoBack {
        color: #4d5466;
      }
      .leftIcon {
        margin-left: 18% !important;
      }
      .drawerActions {
        overflow-y: auto;
        overflow-x: hidden;
        width: 100%;
        height: 7vh;
        position: absolute;
        bottom: 0;
        border-top: 1px solid rgba(13,13,13,0.05);
        padding-top: 4px!important;
        padding-bottom: 12px!important;

        .btn-primary {
          color: @white!important;
        }
        .btn-primary:hover {
          background-color: #578DC9;
        }        
        .btn:focus {
          outline: none!important;
        }
      }
    }

    .bindingModal {
      z-index: 1055!important;

      .modal-content {
        right: 9%;
        bottom: 9% !important;

        .popupHeader {
          margin-bottom: auto;
          background-color: @white;
          display: flex;
          justify-content: space-between;
        }

        .popupContent {
          p {
            margin-bottom: 60px;
          }

          .uiAction.uiActionBorder {
            padding-bottom: 8px!important;
            .btn.btn-primary, .btn {
              position: relative;
              left: 27%;
              font-weight: normal!important;
            }
            .btn {
              min-width: 13%;
            }
          }
        }
      }
    }

    @media (max-width: 767px) {      
      .bindingModal {
        .closeBindingModal {
          left: 37%;
        }
        .uiAction.uiActionBorder {
          .btn.btn-primary, .btn {
            left: 22%;
          }
        }
      }
    }

    @media (max-height: 667px) {
      #GroupBindingDrawer {
        .boundGroups {
          max-height: 48vh!important;
        }
        .secondDrawer {
          .content {
            max-height: 82vh;
          }
        }
      }
    }
  }
}
