/* =====================================================
   DesiERP - Form Field Focus and Filled States (Clean Version)
   ===================================================== */

/* Base transition */
input, select, textarea {
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Focused state - orange highlight */
input:focus,
select:focus,
textarea:focus {
  transform: translateY(-0.5px);
  background-color: #fff8f0;        /* very light warm/peach */
  border-color: #f59e0b;            /* milder orange */
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15); /* much lighter halo */
  outline: none;
}

/* Checkbox and radio focus */
input[type="checkbox"]:focus,
input[type="radio"]:focus {
  outline: 2px solid #ea580c;
  outline-offset: 2px;
}

/* Checkbox and radio accent color */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #ea580c;
}

/* Filled fields (typed, valid, or autofilled) */
input[type="text"]:is(:not(:placeholder-shown), :user-valid),
input[type="tel"]:is(:not(:placeholder-shown), :user-valid),
input[type="email"]:is(:not(:placeholder-shown), :user-valid),
input[type="password"]:is(:not(:placeholder-shown), :user-valid),
input[type="number"]:is(:not(:placeholder-shown), :user-valid),
textarea:is(:not(:placeholder-shown), :user-valid) {
  background-color: #e0f2fe;
  border-color: #0ea5e9;
}

/* Autofill handling */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: inherit;
  box-shadow: 0 0 0px 1000px #e0f2fe inset;
  border-color: #0ea5e9;
}

/* Select filled state */
select:required:valid {
  background-color: #e0f2fe;
  border-color: #0ea5e9;
}

/* Non-required selects with valid option */
select:not([required]):has(option:checked:not([value=""])) {
  background-color: #e0f2fe;
  border-color: #0ea5e9;
}

/* PIN boxes */
.pin-box:focus {
  background-color: #ffd8b5;
  border-color: #ea580c;
}
.pin-box:user-valid {
  background-color: #e0f2fe;
  border-color: #0ea5e9;
}

/* Checkbox and radio checked state */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: #e0f2fe;
  border-color: #0ea5e9;
}

/* Motion preference */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}