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

/* Add horizontal padding to all form inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* Tom Select - Custom pill styling for selected volunteers (multi-select only, e.g.
   manage_volunteers). Single-selects (searchable-select) are styled further down. */
.ts-wrapper.multi .ts-control .item {
  background-color: #4f46e5 !important; /* Indigo-600 */
  color: white !important;
  border: none !important;
  border-radius: 9999px !important; /* Full pill shape */
  padding: 0.375rem 0.625rem 0.375rem 0.625rem !important;
  margin: 0.25rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.ts-wrapper.multi .ts-control .item:hover {
  background-color: #4338ca !important; /* Indigo-700 */
}

.ts-wrapper.multi .ts-control .item .remove {
  color: white !important;
  opacity: 0.9;
  border: none !important;
  padding: 0 !important;
  margin: 0 0.375rem 0 0.375rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  font-family: Arial, sans-serif !important;
  cursor: pointer !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.25) !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.ts-wrapper.multi .ts-control .item .remove:hover {
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.35) !important;
}

/* Tom Select - Input area styling (multi-select) */
.ts-wrapper.multi .ts-control {
  padding: 0.5rem !important;
  min-height: 3rem !important;
}

.ts-wrapper.multi .ts-control input {
  padding: 0.25rem 0.5rem !important;
}

/* Tom Select - Single-select (searchable-select controller). TomSelect copies the
   select's .form-select classes onto its wrapper, so the wrapper is the visible box;
   the inner control drops its own box and the picked name reads like a native
   select value, not a pill. tom-select.bootstrap5.css is unlayered, so it beats
   Tailwind's layered .form-select ring (`.ts-wrapper.form-select { box-shadow: none }`)
   and clears .ts-control backgrounds with !important; these more specific rules put
   the ring back (from Tailwind's own --tw-* variables) and draw the chevron on the
   wrapper. */
.ts-wrapper.single.form-select {
  background-color: white;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25rem 1.25rem;
}

/* Match .form-select's focus:ring-2 (the wrapper itself never takes :focus). */
.ts-wrapper.single.form-select.focus {
  --tw-ring-shadow: inset 0 0 0 2px var(--color-primary-600);
}

.ts-wrapper.single.form-select .ts-control {
  border-radius: inherit;
  min-height: 3rem;
  padding: 0.75rem 2.5rem 0.75rem 0.75rem !important;
  flex-wrap: nowrap;
  color: #111827; /* gray-900, matches .form-select */
}

.ts-wrapper.single.form-select .ts-control .item {
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* While the list is open the search box takes the field, so typed text doesn't run
   into the current value ("Select volunteerZim"). The list still highlights the
   current choice, and the value comes back if the list closes without a pick. */
.ts-wrapper.single.form-select.dropdown-active.input-active .ts-control .item {
  display: none;
}

.ts-wrapper.single.form-select .ts-control input {
  padding: 0 !important;
  margin: 0 !important;
  color: inherit;
}

/* Tom Select - Dropdown styling */
.ts-dropdown {
  background-color: white !important;
  border: 1px solid #d1d5db !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  z-index: 1000 !important;
}

.ts-dropdown .option {
  padding: 0.5rem 0.75rem !important;
  background-color: white !important;
}

.ts-dropdown .option.active {
  background-color: #eef2ff !important;
  color: #4f46e5 !important;
}

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

/* Banner fade-in animation */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}