/* style-refactored.css */

/* Basic Reset and Font Smoothing */
html {
  line-height: 1.15;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  font-family: 'Poppins', sans-serif; /* Default to Poppins as it's widely used */
  font-size: 16px;
}

body {
  margin: 0;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.15;
  color: #252427; /* Default text color from main content */
  background: #FFFFFF;
  fill: #252427;
}

* {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
}

p, li, ul, pre, div, h1, h2, h3, h4, h5, h6, figure, blockquote, figcaption {
  margin: 0;
  padding: 0;
}

button {
  background-color: transparent;
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  text-transform: none;
  -webkit-appearance: button;
  color: inherit;
}

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focus, [type="button"]:-moz-focus, [type="reset"]:-moz-focus, [type="submit"]:-moz-focus {
  outline: 1px dotted ButtonText;
}

a {
  color: inherit;
  text-decoration: inherit;
}

img {
  display: block;
}

/* Layout Container Styles */
.invoice-wrapper {
  width: 100%;
  display: flex;
  overflow: auto;
  min-height: 100vh;
  align-items: center;       /* Center the sheet vertically */
  justify-content: center;   /* Center the sheet horizontally */
  background-color: #DCDCDC; /* Original background was #FFF, but parent had #DCDCDC */
  padding: 20px 0; /* Add some padding for better viewing */
}

.invoice-sheet {
  width: 595px;
  height: 842px;
  display: flex;
  overflow: hidden;
  flex-shrink: 0;
  background-color: #DCDCDC; /* Changed from #FFFFFF to #DCDCDC */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: Add shadow for better separation */
}

/* Sidebar Styles (Left Green Area) */
.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Pushes top/bottom deco */
  align-items: flex-start; /* Aligns content left */
  width: 130px; /* Fixed width based on deco images */
  flex-shrink: 0;
  background-color: #159102; /* Green background */
  position: relative; /* For positioning QR code */
  padding: 0; /* Reset padding */
}

.sidebar__deco-top {
  width: 130px;
  height: 130px;
}

.sidebar__deco-bottom {
  width: 135px; /* Slightly different from top deco */
  height: 260px;
  z-index: 2; /* Above QR code background */
}

.sidebar__middle-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 65px; /* Gap between details and contact */
  padding: 0 8px; /* Horizontal padding */
  z-index: 1;
  width: 100%; /* Take full width of sidebar */
}

.sidebar__invoice-details {
  display: flex;
  align-items: flex-start;
  gap: 9px; /* Gap between dots and text */
  margin-top: 9px; /* Approx distance from top deco based on original */
}

.sidebar__detail-dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding-top: 4px; /* Align with text */
}

.sidebar__dot {
  width: 4px;
  height: 4px;
  border-radius: 2px;
}

.sidebar__line {
  width: 0px; /* Visually a line due to height */
  height: 28px;
  border-left: 0.5px solid white; /* Using border for the line */
  border-radius: 0.5px;
}

.sidebar__detail-text {
  display: flex;
  flex-direction: column;
  gap: 8px; /* Gap between each detail item */
}

.sidebar__detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar__detail-label,
.sidebar__detail-value,
.sidebar__contact-text {
  font-family: 'Poppins', sans-serif;
  color: #FFFFFF;
  line-height: normal;
  text-align: left;
}

.sidebar__detail-label {
  font-size: 8px;
  font-weight: 400; /* Regular */
}

.sidebar__detail-value {
  font-size: 8px;
  font-weight: 500; /* Medium */
}

.sidebar__divider {
  width: 113px; /* Full width within padding */
  height: 1px;
  background-color: white; /* Assuming the rect was white */
  border-radius: 1px;
}

.sidebar__contact-info {
  display: flex;
  flex-direction: column;
  gap: 4px; /* Gap between contact items */
}

.sidebar__contact-item {
  display: flex;
  align-items: center; /* Center icon with text */
  gap: 8px;
}
.sidebar__contact-item--address {
  align-items: flex-start; /* Align icon to top of address */
}

.sidebar__contact-icon {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.sidebar__contact-text {
  font-size: 7px;
  font-weight: 500; /* Medium */
}

.sidebar__qr-code-area {
  position: absolute;
  bottom: 95px; /* Approximate position based on original layout (842 - 627 - 120) */
  left: 7px;
  width: 119px;
  height: 120px;
  z-index: 3; /* Above bottom deco */
}

.sidebar__qr-bg {
  position: absolute;
  top: 5px;
  left: 4px;
  width: 112px;
  height: 113px;
  border-radius: 13px;
}

.sidebar__qr-code {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 119px;
  height: 120px;
  border-radius: 10px;
}

/* Main Content Styles (Right White Area) */
.main-content {
  flex-grow: 1; /* Takes remaining space */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Pushes footer down */
  padding: 35px 24px 0 0; /* Top, Right padding */
  align-items: flex-end; /* Align content block to right */
}

.main-content__top-section {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* Align children (header, items, summary) */
  gap: 29px; /* Gap between header and items/summary block */
  width: 100%; /* Allow children to take width */
}


/* Invoice Header */
.invoice-header {
  width: 233px; /* Fixed width based on original */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align header content left */
  gap: 13px;
  flex-shrink: 0;
}

.invoice-header__logo-area {
  display: flex; /* Needed for potential alignment if more items */
  width: 100%; /* Take full width */
  justify-content: flex-start; /* Align logo left */
  /* Original frame66 had column/flex-end which seemed off, adjusting */
}

.invoice-header__logo {
  width: 197px;
  height: 20px;
}

.invoice-header__title {
  color: #252427;
  font-family: 'Inter', sans-serif; /* Specific font */
  font-size: 24px;
  font-weight: 700; /* Extra Bold mapped to 700 */
  line-height: normal;
}

.invoice-header__recipient {
  width: 100%; /* Takes width of parent */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden; /* As per original frame272 */
}

.invoice-header__recipient-label {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 400; /* Regular */
  color: #252427;
  line-height: normal;
}

.invoice-header__recipient-name-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px; /* Gap between name and underline */
  width: 100%; /* Allow underline to span */
}

.invoice-header__recipient-name {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 600; /* SemiBold */
  color: #252427;
  line-height: normal;
}

.invoice-header__recipient-underline {
  width: 272px; /* Wider than parent, seems intentional */
  height: 1px;
  background-color: #252427; /* Assuming based on context */
  border-radius: 1px;
}

.invoice-header__recipient-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px; /* Add gap between contact items */
  padding: 4px 0;
}

.invoice-header__recipient-contact-item {
  display: flex;
  align-items: center;
  gap: 6px; /* Space between icon and text */
}

.invoice-header__recipient-icon {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.invoice-header__recipient-address,
.invoice-header__recipient-phone,
.invoice-header__recipient-email,
.invoice-header__recipient-website {
  font-family: 'Poppins', sans-serif;
  font-size: 8px;
  font-weight: 400; /* Regular */
  color: #252427;
  line-height: normal;
}

/* Invoice Items Table */
.invoice-items {
  width: 420px; /* Fixed width */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align rows left */
  flex-shrink: 0;
  /* Removed gap: 35px from frame67 as it seemed too large here */
}

.invoice-items__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* Align items vertically */
  width: 100%;
  padding: 4px 16px;
  border-top: 0.5px solid #159102; /* Green border */
  border-bottom: 0.5px solid #159102; /* Green border */
  gap: 10px; /* Maintain gap from original */
  overflow: hidden;
}

.invoice-items__header-label,
.invoice-items__header-desc {
  font-family: 'Poppins', sans-serif;
  font-size: 9px;
  font-weight: 600; /* SemiBold */
  color: #252427;
  line-height: normal;
}

.invoice-items__header-cols {
  display: flex;
  align-items: flex-start;
  gap: 64px; /* Gap between 'QTY Rate' and 'Amount' */
}

.invoice-items__header-qty-rate {
  display: flex;
  align-items: flex-start;
  gap: 32px; /* Gap between 'Job Cost' and 'QTY Rate' */
}

.invoice-item-row {
  display: flex;
  align-items: flex-start; /* Align content top */
  width: 100%; /* Take full width of parent */
  padding: 8px 16px 4px;
  gap: 10px; /* Consistent gap */
}

.invoice-item-row--shaded {
  background-color: rgba(194, 216, 191, 0.25); /* Light green shading */
}

.invoice-item-row--blank .invoice-item-row__title,
.invoice-item-row--blank .invoice-item-row__detail,
.invoice-item-row--blank .invoice-item-row__value {
    /* Ensure blank row text color matches background or is transparent if needed */
    color: #252427; /* Or inherit/transparent */
}


.invoice-item-row__description {
  width: 151px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
  gap: 2px;
}

.invoice-item-row__cost {
  width: 62px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.invoice-item-row__qty {
  width: 53px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.invoice-item-row__amount {
  width: 89px;
  display: flex;
  justify-content: flex-end; /* Align amount right */
  flex-shrink: 0;
  overflow: hidden;
}

.invoice-item-row__title {
  font-family: 'Poppins', sans-serif;
  font-size: 8px;
  font-weight: 600; /* SemiBold */
  color: #252427;
  line-height: normal;
}

.invoice-item-row__detail {
  font-family: 'Poppins', sans-serif;
  font-size: 8px;
  font-weight: 400; /* Regular */
  color: #252427;
  line-height: normal;
  width: 100%; /* Allow text wrapping */
}

.invoice-item-row__value {
  font-family: 'Poppins', sans-serif;
  font-size: 9px;
  font-weight: 400; /* Regular */
  color: #252427;
  line-height: normal;
  white-space: nowrap; /* Prevent wrapping */
}


/* Invoice Summary (Payment Methods & Totals) */
.invoice-summary {
  width: 420px; /* Match items width */
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* Align tops of payment and totals */
  padding: 0 0 0 16px; /* Left padding only */
  border-top: 1px solid #000000; /* Black border */
  gap: 60px; /* Gap between payment methods and totals */
  margin-top: 12px; /* Replaces gap from frame70 */
}

.invoice-summary__payment-methods {
  /* Takes remaining space after totals */
  flex-grow: 1;
  height: auto; /* Let content determine height */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Space out EFT/Snapscan if needed */
}
.payment-methods__container {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Ensures vertical spacing */
  height: 100%; /* Take full height of the parent */
  padding-top: 12px; /* Add padding from top border */
}


.payment-method {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.payment-method--eft {
  gap: 6px;
  width: 154px; /* Fixed width */
  /* padding: 12px 0; Removed as padding is now on container */
  min-height: 105px; /* Ensure minimum height like original */
}

.payment-method--snapscan {
  gap: 5px;
  width: 135px; /* Fixed width */
}

.payment-method__title { /* 'Payment Methods' heading */
  font-family: 'Poppins', sans-serif;
  font-size: 8px;
  font-weight: 400; /* Regular */
  color: #000000;
  line-height: normal;
}

.payment-method__details { /* Wrapper for EFT details */
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* gap: 12px; Removed from frame63 */
}

.payment-method__type { /* 'EFT' or 'SnapScan' heading */
  font-family: 'Poppins', sans-serif;
  font-size: 7px;
  font-weight: 600; /* SemiBold */
  color: #000000;
  line-height: normal;
}

.payment-method__info {
  font-family: 'Poppins', sans-serif;
  font-size: 8px;
  font-weight: 400; /* Regular */
  color: #000000;
  line-height: normal;
}
/* Snapscan specific styling if needed - was SemiBold 7px originally */
.payment-method--snapscan .payment-method__info {
    font-size: 8px; /* Consistent size */
    font-weight: 400; /* Regular */
    color: #252427; /* Match text color */
    width: 100%; /* Allow wrapping */
}


.invoice-summary__totals {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* Align totals right */
  gap: 22px; /* Gap between breakdown and total due */
  border-bottom: 1px solid #000000; /* Black border */
  padding-bottom: 10px; /* Space above total due */
  flex-shrink: 0; /* Prevent shrinking */
}

.totals__breakdown {
  width: 190px; /* Fixed width */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align labels left */
  padding: 12px 16px;
  border-bottom: 1px solid #252427; /* Border above grand total */
  gap: 4px;
  overflow: hidden;
}

.totals__row {
  display: flex;
  justify-content: space-between; /* Label left, value right */
  width: 100%;
  height: 12px; /* Fixed height */
  align-items: center;
  overflow: hidden;
}

.totals__label,
.totals__value {
  font-family: 'Poppins', sans-serif;
  font-size: 8px;
  font-weight: 400; /* Regular */
  color: #252427;
  line-height: normal;
}

.totals__label--bold,
.totals__value--bold {
  font-weight: 600; /* SemiBold */
}

.totals__due {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align labels left */
  padding: 0 16px;
  gap: 2px;
}

.totals__due-label {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 300; /* Light */
  color: #252427;
  line-height: normal;
}

.totals__due-value {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 500; /* Medium */
  color: #252427;
  line-height: normal;
}

/* Invoice Footer Terms */
.invoice-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align terms left */
  width: 403px; /* Fixed width */
  margin-top: 72px; /* Gap from content above */
  margin-bottom: 20px; /* Add some bottom margin */
}

.invoice-footer__title {
  font-family: 'Poppins', sans-serif;
  font-size: 6px;
  font-weight: 500; /* Medium */
  color: #000000;
  line-height: normal;
}

.invoice-footer__text {
  font-family: 'Poppins', sans-serif;
  font-size: 6px;
  font-weight: 300; /* Light */
  color: #000000;
  line-height: normal;
  text-align: left;
}