/* Custom CSS Overrides for Django Form Elements */
/* Fix for dropdown text cutoff issue */

/* Override form-control line-height for better text visibility */
.form-control {
  line-height: 1.5 !important; /* Improved from 1.25 to 1.5 */
  padding: 0.6rem 0.75rem !important; /* Increased top/bottom padding */
}

/* Fix select dropdown height and ensure text is not cut off */
select.form-control:not([size]):not([multiple]) {
  height: auto !important; /* Remove fixed height constraint */
  min-height: calc(
    2.5rem + 2px
  ) !important; /* Ensure minimum height is adequate */
  line-height: 1.5 !important;
  padding: 0.6rem 0.75rem !important; /* Better vertical padding */
}

/* Ensure text in select options is fully visible */
select.form-control option {
  line-height: 1.5 !important;
  padding: 0.5rem 0.75rem !important;
}

/* Fix for inline form selects */
.form-inline select.form-control {
  min-height: calc(2.5rem + 2px) !important;
  line-height: 1.5 !important;
  padding: 0.6rem 0.75rem !important;
}

/* Ensure consistent styling across different form control sizes */
.form-control-sm,
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
  line-height: 1.5 !important;
  padding: 0.4rem 0.5rem !important;
}

select.form-control-sm:not([size]):not([multiple]),
.input-group-sm > select.form-control:not([size]):not([multiple]) {
  height: auto !important;
  min-height: calc(2rem + 2px) !important;
  line-height: 1.5 !important;
}

.form-control-lg,
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
  line-height: 1.5 !important;
  padding: 0.7rem 1rem !important;
}

select.form-control-lg:not([size]):not([multiple]),
.input-group-lg > select.form-control:not([size]):not([multiple]) {
  height: auto !important;
  min-height: calc(3rem + 2px) !important;
  line-height: 1.5 !important;
}

/* Fix for form labels to align properly with improved form controls */
.form-label,
label {
  line-height: 1.5 !important;
  margin-bottom: 0.5rem !important;
}

/* Ensure dropdown arrows and other select styling remains intact */
select.form-control {
  background-position: right 0.75rem center !important;
  background-size: 8px 10px !important;
}

/* Additional fixes for specific form contexts */
.card .form-control,
.modal .form-control {
  line-height: 1.5 !important;
  min-height: calc(2.5rem + 2px) !important;
}

/* Ensure focus states still work properly */
.form-control:focus {
  line-height: 1.5 !important;
}

/* Fix for Bootstrap input groups */
.input-group .form-control {
  line-height: 1.5 !important;
}

/* Responsive adjustments */
@media (max-width: 576px) {
  .form-control {
    padding: 0.5rem 0.75rem !important;
    min-height: calc(2.25rem + 2px) !important;
  }

  select.form-control:not([size]):not([multiple]) {
    min-height: calc(2.25rem + 2px) !important;
  }
}