/* 폼 컴포넌트 스타일 */

/* 폼 컨트롤 기본 스타일 */
.form-control {
    background-color: var(--bg-canvas-inset);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
}

.form-control:focus {
    background-color: var(--bg-canvas-inset);
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 0.2rem rgba(88, 166, 255, 0.25);
    color: var(--text-primary);
}

.form-control::placeholder {
    color: var(--text-muted);
}

/* 폼 라벨 */
.form-label {
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* 폼 텍스트 (도움말) */
.form-text {
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Select 스타일 */
.form-select {
    background-color: var(--bg-canvas-inset);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f0f6fc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.form-select:focus {
    background-color: var(--bg-canvas-inset);
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 0.2rem rgba(88, 166, 255, 0.25);
    color: var(--text-primary);
}

/* 체크박스 및 라디오 */
.form-check-input {
    background-color: var(--bg-canvas-inset);
    border: 1px solid var(--border-default);
}

.form-check-input:checked {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(88, 166, 255, 0.25);
}

.form-check-label {
    color: var(--text-primary);
}

/* 스위치 */
.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23f0f6fc'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230d1117'/%3e%3c/svg%3e");
}

/* 인풋 그룹 */
.input-group-text {
    background-color: var(--bg-canvas-subtle);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
}

.input-group .form-control:not(:first-child) {
    border-left: 0;
}

.input-group .form-control:not(:last-child) {
    border-right: 0;
}

.input-group .form-control:focus {
    z-index: 3;
}

/* 플로팅 라벨 */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--accent-primary);
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.form-floating > label {
    color: var(--text-muted);
}

/* 검증 스타일 */
.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: var(--accent-success);
}

.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
    border-color: var(--accent-success);
    box-shadow: 0 0 0 0.2rem rgba(63, 185, 80, 0.25);
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: var(--accent-danger);
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
    border-color: var(--accent-danger);
    box-shadow: 0 0 0 0.2rem rgba(248, 81, 73, 0.25);
}

.valid-feedback {
    color: var(--accent-success);
}

.invalid-feedback {
    color: var(--accent-danger);
}

/* 파일 업로드 */
.form-control[type="file"] {
    background-color: var(--bg-canvas-inset);
    border: 2px dashed var(--border-default);
    padding: 1rem;
    text-align: center;
    transition: all 0.3s ease;
}

.form-control[type="file"]:hover {
    border-color: var(--accent-primary);
    background-color: rgba(88, 166, 255, 0.05);
}

/* 범위 슬라이더 */
.form-range {
    background: transparent;
}

.form-range::-webkit-slider-track {
    background-color: var(--border-default);
    border-radius: 0.25rem;
    height: 0.5rem;
}

.form-range::-webkit-slider-thumb {
    background-color: var(--accent-primary);
    border-radius: 50%;
    border: none;
    height: 1.25rem;
    width: 1.25rem;
}

.form-range::-moz-range-track {
    background-color: var(--border-default);
    border-radius: 0.25rem;
    height: 0.5rem;
    border: none;
}

.form-range::-moz-range-thumb {
    background-color: var(--accent-primary);
    border-radius: 50%;
    border: none;
    height: 1.25rem;
    width: 1.25rem;
}

/* 코드 입력 필드 */
.form-control-code {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.875rem;
    background-color: var(--bg-canvas);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    padding: 0.75rem;
    border-radius: 0.375rem;
}

.form-control-code:focus {
    background-color: var(--bg-canvas);
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 0.2rem rgba(88, 166, 255, 0.25);
}

/* 반응형 폼 */
@media (max-width: 768px) {
    .form-floating > label {
        font-size: 0.875rem;
    }
    
    .input-group {
        flex-direction: column;
    }
    
    .input-group .form-control,
    .input-group .input-group-text {
        border-radius: 0.375rem !important;
        border: 1px solid var(--border-default) !important;
        margin-bottom: 0.5rem;
    }
    
    .input-group .form-control:last-child,
    .input-group .input-group-text:last-child {
        margin-bottom: 0;
    }
}