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

/* Removed all custom date input rules to restore browser defaults */

/* Flatpickr CSS import removed */

/* CRITICAL FIX: Hide default browser number input spinners to prevent conflict with custom +/- buttons */
input[type="number"] {
  -moz-appearance: textfield !important; /* Firefox */
  appearance: textfield !important; /* Standard property */
}

/* ========================================================================== */
/* DARK MODE FIX: Force readable colors on form controls                     */
/* Prevents invisible text when users have system dark mode enabled          */
/* ========================================================================== */

/* Fix select dropdowns (occasion selector and other dropdowns) */
/* Exclude booking outcome selects which have their own inline styling */
select:not([onchange*="booking_outcome"]) {
  color: #374151 !important;
  background-color: white !important;
  border-color: #d1d5db !important;
}

select option {
  color: #374151 !important;
  background-color: white !important;
}

/* Fix text inputs and textareas */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea {
  color: #374151 !important;
  background-color: white !important;
  border-color: #d1d5db !important;
}

/* Fix checkbox containers and labels */
.checkbox-selector-option,
[data-checkbox-selector-target="option"] {
  color: #374151 !important;
  background-color: white !important;
}

/* Fix checkbox labels and text */
[data-checkbox-selector-target="option"] span {
  color: #374151 !important;
}

/* Ensure focus states still work properly */
select:focus,
input:focus,
textarea:focus {
  border-color: #08374B !important;
  outline: none !important;
  box-shadow: 0 0 0 1px #08374B !important;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important; /* Chrome, Safari, Edge */
  margin: 0 !important;
}

/* Performance optimizations for better click responsiveness */
@import "performance_optimizations.css";