/* CSS update: 2022-12-10 */

/* @page
   PURPOSE: Defines the physical page margins for printing.
   EFFECT: All elements are positioned relative to these margins.
   WHEN TO USE: When the user wants to change the page’s margin sizes. */
@page {
  margin-top: 0cm;
  margin-bottom: 0cm;
  margin-left: 0cm;
  margin-right: 0cm;
}

/* body
   PURPOSE: Base style for the whole document.
   EFFECT: Sets default font family, size, and text color for all content.
   WHEN TO USE: When the user wants to change the default font, size, or text color for the whole document. */
body {
  font-family: $font_family;
  font-size: $font_size;
  color: $text_color;
}

/* td
   PURPOSE: Aligns table cell content vertically to the top.
   WHEN TO USE: When the user wants all table cells aligned to the top vertically. */
td {
  vertical-align: top;
}

/* .right
   PURPOSE: Aligns text to the right.
   USAGE: Often combined with other classes for layout control.
   WHEN TO USE: When the user requests right-aligned text. */
.right {
  text-align: right;
}

/* .center
   PURPOSE: Centers text horizontally.
   USAGE: Often combined with other classes for layout control.
   WHEN TO USE: When the user requests centered text. */
.center {
  text-align: center;
}

/* .bold
   PURPOSE: Makes text bold.
   USAGE: Often combined with other classes for layout control.
   WHEN TO USE: When the user wants bold text. */
.bold {
  font-weight: bold;
}

/* .padding-right
   PURPOSE: Adds space inside the element on the right side.
   EFFECT: 20px right padding.
   WHEN TO USE: When the user wants extra padding on the right. */
.padding-right {
  padding-right: 20px;
}

/* .padding-left
   PURPOSE: Adds space inside the element on the left side.
   EFFECT: 20px left padding.
   WHEN TO USE: When the user wants extra padding on the left. */
.padding-left {
  padding-left: 20px;
}

/* .border-top
   PURPOSE: Adds a top border to an element.
   TYPICAL USE: Horizontal separator (e.g., between item list and totals).
   EFFECT: Solid, thin border in $color_title_total.
   WHEN TO USE: When the user requests a horizontal line above an element. */
.border-top {
  border-top-style: solid;
  border-top-color: $color_title_total;
  border-top-width: thin;
}

/* .header_text
   PURPOSE: Styles the header text block alignment and position.
   EFFECT: Sets margins, text alignment, and absolute positioning.
   NOTE: Used when no logo is present, or with right-aligned text layouts.
   WHEN TO USE: When the user wants to change or reposition the main header text. */
.header_text {
  margin-top: 1.2cm;
  margin-left: 1.2cm;
  margin-right: 1.2cm;
  text-align: right;
  position: absolute;
}

/* .header_row_1
   PURPOSE: Styles the first header row.
   EFFECT: Bold text, 16pt font size.
   WHEN TO USE: When the user wants to style the first line of header text (font weight, font size, font color, etc.). */
.header_row_1 {
  font-weight: bold;
  font-size: 16pt;
}

/* .header_row_2_to_5
   PURPOSE: Styles header rows 2–5.
   EFFECT: Bold text, 10pt font size.
   WHEN TO USE: When the user wants to style the lines 2,3,4 and 5 of header text (font weight, font size, font color, etc.). */
.header_row_2_to_5 {
  font-weight: bold;
  font-size: 10pt;
}

/* .logo
   PURPOSE: Positions the logo in the header.
   EFFECT: Sets margins and absolute positioning.
   WHEN TO USE: When the user wants to move or resize the logo position. */
.logo {
  margin-top: 1.2cm;
  margin-left: 1.34cm;
  margin-right: 1.2cm;
  position: absolute;
}

/* .info_table_left
   PURPOSE: Positions and styles the information table on the left side, when the customer address block is positioned on the right side.
   EFFECT: Sets font size and margins.
   WHEN TO USE: When the user wants to style/move the left-side info table. */
.info_table_left {
  font-size: $font_size;
  margin-top: 4.5cm;
  margin-left: 1.2cm;
  margin-right: 1.2cm;
}

/* .info_table_right
   PURPOSE: Positions and styles the information table on the right side, when the customer address block is positioned on the left side.
   EFFECT: Sets font size and margins.
   WHEN TO USE: When the user wants to style/move the right-side info table. */
.info_table_right {
  font-size: $font_size;
  margin-top: 5.5cm;
  margin-left: 12.3cm;
  margin-right: 1.2cm;
}

/* .info_table_row0
   PURPOSE: Positions and styles the information table for page 2 and later.
   EFFECT: Sets font size and margins.
   WHEN TO USE: When the user wants to change the info table style for second and later pages. */
.info_table_row0 {
  font-size: $font_size;
  margin-top: 4.5cm;
  margin-left: 1.2cm;
  margin-right: 1.2cm;
}

/* table.info_table_left td
   PURPOSE: Removes extra vertical padding in cells of left-side info tables.
   WHEN TO USE: When the user wants to change spacing in left-side info table cells. */
table.info_table_left td {
  padding-top: 0px;
  padding-bottom: 0px;
}

/* table.info_table_right td
   PURPOSE: Removes extra vertical padding in cells of right-side info tables.
   WHEN TO USE: When the user wants to change spacing in right-side info table cells. */
table.info_table_right td {
  padding-top: 0px;
  padding-bottom: 0px;
}

/* table.info_table_row0 td
   PURPOSE: Removes extra vertical padding in cells for page 2+ info tables.
   WHEN TO USE: When the user wants to change spacing in page 2+ info table cells. */
table.info_table_row0 td {
  padding-top: 0px;
  padding-bottom: 0px;
}

/* @page:first-view table.info_table_row0
   PURPOSE: Hides the page 2+ info table on the first page only.
   NOTE: :first-view is a custom pseudo-class used to target the first rendering of an element.
   WHEN TO USE: When the user wants to hide elements on the first page only. */
@page:first-view table.info_table_row0 {
  display: none;
}

/* .info_table_first_column
   PURPOSE: Optional override for the width of the first info-table column.
   DEFAULT: If unset, the column uses the default width.
   EXAMPLE: width: 100px;
   WHEN TO USE: When the user wants to set a specific width for the first column. */
.info_table_first_column {}

/* .info_table_second_column
   PURPOSE: Optional override for the width of the second info-table column.
   DEFAULT: If unset, the column uses the default width.
   EXAMPLE: width: 100px;
   WHEN TO USE: When the user wants to set a specific width for the second column. */
.info_table_second_column {}

/* .address_table_right
   PURPOSE: Positions the customer address block on the right side.
   EFFECT: Sets font size, absolute position, and width.
   WHEN TO USE: When the user wants to style or reposition the right-side address block. */
.address_table_right {
  font-size: $font_size;
  top: 4.5cm;
  left: 12.3cm;
  width: 7.5cm;
  position: absolute;
}

/* .address_table_left
   PURPOSE: Positions the customer address block on the left side.
   EFFECT: Sets absolute position and width.
   WHEN TO USE: When the user wants to style or reposition the left-side address block. */
.address_table_left {
  top: 5.5cm;
  left: 2.2cm;
  width: 7.5cm;
  position: absolute;
}

/* .custom_address_table_right
   PURPOSE: Positions the right-side address using configurable margins.
   SOURCE: $right_address_margin_top / $right_address_margin_left come from invoice settings.
   WHEN TO USE: When the user wants to move the right address block using specific measurements. */
.custom_address_table_right {
  font-size: $font_size;
  top: $right_address_margin_top;
  left: $right_address_margin_left;
  width: 7.5cm;
  position: absolute;
}

/* .custom_address_table_left
   PURPOSE: Positions the left-side address using configurable margins.
   SOURCE: $left_address_margin_top / $left_address_margin_left come from invoice settings.
   WHEN TO USE: When the user wants to move the left address block using specific measurements. */
.custom_address_table_left {
  top: $left_address_margin_top;
  left: $left_address_margin_left;
  width: 7.5cm;
  position: absolute;
}

/* .small_address
   PURPOSE: Styles the sender's small address line above the customer address.
   EFFECT: 7pt font, centered text, bottom underline, 0.3cm bottom margin.
   WHEN TO USE: When the user wants to style the small sender address above the customer’s. */
.small_address {
  font-size: 7pt;
  text-align: center;
  border-bottom-style: solid;
  border-bottom-color: $text_color;
  border-bottom-width: 1px;
  margin-bottom: 0.3cm;
}

/* .shipping_address
   PURPOSE: Styles the shipping address block.
   EFFECT: Sets font size and top/side margins.
   WHEN TO USE: When the user wants to style the shipping address section. */
.shipping_address {
  font-size: $font_size;
  margin-top: 0.4cm;
  margin-left: 1.2cm;
  margin-right: 1.2cm;
}

/* .title_shipping_address
   PURPOSE: Styles the "Shipping Address" title.
   EFFECT: Bold text, $color_title_total color.
   WHEN TO USE: When the user wants to style the shipping address title text. */
.title_shipping_address {
  font-weight: bold;
  color: $color_title_total;
}

/* .title_text
   PURPOSE: Styles the invoice title.
   EFFECT: Bold text, $font_size_title size, $color_title_total color.
   WHEN TO USE: When the user wants to style the invoice title text. */
.title_text {
  font-size: $font_size_title;
  font-weight: bold;
  color: $color_title_total;
}

/* .section_class_begin
   PURPOSE: Container for the introductory (begin) text after the invoice title.
   EFFECT: Full width with top/side margins.
   WHEN TO USE: When the user wants to change the position or spacing of the intro text section. */
.section_class_begin {
  margin-top: 1.0cm;
  margin-left: 1.2cm;
  margin-right: 1.2cm;
  width: 100%;
}

/* .begin_text_table
   PURPOSE: Table container for the "begin" text.
   EFFECT: Full width.
   WHEN TO USE: When the user wants to style the table of the begin text. */
.begin_text_table {
  width: 100%;
}

/* .begin_text
   PURPOSE: Styles the "begin" text.
   EFFECT: Sets font size.
   WHEN TO USE: When the user wants to change the style of the introductory text. */
.begin_text {
  font-size: $font_size;
}

/* .section_class_details:first-view
   PURPOSE: Applies a specific top margin to the details section on first render only.
   NOTE: :first-view targets the first time the section is displayed.
   WHEN TO USE: When the user wants to change the details section margin only on the first page. */
.section_class_details:first-view {
  margin-top: 0.5cm;
}

/* .section_class_details
   PURPOSE: Styles the invoice details section on all pages.
   EFFECT: Sets font size and outer margins.
   WHEN TO USE: When the user wants to style or adjust margins for the details section. */
.section_class_details {
  font-size: $font_size;
  margin-top: 0.5cm;
  margin-bottom: 0.5cm;
  margin-left: 1.3cm;
  margin-right: 1.2cm;
}

/* .doc_table
   PURPOSE: Table for invoice details.
   EFFECT: Full width.
   WHEN TO USE: When the user wants to style the details table. */
.doc_table {
  width: 100%;
}

/* .doc_table_header
   PURPOSE: Styles the header row of the invoice details table.
   EFFECT: Bold, $font_size_header, custom text/background colors, bottom border.
   WHEN TO USE: When the user wants to style the column headers of the details table. */
.doc_table_header {
  font-size: $font_size_header;
  font-weight: bold;
  color: $text_color_details_header;
  background-color: $background_color_details_header;
  border-bottom: thin solid $color_title_total;
}

/* .doc_table td
   PURPOSE: Sets cell padding for invoice details rows.
   WHEN TO USE: When the user wants to adjust padding inside detail table cells. */
.doc_table td {
  padding-top: 5px;
  padding-bottom: 1px;
  padding-left: 0px;
  padding-right: 0px;
}

/* .doc_table_header td
   PURPOSE: Sets cell padding for the invoice header row.
   WHEN TO USE: When the user wants to adjust header cell padding in the details table. */
.doc_table_header td {
  padding-top: 4px;
  padding-bottom: 2px;
  padding-left: 0px;
  padding-right: 0px;
}

/* .item_cell
   PURPOSE: Define the text style for each invoice item row.
   USAGE: Apply to cells/rows containing individual items.
   NOTE: Empty by default, add font/spacing/color rules as needed.
   WHEN TO USE: When the user wants to style the text of each line item in the details table. */
.item_cell {}

/* .total_cell
   PURPOSE: Styles the total row.
   EFFECT: Bold, $font_size_total, $color_title_total color, double bottom border.
   WHEN TO USE: When the user wants to style the row containing the total amount. */
.total_cell {
  font-size: $font_size_total;
  font-weight: bold;
  color: $color_title_total;
  border-bottom-style: double;
  border-bottom-color: $color_title_total;
  border-bottom-width: 1px;
}

/* .subtotal_cell
   PURPOSE: Styles the subtotal row.
   EFFECT: Bold text, single bottom border in $color_title_total.
   WHEN TO USE: When the user wants to style the subtotal row in the details table. */
.subtotal_cell {
  font-weight: bold;
  border-bottom-style: solid;
  border-bottom-color: $color_title_total;
  border-bottom-width: thin;
}

/* .header_cell
   PURPOSE: Styles any header cell in the invoice details.
   EFFECT: Bold text.
   WHEN TO USE: When the user wants to make any header cell bold in the details section. */
.header_cell {
  font-weight: bold;
}

/* .vat_info
   PURPOSE: Styles VAT-related text.
   EFFECT: Sets font size (used for gross amount layouts).
   WHEN TO USE: When the user wants to style VAT information text. */
.vat_info {
  font-size: $font_size;
}

/* .even_rows_background_color
   PURPOSE: Sets background color for even-numbered rows (striped tables).
   WHEN TO USE: When the user wants alternating row background colors in tables. */
.even_rows_background_color {
  background-color: $background_color_alternate_lines;
}

/* .section_class_final_texts
   PURPOSE: Styles the final notes/greetings section after the details.
   EFFECT: Sets top/side/bottom margins.
   WHEN TO USE: When the user wants to style or adjust spacing for final texts or notes. */
.section_class_final_texts {
  margin-top: 0cm;
  margin-bottom: 0.5cm;
  margin-left: 1.26cm;
  margin-right: 1.0cm;
}

/* .footer_line
   PURPOSE: Horizontal line above the footer section (separator).
   EFFECT: Top border, side margins.
   WHEN TO USE: When the user wants to add or style a separator line above the footer. */
.footer_line {
  margin-left: 1.2cm;
  margin-right: 1.0cm;
  border-top-style: solid;
  border-top-color: $color_title_total;
  border-top-width: thin;
}

/* .footer_table
   PURPOSE: Styles the footer table.
   EFFECT: 8pt font, bottom margin, full width, side margins.
   WHEN TO USE: When the user wants to style the footer section or adjust its spacing. */
.footer_table {
  font-size: 8pt;
  margin-bottom: 2.0cm;
  margin-left: 1.2cm;
  margin-right: 1.0cm;
  width: 100%;
}