/* ==========================================================================
   Form Component Extensions
   ========================================================================== */

/* Search toolbar */
.search-toolbar {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex-wrap: wrap;
}

.search-toolbar .form-control {
    min-width: 200px;
}

.search-toolbar .form-select {
    min-width: 150px;
}

/* Form sections */
.form-section {
    margin-bottom: var(--spacing-6);
}

.form-section-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-4);
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: var(--spacing-2);
}

/* ==========================================================================
   Validation Styling
   Covers both ASP.NET unobtrusive validation classes (input-validation-error,
   field-validation-error, validation-summary-errors) and Bootstrap's
   .is-invalid / .invalid-feedback, since pages mix both conventions.
   ========================================================================== */

.form-control.input-validation-error,
.form-select.input-validation-error,
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--color-error);
}

.form-control.input-validation-error:focus,
.form-select.input-validation-error:focus,
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--color-error);
    box-shadow: 0 0 0 0.25rem var(--color-error-light);
}

.field-validation-error,
.invalid-feedback,
.text-danger {
    color: var(--color-error-text);
    font-size: var(--font-size-sm);
}

.validation-summary-errors {
    display: block;
    color: var(--color-error-text);
    background: var(--color-error-light);
    border: 1px solid var(--color-error-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-3) var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.validation-summary-errors ul {
    margin: 0;
    padding-left: var(--spacing-4);
}

.validation-summary-errors:empty {
    display: none;
}