@import "modules/base";
@import "modules/text";
@import "modules/layout";
@import "modules/popup";
@import "modules/input";
@import "modules/button";
@import "modules/seperator";
@import "modules/container";
@import "modules/tabcontainer";
@import "modules/checkbox";
@import "modules/radiobutton";
@import "modules/dropdown";
@import "modules/table";
@import "modules/popup_dialog";
@import "element/mbslider";


@import url("components/open-sans/open-sans.css");
@import url("components/bootstrap/css/bootstrap.min.css");


$bannerHeight: 170px;
$contentPaneWidth: 800px;
$navWidth: 200px;
$pageWidth: $contentPaneWidth + $navWidth;

// ------------------------------------------------------------------------ PAGE
.page{
  top:-$bannerHeight;
  margin: 0 auto;
  width:$pageWidth;
}
.popupContainer,
.page{
  // Other .inputWrapper rule later doesn't catch popups and list filters
  input.input {
    background: #fff;
  }
  position:relative;
  a {
    text-decoration: none;
    &:hover{
      color: $darkFontColor;
    }
  }
  @media (min-width: 992px){
    .container {
      width: auto;
    }
  }
  @media (min-width: 768px){
    .container {
      width: auto;
    }
  }

  .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    border-top: none;

    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
  }

}
.iconBig, .iconSmall{
  &:before {
    @extend .hover-highlight-effect;
  }
}

.notifyjs-corner {
  z-index: 100000 !important;
}



// -------------------------------------------------------------------- PAGE TOP
.head{
  position: relative;
  height:$bannerHeight;

  // remove broken head background when the page is smaller than defined width
  min-width:$pageWidth;
  border-top:solid 5px darken($firstColor, 10%);
  background-image:url($headPatternUrl);
  @include background(linear-gradient(rgba(255,255,255,.1),
                                      rgba(255,255,255,0)),
                      url($headPatternUrl));
  hr{@include absolute('' 0 0 0);}
}

.accountBar {
  color: $middleFontColor;
  cursor: pointer;
  padding: ($space/4) ($space/2) ($space/4) ($space/2);
  background-color: $contentColor;
  border-bottom-left-radius: $containerBorderRadius;
  border-bottom-right-radius: $containerBorderRadius;
  @include absolute(0 0 '' '');
  > .accountMenu {
    height: 20px;
    overflow: hidden;
    position: relative;
    @include transition(all 0.2s ease-in-out);

    &.opened {
      height: 65px;
    }
    .iconDown {
      padding-right: $space;
      font-family: $fontFamily;
      &:before {
        @include absolute('' 0 '' '');
      }
    }
  }
}







// ------------------------------------------------------------------- PAGE LEFT
.leftPane{
  width:$navWidth;
  @include absolute(0 '' '' 0);

  > .navigation {
    background-color: darken($contentColor, 1%);
    box-shadow: -1em 0 2em inset darken($contentColor, 10%);
    border-bottom-left-radius: $containerBorderRadius;
    padding: 10px;
    .navItem {
      display: block;

      > a {
        display: block;
        padding: 2px 10px;
        &:hover, &:focus {
          background-color: #E0DDDD;
          color: #000;
          @include transition(all 0.3s linear);

        }
      }
    }
  }
  .logo{
    max-height:120px;
    @include absolute($space '' '' ($space + $space/2));
  }
}
.logoContainer{
  position:relative;
  height:$bannerHeight;
}

.navLevel1{
  padding:$space/2 $space;
  background-color:$contentColor;
  border-left:solid 1px $thirdColor;
  border-bottom:solid 1px $thirdColor;
}
.navLevel2, .navLevel3{margin-left:$space/2;}
.navItem{
  a {
    &:before{margin-right:5px;}

    font:{
      family: $fontFamily;
      size: $fontSize - 2;
    }
    color:$middleFontColor;
    padding:($space/4) ($space/2);

    &:hover{color:$darkFontColor;}
  }
  &.activeItem {
    display: block;
    & > a{color: $ciColor;}
  }
}

.rightPane {
  width: $contentPaneWidth;
  @include absolute(0 0 '' $navWidth);
}

textarea, input[type=text], input[type=submit], input[type=password],  a.button, button, div.dropdown {
  border-radius: $elementBorderRadius;
}
a.button{
  color: $firstColor;
  &:hover{
    color: $lightFontColor;
  }
}
ul.dropdownList{
  border-bottom-left-radius: $elementBorderRadius;
  border-bottom-right-radius: $elementBorderRadius;
  margin-top: -3px;
}

.tabContainer {
  .tabs {
    > .tab {
      height: 32px;
      background-color: #ECECEC;
      padding-top: 5px;
      &:first-child {
        border-top-left-radius: $containerBorderRadius;
      }
      &:last-child {
        border-top-right-radius: $containerBorderRadius;
      }
      bottom: -1px;

      &:hover, &:focus {
        padding-top: 5px;
        bottom: 0;
        background-color: #f9f9f9;
        outline: none;
        box-shadow: 0px -1px 1px #000;
        &.active {
        }
      }
      &.active {
        bottom: 0px;
        height: 35px;
        margin-bottom: -3px;
        background-color: #f9f9f9;
      }
      margin-right: -1px;
    }
  }

  > .container {
    border-bottom-left-radius: $containerBorderRadius;
    border-bottom-right-radius: $containerBorderRadius;
    border-top-right-radius: $containerBorderRadius;
  }
}

.contentPane {
  $top: $space*5;
  padding-top: $top + $space;

  > .content {
    min-height: 600px;
    position: relative;
    padding: $space;
    background: lighten($contentColor, 2%) url($managerContentPatternUrl);
    border-radius: $containerBorderRadius;
    .tabContainer, .containerExchange {
      margin-bottom: $space;
    }

    form {

      &:after{
        content: "";
        display: block;
        visibility: hidden;
        clear: both;
      }

      label.labelInput {
        margin: 0;
      }
      .dropdown{
        width: 100%;
      }
      .inputWrapper{
        display: block;
        textarea,
        input[type="password"],
        input[type="email"],
        input[type="text"]{
          width: 100%;
          background: #fff;
        }
      }
      select[multiple="multiple"]{
        width: 100%;
        margin-bottom: 10px;
      }

      input[type='submit']{
        min-width: 20px;
      }
    }

    .button-group {
      text-align: right;
      margin: $space 0;
    }

    border: {
      top: solid 1px $secondColor;
      left: solid 1px $thirdColor;
      right: solid 1px $thirdColor;
      bottom: solid 5px $thirdColor;
    }
  }
  .mapbenderVersion{
    color:$lightFontColor;
    text-align:right;
  }
}

.icon[data-state]{
  cursor: default;
  opacity:1;
}
.icon[data-state="running"]{
  @extend .iconActivity;
  &:before{
    -webkit-animation:spin 1s linear infinite;
    -moz-animation:spin 1s linear infinite;
    animation:spin 1s linear infinite;
  }
}
.icon[data-state="error"]{
  @extend .iconBolt;
  &:before{
    color:$errorColor;
  }
}
.icon[data-state="success"]{
  @extend .iconOk;
}
.icon[data-state="waiting"]{
  @extend .iconClock;
}
.icon[data-state="aborted"]{
  @extend .iconWarning;
  &:before{
    color:$errorColor;
  }
}
.icon[data-state="new"]{
  @extend .iconFile;
}

div[data-type="datetime"] {
  position: relative;
  display: inline-block;
  min-width: 300px;
  margin-bottom: 10px;
}

div[data-type="datetime"] div:first-child div.dropdown{
  min-width: 98px;
  display: inline-block;
  margin-right: 3px;
  margin-bottom: 10px;
}
div[data-type="datetime"] div:last-child div.dropdown{
  min-width: 144px;
  display: inline-block;
  margin-right: 3px;
}

.secureElement.has:before {
  color: $buttonCriticalSecondColor;
  font-weight: bold;
}

label[for^="inputFilter"] {
  width: auto;
  min-width: 80px;
  margin: 0 1em 0 0;
  /** FOM templates like to add .left for no particular reason, defeat that */
  float: none;
}

.listFilterInput{
  width: 200px;
  max-width: calc(100% - 120px);  // for crowded table rows with filter embedded into a th
  // HACK: The proper way to do this is to wrap label + input into a .form-group, or any other div really,
  //       and put the margin onto the container. This would require changing FOM-generated markup though...
  margin-bottom: 1.5 * $space;
  /** FOM templates like to add .left for no particular reason, defeat that */
  float: none;
}

#addElmPermission {
  // Link is outside of element permission markup, but want to display as an ~overlay top right
  position: relative;
  top: 30px;
}
