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

/* SortableJS drag-drop styles */
.sortable-ghost {
  opacity: 0.4;
}

.sortable-chosen {
  box-shadow: 0 0 0 2px #6366f1; /* indigo-500 ring effect */
}

.sortable-drag {
  background-color: #e0e7ff; /* indigo-100 */
}

/* Toggle switch component */
.toggle-switch {
  appearance: none;
  position: relative;
  width: 44px;
  height: 24px;
  background-color: #d1d5db; /* gray-300 */
  border: 1px solid #9ca3af; /* gray-400 */
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.toggle-switch:checked {
  background-color: #22c55e; /* green-500 */
  border-color: #16a34a; /* green-600 */
}

.toggle-switch::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 9999px;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  transition: transform 0.2s ease-in-out;
}

.toggle-switch:checked::before {
  transform: translateX(20px);
}

.toggle-switch:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #6366f1; /* indigo-500 ring */
}

/* Fix for submit buttons - ensure Tailwind colors are applied */
input[type="submit"].bg-indigo-600,
button.bg-indigo-600 {
  background-color: #4f46e5 !important; /* indigo-600 fallback */
}

input[type="submit"].text-white,
button.text-white {
  color: #ffffff !important;
}