/* Professional Form Styling for WeighVi */

/* Base form styles */
.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #374151;
}

.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #D1D5DB;
    border-radius: 0.375rem;
    background-color: #F9FAFB;
    font-size: 1rem;
    line-height: 1.5;
    color: #1F2937;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-input:focus {
    border-color: #3B82F6;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
    background-color: #FFFFFF;
}

.form-input::placeholder {
    color: #9CA3AF;
    opacity: 1;
}

.form-input:disabled,
.form-input[readonly] {
    background-color: #E5E7EB;
    opacity: 1;
}

/* Input with icon */
.input-with-icon {
    position: relative;
}

.input-with-icon .icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6B7280;
}

.input-with-icon .form-input {
    padding-left: 2.5rem;
}

/* Validation styles */
.form-group.has-error .form-label {
    color: #DC2626;
}

.form-group.has-error .form-input {
    border-color: #DC2626;
    background-color: #FEF2F2;
}

.form-group.has-error .form-input:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
}

.form-error {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #DC2626;
}

/* Success styles */
.form-group.has-success .form-label {
    color: #059669;
}

.form-group.has-success .form-input {
    border-color: #059669;
    background-color: #ECFDF5;
}

.form-group.has-success .form-input:focus {
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.25);
}

/* Button styles */
.btn {
    display: inline-block;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.375rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    cursor: pointer;
}

.btn:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.btn-primary {
    color: #FFFFFF;
    background-color: #3B82F6;
    border-color: #3B82F6;
}

.btn-primary:hover {
    background-color: #2563EB;
    border-color: #2563EB;
}

.btn-secondary {
    color: #FFFFFF;
    background-color: #6B7280;
    border-color: #6B7280;
}

.btn-secondary:hover {
    background-color: #4B5563;
    border-color: #4B5563;
}

.btn-success {
    color: #FFFFFF;
    background-color: #10B981;
    border-color: #10B981;
}

.btn-success:hover {
    background-color: #059669;
    border-color: #059669;
}

.btn-danger {
    color: #FFFFFF;
    background-color: #EF4444;
    border-color: #EF4444;
}

.btn-danger:hover {
    background-color: #DC2626;
    border-color: #DC2626;
}

.btn-outline-primary {
    color: #3B82F6;
    background-color: transparent;
    border-color: #3B82F6;
}

.btn-outline-primary:hover {
    color: #FFFFFF;
    background-color: #3B82F6;
    border-color: #3B82F6;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.125rem;
    border-radius: 0.5rem;
}

/* Form layout utilities */
.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.5rem;
    margin-left: -0.5rem;
}

.form-col {
    flex: 1 0 0%;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

/* Checkbox and radio styles */
.form-check {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.form-check-input {
    margin-right: 0.5rem;
    width: 1rem;
    height: 1rem;
}

.form-check-label {
    margin-bottom: 0;
    font-weight: normal;
}

/* Form help text */
.form-text {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #6B7280;
}

/* Form section dividers */
.form-divider {
    margin: 2rem 0;
    border-top: 1px solid #E5E7EB;
}

.form-section-title {
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1F2937;
}

/* Form responsive adjustments */
@media (max-width: 640px) {
    .form-row {
        flex-direction: column;
    }
    
    .form-col {
        margin-bottom: 1rem;
    }
    
    .btn {
        width: 100%;
    }
}

/* Input fields */
.form-input {
  @apply block w-full px-4 py-3 rounded-lg border border-gray-300 bg-white text-gray-800;
  @apply shadow-sm transition duration-150 ease-in-out;
  @apply focus:border-primary-500 focus:ring-2 focus:ring-primary-300 focus:ring-opacity-50 focus:outline-none;
  transform-origin: center left;
}

.form-input:focus {
  animation: subtle-pop 0.3s ease-out;
}

@keyframes subtle-pop {
  0% { transform: scale(0.98); }
  70% { transform: scale(1.01); }
  100% { transform: scale(1); }
}

/* Input with icon */
.input-with-icon {
  @apply relative;
  display: block;
  width: 100%;
}

.input-with-icon input {
  @apply pl-10;
  width: 100%;
}

.input-with-icon .icon {
  @apply absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400;
  z-index: 1;
}

/* Select fields */
.form-select {
  @apply block w-full px-4 py-3 rounded-lg border border-gray-300 bg-white text-gray-800;
  @apply shadow-sm transition duration-150 ease-in-out appearance-none;
  @apply focus:border-primary-500 focus:ring-2 focus:ring-primary-300 focus:ring-opacity-50 focus:outline-none;
  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='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

/* Textarea */
.form-textarea {
  @apply block w-full px-4 py-3 rounded-lg border border-gray-300 bg-white text-gray-800;
  @apply shadow-sm transition duration-150 ease-in-out;
  @apply focus:border-primary-500 focus:ring-2 focus:ring-primary-300 focus:ring-opacity-50 focus:outline-none;
  min-height: 100px;
  resize: vertical;
}

/* Checkbox and Radio */
.form-checkbox, .form-radio {
  @apply h-5 w-5 rounded border-gray-300 text-primary-600;
  @apply focus:ring-2 focus:ring-primary-300 focus:ring-opacity-50 focus:outline-none;
  @apply transition duration-150 ease-in-out;
}

.form-radio {
  @apply rounded-full;
}

/* Checkbox and Radio Labels */
.form-check-label {
  @apply ml-2 block text-sm font-medium text-gray-700 select-none;
}

/* Form Group */
.form-group {
  @apply mb-4;
  width: 100%;
}

/* Form Error */
.form-error {
  @apply text-red-500 text-xs mt-1;
}

/* Form Help Text */
.form-help {
  @apply text-xs text-gray-500 mt-1;
}

/* Date and Time Inputs */
input[type="date"].form-input,
input[type="time"].form-input,
input[type="datetime-local"].form-input {
  @apply appearance-none;
}

/* File Input */
.form-file {
  @apply block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4;
  @apply file:rounded-md file:border-0 file:text-sm file:font-medium;
  @apply file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100;
  @apply transition duration-150 ease-in-out;
}

/* Form Buttons */
.btn {
  @apply inline-flex items-center justify-center px-4 py-2 border border-transparent;
  @apply text-sm font-medium rounded-lg shadow-sm;
  @apply transition duration-150 ease-in-out;
  @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%, -50%);
  transform-origin: 50% 50%;
}

.btn:hover::after {
  animation: ripple 0.6s ease-out;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    transform: scale(20, 20);
    opacity: 0;
  }
}

.btn-primary {
  @apply bg-primary-600 text-white hover:bg-primary-700;
  @apply focus:ring-primary-500;
}

.btn-secondary {
  @apply bg-gray-600 text-white hover:bg-gray-700;
  @apply focus:ring-gray-500;
}

.btn-success {
  @apply bg-green-600 text-white hover:bg-green-700;
  @apply focus:ring-green-500;
}

.btn-danger {
  @apply bg-red-600 text-white hover:bg-red-700;
  @apply focus:ring-red-500;
}

.btn-warning {
  @apply bg-yellow-500 text-white hover:bg-yellow-600;
  @apply focus:ring-yellow-400;
}

.btn-info {
  @apply bg-blue-500 text-white hover:bg-blue-600;
  @apply focus:ring-blue-400;
}

.btn-light {
  @apply bg-gray-100 text-gray-800 hover:bg-gray-200;
  @apply focus:ring-gray-300;
}

.btn-dark {
  @apply bg-gray-800 text-white hover:bg-gray-900;
  @apply focus:ring-gray-700;
}

/* Button Sizes */
.btn-sm {
  @apply px-3 py-1.5 text-xs rounded;
}

.btn-lg {
  @apply px-6 py-3 text-base rounded-lg;
}

/* Button with Icon */
.btn-icon {
  @apply inline-flex items-center;
}

.btn-icon .icon {
  @apply mr-2 -ml-1;
}

/* Floating Labels (Modern look) */
.floating-label {
  @apply relative;
}

.floating-label input,
.floating-label select {
  @apply pt-6 pb-2;
}

.floating-label label {
  @apply absolute left-4 top-2 text-xs text-gray-500 transition-all duration-150;
  pointer-events: none;
}

.floating-label input:focus ~ label,
.floating-label input:not(:placeholder-shown) ~ label,
.floating-label select:focus ~ label,
.floating-label select:not([value=""]):not([value="0"]) ~ label {
  @apply text-primary-600;
}

/* Form Grid */
.form-grid {
  @apply grid grid-cols-1 md:grid-cols-2 gap-6;
  margin-bottom: 1.5rem;
}

/* Form Section */
.form-section {
  @apply border-t border-gray-200 pt-6 mt-6;
}

.form-section-title {
  @apply text-lg font-medium text-gray-900 mb-4;
}

/* Input Groups */
.input-group {
  @apply flex rounded-md shadow-sm;
  width: 100%;
  display: flex;
  align-items: stretch;
}

.input-group > :first-child {
  @apply rounded-r-none;
  flex: 1;
}

.input-group > :last-child {
  @apply rounded-l-none;
}

/* Fix for input-with-icon inside input-group */
.input-group .input-with-icon {
  flex: 1;
  display: flex;
  align-items: center;
}

.input-group .input-with-icon input {
  width: 100%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group-text {
  @apply inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500;
}

.input-group-append {
  @apply inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
}

/* Form Card */
.form-card {
  @apply bg-white rounded-lg shadow-md p-6 mb-6;
}

/* Form Header */
.form-header {
  @apply flex items-center justify-between mb-6;
}

.form-title {
  @apply text-2xl font-bold text-gray-900;
}

/* Form Footer */
.form-footer {
  @apply mt-6 pt-4 border-t border-gray-200 flex justify-end;
}

.form-footer > * {
  margin-left: 0.75rem;
}

.form-footer > *:first-child {
  margin-left: 0;
}

/* Fix for the meal plan generator form specifically */
/* Fix for icon alignment */
.input-with-icon .icon {
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

/* Fix for select fields */
select.form-select {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  height: auto;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Fix for number inputs */
input[type="number"].form-input {
  -moz-appearance: textfield;
}

input[type="number"].form-input::-webkit-outer-spin-button,
input[type="number"].form-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Ensure proper sizing of inputs */
.form-input, .form-select, .form-textarea {
  box-sizing: border-box;
  height: auto;
  min-height: 2.75rem;
}

/* Fix for input groups with icons */
.input-group .input-with-icon .icon {
  z-index: 2;
}

/* Fix for textarea height */
.form-textarea {
  min-height: 6rem;
}

/* Fix for form grid on mobile */
@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .form-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  
  .form-footer > * {
    margin-left: 0;
    margin-bottom: 0.75rem;
  }
  
  .form-footer > *:first-child {
    margin-bottom: 0;
  }
}