/* Daytona Filter Usability Fix v2 */
/* Fixes oversized checkboxes, clipped color labels, and restores color filter visibility.
   Keep the inventory cleanup + sidebar wrap fix. Remove the previous filter usability file if this works better. */

/* Sidebar width slightly wider so labels don't cut off */
@media (min-width: 992px) {
  .inventory-container .row.m-auto:has(> .srp-sidebar) > .srp-sidebar,
  .inventory .srp-sidebar {
    flex: 0 0 280px !important;
    max-width: 280px !important;
    width: 280px !important;
  }

  .inventory-container .row.m-auto:has(> .srp-sidebar) > .vehicleResults {
    max-width: calc(100% - 290px) !important;
  }
}

/* Keep filter readable but not oversized */
.srp-sidebar {
  font-size: 14px !important;
}

.srp-sidebar .filter-subsection {
  padding: 13px 14px !important;
  overflow: visible !important;
}

.srp-sidebar .filter-subsection-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: initial !important;
  line-height: 1.25 !important;
}

/* Fix checkboxes back to normal usable size */
.srp-sidebar input[type="checkbox"],
.srp-sidebar .form-check-input,
.srp-sidebar .k-checkbox {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  margin: 0 7px 0 0 !important;
  padding: 0 !important;
  flex: 0 0 16px !important;
  vertical-align: middle !important;
  border-radius: 3px !important;
}

/* Improve checkbox row alignment */
.srp-sidebar li,
.srp-sidebar .condition-item,
.srp-sidebar .filter-item-body div,
.srp-sidebar .filter-item-body label,
.srp-sidebar .form-check-label {
  line-height: 1.35 !important;
  font-size: 14px !important;
}

/* Color filter: force 2 clean columns and prevent clipping */
.srp-sidebar .filter-subsection[id*="Exterior"],
.srp-sidebar .filter-subsection[id*="Interior"],
.srp-sidebar .filter-subsection:has([id*="Exterior"]),
.srp-sidebar .filter-subsection:has([id*="Interior"]) {
  overflow: visible !important;
}

.srp-sidebar .filter-subsection:has([id*="Exterior"]) .filter-item-body,
.srp-sidebar .filter-subsection:has([id*="Interior"]) .filter-item-body {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 10px !important;
  row-gap: 8px !important;
  overflow: visible !important;
}

.srp-sidebar .filter-subsection:has([id*="Exterior"]) .filter-item-body label,
.srp-sidebar .filter-subsection:has([id*="Interior"]) .filter-item-body label {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: initial !important;
  font-size: 13px !important;
}

/* Make multiselect dropdown usable without huge checkboxes */
.srp-sidebar .dropdown-multiselect {
  max-height: 260px !important;
  overflow-y: auto !important;
}

.srp-sidebar .dropdown-multiselect div {
  display: flex !important;
  align-items: center !important;
  min-height: 30px !important;
  font-size: 14px !important;
}

/* Keep inputs comfortable */
.srp-sidebar input[type="text"],
.srp-sidebar .multiselect__text-input,
.srp-sidebar .multiselect__wrapper--bg-color {
  min-height: 42px !important;
  font-size: 14px !important;
}

/* Range boxes still readable */
.srp-sidebar input[id*="input_start"],
.srp-sidebar input[id*="input_end"] {
  min-height: 38px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-align: center !important;
}