/* ============================================
   Forms - SchoolSelect Component
   ============================================ */

/* Form control override */
.form-control {
    border-radius: var(--radius);
    border: 1px solid var(--color-gray-300);
    padding: 0.625rem 0.875rem;
    font-size: var(--font-size-base);
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
    border-color: var(--color-primary-300);
    box-shadow: 0 0 0 3px rgba(54, 113, 224, 0.15);
}

.form-control::placeholder {
    color: var(--color-gray-400);
}

/* Form select override */
.form-select {
    border-radius: var(--radius);
    border: 1px solid var(--color-gray-300);
    padding: 0.625rem 2.25rem 0.625rem 0.875rem;
    font-size: var(--font-size-base);
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-select:focus {
    border-color: var(--color-primary-300);
    box-shadow: 0 0 0 3px rgba(54, 113, 224, 0.15);
}

/* Form label */
.form-label {
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    margin-bottom: var(--space-2);
    font-size: var(--font-size-sm);
}

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

.search-input__icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-400);
    z-index: 1;
    pointer-events: none;
}

.search-input .form-control {
    padding-left: 2.75rem;
    border-radius: var(--radius-full);
    background-color: var(--color-gray-50);
    border: 2px solid var(--color-gray-200);
}

.search-input .form-control:focus {
    background-color: var(--color-surface);
    border-color: var(--color-primary-300);
}

/* Input group overrides */
.input-group .form-control {
    border-radius: var(--radius) 0 0 var(--radius);
}

.input-group .btn {
    border-radius: 0 var(--radius) var(--radius) 0;
}

/* Form check styling */
.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Filter chips */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border: 1px solid var(--color-primary-200);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filter-chip:hover {
    background: var(--color-primary-100);
}

.filter-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-primary-200);
    color: var(--color-primary-700);
    font-size: 10px;
    line-height: 1;
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.filter-chip__remove:hover {
    background: var(--color-primary-300);
}