/**
 * Quick OMS - Global Form Controls & Dropdowns Design System
 * Unified styling matching Dashboard Country Dropdown reference for Focus State
 * and Figma Components 345 & 361 for Dropdowns and Options
 */

/* ── 0. Global Form Controls (Inputs, Textareas & Search Fields) ────────── */

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input.form-control,
input.input,
input.cdi-input,
input.qo-input,
.search-input-wrap input,
#customSearchInput,
.dataTables_filter input,
input.flatpickr-input,
input.qoms-datepicker-input {
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #E5E5E5 !important;
  border-radius: 6px !important;
  background-color: #FFFFFF !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #111827 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

textarea,
textarea.form-control,
textarea.input,
textarea.cdi-textarea,
textarea.qo-textarea {
  min-height: 88px;
  padding: 10px 14px;
  border: 1px solid #E5E5E5 !important;
  border-radius: 6px !important;
  background-color: #FFFFFF !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #111827 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* Hover state across all form controls */
input[type="text"]:hover:not(:disabled):not([readonly]),
input[type="number"]:hover:not(:disabled):not([readonly]),
input[type="email"]:hover:not(:disabled):not([readonly]),
input[type="password"]:hover:not(:disabled):not([readonly]),
input[type="search"]:hover:not(:disabled):not([readonly]),
input[type="tel"]:hover:not(:disabled):not([readonly]),
input[type="url"]:hover:not(:disabled):not([readonly]),
input[type="date"]:hover:not(:disabled):not([readonly]),
input.form-control:hover:not(:disabled):not([readonly]),
input.input:hover:not(:disabled):not([readonly]),
input.cdi-input:hover:not(:disabled):not([readonly]),
input.qo-input:hover:not(:disabled):not([readonly]),
.search-input-wrap input:hover:not(:disabled):not([readonly]),
#customSearchInput:hover:not(:disabled):not([readonly]),
.dataTables_filter input:hover:not(:disabled):not([readonly]),
input.flatpickr-input:hover:not(:disabled):not([readonly]),
input.qoms-datepicker-input:hover:not(:disabled):not([readonly]),
textarea:hover:not(:disabled):not([readonly]),
select:hover:not(:disabled) {
  border-color: #D1D5DB !important;
}

/* Primary Focus Border Reference: Matching Dashboard Country Dropdown Neutral Focus State */
input[type="text"]:focus:not(.is-invalid):not(.error),
input[type="number"]:focus:not(.is-invalid):not(.error),
input[type="email"]:focus:not(.is-invalid):not(.error),
input[type="password"]:focus:not(.is-invalid):not(.error),
input[type="search"]:focus:not(.is-invalid):not(.error),
input[type="tel"]:focus:not(.is-invalid):not(.error),
input[type="url"]:focus:not(.is-invalid):not(.error),
input[type="date"]:focus:not(.is-invalid):not(.error),
input.form-control:focus:not(.is-invalid):not(.error),
input.input:focus:not(.is-invalid):not(.error),
input.cdi-input:focus:not(.is-invalid):not(.error),
input.qo-input:focus:not(.is-invalid):not(.error),
.search-input-wrap input:focus:not(.is-invalid):not(.error),
#customSearchInput:focus:not(.is-invalid):not(.error),
.dataTables_filter input:focus:not(.is-invalid):not(.error),
input.flatpickr-input:focus:not(.is-invalid):not(.error),
input.qoms-datepicker-input:focus:not(.is-invalid):not(.error),
textarea:focus:not(.is-invalid):not(.error),
textarea.form-control:focus:not(.is-invalid):not(.error),
textarea.input:focus:not(.is-invalid):not(.error),
textarea.cdi-textarea:focus:not(.is-invalid):not(.error),
textarea.qo-textarea:focus:not(.is-invalid):not(.error),
select:focus:not(.is-invalid):not(.error),
.form-select:focus:not(.is-invalid):not(.error),
.qo-select:focus:not(.is-invalid):not(.error),
.dataTables_wrapper select:focus:not(.is-invalid):not(.error),
.select2-container--default.select2-container--open:not(.error) .select2-selection--single:not(.error):not(.is-invalid),
.select2-container--default.select2-container--focus:not(.error) .select2-selection--single:not(.error):not(.is-invalid) {
  border-color: #9CA3AF !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Clean, subtle focus-visible indicator for keyboard accessibility - no blue */
input:focus-visible:not(.is-invalid):not(.error),
textarea:focus-visible:not(.is-invalid):not(.error),
select:focus-visible:not(.is-invalid):not(.error),
.select2-container--default.select2-container--focus:not(.error) .select2-selection--single:focus-visible:not(.error):not(.is-invalid) {
  outline: none !important;
  border-color: #9CA3AF !important;
  box-shadow: none !important;
}

/* Placeholder Styling */
input::placeholder,
textarea::placeholder,
.form-control::placeholder,
.input::placeholder {
  color: #9CA3AF !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

/* Disabled & Readonly Controls */
input:disabled,
textarea:disabled,
select:disabled,
input[readonly]:not(.flatpickr-input):not(.qoms-datepicker-input),
textarea[readonly] {
  background-color: #F9FAFB !important;
  border-color: #E5E7EB !important;
  color: #9CA3AF !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Validation error border preservation (strictly takes priority over normal focus) */
input.is-invalid,
input.error,
textarea.is-invalid,
textarea.error,
select.is-invalid,
select.error,
.select2-container--default .select2-selection--single.is-invalid,
.select2-container--default .select2-selection--single.error,
.select2-container.error .select2-selection--single,
select.error + .select2-container .select2-selection--single,
select.is-invalid + .select2-container .select2-selection--single {
  border-color: #DC2626 !important;
}

input.is-invalid:focus,
input.error:focus,
textarea.is-invalid:focus,
textarea.error:focus,
select.is-invalid:focus,
select.error:focus,
.select2-container--default.select2-container--open .select2-selection--single.error,
.select2-container--default.select2-container--focus .select2-selection--single.error,
.select2-container--default.select2-container--open .select2-selection--single.is-invalid,
.select2-container--default.select2-container--focus .select2-selection--single.is-invalid,
select.error + .select2-container.select2-container--focus .select2-selection--single,
select.error + .select2-container.select2-container--open .select2-selection--single,
select.is-invalid + .select2-container.select2-container--focus .select2-selection--single,
select.is-invalid + .select2-container.select2-container--open .select2-selection--single {
  border-color: #DC2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
  outline: none !important;
}

/* ── 1. Native Select Elements ────────────────────────────────────────── */

select,
.form-select,
.qo-select,
.box_filtter .select,
.top-bar select,
.all_products select,
.create_inventory select,
.createDraftInvoice select,
.editinvoice2 select,
.invoice_sidebar .select,
.dataTables_wrapper select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 34px 0 14px !important;
  border: 1px solid #E5E5E5 !important;
  border-radius: 6px !important;
  background-color: #FFFFFF !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 48 48' fill='none' stroke='%23111827' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 18L22.4381 28.6612C23.3369 29.4316 24.6631 29.4316 25.5619 28.6612L38 18'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px 16px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 38px !important;
  color: #111827 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  vertical-align: middle;
}

select:focus:not(.is-invalid):not(.error),
.form-select:focus:not(.is-invalid):not(.error),
.qo-select:focus:not(.is-invalid):not(.error),
.dataTables_wrapper select:focus:not(.is-invalid):not(.error) {
  outline: none !important;
  border-color: #9CA3AF !important;
  box-shadow: none !important;
}

select:focus-visible:not(.is-invalid):not(.error),
.form-select:focus-visible:not(.is-invalid):not(.error),
.qo-select:focus-visible:not(.is-invalid):not(.error),
.dataTables_wrapper select:focus-visible:not(.is-invalid):not(.error) {
  outline: none !important;
  border-color: #9CA3AF !important;
  box-shadow: none !important;
}

select:disabled,
.form-select:disabled {
  background-color: #F9FAFB !important;
  color: #9CA3AF !important;
  cursor: not-allowed !important;
  border-color: #E5E7EB !important;
}

/* ── 2. Select2 Dropdowns (Searchable & Enhanced) ──────────────────────── */

/* Trigger Container */
.select2-container {
  width: 100% !important;
  max-width: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.select2-container .select2-selection--single {
  height: 40px !important;
  min-height: 40px !important;
  background-color: #FFFFFF !important;
  border: 1px solid #E5E5E5 !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  padding: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Rendered Text */
.select2-container .select2-selection--single .select2-selection__rendered {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 38px !important;
  color: #111827 !important;
  padding-left: 14px !important;
  padding-right: 36px !important;
  width: 100% !important;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Placeholder */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #6B7280 !important;
  font-weight: 400 !important;
  font-size: 14px !important;
}

/* Arrow Container */
.select2-container .select2-selection--single .select2-selection__arrow {
  height: 38px !important;
  width: 36px !important;
  top: 0 !important;
  right: 0 !important;
  position: absolute !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 48 48' fill='none' stroke='%23111827' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 18L22.4381 28.6612C23.3369 29.4316 24.6631 29.4316 25.5619 28.6612L38 18'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 16px 16px !important;
  transition: transform 0.2s ease !important;
}

.select2-container .select2-selection--single .select2-selection__arrow b {
  display: none !important;
}

/* Open Trigger State (Chevron Flips Upwards) */
.select2-container--open .select2-selection--single .select2-selection__arrow {
  transform: rotate(180deg) !important;
}

.select2-container--default.select2-container--open:not(.error) .select2-selection--single:not(.error):not(.is-invalid),
.select2-container--default.select2-container--open.select2-container--below:not(.error) .select2-selection--single:not(.error):not(.is-invalid),
.select2-container--default.select2-container--open.select2-container--above:not(.error) .select2-selection--single:not(.error):not(.is-invalid),
.select2-container--default.select2-container--focus:not(.error) .select2-selection--single:not(.error):not(.is-invalid) {
  border-color: #9CA3AF !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 6px !important;
}

.select2-container--default.select2-container--focus:not(.error) .select2-selection--single:focus-visible:not(.error):not(.is-invalid) {
  outline: none !important;
  border-color: #9CA3AF !important;
  box-shadow: none !important;
}

/* 48px Height Option for Draft Invoice and Customer Form Select2 Dropdowns */
.createDraftInvoice .select2-container .select2-selection--single,
.customer-edit-card .select2-container .select2-selection--single {
  height: 48px !important;
  min-height: 48px !important;
  border-radius: 6px !important;
  border: 1px solid #E5E5E5 !important;
  background-color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.createDraftInvoice .select2-container .select2-selection--single .select2-selection__rendered,
.customer-edit-card .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 46px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #111827 !important;
  padding-left: 14px !important;
  padding-right: 38px !important;
}

.createDraftInvoice .select2-container .select2-selection--single .select2-selection__arrow,
.customer-edit-card .select2-container .select2-selection--single .select2-selection__arrow {
  height: 46px !important;
  width: 38px !important;
}

/* ── 3. Dropdown Panel (Menu Popup - Figma 345 & 361) ──────────────────── */

.select2-dropdown,
.select2-dropdown.select2-dropdown--below,
.select2-dropdown.select2-dropdown--above {
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  padding: 6px !important;
  margin-top: 4px !important;
  z-index: 999999 !important;
  overflow: hidden !important;
}

/* Dropdown Search Input Field (Figma 361) */
.select2-container--default .select2-search--dropdown {
  padding: 0 6px 12px 0 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  height: 36px !important;
  background-color: #F8F8F8 !important;
  border: 1px solid #CECECE !important;
  border-radius: 6px !important;
  padding: 0 12px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 34px !important;
  color: #111827 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
  color: #555555 !important;
  font-weight: 500 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  background-color: #FFFFFF !important;
  border-color: #9CA3AF !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Results Options List Container */
.select2-container--default .select2-results > .select2-results__options {
  padding: 2px !important;
  margin: 0 !important;
  max-height: 240px !important;
  overflow-y: auto !important;
  list-style: none !important;
}

/* Option Items (Default State) */
.select2-results__option,
.select2-container--default .select2-results__option {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  color: #111827 !important;
  background-color: transparent !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  margin-bottom: 2px !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: background-color 0.12s ease, color 0.12s ease !important;
}

/* Hover on NON-SELECTED Option (Subtle Neutral Background, Dark Text) */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #F1F5F9 !important;
  color: #111827 !important;
  font-weight: 500 !important;
}

/* Selected State (Default & Hovered) — Selected ALWAYS dominates Hover */
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option--selected.select2-results__option--highlighted,
.select2-container--default .select2-results__option--selected.select2-results__option--selectable,
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[aria-selected="true"].select2-results__option--highlighted,
.select2-container--default .select2-results__option[aria-selected="true"].select2-results__option--selectable {
  background-color: #E2E8F0 !important;
  color: #0F172A !important;
  font-weight: 600 !important;
}

/* Disabled Option State */
.select2-container--default .select2-results__option[aria-disabled=true] {
  color: #9CA3AF !important;
  cursor: not-allowed !important;
  background-color: transparent !important;
}

/* ── 4. Custom Subtle Scrollbar ────────────────────────────────────────── */

/* Webkit Scrollbar */
.select2-results__options::-webkit-scrollbar,
.select2-dropdown ::-webkit-scrollbar,
.custom-dropdown-menu::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
}

.select2-results__options::-webkit-scrollbar-button,
.select2-dropdown ::-webkit-scrollbar-button,
.custom-dropdown-menu::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.select2-results__options::-webkit-scrollbar-track,
.select2-dropdown ::-webkit-scrollbar-track,
.custom-dropdown-menu::-webkit-scrollbar-track {
  background: transparent !important;
  border: none !important;
}

.select2-results__options::-webkit-scrollbar-track-piece,
.select2-dropdown ::-webkit-scrollbar-track-piece {
  background: transparent !important;
}

.select2-results__options::-webkit-scrollbar-thumb,
.select2-dropdown ::-webkit-scrollbar-thumb,
.custom-dropdown-menu::-webkit-scrollbar-thumb {
  background-color: #D1D5DB !important;
  border-radius: 10px !important;
  border: none !important;
}

.select2-results__options::-webkit-scrollbar-thumb:hover,
.select2-dropdown ::-webkit-scrollbar-thumb:hover,
.custom-dropdown-menu::-webkit-scrollbar-thumb:hover {
  background-color: #9CA3AF !important;
}

.select2-results__options::-webkit-scrollbar-corner,
.select2-dropdown ::-webkit-scrollbar-corner {
  background: transparent !important;
}

/* Firefox scrollbar support */
.select2-results__options,
.select2-dropdown,
.custom-dropdown-menu {
  scrollbar-width: thin !important;
  scrollbar-color: #D1D5DB transparent !important;
}

/* ── 5. Standard Dropdown Menus (Action Menus / Modals / Popovers) ──────── */

.dropdown-menu:not(.inventory-submenu):not(.sidebar-submenu) {
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 6px !important;
  box-shadow: 3px 4px 50px 0px rgba(0, 0, 0, 0.10) !important;
  padding: 8px !important;
}

.dropdown-menu:not(.inventory-submenu):not(.sidebar-submenu) .dropdown-item,
.dropdown-menu:not(.inventory-submenu):not(.sidebar-submenu) a {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #111827 !important;
  padding: 8px 12px !important;
  border-radius: 4px !important;
}

.dropdown-menu:not(.inventory-submenu):not(.sidebar-submenu) .dropdown-item:hover,
.dropdown-menu:not(.inventory-submenu):not(.sidebar-submenu) a:hover {
  background-color: #F3F4F6 !important;
  color: #111827 !important;
}

/* Ensure Sidebar submenus are never styled as floating card popovers */
.sidebar .dropdown-menu,
.sidebar .inventory-submenu {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ── 6. Responsive Adaptations ─────────────────────────────────────────── */

@media (max-width: 640px) {
  select,
  .form-select,
  .select2-container .select2-selection--single {
    height: 40px !important;
    font-size: 14px !important;
  }

  .select2-dropdown {
    padding: 10px 4px 10px 8px !important;
  }
}

/* ── 7. Global Table Checkbox Design System (Figma Component 316 - Node 445:4037) ── */

.invoice-checkbox,
.table-checkbox,
#invoiceTable input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 24px !important;
  height: 24px !important;
  background-color: #FFFFFF !important;
  border: 1px solid #999999 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  margin: 0 auto !important;
  padding: 0 !important;
  vertical-align: middle !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  outline: none !important;
  transition: all 0.15s ease-in-out !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.invoice-checkbox:hover,
.table-checkbox:hover,
#invoiceTable input[type="checkbox"]:hover {
  border-color: #146EF5 !important;
  background-color: #F8FAFC !important;
}

.invoice-checkbox:focus-visible,
.table-checkbox:focus-visible,
#invoiceTable input[type="checkbox"]:focus-visible {
  border-color: #146EF5 !important;
  box-shadow: 0 0 0 3px rgba(20, 110, 245, 0.2) !important;
}

.invoice-checkbox:checked,
.table-checkbox:checked,
#invoiceTable input[type="checkbox"]:checked {
  background-color: #146EF5 !important;
  border-color: #146EF5 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 5.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 14px 14px !important;
}

.invoice-checkbox:indeterminate,
.table-checkbox:indeterminate,
#invoiceTable input[type="checkbox"]:indeterminate {
  background-color: #146EF5 !important;
  border-color: #146EF5 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-width='2.6' stroke-linecap='round'%3E%3Cline x1='4' y1='8' x2='12' y2='8'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 14px 14px !important;
}

.invoice-checkbox:disabled,
.table-checkbox:disabled,
#invoiceTable input[type="checkbox"]:disabled {
  background-color: #F3F4F6 !important;
  border-color: #D1D5DB !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

/* ── 8. Shared Form Group & Validation Spacing System ─────────────────── */

.form-group,
.group,
.cdi-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  position: relative !important;
  width: 100% !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* Label -> Input spacing: strictly 6px across all fields */
.form-group > label,
.group > label,
.cdi-field > label {
  display: flex !important;
  align-items: center !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

/* Input -> Validation error message: strictly 4px, compact height */
.form-group .error,
.form-group span.error,
.form-group label.error,
.group .error,
.group span.error,
.group label.error,
.cdi-field .error,
.cdi-field span.error,
.cdi-field label.error,
.ci-err,
span.ci-err,
.invalid-feedback,
span.text-danger.error {
  display: block !important;
  color: #DC2626 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  margin: 4px 0 0 0 !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Grid Row Alignment: fields in the same row stay aligned at top baseline */
.form-grid,
.cust-form-grid,
.cdi-row,
.cdi-company-row,
.cdi-dates-row,
.grid-2,
.grid-3 {
  align-items: start !important;
  row-gap: 16px !important;
  column-gap: 20px !important;
}