/* ----------------------------------------- */
/*  Layout                                   */
/* ----------------------------------------- */

@headerHeight: 180px;

@bodyHeight: calc(100% - 500px);

@sidebarWidth: 400px;
@bgColor: rgba(33, 51, 73, 0.78);
@contentColor: #41628d;
@headerColor: #7e86b6;
@attacksColor: #cc262d;
@vitalityColor: #4ba23d;
@defenceColor: #329edb;
@resourcesColor: #6f4b93;

.window-content {
  .nomargin();
  height: 100%;
  overflow: hidden;

  & > form {
    .nomargin();
    height: 100%;
    overflow: hidden;
    background-size: 100% auto;
    background: white url("../ui/monstres/bg-monstres-1.webp") no-repeat;

    .upper {
      min-height: 0;
      height: 0;
      max-height: 0;
      .logo {
        position: relative;
        background-image: url("../ui/monstres/logo-monstres.webp");
        background-position-x: center;
        background-position-y: top;
        background-repeat: no-repeat;
        min-height: @headerHeight;
        height: @headerHeight;
        max-height: @headerHeight;
      }
    }

    .main {
      min-height: 100%;
      height: 100%;
      max-height: 100%;

      .sidebar {
        margin-top:calc(@headerHeight + 10px);
        height: 100%;
        max-width: 300px;
        background-color: @bgColor;
        .charname-title {
          padding-top: 20px;
          .charname {
            font-family: Misfits, sans-serif;
            text-shadow: 10px 10px black;
            color: white;
            font-size: 70px;
            font-weight: 700;
          }
        }

        .portrait {
          img.profile {
            border: none;
          }
        }
      }

      .content {
        //height: 100%;
        margin-top:calc(@headerHeight + 10px);
        background-color: @bgColor;
        //padding: 180px 10px 10px 10px;

        .sheet-header {
          height: 90px;
          min-height: 90px;
          max-height: 90px;
          padding: 10px 0;

          .header-details {
            padding: 10px 0;

            .field-label {
              text-transform: uppercase;
            }

            .cell-header {
              background-color: @headerColor;
            }

            .cell {
              background-color: white;
              //border-radius: 10px;
              border-radius: 0 10px 10px 0;
              font-family: @font-deco;
              font-size: 16px;
              margin-left: 2px;
            }

            .flexrow {
              margin-bottom: 1px;
            }
          }
        }

        .sheet-body {
          //padding: 10px 0;
          height: calc(100% - 120px);
          min-height: calc(100% - 120px);
          max-height: calc(100% - 120px);

          .tab {
            .nomargin();
            background-color: rgba(255,255,255, 0.80);
            border-radius: 20px;
            padding: 10px;

            //height: calc(100% - 80px);
            //min-height: calc(100% - 80px);
            //max-height: calc(100% - 80px);
            height: 100%;
            min-height: 100%;
            max-height: 100%;
            overflow: auto;

            &.stats {
              background-color: rgba(0, 0, 0, 0.6);

              .flexrow {
                margin-bottom: 1px;
              }

              .attributes-header {
                font-family: @font-secondary;
                color: @headerColor
              }

              .attributes {
                .cell-header {
                  background-color: @headerColor
                }
              }

              .init-header, .attacks-header {
                font-family: @font-secondary;
                color: @attacksColor;
              }

              .init, .attacks {
                .cell-header {
                  background-color: @attacksColor;
                  border-radius: 0 10px 10px 0;
                }
              }

              .defence-header {
                font-family: @font-secondary;
                color: @defenceColor;
              }

              .defence {
                .cell-header {
                  background-color: @defenceColor;
                  border-radius: 0 10px 10px 0;
                }
              }

              .injuries-header,
              .recovery-header,
              .vitality-header {
                font-family: @font-secondary;
                color: @vitalityColor;
              }

              .injuries,
              .recovery,
              .vitality {
                .cell-header {
                  background-color: @vitalityColor;
                  border-radius: 0 10px 10px 0;
                }
              }

              .madness-header,
              .resources-header {
                font-family: @font-secondary;
                color: @resourcesColor;
              }

              .madness,
              .resources {
                .cell-header {
                  background-color: @resourcesColor;
                  border-radius: 0 10px 10px 0;
                }
              }

            }
            &.combat {
              .weapon {
                .item-name {
                  padding-top: 2px;
                  border-right: 1px solid #c9c7b8;

                  .weapon-image {
                    background-image: url('../ui/coc/weapon.png');
                    background-size: 26px 26px;
                    background-repeat: no-repeat;
                    background-position: center;
                  }
                  .weapon-name {
                  }
                }
              }
            }
            &.inventory {}
            &.capacities {
              overflow: auto;
              .path-list {
                box-shadow: 0 4px 3px -3px gray;
                margin: 0 0 5px 0;
                padding: 3px;
                max-height: 205px;
                overflow: hidden;

                .grid {
                  font-size: 12px;
                  max-height: 150px;
                  overflow: auto;

                  .gridrow {
                    .gridcell {
                      padding: 3px 5px;

                      &.gridheader {
                        background-color: @headerColor;
                        font-family: @font-secondary;
                        color: white;
                      }
                    }

                    &.gridheader {
                      background-color: @headerColor;
                      font-family: @font-secondary;
                      color: white;
                    }
                  }
                }

                &.encounter {
                  min-height: 100px;
                  height: 100px;
                  max-height: 100px;
                  overflow: hidden;

                  .grid {
                    min-height: 100px;
                    height: 100px;
                    max-height: 100px;
                    overflow: auto;
                  }
                }
              }

              .capacity-list {
                min-height: calc(100% - 220px);
                height: calc(100% - 220px);
                max-height: calc(100% - 220px);
                overflow: auto;

                &.p0 {
                  min-height: calc(100% - 15px);
                  height: calc(100% - 15px);
                  max-height: calc(100% - 15px);
                }

                &.p1 {
                  min-height: calc(100% - 120px);
                  height: calc(100% - 120px);
                  max-height: calc(100% - 120px);
                }

                &.p2 {
                  min-height: calc(100% - 145px);
                  height: calc(100% - 145px);
                  max-height: calc(100% - 145px);
                }

                &.p3 {
                  min-height: calc(100% - 170px);
                  height: calc(100% - 170px);
                  max-height: calc(100% - 170px);
                }

                &.p4 {
                  min-height: calc(100% - 195px);
                  height: calc(100% - 195px);
                  max-height: calc(100% - 195px);
                }
              }
            }
          }
        }

        .cell {
          height: 26px;

          .field-value {
            background-color: white;
            border-radius: 10px;
            font-family: @font-deco;
            font-size: 16px;
            margin-left: 2px;
          }

          select.field-value {
            font-size: 14px;
          }
        }
        .cell-header {
          height: 26px;
          background-color: black;
          color: white;
          font-family: @font-secondary;
        }
        .drop-field {
          background-color: rgba(0, 0, 0, 0.1);
          .drop-item {
            margin-left: 1px;
            padding-top: 5px;
            height: 26px;
            cursor: pointer;
          }

          .item {
            padding-top: 3px;

            .item-control {
              color: @c-darkbrown;
              visibility: hidden;
              flex: 0 0 18px;
              border: 1px solid transparent;
            }
          }

          &:hover > .item > .item-control {
            visibility: visible;
          }
        }
      }
    }
  }
}