/**
 * FORM COMPONENTS
 * ===============
 * 
 * Form Elements, Buttons, and Input Controls
 * All form elements use consistent styling and adapt to the active theme.
 * Focus states use the theme primary color for visual consistency.
 */

/* Form Groups and Labels */
.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

/* Text Inputs */
.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: all 0.3s ease;
}

    .form-input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
    }

/* Select Dropdowns */
.form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 1rem;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .form-select:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
    }

/* Checkboxes and Radio Buttons */
.checkbox-group, .radio-group {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.checkbox-input, .radio-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    accent-color: var(--primary); /* Modern way to theme form controls */
}

.checkbox-label, .radio-label {
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
}

/* Primary Button - Main CTA styling */
.btn-primary {
    background: var(--primary);
    color: white;
    font-weight: 600;
    padding: 1rem 2rem;
    border-radius: 9999px; /* Full rounded corners */
    transition: all 0.3s ease;
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

    .btn-primary:hover {
        background: var(--primary-dark);
        transform: scale(1.05); /* Slight grow effect on hover */
        box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    }

/* Outline Button - Secondary button styling */
.btn-outline {
    background: white;
    color: var(--primary);
    border: 2px solid var(--primary);
    font-weight: 600;
    padding: 1rem 2rem;
    border-radius: 9999px;
    transition: all 0.3s ease;
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    cursor: pointer;
    font-size: 1rem;
}

    .btn-outline:hover {
        background: var(--bg-tint);
        transform: scale(1.05);
    }

/* Search Bar */
.search-container {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.search-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 3rem;
    border: 2px solid #e5e7eb;
    border-radius: 9999px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

    .search-input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
    }

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

/* Read-only input styling */
.form-input[readonly],
.form-input[disabled] {
    background: #f9fafb;
    color: #6b7280;
    cursor: not-allowed;
    border-color: #e5e7eb;
}

    .form-input[readonly]:focus,
    .form-input[disabled]:focus {
        outline: none;
        border-color: #e5e7eb;
        box-shadow: none;
    }

/* Form validation enhancements */
.form-input.is-valid {
    border-color: #22c55e;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2322c55e' d='m2.3 6.73.94-.94 2.94 2.94L8.84 6.07l.94.94L6.13 10.67z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
}

    .form-input.is-valid:focus {
        border-color: #22c55e;
        box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
    }