/* ===== Resets ===== */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    /* ===== Base ===== */
    body {
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
      font-family: monospace;
      background-color: #f7f7f7;
      margin: 0;
      padding: 18px;
    }

    /* remarks box (prevent overflow into inline container) */
    .terms-notes .remarks {
      box-sizing: border-box;
      max-width: 98%;
    }

    /* ===== Quotation (editor) ===== */
    .quotation-container {
      max-width: 800px;
      margin: auto;
      background-color: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    }

    .quotation-container input[type="text"],
    .quotation-container input[type="number"],
    #quotation-date {
      width: 100%;
      margin-bottom: 10px;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-sizing: border-box;
    }

    /* ===== Quotation Item Card ===== */
    .quotation-item {
      margin-bottom: 20px;
      padding: 15px;
      border: 1px solid #ddd;
      border-radius: 5px;
    }

    .quotation-item h2 {
      margin-top: 0;
      font-size: 20px;
      color: #333;
      text-align: left;
    }

    .quotation-item input[type="text"],
    .quotation-item input[type="number"],
    .quotation-item input[type="file"] {
      width: 100%;
      margin-bottom: 10px;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-sizing: border-box;
    }

    .quotation-item textarea {
      width: 100%;
      height: 80px;
      padding: 12px 20px;
      box-sizing: border-box;
      border: 1px solid #ccc;
      border-radius: 2px;
      background-color: #f8f8f8;
      font-size: 16px;
      resize: none;
    }

    .quotation-item img.item-image {
      max-width: 250px;
      height: auto;
      margin-bottom: 10px;
      display: block;
    }

    .quotation-item button.remove-item-btn {
      padding: 8px 16px;
      background-color: #f44336;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .quotation-item button.remove-item-btn:hover {
      background-color: #d32f2f;
    }

    /* ===== Buttons ===== */
    #add-item-btn,
    #print-btn,
    #generate-image,
    #generate-pdf {
      padding: 10px 20px;
      margin-top: 20px;
      background-color: #4caf50;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    #add-item-btn:hover,
    #print-btn:hover {
      background-color: #45a049;
    }

    #save-btn {
      padding: 10px 20px;
      margin-top: 20px;
      background-color: #2196f3;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    #save-btn:hover {
      background-color: #0b7dda;
    }

    #load-btn {
      width: 25%;
      padding: 10px 10px;
      margin-top: 20px;
      color: #000;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    #load-btn:hover {
      background-color: #45a049;
    }

    /* ===== Preview Container ===== */
    .container {
      display: none;
      font-family: monospace;
      font-size: 14px;
      color: #333;
      text-align: right;
      margin-bottom: 5px;
    }

    .container .header {
      text-align: left;
      margin-bottom: 5px;
      font-size: 14px;
      overflow: hidden;
    }

    .left-header {
      width: 100%;
      float: left;
      text-align: left;
      word-wrap: break-word;
    }

    .right-header {
      width: 0%;
      float: right;
      text-align: right;
    }

    .right-header img {
      display: block;
      max-width: 100%;
      height: auto;
    }

    /* ===== Table ===== */
    table {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
      margin-bottom: 20px;
    }

    th,
    td {
      border: 1px solid #000;
      padding: 8px;
      text-align: center;
      font-weight: normal;
      word-wrap: break-word;
      white-space: pre-wrap;
    }

    th {
      background-color: #c6a47e;
    }

    /* ===== Sub-footer (two columns) ===== */
    .sub-footer {
      overflow: hidden;
    }

    /* clear floats */
    .terms-notes {
      float: left;
      width: 50%;
      text-align: left;
    }

    .contact-info {
      font-family: monospace;
    }

    .sub-footer .inline-container table {
      width: 50%;
      border-collapse: collapse;
      align: right;
      empty-cells: hide;
    }

    .sub-footer .inline-container td {
      padding: 5px;
      border: 1px solid #000;
      text-align: right;
    }

    .sub-footer .inline-container tr:has(td:empty) {
      display: none;
    }

    .sub-footer .inline-container td:first-child {
      width: 50%;
      background-color: #c6a47e;
      text-align: right;
    }

    .sub-footer .inline-container h3 {
      display: inline-block;
      margin-right: 10px;
    }

    /* ===== Inline container / notes ===== */
    .inline-container {
      position: relative;
    }

    .notes-container {
      font-size: 10px;
      float: right;
      position: static;
      top: 0;
      right: 0;
      width: 100%;
      text-align: left;
      max-width: 50%;
      word-wrap: break-word;
    }

    /* ===== Misc ===== */
    hr {
      border: 1px solid #000;
      margin: 20px 0;
    }

    .footer {
      margin-top: 20px;
      overflow: hidden;
    }

    .left-footer {
      width: 66%;
      float: left;
      text-align: left;
    }

    .right-footer {
      width: 34%;
      float: left;
    }

    .right-footer img,
    .right-footer p {
      display: inline-block;
      text-align: right;
    }

    /* ===== Print ===== */
    @media print {
      body {
        background-color: #fff;
        padding: 0;
      }

      .quotation-container {
        margin: auto;
        padding: 20px;
        border-radius: 0;
        box-shadow: none;
      }

      /* item sizing in print */
      .quotation-item {
        margin-bottom: 20px;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
        display: block !important;
        width: 100% !important;
      }

      .quotation-item h2 {
        font-size: 18px;
      }

      .quotation-item img.item-image {
        max-width: 100%;
        max-height: 120px;
      }

      #quotation-items {
        display: block !important;
      }

      /* hide UI controls in print */
      #add-item-btn,
      #print-btn,
      .quotation-item input[type="file"],
      .quotation-item button.remove-item-btn,
      .quotation-container {
        display: none;
      }

      /* preview container rules for print */
      .container {
        display: none;
        font-family: monospace;
        font-size: 14px;
        color: #333;
        text-align: right;
        margin-bottom: 5px;
      }

      .container .header {
        text-align: left;
        margin-bottom: 5px;
        font-size: 14px;
        overflow: hidden;
      }

      .left-header {
        width: 100%;
        float: left;
        text-align: left;
        word-wrap: break-word;
      }

      .right-header {
        width: 100%;
        float: right;
        text-align: right;
      }

      .right-header img {
        display: block;
        max-width: 100%;
        height: auto;
      }

      /* sub-footer */
      .sub-footer {
        overflow: hidden;
      }

      .terms-notes {
        float: left;
        width: 50%;
        text-align: left;
      }

      .contact-info {
        font-family: monospace;
      }

      .sub-footer .inline-container table {
        width: 50%;
        border-collapse: collapse;
        align: right;
        empty-cells: hide;
      }

      .sub-footer .inline-container td {
        padding: 5px;
        border: 1px solid #000;
        text-align: right;
        font-weight: bold;
      }

      .sub-footer .inline-container tr:has(td:empty) {
        display: none;
      }

      .sub-footer .inline-container td:first-child {
        width: 50%;
        background-color: #f0ebe5;
        font-weight: bold;
        text-align: right;
      }

      .sub-footer .inline-container h3 {
        display: inline-block;
        margin-right: 10px;
      }

      /* table */
      table {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
        margin-bottom: 20px;
      }

      th,
      td {
        border: 1px solid #000;
        padding: 8px;
        font-size: 14px;
        font-weight: normal;
        text-align: center;
        word-wrap: break-word;
        white-space: pre-wrap;
      }

      th {
        background-color: #f0ebe5;
      }

      /* inline container / notes in print */
      .inline-container {
        position: relative;
      }

      .notes-container {
        font-size: 13px;
        float: right;
        position: static;
        top: 0;
        right: 0;
        width: 100%;
        text-align: left;
        max-width: 50%;
        word-wrap: break-word;
      }

      /* misc */
      hr {
        border: 1px solid #000;
        margin: 20px 0;
      }

      .footer {
        margin-top: 20px;
        overflow: hidden;
      }

      .left-footer {
        width: 66%;
        float: left;
        text-align: left;
      }

      .right-footer {
        width: 34%;
        float: left;
      }

      .right-footer img,
      .right-footer p {
        display: inline-block;
        text-align: right;
      }

      /* layout for printed items */
      #quotation-items {
        display: flex;
        flex-wrap: wrap;
      }

      .quotation-item {
        display: inline-block;
        vertical-align: top;
      }
    }