/* ../styles/create_quotation.css */
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap");
/* Inherits from dashboard.css, add specific overrides and new styles */
.card {
  margin-bottom: 25px;
}

.card-header h2 {
  font-size: 1.1em; /* Slightly smaller for sub-sections */
}

.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}
.form-row .form-group {
  flex: 1;
}
.form-group {
  margin-bottom: 15px;
}
.form-group:last-child {
  /* For single items in a conceptual row */
  margin-bottom: 0;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 0.9em;
}
.required-asterisk {
  color: red;
  margin-left: 2px;
}

.form-control {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 0.95em;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
textarea.form-control {
  resize: vertical;
  min-height: 40px; /* For single row textareas */
}

/* Items Table Styling */
.items-table {
  margin-top: 10px;
}
.items-table th,
.items-table td {
  vertical-align: middle;
  padding: 8px;
}
.items-table thead th {
  font-size: 0.85em;
  background-color: #f8f9fa;
}
.items-table tbody td {
  padding-top: 8px;
  padding-bottom: 8px;
}
.items-table .form-control {
  font-size: 0.9em;
  padding: 6px 8px;
}
.items-table textarea.form-control {
  min-height: 34px; /* For item description textarea */
}
.item-number {
  font-weight: bold;
  color: #6c757d;
}
.item-total-display {
  font-weight: 500;
  white-space: nowrap;
}

.delete-item-row {
  color: #dc3545;
}
.delete-item-row:hover {
  color: #a71d2a;
}

/* Totals Section */
.items-table tfoot td {
  font-weight: 500;
  padding-top: 10px;
  padding-bottom: 10px;
}
.items-table tfoot #quotation-grand-total {
  font-size: 1.2em;
  color: #007bff;
}

/* Form Actions Footer */
.form-actions-footer {
  margin-top: 25px;
  padding: 20px;
  background-color: #f8f9fa;
  border-top: 1px solid #e0e0e0;
  border-radius: 0 0 8px 8px; /* If cards have radius */
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* General Button Styling (apply to both <button> and <a>) */
.btn {
  display: inline-flex; /* Important for alignment of icon and text */
  align-items: center;
  justify-content: center;
  gap: 8px; /* Space between icon and text */
  padding: 10px 15px;
  font-size: 0.95em;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-decoration: none; /* Remove underline from <a> tags */
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent; /* Base border */
  border-radius: 0.25rem; /* Standard border radius */
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  white-space: nowrap; /* Prevent text wrapping */
}

/* Prevent focus outline if you prefer custom focus styles */
.btn:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Example focus, adjust color */
}

/* Disabled state for buttons */
.btn:disabled,
.btn.disabled {
  /* Add a .disabled class for <a> tags */
  opacity: 0.65;
  pointer-events: none; /* Make unclickable */
}

/* Primary Button Style */
.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}
.btn-primary:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}
.btn-primary:focus,
.btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

/* Secondary Button Style */
.btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}
.btn-secondary:hover {
  color: #fff;
  background-color: #5a6268;
  border-color: #545b62;
}
.btn-secondary:focus,
.btn-secondary.focus {
  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}

/* Success Button Style */
.btn-success {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}
.btn-success:hover {
  color: #fff;
  background-color: #218838;
  border-color: #1e7e34;
}
.btn-success:focus,
.btn-success.focus {
  box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
}

/* Info Button Style */
.btn-info {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}
.btn-info:hover {
  color: #fff;
  background-color: #138496;
  border-color: #117a8b;
}
.btn-info:focus,
.btn-info.focus {
  box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
}

/* Danger Button Style */
.btn-danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}
.btn-danger:hover {
  color: #fff;
  background-color: #c82333;
  border-color: #bd2130;
}
.btn-danger:focus,
.btn-danger.focus {
  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
}

/* Add any other button variants (e.g., .btn-warning, .btn-light, .btn-dark) here */

/* Small button variant */
.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875em; /* Adjust if .btn font-size changes */
  line-height: 1.5;
  border-radius: 0.2rem;
}

/* For select next to input in totals */
#quotation-discount-type,
#quotation-tax-percentage,
#quotation-discount-value {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
}
#quotation-discount-type {
  width: auto;
  padding: 8px; /* Match form-control a bit */
}
#quotation-discount-value,
#quotation-tax-percentage {
  width: 100px; /* Adjust as needed */
}

/* In ../styles/dashboard.css or your relevant CSS file */

.page-header {
  display: flex; /* Enables Flexbox */
  justify-content: space-between; /* Puts space between the h1 and the button */
  align-items: center; /* Vertically aligns items in the middle */
  margin-bottom: 20px; /* Or your desired bottom margin */
  padding-bottom: 15px; /* Optional: if you want a line or more space below */
  border-bottom: 1px solid #e9ecef; /* Optional: a subtle separator line */
}

.page-header h1 {
  margin: 0; /* Remove default h1 margin to help with alignment */
  font-size: 1.8em; /* Or your desired font size */
  color: #343a40; /* Example heading color */
}

/* ../styles/create_quotation.css */

/* ... (all previous styles from create_quotation.css) ... */

/* Styles for the Select Items Modal */
#catalog-items-list .catalog-item {
  display: flex;
  align-items: center;
  padding: 8px 5px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer; /* Make the whole item clickable for the checkbox */
}
#catalog-items-list .catalog-item:last-child {
  border-bottom: none;
}
#catalog-items-list .catalog-item:hover {
  background-color: #f8f9fa;
}
#catalog-items-list .catalog-item input[type="checkbox"] {
  margin-right: 10px;
  transform: scale(1.2); /* Slightly larger checkbox */
}
#catalog-items-list .catalog-item label {
  margin-bottom: 0; /* Override default label margin */
  font-weight: normal; /* Override default label weight */
  flex-grow: 1; /* Allow label to take available space */
  cursor: pointer;
}

/* === General Modal Styling (Crucial for Positioning) === */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place even when scrolling */
  z-index: 1050; /* Sit on top of other content (ensure higher than sidebar if sidebar is fixed) */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden; /* Prevent scroll on body, modal-body will scroll if needed */
  background-color: rgba(0, 0, 0, 0.5); /* Dim background */
  /* Removed padding-top, flexbox will handle centering */
}

.modal.active {
  display: flex; /* Use flexbox to center the modal-content */
  align-items: center; /* Vertically center */
  justify-content: center; /* Horizontally center */
}

.modal-content {
  background-color: #fefefe;
  margin: auto; /* Works with flex centering, good fallback */
  padding: 0; /* Header/body/footer will handle their own padding */
  border: 1px solid #ccc; /* Softer border */
  width: 60%; /* Default width, can be overridden by .large */
  max-width: 600px; /* Default max-width */
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  animation: slideIn 0.3s ease-out; /* Optional: slide-in animation */
  display: flex; /* Allow modal-header, modal-body, modal-footer to stack vertically */
  flex-direction: column;
  max-height: 90vh; /* Prevent modal from being taller than viewport */
}

/* Optional slide-in animation */
@keyframes slideIn {
  from {
    transform: translateY(-50px); /* Start slightly above */
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-header {
  padding: 15px 20px;
  background-color: #007bff; /* Or your theme color */
  color: white;
  border-bottom: 1px solid #dee2e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top-left-radius: 7px; /* Match .modal-content radius */
  border-top-right-radius: 7px;
  flex-shrink: 0; /* Prevent shrinking */
}

.modal-header h2 {
  margin: 0;
  font-size: 1.3em;
}

.close-modal {
  color: white;
  opacity: 0.8;
  float: right; /* Traditional, but flex in header handles it */
  font-size: 28px;
  font-weight: bold;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
}
.close-modal:hover,
.close-modal:focus {
  color: #fff;
  opacity: 1;
  text-decoration: none;
}

.modal-body {
  padding: 20px;
  overflow-y: auto; /* Allow modal body to scroll if content is too long */
  flex-grow: 1; /* Allows body to expand and fill available space */
}

.modal-footer {
  padding: 15px 20px;
  border-top: 1px solid #e9ecef;
  display: flex;
  justify-content: flex-end; /* Align buttons to the right */
  gap: 10px;
  background-color: #f8f9fa; /* Light background for footer */
  border-bottom-left-radius: 7px; /* Match .modal-content radius */
  border-bottom-right-radius: 7px;
  flex-shrink: 0; /* Prevent shrinking */
}

/* === End of General Modal Styling === */

/* Your existing styles for create_quotation.css can follow or be in their own file */
/* For example: */
.modal.large .modal-content {
  width: 85%; /* This will override the default width: 60% */
  max-width: 1000px; /* This will override the default max-width: 600px */
}

#catalog-items-list .catalog-item {
  display: flex;
  align-items: center;
  padding: 8px 5px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}
#catalog-items-list .catalog-item:last-child {
  border-bottom: none;
}
#catalog-items-list .catalog-item:hover {
  background-color: #f8f9fa;
}
#catalog-items-list .catalog-item input[type="checkbox"] {
  margin-right: 10px;
  transform: scale(1.2);
}
#catalog-items-list .catalog-item label {
  margin-bottom: 0;
  font-weight: normal;
  flex-grow: 1;
  cursor: pointer;
}

/* ../styles/create_quotation.css */

/* ... (all previous styles) ... */

/* Styles for the new item row structure */
.item-content-cell {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

.item-main-info {
  display: flex;
  flex-wrap: wrap; /* Allow qty/price to wrap if needed */
  gap: 15px;
  margin-bottom: 15px;
  align-items: flex-end; /* Align form groups at their bottom */
}

.item-name-group {
  flex: 1 1 100%; /* Take full width initially */
}
@media (min-width: 768px) {
  /* On larger screens, allow more flexible layout */
  .item-name-group {
    flex: 1 1 40%; /* Example: Name takes ~40% */
  }
}

.item-qty-price {
  display: flex;
  gap: 10px;
  flex: 1 1 auto; /* Allow this group to grow and shrink */
  align-items: flex-end;
}
.item-qty-price .form-group {
  flex: 1;
  margin-bottom: 0; /* Remove bottom margin as they are aligned by flex-end */
}
.item-qty-price .form-group input[type="number"] {
  min-width: 80px; /* Ensure number inputs have some width */
}
.item-total-display.form-control {
  /* Style the readonly total like other inputs */
  background-color: #e9ecef;
  opacity: 1;
  cursor: default;
}

.item-custom-fields-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
}
.item-custom-fields-header strong {
  font-size: 0.9em;
  color: #333;
}

.btn-xs {
  /* Extra small button */
  padding: 0.2rem 0.4rem;
  font-size: 0.75em;
}
.btn-outline-primary {
  color: #007bff;
  border-color: #007bff;
  background-color: transparent;
}
.btn-outline-primary:hover {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.item-key-value-fields .key-value-pair {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.item-key-value-fields .key-value-pair .form-group {
  margin-bottom: 0; /* Handled by parent gap */
  flex-grow: 1;
}
.item-key-value-fields .key-value-pair .form-group:first-child {
  flex-basis: 40%; /* Key input takes less space */
}
.item-key-value-fields .key-value-pair .form-group:nth-child(2) {
  flex-basis: 55%; /* Value input takes more */
}

.delete-custom-field-btn {
  color: #6c757d;
  padding: 5px; /* Make it a bit easier to click */
  line-height: 1; /* Ensure icon aligns well */
  margin-left: 5px; /* Space from value input */
}
.delete-custom-field-btn:hover {
  color: #dc3545;
}

/* Adjust tfoot colspan and text alignment */
.items-table tfoot td[colspan="1"] {
  /* Updated from colspan="4" or colspan="5" */
  text-align: right;
}
.items-table tfoot input[type="number"].form-control {
  width: 80px !important; /* More specific for tfoot inputs */
  display: inline-block !important;
  margin-left: 5px;
}
.items-table tfoot select {
  width: auto !important;
  display: inline-block !important;
  padding: 8px !important; /* Ensure consistent padding */
}

.items-table tbody tr.item-row {
  border-bottom: 1px solid #e0e0e0; /* Separator for rows */
}
.items-table tbody tr.item-row:last-child {
  border-bottom: none;
}

.items-table td.item-content-cell {
  padding: 15px 12px !important; /* Consistent padding within the main cell */
}

/* Item Number Styling */
.items-table .item-number {
  font-size: 1.1em;
  font-weight: bold;
  color: #495057;
  padding-right: 5px; /* Space from the cell border */
}

.form-control[readonly] {
  background-color: #e9ecef; /* Standard Bootstrap readonly/disabled background color */
  opacity: 1; /* Ensure text is fully visible */
  cursor: not-allowed; /* Indicate that the field cannot be changed */
}

/* Main Item Information (Name, Qty, Price) */
.item-main-info {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 20px; /* row-gap column-gap */
  margin-bottom: 20px; /* Space before custom fields */
  align-items: flex-start; /* Align items to the top of their container */
}

.item-name-group {
  flex: 1 1 100%; /* Full width on small screens */
  min-width: 250px; /* Minimum width before wrapping for the name input itself */
}

.item-name-group label {
  font-weight: 600; /* Make item name label slightly bolder */
  margin-bottom: 4px;
}
.item-name-group .form-control.item-name {
  font-size: 1em; /* Slightly larger font for the item name */
  font-weight: 500;
  background-color: #f8f9fa; /* Subtle background for readonly field */
}

.item-qty-price {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping on very small screens */
  gap: 10px 15px; /* row-gap column-gap */
  flex: 1 1 auto; /* Allow this group to grow */
  align-items: flex-start; /* Align labels with inputs */
}
.item-qty-price .form-group {
  flex: 1 1 auto; /* Allow individual groups to grow/shrink */
  min-width: 100px; /* Minimum width for each qty/price/total input group */
  margin-bottom: 0;
}
.item-qty-price .form-group label {
  font-size: 0.85em;
  margin-bottom: 4px;
}
.item-qty-price .form-group input[type="number"],
.item-qty-price .form-group input[type="text"].item-total-display {
  padding: 8px 10px; /* Adjust padding for better fit */
}

.item-total-display.form-control {
  font-weight: bold;
  background-color: #e9ecef; /* Standard readonly background */
  color: #28a745; /* Green color for total */
}

/* Custom Fields Section Styling */
.item-custom-fields-section {
  /* Optional: Wrap header and fields for better styling/spacing */
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #ced4da; /* Visual separator */
}

.item-custom-fields-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  /* padding-bottom: 8px; */ /* Removed border, using section border now */
  /* border-bottom: 1px solid #eee; */
}
.item-custom-fields-header strong {
  font-size: 0.95em;
  color: #343a40;
  font-weight: 600;
}
.item-custom-fields-header .btn.add-custom-field-btn {
  font-size: 0.85em; /* Ensure button text isn't too large */
}

.item-key-value-fields .key-value-pair {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping on small screens */
  align-items: flex-start; /* Align tops of inputs */
  gap: 10px;
  padding: 10px;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  margin-bottom: 10px;
  background-color: #fdfdfd;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}
.item-key-value-fields .key-value-pair:last-child {
  margin-bottom: 0;
}

.item-key-value-fields .key-value-pair .form-group {
  margin-bottom: 0;
  flex-grow: 1;
}
.item-key-value-fields .key-value-pair .form-group:first-child {
  /* Key input */
  flex-basis: 35%;
  min-width: 150px; /* Min width for key input */
}
.item-key-value-fields .key-value-pair .form-group:nth-child(2) {
  /* Value input */
  flex-basis: 50%;
  min-width: 200px; /* Min width for value input */
}
.item-key-value-fields .key-value-pair .custom-field-key::placeholder,
.item-key-value-fields .key-value-pair .custom-field-value::placeholder {
  font-size: 0.85em;
}

.delete-custom-field-btn {
  color: #6c757d;
  background-color: transparent;
  border: 1px solid transparent; /* For consistent sizing */
  border-radius: 0.25rem;
  padding: 6px 8px; /* Make click target slightly larger */
  line-height: 1;
  margin-left: auto; /* Push to the right if flex container allows */
  align-self: center; /* Center vertically within the key-value-pair */
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
.delete-custom-field-btn:hover {
  color: #dc3545;
  background-color: #f8f9fa; /* Slight background on hover */
}
.delete-custom-field-btn i {
  font-size: 0.9em;
}

/* Action buttons in table rows (e.g., delete item row) */
.items-table .btn-icon {
  padding: 6px 8px;
  font-size: 1em; /* Ensure icon is a good size */
  line-height: 1;
  background-color: transparent;
  border: none;
}
.delete-item-row {
  color: #dc3545;
}
.delete-item-row:hover {
  color: #bd2130;
  background-color: #fef2f2; /* Light red background on hover */
}

/* Responsive adjustments for item rows */
@media (max-width: 767px) {
  .item-main-info {
    gap: 10px; /* Reduce gap on smaller screens */
  }
  .item-name-group {
    flex-basis: 100%; /* Ensure name takes full width before qty/price block */
  }
  .item-qty-price {
    flex-basis: 100%; /* Qty/price block also takes full width */
    gap: 10px;
  }
  .item-qty-price .form-group {
    min-width: 80px; /* Allow them to be smaller */
  }

  .item-key-value-fields .key-value-pair {
    flex-direction: column; /* Stack key, value, and delete button */
    align-items: stretch; /* Make inputs full width */
    gap: 8px;
  }
  .item-key-value-fields .key-value-pair .form-group {
    flex-basis: auto !important; /* Reset flex-basis */
    width: 100%;
  }
  .delete-custom-field-btn {
    align-self: flex-end; /* Position delete button to the right when stacked */
    margin-left: 0;
    margin-top: 5px;
  }
}

/* Styling for the add custom detail button within the row */
.btn-xs {
  padding: 0.2rem 0.4rem;
  font-size: 0.75em;
  line-height: 1.2; /* Adjust line height for small buttons */
}
.btn-outline-primary {
  color: #007bff;
  border-color: #007bff;
  background-color: transparent;
}
.btn-outline-primary:hover {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}
.btn-outline-primary i {
  margin-right: 4px;
}

/* Ensure labels are always above their inputs if not using placeholders extensively */
.item-qty-price .form-group label,
.item-name-group label {
  display: block; /* Ensure label is on its own line */
  width: 100%; /* Take full width available to the label */
}

/* Adjust tfoot colspan and text alignment (already provided, ensure it's correct) */
.items-table tfoot td[colspan="1"] {
  text-align: right;
}

.items-table tbody tr.item-row:nth-child(odd) td.item-content-cell {
  background-color: #f9f9f9; /* Light gray for odd rows */
}
.items-table tbody tr.item-row:nth-child(even) td.item-content-cell {
  background-color: #ffffff; /* White for even rows (or leave transparent) */
}

/* If you want the number and action cells to also have the background */
.items-table tbody tr.item-row:nth-child(odd) {
  background-color: #f9f9f9;
}
.items-table tbody tr.item-row:nth-child(even) {
  background-color: #ffffff;
}

.items-table tbody tr.item-row td {
  border-bottom: none; /* Remove default bottom border from TR if you add padding below the card */
  /* Or use a thicker border on the TR: border-bottom: 10px solid transparent; */
}

.items-table tbody tr.item-row td.item-content-cell {
  padding: 0 !important; /* Remove cell padding, card will have its own */
}

/* The "Card" for each item's content */
.item-card-wrapper {
  /* You'll need to add this div inside td.item-content-cell in your template */
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 20px; /* Inner padding for the card content */
  margin: 10px 0; /* Space between item "cards" */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease-in-out;
}
.items-table tbody tr.item-row:hover .item-card-wrapper {
  /* Optional: subtle hover effect */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

/* Adjust padding for # and Action cells to align with the card top/bottom */
.items-table tbody tr.item-row > td:first-child, /* Number cell */
.items-table tbody tr.item-row > td:last-child {
  /* Action cell */
  padding-top: 30px; /* (item-card-wrapper margin-top) + (item-card-wrapper padding-top) */
  padding-bottom: 30px; /* (item-card-wrapper margin-bottom) + (item-card-wrapper padding-bottom) */
  vertical-align: top; /* Align # and trash icon to the top of the card */
}
.items-table tbody tr.item-row > td:first-child .item-number {
  padding-top: 0; /* Reset if needed */
}

.item-key-value-fields .key-value-pair.is-deselected {
  background-color: #f8f9fa; /* Lighter background for deselected */
  opacity: 0.7; /* Slightly faded out */
}
.item-key-value-fields .key-value-pair.is-deselected .form-control {
  background-color: #e9ecef; /* Standard disabled input background */
}

.kvp-select-group {
  flex-basis: auto !important; /* Let it size to content */
  flex-grow: 0 !important;
  margin-right: 10px; /* Space between checkbox and key input */
  display: flex;
  align-items: center; /* Vertically center checkbox */
}

.kvp-select-checkbox {
  transform: scale(1.3); /* Make checkbox a bit larger */
  cursor: pointer;
}

/* Adjust flex-basis for key and value groups if checkbox takes space */
.item-key-value-fields .key-value-pair .kvp-key-group {
  /* Key input */
  flex-basis: 30%; /* Adjusted from 35% */
  /* min-width remains the same or adjust as needed */
}
.item-key-value-fields .key-value-pair .kvp-value-group {
  /* Value input */
  flex-basis: 45%; /* Adjusted from 50% */
  /* min-width remains the same or adjust as needed */
}

/* Responsive adjustments for the checkbox in key-value pairs */
@media (max-width: 767px) {
  .item-key-value-fields .key-value-pair {
    position: relative; /* For absolute positioning of checkbox if needed, or rely on flex order */
  }
  .kvp-select-group {
    order: -1; /* Display checkbox first when stacked */
    margin-right: 0;
    margin-bottom: 8px; /* Space below checkbox when stacked */
    width: 100%; /* Take full width for easier tapping */
    justify-content: flex-start; /* Align checkbox to the left */
  }
  /* When stacked, key and value groups are already 100% width */
}

#catalog-items-list .catalog-item.already-added {
  background-color: #e9ecef; /* Grey out background */
  opacity: 0.7;
  cursor: not-allowed; /* Indicate it's not interactive */
}

#catalog-items-list .catalog-item.already-added label {
  text-decoration: line-through; /* Optional: strike-through text */
  color: #6c757d;
}

.search-items-container {
  margin-bottom: 25px;
  position: relative; /* Crucial for positioning the results list */
}

.search-items-container label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 0.9em;
}

.search-results-list {
  display: none; /* Hidden by default */
  position: absolute;
  top: 100%; /* Position it right below the input group */
  left: 0;
  right: 0;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-top: none;
  border-radius: 0 0 4px 4px;
  z-index: 1000; /* Ensure it appears above other content */
  max-height: 300px;
  overflow-y: auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.search-result-item {
  padding: 12px 15px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-result-item:last-child {
  border-bottom: none;
}
.search-result-item:hover {
  background-color: #007bff;
  color: #fff;
}
.search-result-item .model-name {
  font-weight: 600;
}
.search-result-item .brand-name {
  font-size: 0.85em;
  opacity: 0.8;
}

.search-results-list .search-feedback {
  padding: 15px;
  color: #6c757d;
  font-style: italic;
}

#no-items-row td {
  color: #6c757d;
}

.form-control.is-invalid {
  border-color: #dc3545 !important; /* Red border */
}

.form-control.is-invalid:focus {
  /* Red box-shadow on focus */
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.salesperson-info-table {
  width: 100%;
  margin-top: 20px; /* Space above this section */
  margin-bottom: 30px; /* Space below this section */
  border-collapse: collapse;
  font-size: 11pt; /* Or your document's standard font size */
  line-height: 1.5;
}

.salesperson-info-table td {
  vertical-align: top;
  padding: 10px;
  border: 1px solid #ddd; /* A light border for the cells */
  width: 50%;
}

.salesperson-info-table .prepared-by-cell {
  /* Styles for the left cell ("Prepared By") */
  background-color: #f9f9f9; /* A very light grey background */
}

.salesperson-preview {
  display: flex;
  gap: 20px;
  align-items: flex-end; /* Aligns the bottom of the items */
}

.preview-info {
  flex-grow: 1; /* Takes up most of the space */
  line-height: 1.6;
}

.preview-info strong {
  font-size: 1.1em;
  color: #333;
}

/* In the CSS for your generated document */

.preview-placeholder {
  color: #6c757d;
  font-style: italic;
  text-align: center;
  padding: 20px 0;
}

/* In ../styles/create_quotation.css */

/* REPLACE the old .preview-signature style with this new one */
.preview-signature {
  flex-shrink: 0;
  width: 250px;
  text-align: center;
  position: relative; /* This is crucial for positioning the line */
  padding-bottom: 10px; /* Space for the line to sit in */
  margin-top: 15px; /* Space above the whole signature block */

  /* Font styles (these are correct) */
  font-family: "Dancing Script", cursive;
  font-size: 1.9em;
  font-weight: 700;
  color: #2c3e50;
}

/* This pseudo-element IS the line */
.preview-signature::after {
  content: "";
  position: absolute;
  bottom: 10px; /* Position the line 10px from the bottom of the container */
  left: 0;
  right: 0;
  height: 1px;
  background-color: #999;
}

/* Add to ../styles/create_quotation.css */

/* --- Customer Autocomplete Styles --- */
.autocomplete-container {
  position: relative;
}

.search-results-list {
  display: none; /* Hidden by default */
  position: absolute;
  top: 100%; /* Position it right below the input */
  left: 0;
  right: 0;
  background-color: #fff;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 4px 4px;
  z-index: 1000;
  max-height: 250px;
  overflow-y: auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.customer-result-item {
  padding: 10px 15px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}

.customer-result-item:last-child {
  border-bottom: none;
}

.customer-result-item:hover {
  background-color: #f5f5f5;
}

.customer-result-item .result-name {
  font-weight: 600;
  display: block;
  color: #333;
}

.customer-result-item .result-attn {
  font-size: 0.9em;
  color: #666;
}

.search-feedback {
  padding: 10px 15px;
  color: #888;
  font-style: italic;
}

/* --- Sortable Key-Value Detail Styles --- */

/* The new drag handle element for each detail row */
.kvp-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  cursor: grab;
  color: #adb5bd; /* Light grey handle */
  user-select: none;
  order: -2; /* Use flexbox order to always place it first */
}

.kvp-drag-handle:hover {
  color: #343a40; /* Darken on hover */
}

/* Class added by SortableJS for the placeholder */
.kvp-ghost {
  opacity: 0.4;
  background: #e9ecef;
  border: 1px dashed #ced4da;
}

/* Class added by SortableJS to the item being dragged */
.kvp-chosen {
  cursor: grabbing;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Lift it off the page */
}

.kvp-chosen .kvp-drag-handle {
  cursor: grabbing;
  color: #007bff; /* Highlight the handle when dragging */
}