/* Compact Form Field */
:root {
  --label-width: 120px;
  --input-width: 1fr;
  /* Controls the height of React Select control across the app */
  --react-select-control-height: 26px;
}

.label-width {
  width: var(--label-width);
}

.input-width {
  width: var(--input-width);
}

.form-field-class {
  display: grid;
  grid-template-columns: var(--label-width, 120px) var(--input-width, 1fr);
  align-items: center;
  margin-bottom: 2.5px;
}

/* Compact Form Field */

.form-label {
  font-family: var(--font-family-manrope) !important;
  font-size: 12px !important;
  font-weight: var(--font-weight-regular) !important;
  margin-bottom: 0px !important;
  /* margin-bottom: 1px !important; */
  color: var(--label-grey-color) !important;
  /* color: var(--grey-text-color) !important; */
}

.rhf-label-field {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--green-shade-color) !important;
  text-align: start;
}

.form-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--green-shade-color) !important;
  display: block;
  margin-top: 8px !important;
}

.form-control {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--dark-grey-color) !important;
  /* border: 1px solid #b9c2cc !important; */
  border: 1px solid #a7bcc3 !important;
  /* background-color: var(--light-grey-color-input-bg) !important; */
  background-color: #fff !important;
  box-shadow: none !important;
  height: 26px !important;
  border-radius: 5px !important;
  /* margin-bottom: 8px; */
}

.form-control:focus {
  border: 1px solid var(--light-grey-color-input-focus-border) !important;
  box-shadow: none !important;
  background-color: #fff !important;
}

.select-input {
  border: 1px solid var(--white-color) !important;
  box-shadow: none !important;
  height: 32px !important;
  border-radius: 5px !important;
}

.select-input:focus {
  border: 1px solid var(--grey-border-color) !important;
  box-shadow: none !important;
}

textarea.form-control {
  height: auto !important;
}

.btn:focus {
  box-shadow: none;
}

.icon_placeholder {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--placeholder-grey-color) !important;
}

.form-control::placeholder {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--placeholder-grey-color) !important;
}

.date-form-control::placeholder,
.date-form-control::-webkit-datetime-edit {
  font-size: 13px !important;
  font-weight: 400 !important;
}

/* For Firefox */
.date-form-control::-moz-placeholder {
  font-size: 12px !important;
  font-weight: 400 !important;
}

/* For Edge/IE */
.date-form-control:-ms-input-placeholder {
  font-size: 12px !important;
  font-weight: 400 !important;
}

/* For the actual date text */
.date-form-control::-webkit-datetime-edit-fields-wrapper {
  font-size: 12px !important;
}

/* For the calendar picker icon */
.date-form-control::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

.invalid-feedback {
  font-size: 11px !important;
  font-weight: 400 !important;
  margin-bottom: 0px !important;
}

/* Error border styles */
.form-control.is-invalid,
.form-control.border-danger,
input.is-invalid,
input.border-danger,
textarea.is-invalid,
textarea.border-danger {
  border: 1px solid var(--medium-red-color) !important;
}

.form-control.is-invalid:focus,
.form-control.border-danger:focus,
input.is-invalid:focus,
input.border-danger:focus,
textarea.is-invalid:focus,
textarea.border-danger:focus {
  border: 1px solid var(--medium-red-color) !important;
  box-shadow: 0 0 0 0.2rem var(--crimson-color) !important;
}

/* Chrome, Safari, Edge, Opera */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* form select */

.form-control:disabled {
  /* background-color: var(--light-grey-color-input-bg) !important; */
  background-color: transparent !important;
  border: none !important;
  color: var(--dark-grey-color) !important;
  padding-inline-start: 0px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.form-control:disabled:focus {
  /* border: 1px solid var(--light-grey-color-input-focus-border) !important; */
  border: none !important;
  box-shadow: none !important;
  /* background-color: var(--light-green-color-input-focus-bg) !important; */
  background-color: transparent !important;
  color: var(--dark-grey-color) !important;
  padding-inline-start: 0px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.form-select,
.form-select-sm {
  font-size: 10px !important;
  font-weight: 400 !important;
  color: var(--green-color) !important;
  background-color: var(--white-color) !important;
  border: 1px solid var(--grey-border-color) !important;
  box-shadow: none !important;
  height: 32px !important;
}

/* Readonly field styles */
.form-control[readonly],
input[readonly],
textarea[readonly] {
  background-color: transparent !important;
  color: var(--dark-grey-color) !important;
  /* border-color: transparent !important; hide border in readonly */
  cursor: pointer !important;
}

.form-control[readonly]:focus,
input[readonly]:focus,
textarea[readonly]:focus {
  background-color: #fff !important;
  border-color: var(--light-grey-color-input-focus-border) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  color: var(--dark-grey-color) !important;
}

.form-select[readonly],
select[readonly] {
  background-color: var(--light-grey-color-input-bg) !important;
  color: var(--dark-grey-color) !important;
  border-color: var(--grey-border-color) !important;
  cursor: pointer !important;
}

.form-label[data-readonly='true'] {
  color: var(--dark-grey-color) !important;
  cursor: pointer !important;
}

/* Link Css */

/* === Autocomplete Search Input Group === */
.auto-complete-input-group {
  /* border: 1px solid #b9c2cc; */
  border-radius: 5px;
  overflow: hidden;
  width: 100%;
}

.auto-complete-input-group .form-control {
  border: 1px solid transparent !important;
}

.auto-complete-input-group .search-btn {
  width: 30px;
  min-width: 30px;
  background-color: var(--light-green-color-button);
  border: none;
  padding: 0;
}

.auto-complete-input-group .search-btn:disabled {
  background-color: var(--grey-color);
  cursor: not-allowed;
}

/* === Autocomplete Dynamic Behaviour === */
.auto-complete-input-group .search-btn {
  display: none;
  align-items: center;
  justify-content: center;
}

.auto-complete-input-group:focus-within .search-btn {
  display: flex;
  border-top: 1px solid var(--light-grey-color-input-focus-border) !important;
  border-right: 1px solid var(--light-grey-color-input-focus-border) !important;
  border-bottom: 1px solid var(--light-grey-color-input-focus-border) !important;
}

.auto-complete-input-group:focus-within .form-control {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border: 1px solid var(--light-grey-color-input-focus-border) !important;
}

.auto-complete-input-group:focus-within .search-btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

/* Error styles for autocomplete fields */
.auto-complete-input-group .form-control.is-invalid,
.auto-complete-input-group .form-control.border-danger {
  border: 1px solid var(--medium-red-color) !important;
}

.auto-complete-input-group:focus-within .form-control.is-invalid,
.auto-complete-input-group:focus-within .form-control.border-danger {
  border: 1px solid var(--medium-red-color) !important;
}

.auto-complete-input-group:focus-within .form-control.is-invalid:focus,
.auto-complete-input-group:focus-within .form-control.border-danger:focus {
  border: 1px solid var(--medium-red-color) !important;
  box-shadow: 0 0 0 0.2rem var(--crimson-color) !important;
}

.auto-complete-input-group .form-control.is-invalid ~ .search-btn,
.auto-complete-input-group .form-control.border-danger ~ .search-btn {
  border: 1px solid var(--medium-red-color) !important;
  border-left: none !important;
}

.auto-complete-input-group:focus-within .form-control.is-invalid ~ .search-btn,
.auto-complete-input-group:focus-within .form-control.border-danger ~ .search-btn {
  border-top: 1px solid var(--medium-red-color) !important;
  border-right: 1px solid var(--medium-red-color) !important;
  border-bottom: 1px solid var(--medium-red-color) !important;
  border-left: none !important;
}

/* Group field */
/* Group field responsive styling */
.group-field .form-control,
.group-field .form-control-sm,
.group-field .form-select,
.group-field .form-select-sm {
  width: 100% !important;
  min-width: 25px !important;
  max-width: none !important;
  font-size: 12px !important;
  /* padding: 2px 4px !important; */
}

/* Tighter spacing for group containers in smaller columns */
.col-md-2 .group-field .form-control,
.col-md-2 .group-field .form-control-sm,
.col-md-2 .group-field .form-select,
.col-md-2 .group-field .form-select-sm {
  font-size: 10px !important;
  padding: 1px 2px !important;
}

.group-field {
  overflow: hidden;
}

.d-flex.align-items-center {
  overflow: hidden;
}

/* === DataTable Search Field === */
.datatable-search-wrapper {
  position: relative;
  width: 280px;
  max-width: 100%;
}

.datatable-search-input {
  width: 100%;
  height: 34px;
  padding: 6px 36px 6px 36px;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--dark-grey-color) !important;
  border: 1px solid #c5d0d6 !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.datatable-search-input::placeholder {
  color: #9ca3af !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

.datatable-search-input:focus {
  outline: none;
  border-color: #004040 !important;
  background-color: #f9fffe !important;
  box-shadow:
    0 0 0 3px rgba(0, 64, 64, 0.08),
    0 2px 6px rgba(0, 0, 0, 0.08);
}

.datatable-search-input:disabled {
  background-color: #f5f7f9 !important;
  color: #9ca3af !important;
  cursor: not-allowed;
  opacity: 0.6;
}

.datatable-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #6b7280;
  pointer-events: none;
  transition: color 0.2s ease;
}

.datatable-search-wrapper:focus-within .datatable-search-icon {
  color: #004040;
}

.datatable-search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.7;
}

.datatable-search-clear:hover {
  color: #ef4444;
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}

.datatable-search-clear:active {
  transform: translateY(-50%) scale(0.95);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .datatable-search-wrapper {
    width: 100%;
  }
}