// TODO: move to reports project 
// Styles for report layouts resempling the printable pdf

//== Logo
//
//## Use this to change the logo in printable document. We recommend SVG for best print quality and size, but png etc. are also possible

//** Brand logo url in Header (.svg .png .jpg etc) */
@rpt-brand-logo-url:          'https://cdn.salaxy.com/img/palkkaus/logo/palkkaus_logo.svg';

//** Brand logo's height (max-height is 50px). Width auto adjusts up to 40% of content area width. */
@rpt-brand-logo-height:       80px;


//
@rpt-text-color:            #000;
@rpt-font-size-base:          13px;
@rpt-line-height:            1.42857143;


//** Padding for `<th>`s and `<td>`s.
@rpt-table-cell-padding:            8px;
//** Padding for cells in `.table-condensed`.
@rpt-table-condensed-cell-padding:  5px;

//** Background color used for `.table-striped`.
@rpt-table-bg-accent:               #f9f9f9;

//** Border color for table and cell borders.
@rpt-table-border-color:            #ddd;

/* Actual report specific stuff */
body{
  .salaxy-rpt {
    font-family: @font-family-sans-serif;
    color: @rpt-text-color;
    line-height: @rpt-line-height;
    font-size:@rpt-font-size-base;
    background-color: transparent;
    // Table defaults
    table{
      width:100%;
      color: @rpt-text-color;
      line-height: @rpt-line-height;
      font-size:@rpt-font-size-base;
    }

    /* Preview layout - the document is inside .document-preview */
    .document-preview {
        background-color: Gray;
        width: 100%;
        padding: 10mm;
        //min-height: 303mm; // Remove or add landscape support 
        box-sizing: border-box;
        
        overflow-x: auto;
        display: inline-grid;
        &.document-preview-no-height {
            // Mini-preview in Admin and in share calc view
            padding: 2mm;
            min-height:unset;
        }
        .document {
          background-color:#fff;
          margin-bottom: 2mm;
          .document-body{
            
           
            position: relative;
            //margin-bottom:30mm;  // padding from hbs template
            //margin-left:10mm;
            //margin-right:10mm;
            //margin-top: 30mm;
          }
          .header {
            border-bottom: 0.5mm solid @brand-primary;
            margin-bottom: 2mm;
            padding-bottom: 3mm;
            height: 20mm;
             .reportbrandlogo{
              width: auto;
              height: @rpt-brand-logo-height;
              max-height: 50px;
              background: url(@rpt-brand-logo-url);
              background-size: contain;
              background-repeat: no-repeat;
            }
          }
          .footer {
            width: calc(~"100% - 20mm");
            position: absolute;
            bottom: 10mm;
            left: 10mm;
            height: 20mm;
            border-top: 0.5mm solid @brand-primary;
            padding: 2mm 0;
            font-size: 12px;
            line-height: @rpt-line-height;
            background-color: transparent;
            color: @rpt-text-color;
            p, td {
              font-size: 12px;
              line-height: @rpt-line-height;
            }   
          }
        }
        .a4Portrait, .a4portrait, .A4Portrait { 
            
            height: auto; 
          /*no width hardcoded*/
        }
        .a4Portrait-no-height, .a4portrait-no-height, .A4Portrait-no-height {
            // Mini-preview in Admin
            padding: 10mm;
            width: 190mm;
            /* 210 - 2 * 10 = 190 */
        }
        .a4Landscape, .a4landscape, .A4Landscape  {
            //padding-bottom: 30mm;
            //padding: 10mm;
            height: auto;
            /* 210 - 2 * 10 = 190 */
            width: 297mm;
            /* 297 - 2 * 10 = 277 */
        }
        .a4Landscape-no-height, .a4landscape-no-height, .A4Landscape-no-height {
          padding: 10mm;
          width: 277mm;
          /* 297 - 2 * 10 = 277 */
      }
      .document.a4Landscape{
        .table-condensed {
          thead, tbody, tfoot {
              tr {
                  th, td {
                      padding: 1px;
                      font-size: 10px;
                      line-height: normal;
                  }
              }
          }
        }
      }
  
    }

    
    .document {
        position: relative; // If absolute positioning is used, it is in relation to document.
        background-color: transparent;
        margin: 0px auto;
        font-size:@rpt-font-size-base;
        .report-table{
          border-spacing:0;
          margin-bottom: 20px;
          margin-top: 20px;
        }
        
        .salaxy-report-table, .salaxy-accounting-report-table {
          margin-top: 20px;
          th, td {
              text-align: right;
              &:first-child {
                  text-align: left;
              }
          }

          &.columns-three {
              th, td {
                  width: 25%;
                  &:first-child {
                      width: 50%;
                  }
              }
          }

          &.columns-three.columns-first-narrow {
              th, td {
                  width: 40%;
                  &:first-child {
                      width: 20%;
                  }
              }
          }

          &.columns-four {
              th, td {
                  width: 20%;
                  &:first-child {
                      width: 40%;
                  }
              }
          }

          &.columns-five {
              th, td {
                  width: 17.5%;
                  &:first-child {
                      width: 30%;
                  }
                  &:nth-child(2) {
                      // Assuming 2th column with text content
                      text-align: left;
                  }
              }
          }

          &.columns-six {
              th, td {
                  width: 15%;
                  &:first-child {
                      width: 25%;
                  }
                  &:nth-child(2) {
                      // Assuming 2th column with text content
                      text-align: left;
                  }
              }
          }

          &.columns-first-two-text {
              th:nth-child(1), th:nth-child(2), td:nth-child(1), td:nth-child(2) {
                  text-align: left !important;
              }
          }
          .salaxy-accounting-report-group-header td {
              padding-top: 6px;
              padding-bottom: 5px;
              text-transform: uppercase;
              letter-spacing: 1px;
          }

          
          .salaxy-accounting-report-row {
              font-weight: bold;
              &.salaxy-accounting-report-child-row {
                  font-weight: normal;
              }
          }
          

          tfoot tr.total {
              th {
                  padding-top: 10px;
                  font-weight: bold;
                  &:first-child {
                      text-transform: uppercase;
                  }
              }
          }
      }

        h1, h2, h3{
            margin:	0;
            font-weight: bold;
        }
        
        h1 { font-size: 1.3em }
        h2 {font-size: 1.2em;}
        h3 { font-size: 1.1em }
        p{font-size:@rpt-font-size-base;}
        .table {
            width: 100%;
            max-width: 100%;
          

            // Cells
            thead, tbody, tfoot {
                tr {
                    th, td {
                        padding: @rpt-table-cell-padding;
                        line-height:@rpt-line-height;
                        vertical-align: top;
                        border-top: 1px solid @rpt-table-border-color;
                    }
                }
            }
            // Bottom align for column headings
            thead tr th {
                vertical-align: bottom;
                border-bottom: 2px solid @rpt-table-border-color;
                border-top: 0px none;
            }

            // Nesting
            .table {
                background-color: transparent;
            }
        }

        .table-condensed {
            thead, tbody, tfoot {
                tr {
                    th, td {
                        padding: 1px;
                        font-size: @rpt-font-size-base;
                        line-height: normal;
                    }
                }
            }
        }
        

        .small {
            thead, tbody, tfoot {
                tr {
                    th, td {
                        font-size: 11px;
                    }
                }
            }
        }

        .table-bordered {
            border: 1px solid @rpt-table-border-color;
            thead, tbody, tfoot {
                tr {
                    th, td {
                        border: 1px solid @rpt-table-border-color;
                    }
                }
            }
            thead tr {
                th, td {
                    border-bottom-width: 2px;
                }
            }
        }

        .table-striped {
            tbody tr:nth-of-type(odd) {
                background-color: @rpt-table-bg-accent;
            }
        }

    }
    
    .watermark {
        position: absolute;
        left: 0;
        top: 40%;
        font-weight: bold;
        font-size: 20mm;
        opacity: 0.3;
        color: @brand-danger;
        text-align: center;
        width: 100%;
        transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        /* IE 9 */
        -webkit-transform: rotate(-45deg);
        /* Opera, Chrome, and Safari */
    }
    // From functional.less
    a[ng-click],
    .clickable {
        cursor: pointer;
    }
    // Text special styles
    .uppercase {
        text-transform: uppercase;
    }
    .text-disabled {
        text-decoration: line-through;
        color: #777777;
    }
    .text-small, .text-small td, .text-small th {
        font-size: 0.9em;
    }
    .truncate {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    td, th {
        vertical-align: top;
        text-align: left;
        padding-left: 2px;
        padding-right: 2px;
    }
    td.text-right, th.text-right,
    td.right, th.right {
        text-align: right;
    }
      
    td.middle, td.middle-align, th.middle, th.middle-align {
        vertical-align: middle;
    }
    td.bottom, td.bottom-align, th.bottom, th.bottom-align{
      vertical-align: bottom;
    }
    tr.total td, tr.total th {
        border-top: 1px solid @rpt-text-color;
        border-bottom: 3px double @rpt-text-color;
    }
    
    .table tr.no-border > th,
    .table tr.no-border > td,
    .table.no-border tr > th,
    .table.no-border tr > td {
      border-top: 0px none,
    }
      
  
    .valign-middle {
        vertical-align: middle !important;
    }
  
    .spacer-bottom {
      margin-bottom: 10px
    }

    .spacer-top {
      margin-top: 10px
    }
    .pre-wrap{
      white-space: pre-wrap;
    }
    .pre-line{
      white-space: pre-line;
    }
    @media screen and  (max-width:767px){
      table, .table{
        >tbody, >thead{
          >tr{
            >td, >th{
              padding:2px;
              
            }
          }
        }
        
      }
      }
  }

}