/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Action Text 스타일은 별도 link 태그로 로드됨 */

/* Ocean Pixel Kingdom Design System은 별도 link 태그로 로드됨 */

/* 전역 입력 필드 스타일 개선 - 커서 위치 및 패딩 최적화 */

/* 모든 텍스트 입력 필드에 적절한 패딩 적용 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="week"],
input[type="month"],
textarea,
select {
  padding: 0.625rem 1rem; /* 10px 16px - 충분한 좌우 패딩으로 커서가 가장자리에 붙지 않도록 */
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* textarea 특별 처리 - 더 많은 패딩 */
textarea {
  padding: 0.75rem 1rem; /* 12px 16px */
  line-height: 1.6;
  resize: vertical;
  min-height: 100px;
}

/* 코드/모노스페이스 입력 필드는 더 많은 패딩 */
input.font-mono,
textarea.font-mono,
.font-mono input,
.font-mono textarea {
  padding: 0.75rem 1.25rem; /* 12px 20px */
  letter-spacing: 0.025em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* 작은 입력 필드 */
input.text-sm,
textarea.text-sm,
select.text-sm,
.text-sm input,
.text-sm textarea,
.text-sm select {
  padding: 0.5rem 0.875rem; /* 8px 14px */
}

/* 포커스 상태 개선 */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #6366f1; /* indigo-500 */
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* 플레이스홀더 스타일 */
::placeholder {
  color: #9ca3af; /* gray-400 */
  opacity: 1;
}

/* 선택된 텍스트 스타일 */
::selection {
  background-color: #e0e7ff; /* indigo-100 */
  color: #312e81; /* indigo-900 */
}

/* JSON 에디터나 코드 입력 영역 특별 스타일 */
.json-editor,
.code-editor,
[data-code-input="true"] {
  padding: 1rem 1.25rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  line-height: 1.8;
  tab-size: 2;
}

/* ERD 다이어그램 입력 필드 */
.diagram-input input,
.diagram-input textarea {
  padding: 0.625rem 1rem;
}

/* 테이블 편집 모달의 입력 필드 */
.modal input[type="text"],
.modal textarea,
.modal select {
  padding: 0.5rem 0.875rem;
}

/* 엔드포인트 모달의 입력 필드 */
#endpoint-path,
#endpoint-description,
#endpoint-headers,
#endpoint-params {
  padding: 0.625rem 1rem !important;
}

/* 헤더와 파라미터 행의 입력 필드 */
.header-key,
.header-value,
.param-name,
.param-description {
  padding: 0.5rem 0.875rem !important;
}

/* 폼 그룹 내의 입력 필드 - Rails 폼 헬퍼와 호환 */
.field input,
.field textarea,
.field select,
.form-group input,
.form-group textarea,
.form-group select {
  padding: 0.625rem 1rem;
}

/* 인라인 에디터블 필드 */
[contenteditable="true"] {
  padding: 0.5rem 0.75rem;
  min-height: 2.5rem;
}

/* 체크박스와 라디오 버튼은 패딩 조정 제외 */
input[type="checkbox"],
input[type="radio"] {
  padding: 0;
}

/* 파일 업로드 입력 */
input[type="file"] {
  padding: 0.5rem 0.875rem;
}

/* 버튼 내부의 입력 필드 (검색 바 등) */
.input-group input {
  padding: 0.5rem 1rem;
}

/* 모바일 반응형 - 작은 화면에서는 패딩 약간 축소 */
@media (max-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  textarea,
  select {
    padding: 0.5rem 0.875rem;
  }
  
  textarea {
    padding: 0.625rem 0.875rem;
  }
}

/* Tailwind 클래스 오버라이드 - 더 구체적인 선택자로 우선순위 높임 */
.rounded-md.border-gray-300 {
  padding: 0.625rem 1rem !important;
}

.rounded-lg.border-gray-300 {
  padding: 0.625rem 1rem !important;
}

/* 스크롤바 스타일링 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #9ca3af;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

/* Firefox 스크롤바 */
* {
  scrollbar-width: thin;
  scrollbar-color: #9ca3af #f3f4f6;
}

/* 토스트 알림 애니메이션 */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast-notification {
  animation: slideInRight 0.3s ease-out;
}

/* 모달 애니메이션 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-backdrop {
  animation: fadeIn 0.2s ease-out;
}

.modal-content {
  animation: slideUp 0.3s ease-out;
}

/* 버튼 호버 효과 개선 */
button,
.btn,
[role="button"] {
  transition: all 0.15s ease-in-out;
}

/* button_to 헬퍼가 생성하는 form을 인라인으로 표시 */
form.button_to,
form.inline-block {
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

/* 버튼 그룹 내의 form 요소 정렬 */
.flex form.button_to,
.flex form.inline-block {
  display: inline-flex;
  align-items: center;
}

/* 버튼 그룹 내의 모든 버튼 크기 통일 - 더 구체적인 선택자 */
.flex.space-x-2.items-center > a,
.flex.space-x-2.items-center > form,
.flex.space-x-2.items-center > form > button {
  margin: 0;
  vertical-align: middle;
}

/* 인라인 플렉스 버튼들의 높이 통일 */
.inline-flex.items-center {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

/* button_to 폼 내의 버튼이 링크와 동일한 높이를 갖도록 */
form.button_to button.inline-flex,
form.inline-block button.inline-flex {
  margin: 0;
  display: inline-flex;
}

/* 특정 버튼 그룹에서 모든 버튼 스타일 강제 통일 */
.flex.gap-2.items-center > a.inline-flex.items-center,
.flex.gap-2.items-center > form > button.inline-flex.items-center,
.flex.space-x-2.items-center > a.inline-flex.items-center,
.flex.space-x-2.items-center > form > button.inline-flex.items-center {
  padding: 0.375rem 0.75rem !important; /* px-3 py-1.5 */
  font-size: 0.875rem !important; /* text-sm */
  line-height: 1.25rem !important; /* leading-5 */
  border-width: 1px !important;
  border-radius: 0.375rem !important; /* rounded-md */
  font-weight: 500 !important; /* font-medium */
  display: inline-flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  height: 2rem !important; /* 고정 높이 설정 (h-8 = 32px = 2rem) */
  min-height: 2rem !important;
  max-height: 2rem !important;
}

/* 카드 호버 효과 */
.card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.15s ease-in-out;
}

/* 링크 호버 효과 */
a {
  transition: color 0.15s ease-in-out;
}

/* 테이블 행 호버 효과 */
tbody tr:hover {
  background-color: #f9fafb;
  transition: background-color 0.15s ease-in-out;
}

/* Lazy Loading Styles */
img[data-src] {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

img.lazy-loaded {
  opacity: 1;
}

/* Loading placeholder */
.image-placeholder {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}