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

/* Ensure radio buttons have white background by default */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 1.25rem; /* w-5 */
  height: 1.25rem; /* h-5 */
  border: 2px solid rgb(212, 212, 216); /* zinc-300 */
  border-radius: 50%;
  background-color: white;
  cursor: pointer;
  position: relative;
}

input[type="radio"]:checked {
  border-color: rgb(20, 184, 166); /* teal-500 */
  background-color: white;
}

input[type="radio"]:checked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.625rem; /* 10px */
  height: 0.625rem; /* 10px */
  border-radius: 50%;
  background-color: rgb(20, 184, 166); /* teal-500 */
}

/* Ensure checkboxes have white background by default */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 1.25rem; /* w-5 */
  height: 1.25rem; /* h-5 */
  border: 2px solid rgb(212, 212, 216); /* zinc-300 */
  border-radius: 0.25rem; /* rounded */
  background-color: white;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

input[type="checkbox"]:checked {
  border-color: rgb(20, 184, 166); /* teal-500 */
  background-color: rgb(20, 184, 166); /* teal-500 */
}

input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 0.375rem; /* 6px */
  height: 0.75rem; /* 12px */
  border: solid white;
  border-width: 0 2px 2px 0;
  box-sizing: border-box;
}

/* Force light color scheme for form inputs to prevent dark mode styling */
input[type="radio"],
input[type="checkbox"] {
  color-scheme: light;
}

/* Override dark mode styles to ensure white backgrounds */
.dark input[type="radio"],
.dark input[type="checkbox"],
[class*="dark"] input[type="radio"],
[class*="dark"] input[type="checkbox"] {
  background-color: white !important;
  border-color: rgb(212, 212, 216) !important; /* zinc-300 */
  color-scheme: light !important;
}

.dark input[type="radio"]:checked,
.dark input[type="checkbox"]:checked,
[class*="dark"] input[type="radio"]:checked,
[class*="dark"] input[type="checkbox"]:checked {
  border-color: rgb(20, 184, 166) !important; /* teal-500 */
}

.dark input[type="checkbox"]:checked,
[class*="dark"] input[type="checkbox"]:checked {
  background-color: rgb(20, 184, 166) !important; /* teal-500 */
}

.dark input[type="radio"]:checked,
[class*="dark"] input[type="radio"]:checked {
  background-color: white !important;
}