.confirm_template_area,
.template_area {
  /* If you need to hide the overall template area, keep it as it is */
  display: none;
}

.custom-form-group {
  margin-bottom: 16px;
}

.custom-form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 16px;
}

.custom-form-group .customContent {
   height: 320px;  
}

.custom-form-group input[type="text"],
.custom-form-group input[type="number"],
.custom-form-group input[type="date"],
.custom-form-group select,
.custom-form-group textarea {
  all: unset;
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-size: 16px;
  border-radius: 12px;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
  margin-bottom: 3px;
  resize: vertical;
}

.custom-form-group input[type="text"]:focus,
.custom-form-group input[type="number"]:focus,
.custom-form-group input[type="date"]:focus,
.custom-form-group select:focus,
.custom-form-group textarea:focus {
  border-color: #4a90e2;
  outline: none;
}

.custom-form-group select {
  height: 36px; /* Regular pull-down height */
  cursor: pointer;
}

.custom-form-group textarea {
  height: 80px; /* Default text field height */
}

.type-1300 textarea {
  height: 40px; /* The special style you gave */
  overflow: hidden;
  padding: 4px;
  margin: 0;
}

.type-5100 .drop-area {
  border: 3px dashed #ccc;
  border-radius: 10px;
  transition: border-color 0.3s;
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.type-5100 .drop-area.highlight {
  border-color: #4a90e2;
  color: #4a90e2;
}

.type-5100 .fileElem {
  display: none;
}

.type-5100 .file-list {
  margin-top: 20px;
  max-width: 600px;
}

.type-5100 .fileSelectBtn {
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: #4a90e2;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  user-select: none;
}

.type-7500 {
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.type-7500 .invoice-header {
  display: flex;
  flex-direction: column;
  position: relative;
}

.type-7500 .main-title {
  text-align: center;       /* The title is centered */
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 30px;      /* Leave some space to avoid text squeezing into the title */
}

.type-7500 .invoice-header .main-title {
  border-bottom: none !important;
}

.type-7500 .document-info {
  display: flex;
  flex-direction: column;   /* Arrange up and down */
  align-items: flex-end;    /* Keep Right */
  gap: 5px;
  margin-top: -25px;        /* Move upwards, close to the bottom of the title */
}

.type-7500 .document-info .info-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.type-7500 .document-info .info-label {
  white-space: nowrap;
  font-size: 14px;
}

.type-7500 .document-info .info-input {
  width: 150px;
  padding: 3px 5px;  
  outline: none;               
}

.type-7500 .invoice-header .text-input-right {
  border: none !important;
  outline: none;
  font-size: 14px;
  text-align: right;
  width: auto;
  padding: 0;
}
.type-7500 .invoice-header .input-title {
  border: none;
  outline: none;
  font-size: 20px;
  text-align: center;
  width: 100%; 
  padding: 0;
}

/* column on the left vertically arranged */
.type-7600 .left-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* gap: 5px; */
}

/* Row wrapper for easy alignment */
.type-7600 .input-group-row,
.type-7700 .input-group-row {
    display: flex;
    align-items: center;
    width: 100%;
}

.type-7600 .prefix, .type-7600 .suffix,
.type-7700 .prefix, .type-7700 .suffix {
    white-space: nowrap;
    font-size: 14px;
}
.type-7600 .suffix,
.type-7700 .suffix {
    margin-left: 5px;
}

/* Bottom line style applied to the group container */
.type-7600 .bottom-line-group,
.type-7700 .bottom-line-group {
    border-bottom: 1px solid #000;
}

/* Inputs */
.type-7600 .left-column input,
.type-7700 input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    padding: 2px 5px;
    box-sizing: border-box;
}

.type-7600 .companyName-input {
    width: 100%;
    flex: 1; /* details grow */
}

.type-7600 .quotation-text-input {
    width: 100%;
}

.type-7600 .subject-input,
.type-7600 .amount-input,
.type-7700 .detail-input {
    flex: 1;
    text-align: left;
}
.type-7600 .amount-input {
    text-align: right; /* Amount right aligned next to suffix */
}

/* Right column */
.type-7600 .right-column {
  flex: 1;
  display: flex;
  flex-direction: column; 
  justify-content: flex-start;
}

/* Textarea on the right side The text is right, on the top, without borders */
.type-7600 .right-column .company-info-textarea {
  border: none;
  outline: none;
  width: 100%;
  text-align: right;
  height: 150px;         /* Higher text box */
  resize: none;
  background: transparent;
}
.type-7600 .right-column .company-info-textarea .text-content {
  text-align: right;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: break-word; /* Ensure wrapping */
  min-height: 100px;
}
/* 7700 Regional Basic Style */
.type-7700 {
  padding: 10px;
}

/* input-row vertical arrangement */
.type-7700 .quotation-details {
  display: flex;
  flex-direction: column;
  gap: 10px; /* Spacing per line */
}

/* detail-label input style */
.type-7700 .quotation-details .input-row .detail-label {
  outline: none;                       /* No outline when clicked */
  padding: 3px 5px;
  font-size: 14px;
  text-align: left;                    /* Text left */
  width: 100%;                         /* Fill the parent container width */
  box-sizing: border-box;
  border-radius: 0;                    /* Remove curved corners */
}

.totals {
  padding: 20px;
}


.detail-table,
.normal-table,
.numbered-table,
.list-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 14px;
}

.detail-table th,
.detail-table td,
.normal-table th,
.normal-table td,
.numbered-table th,
.numbered-table td,
.list-table th,
.list-table td {
  padding: 6px 5px;
  text-align: center;
  vertical-align: middle;
  word-break: break-all;
}

table.numbered-table th:first-child {
  width: 42px;
}
table.numbered-table th:nth-child(2) {
  width: auto; /* Dynamic width */
}
table.numbered-table th:nth-child(5) {
  width: 80px; /* Quantity: small */
}
table.numbered-table th:nth-child(6),
table.numbered-table th:nth-child(7) {
  width: 120px; /* Amount & Tax: wider */
}
table.numbered-table th:last-child {
  width: 100px;
}

.add-col-btn,
.del-col-btn,
.add-row-btn,
.del-row-btn {
  margin-top: 8px;
  padding: 6px 12px;
  font-size: 14px;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.add-col-btn:hover,
.del-col-btn:hover,
.add-row-btn:hover {
  background-color: #357ABD;
}

.unit {
  margin-left: 8px;
  font-size: 14px;
  color: #666;
  user-select: none;
}

input.range-start,
input.range-end {
  width: calc(50% - 10px);
  display: inline-block;
}

input.range-start + .unit,
input.range-end + .unit {
  display: inline-block;
  color: #666;
}

.type-4100 .normal-table-content {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
      }
      .type-4100 .normal-table-content th,
      .type-4100 .normal-table-content td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: center;
      }
      .type-4100 .normal-table-content tr.header {
        background-color: #e0e0e0;
        font-weight: bold;
      }
      .type-4100 .normal-table-content input[type="text"] {
        width: 100%;
        box-sizing: border-box;
        border: none;
        padding: 4px;
        background: transparent;
      }
      .type-4100 .add-row-btn {
        background-color: #007bff; /* Blue */
        color: white;
        border: none;
        padding: 6px 12px;
        border-radius: 4px;
        cursor: pointer;
        margin-top: 8px;
      }
      .type-4100 .del-row-btn {
        background-color: #dc3545; /* Red */
        color: white;
        border: none;
        padding: 6px 12px;
        border-radius: 4px;
        cursor: pointer;
        margin-left: 8px;
        margin-top: 8px;
      }
      .type-4100 button:disabled {
        background-color: #ccc;
        cursor: not-allowed;
      }
      
      /* Moved from createContentV2.ejs */
      .type-4100 .normal-table-content,
      .type-4110 .numbered-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
      }
      .type-4100 .normal-table-content th,
      .type-4100 .normal-table-content td,
      .type-4110 .numbered-table th,
      .type-4110 .numbered-table td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: center;
      }
      .type-4100 .normal-table-content thead tr,
      .type-4110 .numbered-table thead tr {
        font-weight: bold;
        background-color: #e0e0e0;
        
        /* table head color follow selected theme color */
        /* background-color: var(--slack-sidebar-bg, #e0e0e0);
        color: var(--slack-sidebar-text, #333); */
      }
      .type-4100 .normal-table-content input[type="text"],
      .type-4110 .numbered-table input[type="text"],
      .type-4110 .numbered-table input[type="number"],
      .type-4110 .numbered-table select {
        width: 100%;
        box-sizing: border-box;
        border: none;
        padding: 4px;
        background: transparent;
        text-align: center; /* Center text in inputs */
      }
      .type-4100 .normal-table-content input[type="text"]:focus,
      .type-4110 .numbered-table input:focus,
      .type-4110 .numbered-table select:focus {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
      }
      .type-4110 .numbered-table .short-num {
          width: 60px;
          text-align: center; /* Was right, changed to center */
      }
      .type-4110 .totals {
          margin-top: 10px;
          text-align: right;
          font-weight: bold;
      }
      /* Operation buttons */
      .type-4110 .op-btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 24px;
          height: 24px;
          border-radius: 4px;
          border: none;
          cursor: pointer;
          font-weight: bold;
          font-size: 16px;
          margin: 0 2px;
      }
      .type-4110 .op-btn.add {
          background-color: #e6f0ff;
          color: #0056b3;
      }
      .type-4110 .op-btn.del {
          background-color: #ffe6e6;
          color: #c82333;
      }
      .type-4110 .op-client-cell {
        border-top: none !important;
        border-bottom: none !important; 
        border-right: none !important;
        background: transparent !important;
      }
      .type-4110 .numbered-table td:last-child {
          border: none;
          background: transparent;
      }
/* Type 6101: Inline Date Field */
.type-6101 {
  display: flex !important;
  align-items: center;
  gap: 16px; /* Space between label and input */
}
.type-6101 label {
  margin-bottom: 0 !important;
  white-space: nowrap;
  width: auto;
}
.type-6101 input[type="date"] {
  width: auto !important;
  margin-bottom: 0 !important;
}


.theme-light .custom-form-group input[type="text"] {
  background-color: white;
}