/* Main backend styles */
@import "libs/variables";
@import "bundles/mapbendermanager/sass/manager/variables.scss";
@import "libs/mixins";
@import "libs/icons";

@import 'bundles/mapbendermanager/sass/manager/manager.scss';

@import "bundles/mapbendermanager/sass/element/form.scss";
@import "bundles/mapbendermanager/sass/element/layertree.scss";
@import "bundles/mapbendermanager/sass/element/map.scss";
@import "bundles/mapbendermanager/sass/element/printclient.scss";
@import "bundles/mapbendermanager/sass/manager/services.scss";
@import "bundles/mapbendermanager/sass/manager/user_control.scss";

// ------------------------------------------------------- APPLICATIONS
.screenshot_upload {
  min-width: 300px;
  .upload {
    position: relative;
    height: $inputHeight;
    line-height: $inputHeight;
    .upload_label {
      max-width: 60%;
      text-overflow: ellipsis;
    }
  }

  .inputWrapper {
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    width: 100%;
    input {
        opacity: 0;
    }
    .validationMsgBox {
        position: absolute;
        max-width: 150px;
        width: auto;
        min-width: auto;
        right: 0;
        top: 0;
    }
  }
  .upload_button {
    font-weight: normal;
  }
  .upload:hover .upload_button {
    background-color: darken($buttonFirstColor, 5%);
  }
}

.listFilterApplicationBoxes{
  $col1Width: 120px;
  $height:120px;

  .col1{
    width:$col1Width;
    line-height: $height;
    max-height: $height;
    text-align: center;
    font-size: 70px;
    color: lighten($darkFontColor, 10%);

    div.cell {
      max-height: inherit;
    }
    img {
      max-height: inherit;
      max-width: 100%;
      display: block;
      margin: 0 auto;
    }
  }
}
.mapbender-popup {
  // modal mapbender popups only appear in the backend, aka manager application
  width: max($popupModalWidth, $elementPopupWidth);
}
.popup.elementPopup {
  width: $elementPopupWidth;
  min-width: $popupModalWidth;
  .popupContent {
    min-width: $elementPopupBodyWidth;
  }
  /*
    Temporary hack for FOM's legacy form field theme:
    Ensure enough vertical space that certain element popups ending with a dropdown
    (usually 1 or 2 text fields followed by a "target" <select>) size properly, so that the
    absolute-positioned dropdown overlay does not vanish into the scrollable area below the body
    of the popup. E.g. scale selector, image export.
   */
  min-height: 520px;
}

.popup.new-instance-select {
  min-width: max($popupModalWidth, $elementPopupWidth);
  width: 70%;
}




// ----------------------------------------------- NEW/EDIT APPLICATION
.applicationTabContainer{
  margin-bottom:$space;
}
.containerBaseData{
  $height: 200px;
  $width: 200px;

  // screen shot holder
  .screenshot_img{
    width:200px;
    height:200px;
    margin: 29px 29px; // HACK: same as line-height of first label in application base data...
    position: relative;  // for absolute .delete button

    box-sizing: content-box;
    border: 1px solid #c0c0c0;
    background-color: #f9f9f9;
    display: table;

    overflow: hidden;

    img {
      display: block;
    }
    .iconAppDefault {
      display: none;
    }
    &.default {
      img {
        display: none;
      }
      .iconAppDefault {
        display: inline-block;
      }
    }
    &.default{
      border: 1px solid #a2a2a2;
      background-color:#404040;
    }

    .iconAppDefault{
      font-style: normal;
      font-size: 60px;
      color:lighten($darkFontColor, 10%);
    }

    div.cell_edit{
      position: relative;
      .delete{
        position: absolute;
        right: 0;
        top: 0;
      }
        display: table-cell;
        vertical-align:middle;
        text-align: center;
        padding: 0;
        margin:0;
        height: 200px;
        width: 200px;

        img {
         max-height: 100%;
         max-width: 100%;
         width: auto;
         height: auto;
         margin: 0 auto;
        }
      }
  }

  textarea, input, .dropdown{min-width: 300px;}
  textarea{height:100px;}
  .alert-info, /** @deprecated: */.messageBox.hint {
    // instruction box
    margin-left: 1em;
    margin-top: 21px;   // HACK: calculated root line-height (no variable)
  }
}

.containerExchange {
  border: 1px solid #c0c0c0;
  background-color: #f9f9f9;
  padding: 20px;
}

/**
  Used for both elements and layersets. NOT a .tableCore. .tableCore remains weird and unfixable
  because some of its weirdness is relied upon in FOM-generated markup for users, groupsetc
 */
.application-component-table {
  line-height: 1.5;   // @todo: fix global fixed-pixel line-height!
  width: 100%;
  margin:$space 0;
  thead {
    border-bottom: solid 5px darken($contentColor, 15%);
  }
  td, th {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  thead th, thead td {
    font-size: 130%;
  }
  .description {
    // @todo: remove built-in font size from .description
    font-size: inherit;
  }
  th {
    font-weight:normal;
  }
  tr.ui-sortable-handle {
    cursor: move;
    &:hover{
      background-color:darken($contentColor, 3%);
    }
    &.ui-sortable-helper {
      background-color:darken($contentColor, 4.8%);
    }
  }
  // Icon resizing hacks. Icons appear too small on inherited font size :\
  .iconColumn, thead th.iconColumn, thead th.regionProperties {
    // Keep horizontal alignment of icons thead vs tbody, despite different default font sizes
    font-size: 118%;
  }
  tbody .iconColumn {
    // hit the same calculated line-height as regular text, despite bigger font (1.5 / 1.118 ~= 1.271)
    line-height: 1.271;
  }
  thead .iconColumn {
    // hit the same calculated line-height as regular text, despite smaller font (1.5 / (1.18 / 1.3) ~= 1.653)
    line-height: 1.653;
  }
  // Element region / Layerset titles use embedded h3 tags
  thead h3 {
    font-size: 140%;
  }
  thead .regionProperties {
    .static-popover-wrap {
      width: 22em;
      min-width: 22em;
      margin-left: auto;
    }
  }

  tbody {
    tr {
      border-top: solid 1px darken($contentColor, 10%);
      vertical-align: top;

      >td:first-child {
        // indent body row a bit vs first thead > th
        padding-left: $space/2;
      }
      td {
        // enforce a bit of space between cells, INCLUDING the very last
        // cell (to mirror the "indent inwards" style of the first cell)
        padding-right: $space/2;
      }
    }
  }
  tr {
    height:30px;
  }
  td:last-child, th:last-child {
    // indent inwards even in thead, to line up with tbody > tr > td.iconColumn
    padding-right: $space / 2;
    // neat alignment for "Layouts" table (differing number of icons in cells)
    text-align: right;
  }
  .iconColumn {
    // .iconColumn contents mix div / a / span elements, but they should all
    // size and align the same way
    > * {
      display: inline-block;
      min-width: 1.2em;
    }
  }
  .iconColumn, .idColumn {
    white-space: nowrap;
  }
}

// To prevent horizontal collapsse in drag-and-drop transit, .layersetTable and .elementsTable both need certain
// cells to have forced expansion
.elementsTable {
  .typeColumn, .titleColumn {width: 49%;}

  .placeholderRow{height:$space;}
  .screentype-icon.disabled {
    opacity: 0.3;
  }
}

.layersetTable{
  .titleColumn {
    width: 99%;
  }
}


// ------------------------------------------------------------- LAYOUT
.checkContainer{
  display: block;
  margin-bottom: $space/2;
  background-color: $contentColor;
  padding:5px $space/2 5px $space/2;
  border:solid 1px white;
  @include border-radius($radius);

  &:hover{
    background-color: white;
    border:solid 1px darken(white, 15%);
  }
}

.static-popover-wrap {
  position: relative; // for anchoring of absolute-positioned .popover
  .popover {
    display: initial;
    &.left {
      right: 2em;
    }
    &.left, &.right {
      top: -1em;
      .arrow {
        top: 1em;
        margin-top: 0;
      }
    }
  }
}
