/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Multi-select dropdown animation */
.transition-all {
  transition-property: all;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Checkbox styles */
input[type="checkbox"] {
  cursor: pointer;
}

/* Focus styles for accessibility */
.select:focus, 
input[type="checkbox"]:focus, 
.btn:focus,
[data-facility-filter-target="toggle"]:focus {
  outline: 2px solid rgb(99 102 241 / 0.5);
  outline-offset: 1px;
}

/* Custom dropdown styling */
[data-facility-filter-target="toggle"] {
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

[data-facility-filter-target="toggle"]:hover {
  border-color: rgb(99 102 241 / 0.5);
}

/* Batch filter styles */
[data-batch-filter-target="input"] {
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

[data-batch-filter-target="input"]:focus {
  outline: 2px solid rgb(99 102 241 / 0.5);
  outline-offset: 1px;
  border-color: rgb(99 102 241 / 0.5);
}

/* Batch tag styles */
[data-batch-filter-target="selectedTags"] .batch-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: rgb(219 234 254);
  color: rgb(30 64 175);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

[data-batch-filter-target="selectedTags"] .batch-tag button {
  margin-left: 0.25rem;
  color: rgb(37 99 235);
  font-weight: 600;
  cursor: pointer;
}

[data-batch-filter-target="selectedTags"] .batch-tag button:hover {
  color: rgb(30 64 175);
}

/* Dropdown suggestions */
[data-batch-filter-target="suggestions"] > div {
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

[data-batch-filter-target="suggestions"] > div:hover {
  background-color: rgb(239 246 255);
}