/**
 * Form Input Improvements
 *
 * Enhanced visibility for form inputs while maintaining Ex Machina design system
 * Addresses low contrast issue with better borders, shadows, and focus states
 */

/* Enhanced Input Styling */
.input-tron {
  /* Improved border visibility */
  border-width: 1.5px !important;
  border-color: rgba(166, 176, 187, 0.25) !important; /* Lighter than default #1d2430 */

  /* Subtle inner shadow for depth */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(255, 183, 3, 0) !important;

  /* Better background contrast */
  background-color: rgba(17, 22, 28, 0.6) !important; /* Slightly darker with transparency */
}

/* Hover State - Show interactivity */
.input-tron:hover:not(:focus):not(:disabled) {
  border-color: rgba(166, 176, 187, 0.4) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 8px rgba(255, 183, 3, 0.1) !important;
}

/* Focus State - Enhanced with amber glow */
.input-tron:focus {
  border-color: rgba(255, 183, 3, 0.6) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(255, 183, 3, 0.15), 0 0 12px rgba(255, 183, 3, 0.2) !important;
  outline: none !important;
}

/* Disabled State */
.input-tron:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  border-color: rgba(166, 176, 187, 0.15) !important;
}

/* Error State */
.input-tron.error,
.input-tron:invalid:not(:placeholder-shown) {
  border-color: rgba(215, 38, 61, 0.6) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(215, 38, 61, 0.15) !important;
}

.input-tron.error:focus {
  border-color: rgba(215, 38, 61, 0.8) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(215, 38, 61, 0.2), 0 0 12px rgba(215, 38, 61, 0.15) !important;
}

/* Success State (optional) */
.input-tron.success {
  border-color: rgba(43, 191, 106, 0.6) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(43, 191, 106, 0.15) !important;
}

/* Enhanced Select Dropdowns */
select.input-tron {
  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='%23FFB703' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") !important;
  background-position: right 0.5rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1.5em 1.5em !important;
  padding-right: 2.5rem !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* Enhanced Checkboxes */
input[type="checkbox"].input-tron,
input[type="checkbox"] {
  width: 1.125rem !important;
  height: 1.125rem !important;
  border-width: 1.5px !important;
  border-color: rgba(166, 176, 187, 0.3) !important;
  border-radius: 0.25rem !important;
  background-color: rgba(17, 22, 28, 0.6) !important;
  cursor: pointer !important;
}

input[type="checkbox"]:hover:not(:disabled) {
  border-color: rgba(255, 183, 3, 0.5) !important;
  box-shadow: 0 0 8px rgba(255, 183, 3, 0.15) !important;
}

input[type="checkbox"]:checked {
  background-color: #FFB703 !important;
  border-color: #FFB703 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E") !important;
}

input[type="checkbox"]:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 183, 3, 0.2) !important;
}

/* Enhanced Radio Buttons */
input[type="radio"] {
  width: 1.125rem !important;
  height: 1.125rem !important;
  border-width: 1.5px !important;
  border-color: rgba(166, 176, 187, 0.3) !important;
  background-color: rgba(17, 22, 28, 0.6) !important;
  cursor: pointer !important;
}

input[type="radio"]:hover:not(:disabled) {
  border-color: rgba(255, 183, 3, 0.5) !important;
  box-shadow: 0 0 8px rgba(255, 183, 3, 0.15) !important;
}

input[type="radio"]:checked {
  background-color: #FFB703 !important;
  border-color: #FFB703 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E") !important;
}

input[type="radio"]:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 183, 3, 0.2) !important;
}

/* Textarea Improvements */
textarea.input-tron {
  min-height: 120px !important;
  resize: vertical !important;
}

/* File Input Improvements */
input[type="file"].input-tron {
  padding: 0.5rem !important;
}

input[type="file"].input-tron::file-selector-button {
  background-color: rgba(255, 183, 3, 0.1) !important;
  border: 1px solid rgba(255, 183, 3, 0.3) !important;
  border-radius: 0.375rem !important;
  padding: 0.375rem 0.75rem !important;
  margin-right: 0.75rem !important;
  color: #FFB703 !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

input[type="file"].input-tron::file-selector-button:hover {
  background-color: rgba(255, 183, 3, 0.2) !important;
  border-color: rgba(255, 183, 3, 0.5) !important;
}

/* Search Input Improvements */
input[type="search"].input-tron {
  padding-right: 2.5rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23A6B0BB'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E") !important;
  background-position: right 0.75rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1.25rem !important;
}

/* Label Improvements */
label {
  cursor: pointer !important;
  user-select: none !important;
}

label:has(+ .input-tron:required)::after,
label:has(+ .input-tron[required])::after {
  content: " *" !important;
  color: #FFB703 !important;
  font-weight: 600 !important;
}

/* Form Group Spacing */
.form-group {
  margin-bottom: 1.5rem !important;
}

/* Helper Text */
.form-helper-text {
  font-size: 0.875rem !important;
  color: #7E8894 !important;
  margin-top: 0.375rem !important;
}

/* Error Text */
.form-error-text {
  font-size: 0.875rem !important;
  color: #D7263D !important;
  margin-top: 0.375rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
}

/* Animations */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.input-tron.error {
  animation: shake 0.3s ease-in-out !important;
}

/* Autofill Styling */
.input-tron:-webkit-autofill,
.input-tron:-webkit-autofill:hover,
.input-tron:-webkit-autofill:focus {
  -webkit-text-fill-color: #E6EBF0 !important;
  -webkit-box-shadow: inset 0 0 0 1000px rgba(17, 22, 28, 0.9) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(255, 183, 3, 0.15) !important;
  border-color: rgba(255, 183, 3, 0.4) !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* Dark Mode Placeholder Enhancement */
.input-tron::placeholder {
  color: rgba(126, 136, 148, 0.8) !important;
  opacity: 1 !important;
}

.input-tron:focus::placeholder {
  color: rgba(126, 136, 148, 0.5) !important;
}