/* ============================================================
   폼 컴포넌트 스타일 (Enterprise Form Controls)
   Atlassian & Salesforce Inspired — Sharp borders, solid typography, clear focus states
   ============================================================ */

/* ===== 폼 간격 표준화 (5️⃣ 전체 form 정렬 통일) =====
   - 폼 필드 세로 간격을 --space-5(14px)로 통일 (너무 벌어지거나 붙지 않게)
   - 인라인 style="margin-bottom:12px" 대신 이 클래스를 사용
   ============================================================ */
.form-group {
  margin-bottom: var(--space-5, 14px);
}

/* 연속된 폼 그룹 간 간격 균일화 */
.form-group + .form-group {
  margin-top: 0;
}

/* 폼 그룹 숨김 (chat 그룹명 등) — 인라인 display:none 대체 */
.form-group-hidden {
  display: none !important;
}

/* 폼 액션 버튼 행 — 버튼 간격 표준화 */
.form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3, 6px);
  margin-top: var(--space-5, 14px);
}

/* 폼 행 2열 — 간격 통일 */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4, 10px) var(--space-5, 14px);
  margin-bottom: var(--space-4, 10px);
}

/* 모바일: 폼 행 1열 전환 */
@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: var(--space-3, 6px);
  }
}

/* 폼 하단 구분선 위 여백 표준화 */
.form-divider {
  border-top: 1px solid var(--border-subtle, #E5E7EB);
  margin-top: var(--space-6, 18px);
  padding-top: var(--space-5, 14px);
}

/* 폼 섹션 헤더 */
.form-section-title {
  font-size: var(--text-sm, 13px);
  font-weight: var(--weight-semibold, 600);
  color: var(--text-secondary, #475569);
  margin-bottom: var(--space-4, 10px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* 레이블 (Strict Corporate Label) */
.form-group label {
  display: block;
  margin-bottom: var(--space-2, 4px);
  font-size: var(--text-xs, 12px);
  font-weight: var(--weight-bold, 700);
  color: var(--text-secondary); /* Cool Slate Grey */
  letter-spacing: var(--tracking-wide);
}

/* 기본 입력 필드 — 텍스트, 셀렉트, 텍스트영역 */
.form-input,
.form-select,
.form-textarea,
.input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md); /* 4px: Atlassian/Salesforce standard sharp edge */
  outline: none;
  transition: all var(--transition-fast);
  box-sizing: border-box;
}

/* 입력 필드 호버 — Salesforce 스타일 테두리 강조 */
.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--border-strong);
  background: var(--bg-canvas);
}

/* 입력 필드 포커스 — 미려한 Jira Corporate Blue 링 광채 */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--primary);
  box-shadow: var(--shadow-ring); /* 0 0 0 3px rgba(0, 82, 204, 0.2) */
  background: var(--bg-white);
}

/* 플레이스홀더 */
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-disabled);
}

/* 드롭다운 셀렉트 */
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2342526E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 36px;
  cursor: pointer;
}

/* 텍스트영역 */
.form-textarea {
  min-height: 80px;
  resize: vertical;
}

/* ===== 검색 바 (Search Bar) ===== */
.search-bar {
  position: relative;
  width: 100%;
}

.search-bar input {
  padding-left: 36px;
  height: 38px; /* High density compact search */
}

/* 검색 돋보기 아이콘 */
.search-bar .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
}