/*
 * 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.
 */

/* Action Text / Trix CSS is loaded via stylesheet_link_tag in layouts */

/* Import Tom Select CSS */
@import "https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.bootstrap5.min.css";

/* Tom Select dropdown z-index fix for accordions */
.ts-dropdown {
  position: absolute !important;
  z-index: 10050 !important;
  background-color: white !important;
  border: 1px solid #d1d5db !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

.ts-dropdown .ts-dropdown-content {
  background-color: white !important;
}

.ts-dropdown .option {
  background-color: white !important;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background-color: #f3f4f6 !important;
}

.ts-wrapper {
  position: relative;
  z-index: 1;
}

/* Ensure accordion doesn't clip dropdown */
details[open] > div {
  overflow: visible !important;
}

/* Hide scrollbars while maintaining scroll functionality */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Chrome, Safari and Opera */
}

/* Prevent horizontal overflow globally */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Ensure select elements don't cause overflow */
select {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}