$primary-color: #1a365d;
$secondary-color: #2b6cb0;
$border-color: #cbd5e0;
$bg-light: #f7fafc;

.quotation-report-toolbar {
  max-width: 1000px;
  margin: 0 auto 12px;
  display: flex;
  justify-content: flex-end;
}

.quotation-report-pdf-button {
  border: 0;
  border-radius: 4px;
  padding: 9px 16px;
  background: $primary-color;
  color: #fff;
  font-weight: 700;
  cursor: pointer;

  &:disabled {
    cursor: not-allowed;
    opacity: .65;
  }
}

.quotation-report-container {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #2d3748;
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  position: relative;
  isolation: isolate;

  .quotation-background-watermark {
    /* Keep the watermark centered in the open report view, including while
       the user scrolls through long attachment/comment content. */
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(38vw, 420px);
    max-width: calc(100vw - 60px);
    height: auto;
    z-index: 1;
    pointer-events: none;
    opacity: 0.1;
    transform: translate(-50%, -50%);
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .quotation-watermark {
    display: block;
    width: min(38%, 260px);
    max-width: 100%;
    height: auto;
    margin: 0 auto 24px;
    pointer-events: none;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  > :not(.quotation-background-watermark) {
    position: relative;
    z-index: 2;
  }

  /* Corporate Header styling */
  .corporate-header {
    border-bottom: 3px double $primary-color;
    padding-bottom: 20px;
    margin-bottom: 25px;

    .header-top-grid {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 20px;
    }

    .vendor-identity-card {
      flex: 1;

      .vendor-title-branding {
        font-size: 28px;
        color: $primary-color;
        font-weight: 800;
        margin: 0 0 10px 0;
        letter-spacing: 0.5px;
      }

      .vendor-address-details {
        font-size: 13px;
        color: #4a5568;
        line-height: 1.5;

        .address-line {
          margin: 0 0 8px 0;
          font-weight: 500;
        }

        .contact-details-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 4px 15px;
          
          p {
            margin: 0;
            strong {
              color: #1a202c;
            }
          }
        }
      }
    }

    .document-meta-card {
      min-width: 280px;
      text-align: right;

      .doc-display-type-badge {
        font-size: 22px;
        font-weight: 700;
        color: $primary-color;
        letter-spacing: 1px;
        margin-bottom: 15px;
      }

      .meta-data-table {
        width: 100%;
        font-size: 13px;
        border-collapse: collapse;

        td {
          padding: 4px 0;
          border: none;
        }

        .meta-label {
          color: #718096;
          text-align: left;
          font-weight: 600;
        }

        .meta-value {
          text-align: right;
          font-weight: 700;
          color: #2d3748;

          &.highlight {
            color: $secondary-color;
          }
        }
      }
    }
  }

  /* Recipient details */
  .recipient-subject-block {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 20px;

    .recipient-card {
      flex: 1.2;
      background: $bg-light;
      padding: 15px;
      border-radius: 4px;
      border: 1px solid #e2e8f0;

      .salutation-text {
        font-size: 14px;
        font-weight: 600;
        color: #718096;
      }

      .client-company-name {
        font-size: 18px;
        color: #1a202c;
        margin: 5px 0;
        font-weight: 700;
      }

      .client-sub-details {
        font-size: 13px;
        line-height: 1.4;
        color: #4a5568;
      }

      .attention-row {
        margin-top: 10px;
        font-size: 12px;
        font-weight: 700;
        border-top: 1px dashed #cbd5e0;
        padding-top: 8px;

        // .label { color: #e53e3e; text-transform: uppercase; margin-right: 5px;}
        // .value { color: #2d3748; }
      }
    }
  }

  /* Style wrapper for decoded HTML comments and images */
.comment-body {
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;

  div {
    width: 100%;
  }

  img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 15px auto;
    border: 1px solid #eaeaea;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }
}

  /* Pricing Grid Table */
  .table-section-wrapper {
    margin-bottom: 30px;

    .report-data-matrix {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;

      th {
        background-color: $primary-color;
        color: #ffffff;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 11px;
        padding: 10px 12px;
        border: 1px solid $primary-color;
      }

      td {
        padding: 12px;
        border: 1px solid $border-color;
        vertical-align: middle;
      }

      /* Integrated Table Header Row Styling */
      .table-subheader-banner-row {
        .machinery-banner-cell {
          background-color: #fffdf5;
          border: 1px solid $border-color;
          border-bottom: 2px solid $primary-color;
          padding: 14px 16px;
        }

        .machinery-banner-inline {
          display: flex;
          flex-direction: column;
          gap: 4px;
          text-align: left;

          .banner-title {
            font-size: 15px;
            font-weight: 900; /* Extra bold text styling */
            color: #975a16;
            letter-spacing: 0.8px;
            text-transform: uppercase;
          }
          
          .banner-subtitle {
            font-size: 13.5px;
            font-weight: 700; /* Distinctly bold secondary layout */
            color: #744210;
            letter-spacing: 0.3px;
          }
        }
      }

      .parent-row {
        background-color: #ffffff;
        &:hover {
          background-color: #fcfcfc;
        }
      }

      .primary-item-cell {
        .primary-item-name {
          font-size: 14px;
          color: #1a202c;
        }

        .material-comment {
          margin-top: 6px;
          padding-top: 6px;
          border-top: 1px solid #e2e8f0;
          font-size: 12px;
          font-weight: 400;
          line-height: 1.5;
          color: #4a5568;
          white-space: normal;
          overflow-wrap: anywhere;
        }

        .secondary-item-desc {
          font-size: 11px;
          color: #718096;
          margin-top: 3px;
        }
      }

      /* Alignment utility classes */
      .text-center { text-align: center; }
      .text-left { text-align: left; }
      .text-right { text-align: right; }

      .font-tabular {
        font-family: Courier, Monaco, monospace;
        font-weight: 600;
      }

      .highlight-total {
        font-weight: 700;
        color: #1a202c;
      }

      /* Nested Technical spec structure */
      .nested-specs-row {
        background-color: #fcfcfc;

        .nested-specs-container {
          padding: 0 15px 15px 15px;
          border-top: none;
        }

        .technical-spec-block {
          background: #ffffff;
          border: 1px solid #e2e8f0;
          border-radius: 4px;
          padding: 12px;
          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);

          .specs-title {
            margin: 0 0 10px 0;
            font-size: 12px;
            color: $secondary-color;
            font-weight: 700;
            text-transform: uppercase;
            border-bottom: 1px solid #edf2f7;
            padding-bottom: 4px;
          }

          .specs-mini-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 11px;

            th {
              background-color: #edf2f7;
              color: #4a5568;
              font-weight: 700;
              padding: 6px 8px;
              border: 1px solid #e2e8f0;
            }

            td {
              padding: 6px 8px;
              border: 1px solid #edf2f7;
            }

            .spec-desc {
              font-size: 10px;
              color: #a0aec0;
              margin-top: 2px;
            }
          }
        }
      }
    }

    .fallback-empty-msg {
      text-align: center;
      padding: 30px;
      color: #718096;
      border: 1px dashed $border-color;
      background: $bg-light;
      border-radius: 4px;
    }
  }

  /* Footer Details and Sign-off block */
  .summary-financial-footer {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 35px;
    border-top: 2px solid $primary-color;
    padding-top: 15px;

    .left-terms-clauses {
      flex: 1.2;

      .terms-wrapper {
        .terms-caption {
          font-size: 13px;
          color: $primary-color;
          margin: 0 0 8px 0;
          font-weight: 700;
        }
        .terms-content-body {
          font-size: 12px;
          color: #4a5568;
          line-height: 1.6;
        }
      }
    }

    .right-totals-ledger {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 6px;

      .ledger-row {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        color: #4a5568;

        .ledger-label {
          font-weight: 600;
        }
        .ledger-value {
          font-family: Courier, Monaco, monospace;
          font-weight: 600;
        }

        &.grand-total-row {
          border-top: 1px solid #cbd5e0;
          border-bottom: 3px double $primary-color;
          padding: 8px 0;
          font-size: 16px;
          color: $primary-color;
          font-weight: 800;

          .ledger-value {
            font-weight: 800;
          }
        }
      }
    }
  }

  .corporate-signoff-block {
    display: flex;
    justify-content: flex-end;
    margin-top: 40px;

    .signature-seal-area {
      text-align: center;
      width: 320px;

      .salutation-signoff {
        font-size: 12px;
        margin: 0;
        color: #4a5568;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .blank-signature-line-spacing {
        height: 70px;
      }

      .signatory-name {
        font-size: 14px;
        color: #1a202c;
        margin: 0 0 3px 0;
      }

      .signatory-title {
        font-size: 11px;
        color: #718096;
        margin: 0;
        text-transform: uppercase;
      }
    }
  }

  /* Loading Spanning Elements */
  .report-state-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 14px;

    &.context-loading {
      background-color: #ebf8ff;
      border: 1px solid #bee3f8;
      color: #2b6cb0;
    }

    &.context-error {
      background-color: #fff5f5;
      border: 1px solid #fed7d7;
      color: #c53030;
    }

    .spinner {
      width: 20px;
      height: 20px;
      border: 3px solid rgba(43, 108, 176, 0.3);
      border-radius: 50%;
      border-top-color: #2b6cb0;
      animation: spin 1s ease-in-out infinite;
    }
  }
}

@media print {
  .quotation-report-container .quotation-background-watermark {
    /* An image (rather than a CSS background) prints even when the browser's
       “print backgrounds” setting is off. Fixed positioning repeats it per page. */
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(52%, 420px);
    max-width: calc(100% - 60px);
    z-index: 3;
    opacity: 0.12;
    transform: translate(-50%, -50%);
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* [innerHTML] content is created at runtime, therefore ::ng-deep is needed
   for these layout rules to reach the rich-text elements inside the comment. */
:host ::ng-deep .attachment-media-frame {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

:host ::ng-deep .comment-text-frame {
  width: 100%;
  max-width: 100%;
  margin-top: 16px;
  text-align: left;
}

:host ::ng-deep .comment-rich-content {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
}

:host ::ng-deep .comment-rich-content img,
:host ::ng-deep .comment-rich-content video,
:host ::ng-deep .comment-rich-content iframe {
  display: block;
  max-width: 100% !important;
  height: auto !important;
  margin: 12px auto;
}

:host ::ng-deep .comment-rich-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

:host ::ng-deep .comment-rich-content th,
:host ::ng-deep .comment-rich-content td {
  overflow-wrap: anywhere;
}


/* Updated Style wrapper for handling both visual attachment elements and text blocks */
  .comment-body {
    width: 100%;
    margin-top: 10px;
    display: flex;
    flex-direction: column; 
    justify-content: flex-start;
    align-items: center;

    .attachment-media-frame, .comment-text-frame {
      width: 100%;
    }

    img {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 15px auto;
      border: 1px solid #eaeaea;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
  }