@import "material/buttons";
@import "material/colors";
@import "material/progressbars";

//@font-face{font-family:FontinSmallCaps;font-weight:400;font-style:normal;src:local("☺"),url(../fonts/fontin-smallcaps.woff) format("woff")}
//@font-face{font-family:FontinRegular;font-weight:400;font-style:normal;src:local("☺"),url(../fonts/fontin-regular.woff) format("woff")}
//@font-face{font-family:FontinItalic;font-weight:400;font-style:normal;src:local("☺"),url(../fonts/fontin-italic.woff) format("woff")}
//@font-face{font-family:FontinBold;font-weight:400;font-style:normal;src:local("☺"),url(../fonts/fontin-bold.woff) format("woff")}

body {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  /*font-family: Helvetica, Arial, sans-serif;*/
  background: var(--background);
  /*background-image: url("/images/brown-600-45-degree-fabric-light.png");*/
  /*background-image: url("/images/main-bg-heist.jpg");*/
  font-size: @font-size;

  /*To make footer bottom "sticky"*/
  margin:0;
  display: flex;
  flex-direction: column;

}

/* == Header ==*/

#header {
  margin: 0 5px;
  /* alerter styling in alerter.less */
  a {
    text-decoration: none;
  }
  .views-menu {
    margin: 0px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    width: 100%;
    .views {
      font-size: @menu-font-size;
      width: max-content;
      .home, .xp, .wealth, .poebuilder, .maps, .settings{
      /*TODO get rid of classes for this buttons, we doest not style them differently anyway so classes are not needed*/
      /*whitespace between menu <a> tags is messing proximity of buttons, dirty fix*/
        margin-right: -2px;
      }
      .settings {
        /* optional button color */
        /*background-color: #a8bad0;*/
      }
    }

    .views-league {
     display: inline-block;
      margin-left: 20px;
      .standard {
      /*whitespace between menu <a> tags is messing proximity of buttons, dirty fix*/
        margin-right: -2px;
      }
      .grid {
      }
    }
  }
}


/* == Content ==*/
#content {
  height: 100%;
  padding: 5px;
  margin: 1em 0;
  #welcome, #xp, #wealth, #maps, #settings {
    color: @sub-pages-font-color;
    background-color: @sub-pages-background-color;
  }

/* ==== Home Page ==== */
  #home {
    height: 100%;
    padding: 5px;
    margin: 0;

    /* version history log */
    textarea {
      display: inline-block;
      background-color: #ababab;
      max-height: 850px;
      min-width: 658px;
      width: 600px;
      border: 1px solid black;
      resize: unset;
      padding-left: 1em;
      margin-left: 2em;
     /* box-sizing: border-box; */
    }
    textarea:focus {
        outline: none;
        border: 1px solid #656565;
    }

    /*TODO fix positioning, after including #welcome into #home block */
    #welcome {
      display: inline-block;
      max-width: 600px;
      min-height: 700px;
      height: auto;
      padding: 0 2em 0 2em;
      color: @sub-pages-font-color;
      border: 1px solid black;
      margin-bottom: 1em;
      font-size: 16px;

      a {
        color: #ea40ff;
      }
      img {
        padding: 0px 6px;
      }
      h2 {
        color: gold;
        text-shadow: 1px 1px 1px black;
      }
    }
  }
/* ==== XP Page ==== */
  #xp {
    padding: 0 2em 2em 2em;
    border: 1px solid black;
    color: @sub-pages-font-color;
    background-color: @sub-pages-background-color;
    #session-buttons {
      margin-top: 1em;
    }

  #leaguesList {
    .league {
      margin: 5px 0;
      .leagueName {
        padding-right: 0.5em;
        font-weight: bold;
        display: block;
        font-size: 1.2em;
      }
      button.charName {
        &:hover {
          cursor: pointer !important;
        }
        border: 1px solid #c7c7c7  !important;
        padding: 5px !important;
        margin: 2px !important;
      }
    }

    button {
    /* commented out were default browser styles*/
      appearance: button;
      /*-webkit-writing-mode: horizontal-tb !important;*/
      text-rendering: auto;
      /*color: -internal-light-dark(buttontext, rgb(170, 170, 170));*/
      letter-spacing: normal;
      word-spacing: normal;
      text-transform: none;
      text-indent: 0px;
      text-shadow: none;
      display: inline-block;
      text-align: center;
      align-items: flex-start;
      cursor: default;
      /*background-color: -internal-light-dark(rgb(239, 239, 239), rgb(74, 74, 74));*/
      background-color: rgb(239, 239, 239);
      box-sizing: border-box;
      margin: 0em;
      font: 400 13.3333px Arial;
      padding: 1px 6px;
      border-width: 1px;
      border-radius:3px;
      /*border-style: outset;*/
      border-style: solid;
      /*border-color: -internal-light-dark(rgb(118, 118, 118), rgb(195, 195, 195));*/
      border-color: black;
      /*border-image: initial;*/
    }
  }
  .info {
    padding: 0.5em 0;
    line-height: 1.3em;

    #start {
      display: block;
    }
    #end {
      display: block;
    }
    #elapsed {
      display: block;
    }
    #total {
    }
  }


  .xp-progress, .current {
  /*user checkpoint table*/
    border-collapse: collapse;
    text-align: center;
    cursor: pointer;

    tr, td, th {
      border-collapse: collapse;
      text-align: center;
    }
    thead {
      tr {
        background-color: #f9a825;
        th {
          background-color: #f9a825;
          border: 1px solid black;
          padding: 5px 10px;
          color: @black;
          //color: @table-row-font-color;
        }
      }
    }
    tbody {
      tr {
        border: @table-body-border;
        &:nth-child(even) {
          background-color: @table-row-even-background;
        }
        &:nth-child(odd) {
          background-color: @table-row-odd-background;
        }
        &:hover {
          background-color: @table-row-hover-indicator;
        }
        td {
          height: 1.5em;
          /*gem name*/
          &:nth-child(1) {
            text-align:left;
            padding: 0 15px;
            span:before {
              content: '';
              padding-left:10px;
              display: inline-block;
              margin-right: 7px;
              border-radius: 1em;
              height: 0.7em;
            }
            /*TODO  test with real gem icons*/
            /* styling for visual clue of gem type str/int/dex */
            span.s:before {
              background-color:#e32121;
            }
            span.i:before {
              background-color:#498ff3;
            }
            span.d:before {
              background-color:#72f30b;
            }
          }
        }
      }
    }
  }/* block end - .xp-progress, current  */

   /*previous checkpoint*/
  .oldCheckpoint {
    opacity: 0.6;
  }
}


/* ==== Wealth Page ==== */
  #wealth {
    padding: 1em;
    border: 1px solid black;
    color: @sub-pages-font-color;
    background-color: @sub-pages-background-color;
    /*width: fit-content;*/
    table {
      border-collapse: collapse;
      //border: 1px solid #38678f;
      border:@table-body-border;
      margin-top: 1em;
      background: white;
      color: @wealth-table-body-font-color;
      &::-moz-selection {
        background: steelblue;
        color: white;
      }
      &::selection {
        background: steelblue;
        color: white;
      }
      thead th {
        background: @wealth-table-header-background;
        height: 2.5em;
        text-shadow: 0 1px 0 #38678f;
        color: white;
        border: 1px solid #38678f;
        box-shadow: inset 0px 1px 2px #568ebd;
        transition: all 0.2s;
        word-break: keep-all;
        padding: 0 0.5em;
      }
      tbody {
        tr {
          //border-bottom: 1px solid #cccccc;
          &:last-child {
            border-bottom: 1px solid black;
          }
          &:nth-child(even) {
            background-color: @table-row-even-background;
            //background-color: @wealth-table-row-even-background;
          }
          &:nth-child(odd) {
            background-color: @table-row-odd-background;
          }
          &:hover {
            background-color: @table-row-hover-indicator;
          }

          td {
            border: @wealth-table-body-border;
            color: @wealth-table-body-font-color;
            padding: 0.5em;
            transition: all 0.2s;
            text-align: center;
            &:first-child {
              text-align:left;
            }
            .selected {
              background: #d7e4ef;
            }
            input {

              text-align: center;
              background: @wealth-table-input-background;
              box-shadow: @wealth-table-input-box-shadow;
              color: @wealth-table-input-font-color;
              outline: none;
              border: 0;
              display: table-cell;
              border-bottom: @wealth-table-input-border-bottom;
            }
            input:focus {
              color: steelblue;
              background:#d2eaff;

            }
          }
        }
      }
      tfoot {

        font-weight:bolder;
        background: @wealth-table-footer-background;
        color: @wealth-table-footer-font-color;
        td {
          padding: 4px 10px;
        }
      }
    } /* block end - table */
  } /* block end - #wealth */

/* ==== Settings Page ==== */
  #settings {
    color: @sub-pages-font-color;
    background-color: @sub-pages-background-color;
    padding: 1em;
    border: 1px solid black;
    height: 300px;

    label {
      float: left;
      text-align: right;
      margin-right: 15px;
      width: 600px;
    }
    .settingsOption {
      .optionfield {
        height: 100px;
        margin: 10px 0;
        padding: 20px;
      }

      padding: 4px 0;
    }
  }
}/* end of #content block*/



@-webkit-keyframes llama-mode {
  0% {
    background-color: Yellow;
    opacity: 1;
  }
  22% {
    background-color: Yellow;
  }
  77% {
    background-color: Red;
  }
  100% {
    background-color: #777;
  }
}

.llama-mode {
  -webkit-animation-name: llama-mode;
  -webkit-animation-duration: 100ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
}

/* ==== Maps Page ==== */
#maps {
  padding: 5px;
  border: 1px solid black;
}
/* ==== PoeBuilder Page ==== */


/*buttons*/
.view-btn, .ctrl-btn, .pane-btn, .ls-btn, .col-btn,
.upgrade-btn, .char-btn, .tab-btn {
  margin-right: 2px;
  .MaterialBtn;
}

.col-div {
  margin-right: 2px;
  .MaterialBtn;
  //override MaterialBtn margin top/bottom so space between rows could be handled by group-div
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.show-all-btn, .hide-all-btn, .reload-all-btn, .reload-visible-btn, .refresh-characters-btn {
  margin-right: 2px;
  .MaterialBtn;
  //override for dark-theme, otherwise it makes them same color and render less visible
  color: @refresh-tabs-buttons-for-show-hide-reload-refresh-chars;
}

/* ==== LootView Grid Page ==== */

/* ---- League Pane ---- */
/* ---- buttons "Clear Filters" "Upgrades" "Refresh/Tabs" "Select Columns" "Export Csv" ---- */
/* league-button-pane */

#league-buttons-pane {
  display: inline-flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: first baseline;
  width: 100%;

  #buttons {
    display: inline-block;

    a {
      color: @pane-button-font-color;
      text-decoration: none;
      text-shadow: @pane-button-text-shadow;
      box-shadow: @pane-button-box-shadow;
    }

    .clear-filters {
      background-color: @pane-button-clear-filters-background-color;
      color: @pane-button-clear-filters-font-color;
    }

    .upgrades {
      background-color: @pane-button-upgrades-background-color;
      color: @pane-button-upgrades-font-color
    }

    .refresh-tabs {
      background-color: @pane-button-refresh-tabs-background-color;
      color: @pane-button-refresh-tabs-font-color;
    }

    .select-columns {
      background-color: @pane-button-select-columns-background-color;
      /*color: #9bd271ad;*/
      color: @pane-button-select-columns-font-color;
      /*#9bd271ad;*/
    }

    .export-csv {
      background-color: @pane-button-export-csv-background-color;
      color: @pane-button-export-csv-font-color;
    }
  }

  /* ==== View Load/Save ==== */

  .load-save {
    /*old values*/
    /*background-color: @blue-100;*/
    /*background-image: url("/images/blue-100-linen.png");*/

    a {
      text-decoration: none;
    }

    .select2-container .select2-choice {
      background-color: @save-views-choice-background-color;

      &:hover {
        background-color: @save-views-choice-hover-background-color;
      }
    }

    .view-span {
      color: @save-views-label-font-color;
    }

    /* Load, Save, Save+Filters, Delete buttons*/

    .ls-btn {
      /* optional buttons color*/
      /*background-color: @blue-400;*/
    }

    .del {
      /* optional buttons color*/
      /*background-color: #f09478;*/
    }

    display: inline-block;
    padding-left: 12px;
    border-radius: 5px 5px 0 0;
  }

  .select2-container {
    margin-right: 2px;
    margin-bottom: 2px;

    .select2-choice {
      height: inherit;
      line-height: normal;

      border: none;
      border-radius: 0px;

      .select2-arrow {
        display: none;
      }

      /*todo*/
      .MaterialBtn;
      /*todo find better way to style that, how to make fallbacks?*/
      /*background-color: white;*/
    }

    .select2-chosen {
      color: black;
      margin-right: 0px !important;
      text-overflow: clip !important;
    }
  }
}


/* "upgrades" "Refresh/Tabs" "Select Columns" */

/*all pane general class*/
.pane {
  .info {
    /*! display: inline-block; */
    font-size: 1.2em;
    margin-top: 7px;
    margin-bottom: 10px;
    padding: 5px;
  }
  margin-bottom: 5px;
}

.invisible {
/*class used to hide pane windows*/
  display:none;
}
/* ---- Upgrades Pane ---- */
.pane-btn.upgrades {

}

#upgrades-pane {
  //background-color: @yellow-500;
  background-color: #debe00;
  //background-image: url("/images/yellow-500-linen.png");
  padding: 5px 5px 10px 10px;
  .info {
    /* display: inline-block; */
    font-size: 1.2em;
    margin-top: 7px;
    margin-bottom: 10px;
  }

  /*row of buttons loading stats of equipment into grid*/
  .equip-slots {
    display: inline-block;
  }
  /*character level*/
  .char-lvl {
    padding: 5px 0 5px 0;
    margin: 0 0 4px 0;
    display: inline-block;
  }
  .select2-container {
     margin-right: 8px
  }

}

/* ---- Refresh Tabs Pane ---- */
#refresh-pane {
  background-color: @light-blue-100;
  padding: 5px 5px 10px 10px;
  //background-image: url("/images/light-blue-100-linen.png");
  .info {
    padding: 5px 5px 10px 10px;
    font-size: 1.2em;
    margin-bottom: 0.5em;
  }
  .chars, .tabs {
    padding: 5px;
  }
  .reload-all-btn {
    background-color: @red-600;
  }
  .reload-visible-btn {
    background-color: @yellow-300;
  }
  .refresh-characters-btn {
    background-color: @green-300;
  }

  .tab-btn {
    color: white;
  }

  .visible-loot-container {
    border-color: @light-blue-100;
    border-width: 2px;
    border-style: solid;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .invisible-loot-container {
    border-color: @yellow-300;
    border-width: 2px;
    border-style: dotted;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .tab-btn, .char-btn {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-left: -5px;
    margin-right: -5px;
    white-space: nowrap;
    &.loading {
      color: red;
    }
  }

  .show-all-btn {
    background-color: @green-300;
  }
  .hide-all-btn {
    background-color: @red-300;
  }
  .show-all-btn, .hide-all-btn, .reload-all-btn, .reload-visible-btn, .refresh-characters-btn {
    &:hover {
      background: #c2c2c2;
    }
  }
}

/* ---- Columns Controls Pane ---- */
.columns-controls {
  background: @column-controls-background;
  padding-bottom: 5px;
  padding-left: 5px;
  /* show scroll so when adding more mods it would not take all vertical place */
  height: 450px; /* testing value - may change  */
  overflow: auto;
  a {
    text-decoration: none;
  }

  .col-main {
    margin-bottom: 5px;
    padding-top: 5px;
    width: 170px;
  }

  /*todo add this class to html, to be free of all btn changes*/
  .col-toggle-btn {
  /*button which toggle set of cols*/
    /*all+ all- default*/
    /*+ - group*/
    color: #808080;
    background: #252427;
  }

  /*search-mod floating*/
  input#search-mod {
    display: inline-block;
    margin-bottom: 4px;
    width: 130px;
    width: 102px;
    //position: fixed;
  }
  button#clear-search-mod {

  }

  .group-div {
    /* container for .col-btn show, .col-btn hide */
    .col-btn-toggle {
      /*margin-left:5px;*/
      margin-right: 12px;
      box-shadow: none !important;
    }
    .group-name {
      color: black;
      font-size: 1em;
      /*dark theme*/
      font-size: @column-controls-mod-group-name-font-size;
      color: @column-controls-mod-group-name-font-color;
      width: 174px;
      display: inline-block;
      text-align: right;
      padding-right: 11px;
      font-weight: bold;
      padding-bottom: 7px;
    }

    .col-div {
      cursor: hand;
      cursor: pointer;
      display: inline-block;
    }
    /* mod enabled  */
    .col-div.on-col {
      color: @column-controls-mod-enabled-font-color;
      background-color: @column-controls-mod-enabled-background-color;
      border: @column-controls-mod-enabled-border;
      //text-decoration: underline;
    }
    /* mod disabled  */
    .col-div.off-col {
      color: @column-controls-mod-disabled-font-color;
      background-color: @column-controls-mod-disabled-background-color;
      border: @column-controls-mod-disabled-border;
    }
    /* mod selected via search-mod input*/
    .col-div.select-mod {
      border-radius: 7px !important;
      border: @column-controls-selected-mod-border;
    }
  }
}

/* ==== Grid ==== */
#grid {
}


/* ==== Footer ==== */
#footer {
  flex-shrink: 0; /*?*/
  background: black;
  padding: 0.5em;
  color: #aeaeae;

  .license {
      color: #5c4e00;
      text-decoration: none;
  }
  .author {

  }
  #invitation {
    float: right;

    a {
      color: #8e8e8e;
    }
  }
}

@menu-font-size: var(--menu-font-size);
@save-views-choice-background-color: var(--save-views-choice-background-color);
@save-views-label-font-color: var(--save-views-label-font-color);
@save-views-choice-hover-background-color: var(--save-views-choice-hover-background-color);
@pane-button-font-color: var(--pane-button-font-color);
@pane-button-text-shadow: var(--pane-button-text-shadow);
@pane-button-box-shadow: var(--pane-button-box-shadow);
@pane-button-clear-filters-font-color: var(--pane-button-clear-filters-font-color);
@pane-button-refresh-tabs-font-color: var(--pane-button-refresh-tabs-font-color);
@pane-button-upgrades-font-color: var(--pane-button-upgrades-font-color);
@pane-button-select-columns-font-color: var(--pane-button-select-columns-font-color);
@pane-button-export-csv-font-color: var(--pane-button-export-csv-font-color);

@pane-button-clear-filters-background-color: var(--pane-button-clear-filters-background-color);
@pane-button-refresh-tabs-background-color: var(--pane-button-refresh-tabs-background-color);
@pane-button-upgrades-background-color: var(--pane-button-upgrades-background-color);
@pane-button-select-columns-background-color: var(--pane-button-select-columns-background-color);
@pane-button-export-csv-background-color: var(--pane-button-export-csv-background-color);

@refresh-tabs-buttons-for-show-hide-reload-refresh-chars: var(--refresh-tabs-buttons-for-show-hide-reload-refresh-chars);
@font-size: var(--font-size);
@sub-pages-font-color: var(--sub-pages-font-color);
@sub-pages-background-color: var(--sub-pages-background-color);
@table-row-even-background: var(--table-row-even-background);
@table-row-odd-background: var(--table-row-odd-background);
@table-body-border: var(--table-body-border);
@table-row-hover-indicator: var(--table-row-hover-indicator);

@wealth-table-header-background: var(--wealth-table-header-background);
//@wealth-table-header-font-color: var(--wealth-table-header-font-color);
//@wealth-table-row-even-background: var(--wealth-table-row-even-background);
@wealth-table-body-border:var(--wealth-table-body-border);
@wealth-table-body-font-color: var(--wealth-table-body-font-color);

@wealth-table-input-background: var(--wealth-table-input-background);
@wealth-table-input-box-shadow: var(--wealth-table-input-box-shadow);
@wealth-table-input-font-color: var(--wealth-table-input-font-color);
@wealth-table-input-border-bottom: var(--wealth-table-input-border-bottom);
@wealth-table-footer-background: var(--wealth-table-footer-background);
@wealth-table-footer-font-color: var(--wealth-table-footer-font-color);

@column-controls-background: var(--column-controls-background);
@column-controls-mod-group-name-font-color: var(--column-controls-mod-group-name-font-color);
@column-controls-mod-group-name-font-size: var(--column-controls-mod-group-name-font-size);
/*@column-controls-mod-toggle-button*/

@column-controls-mod-enabled-font-color: var(--column-controls-mod-enabled-font-color);
@column-controls-mod-enabled-background-color: var(--column-controls-mod-enabled-background-color);
@column-controls-mod-enabled-border: var(--column-controls-mod-enabled-border);

@column-controls-mod-disabled-font-color: var(--column-controls-mod-disabled-font-color);
@column-controls-mod-disabled-background-color: var(--column-controls-mod-disabled-background-color);
@column-controls-mod-disabled-border: var(--column-controls-mod-disabled-border);
@column-controls-selected-mod-border: var(--column-controls-selected-mod-border);