//Imports
@import "vars";
@import "OGUI/OTabulator";
@import "OGUI/Popup";
@import "animations";
@import "components";
@import "retsal";
@import "account";
@import "Components/processwaiter";

/* Writing */

.tabulator-cell input {
  outline: none;
  border: solid 2px black !important;

  &:invalid,
  &:invalid:focus {
    color: red;
    border: solid 2px red !important;
  }
}

label{
  margin: 0;
}

.tabulator{
  border: none;
}

*.loading{
  position: relative;

  &:after{
    content: 'Veuillez patienter...';
    .absolute();
    .flex-h-center();
    .flex-align-center;
    color: white;
    background: rgba(0, 0, 0, .3);
  }
}

.loading-frame {
  .absolute();
  background: rgba(255, 255, 255, .7);
}

body, .panel{
  position: relative;
  box-sizing: border-box;
}

.ip-central-panel, .ip-main-menu{
  overflow: auto;
}

body{
  .nullPaddingMargin();
  height: 100vh;
  line-height: normal;
}

.ogui-popup {
  z-index: 1000000;
}

#ip-dts-control-pane, #ip-header-btn-toolbar{
  overflow-x: auto;
}

.fa{
  margin-right: 4px;
}

.ip-right-panel, .ip-central-panel, .ip-table-panel{
  overflow: auto;
}

.ip-closer, .ov-tab{
  cursor: default;
  user-select: none;
}

a:not([href]){
  cursor: pointer;
}

.ip-main-panel{
  .absolute();
  z-index: 0;

  .ip-main-menu{
    width: @main-menu-width;
    height: @main-menu-height;
    color: darken(@header-bg-clr, 12%);
    background: @main-menu-bg-clr;
    transition: transform 400ms ease-in-out;
    font-size: .9em !important;

    &.minimize{
      transform-origin: 0 0;
      transform: scaleX(0);
      transition: transform 400ms ease-in-out;
    }

    &.minimize + .ip-right-panel{
      left: 0;
      transition: left 400ms ease-in-out;
    }

    &.minimize + .ip-right-panel header .ip-main-menu-switcher{
      background: unset;
    }
  }

  .ip-right-panel{
    .absolute(0, @main-menu-width);
    .flex-v();
    transition: left 400ms ease-in-out;

    header{
      display: flex;
      color: white;
      background: @header-bg-clr;
      height: @header-height;
      padding: 5px;

      h3{
        .nullPaddingMargin();
      }

      > div.panel{
        .flex-h-between();
        .flex-align-center();
        color: white;
        width: 100%;

        a.ip-main-menu-switcher {
          display: block;
          text-decoration: none;
          height: 100%;
          padding: 0 10px;
          .flex-h-center();
          align-items: center;
          cursor: pointer;

          .fa-bars{
            font-size: 1.1em;
          }
        }
      }

      #ip-logout-btn, .fa-user-alt{
        color: lighten(@header-bg-clr, 45%);
      }

      #ip-logout-btn{
        margin-left: 15px;
      }

      .fa-user-alt{
        margin-right: 7px;
      }
    }

    .ip-central-panel{
      position: relative;
      height: 100%;

      .ip-home{
        .flex-h-center();
        .flex-align-center();
        width: 100%;
        height: 100%;
        color: darken(@control-panel-bg-clr, 15%);
        user-select: none;

        h1{
          font-size: 9em;
        }
      }

      .ip-data-manage-panel{
        .flex-v();
        &, #ip-tabulator, .otabulator, .tabulator {
          height: 100%;
        }

        .ip-table-control-panel{
          font-size: .8em !important;
          background: @control-panel-bg-clr;
          .sticky(0px);
          z-index: 1;
          border-bottom: solid 3px darken(@control-panel-bg-clr, 5%);

          .tab {

            &.active {
              color: white;
              background: @header-bg-clr;
            }
          }

          .card {
            padding: 10px 17px;

            &.active {
              .flex-h;
              .flex-align-center;
            }

            > * {
              margin: 0 7px;
            }

            input, select {
              padding: 4px 10px;
            }
          }
        }

        .tabulator{
          font-size: .8em;
        }
      }

      > *:not(.active){
        display: none;
      }
    }
  }
}

.ip-notification{
  position: fixed;
  top: 20px;
  right: 20px;
  color:#fff;
  background: rgba(19, 18, 39, 0.7);
  padding: 5px 20px 20px;
  z-index: 1000001;

  .ip-closer{
    margin-bottom: 10px;
    max-width: 400px;
  }
}

.ip-downloader{
  .flex-h();
  color: #1b1e21;
  background: white;
  width: 100%;
  min-height: 300px;
  max-width: 600px;

  .ip-downloader-options{
    .flex-v();
    color: #1b1e21;
    background: rgb(237, 242, 247);
    width: 250px;
    min-height: 100%;
    padding: 10px;
    border-radius: 5px;
    overflow: auto;

    a{
      padding: 8px 0 4px;

      &.active{
        color: #4a4a4a;
        background: darken(rgb(237, 242, 247), 15%);
        padding-left: 8px;
      }
    }
  }

  .ip-downloader-manager{
    .flex-v();
    width: 100%;
    padding: 0 20px;
    max-height: 300px;
    overflow: auto;
  }

  .ip-downloader-output{
    color: green;
    background: whitesmoke;
    height: 100%;
    max-height: 100%;
    overflow: auto;
  }

  .ip-downloader-btn, .ip-gener-btn{
    padding: 8px 15px;
    margin: 10px 0;
    border: solid 1px #1b1e21;
  }

  .ip-downloader-progress{
    height: 30px;
  }
}

.ov-progress-bar{
  border: solid 1px #4a4a4a;
  padding: 2px;

  div{
    background: #0c5460;
    height: 100%;
  }

  &.infinite{
    position: relative;

    div {
      .absolute();
      width: unset !important;
      animation: 5s progressbar-infinite infinite;
    }
  }
}

.ov-tabbed-panes-panel{

  .ov-tabs{
    @tabsBckgdClr: @header-bg-clr;
    background: @tabsBckgdClr;
    .flex-h();

    .ov-tab{
      color: lighten(@tabsBckgdClr, 75%);
      padding: 8px;
      cursor: pointer;

      &.active{
        color: @header-bg-clr;
        background: @control-panel-bg-clr;
      }
    }
  }

  .ov-tabbed-panes{

    .ov-tabbed-pane{
      display: none;
      padding: 7px 15px;

      .ip-controls-toolbar-panel{
        padding: 0 10px;

        .ip-header{
          color: rgba(0,0,0, .7);
          text-align: center;
          border-bottom: solid 1px rgba(0,0,0, .6);

          .ip-title{
            width: 100%;
          }

          .ip-edit-btn{
            cursor: pointer;
          }
        }

        .ip-field{
          .flex-h-between();
          margin: 5px;

          span:first-child{
            margin-right: 8px;
          }
        }
      }

      &.active{
        .flex-h();

        & > *{
          flex-shrink: 0;
        }
      }
    }
  }
}

.ov-tree-node-root{

  & > .ov-tree-node-items{
    padding-left: 0;
  }

  .ov-tree-node-items{

    li{

      &:not(.is-node){
        cursor: pointer;
      }
    }
  }
}

@keyframes slideInDown {
  from{
    font-size: 0;
  }

  to{
    font-size: unset;
  }
}

@keyframes slideOutDown {
  from{
    font-size: unset;
  }

  to{
    font-size: 0;
  }
}

.ov-tree-node-items{
  background: @main-menu-node-items-bg-clr;
  list-style: none;
  padding: 0;
  margin: 0;
  animation: slideInDown .3s linear forwards;

  .ov-tree-node-collapse-switcher {
    color: rgba(255, 255, 255, .7);
    .flex-h();
    align-items: center;
    margin-bottom: 3px;
    padding: 8px;
    cursor: pointer;

    &::before {
      display: inline-block;
      content: '\f0da';
      font-family: font-awesome, sans-serif;
      font-size: 1.2em;
      margin-right: 8px;
      transition: transform 305ms linear;
    }

    &.expanded-icon::before {
      transform: rotate(90deg);
      transition: transform 205ms linear;
    }
  }

  li{
    .nullPaddingMargin();

    &:not(.is-node){
      color: whitesmoke;
      background: @main-menu-node-item-bg-clr;

      a{
        .flex-h();
        align-items: center;
        width: 100%;
        padding: 8px;
      }
    }
  }

  .collapsed{
    animation: slideOutDown .3s linear forwards;

    .ov-tree-node-items, & .ov-tree-node-collapse-switcher, & li a{
      padding: 0 8px 0;
      margin: 0;
    }
  }
}

.ip-importation-error {
  .ip-row {
    background: rgb(240, 240, 240);
    margin: 13px 0;

    .ip-header {
      color: red;
      padding: 7px;
    }

    .ip-errors {
      padding: 3px 10px;
      line-height: 1.7em;
    }
  }
}

.ov-tree-node-item .active {
  color: black !important;
  background: @control-panel-bg-clr;
  border-right: solid 10px @header-bg-clr;
}

.ov-popup-screen{
  .flex-h-center();
  .flex-align-center();
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000000;
  background: rgba(0,0,0, .5);

  .flex-v{
    max-height: 80%;
    overflow: auto;
  }

  .ov-popup-header{
    .flex-h-between();
    .flex-align-center();
    .sticky(0px);
    padding: 1px 9px 5px;
    color: white;
    background: @header-bg-clr;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;

    .flex-h{
      max-width: 100%;
    }
  }

  .ov-popup-header-btn-pane{
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .ov-popup-closer{
    cursor: default;
    align-self: flex-end;
    font-size: 1.4em;
    margin-left: 10px;
  }

  .ov-popup-content{
    position: relative;
    background: white;
    padding: 12px;
    overflow: auto;
  }

  .ov-form-popup-btn-pane{
    .flex-h-end();
    color: white;
    background: lighten(black, 80%);
    padding: 11px 20px;
  }

  .ov-form-popup-btn{
    padding: 5px 15px;
    border-radius: 4px;
    cursor: pointer;

    &.validate{
      @bck: #0056b3;
      background: @bck;
      margin-right: 15px;

      &:hover{
        background: darken(@bck, 15%);
      }
    }

    &.reject{
      @bck: #4e555b;
      background: @bck;

      &:hover{
        background: darken(@bck, 15%);
      }
    }
  }
}

.ov-toolbar{

  & > * {
    margin: 3px 7px;
  }

  .ov-toolbar-btn{
    cursor: pointer;
  }
}

//To review

.ov-form-btn-pane{
  .flex-h-end();
  color: white;
  background: lighten(black, 80%);
  padding: 11px 20px;
}

.ov-form-btn{
  padding: 5px 15px;
  border-radius: 4px;
  cursor: pointer;

  &.validate{
    @bck: #0056b3;
    background: @bck;
    margin-right: 15px;

    &:hover{
      background: darken(@bck, 15%);
    }
  }

  &.reject{
    @bck: #4e555b;
    background: @bck;

    &:hover{
      background: darken(@bck, 15%);
    }
  }
}

.ogui-popup {

  .ogui-inner {
    padding: 0;
    border-radius: 8px;
    overflow: auto;
  }

  .popup-header {
    .flex-h;
    color: white;
    background: @header-bg-clr;
    padding: 10px 20px;
  }

  .popup-footer {
    .flex-h-end;
    background: @control-panel-bg-clr;
    padding: 10px 20px;

    &.ip-btn-pane {

      .ip-btn {
        margin: 0 10px;
      }
    }
  }

  .process-waiter {
    z-index: @header-zindex + 2;
  }
}

.ogui-tab-layout{
  background: @control-panel-bg-clr;

  .tab {

    &.active {
      color: white;
      background: @header-bg-clr;
    }
  }

  .card {
    padding: 10px 17px;

    &.active {
      .flex-h;
      .flex-align-center;
      overflow: auto;
    }

    > * {
      margin: 0 7px;
    }

    input, select {
      padding: 4px 10px;
    }
  }
}

.otabulator {

  .table-controls {
    font-size: .8em !important;
    .sticky(0px);
    z-index: 1;
    border-bottom: solid 3px darken(@control-panel-bg-clr, 5%);

    .card {

      input, select {
        padding: 4px 10px;
      }
    }
  }

  .tabulator{
    font-size: .8em;
  }
}