/*
 * 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.
 */

/* Pretendard 폰트를 기본 폰트로 설정 */
:root {
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

html, body {
  font-family: var(--font-sans);
}

* {
  font-family: var(--font-sans);
}

/* 스크롤바를 항상 표시하여 레이아웃 시프트 방지 */
html {
  overflow-y: scroll;
}

/* 실시간 검증 관련 스타일 */

/* 검증 성공/실패 테두리 색상 */
input.border-green-300 {
  border-color: #86efac !important;
}

input.border-red-300 {
  border-color: #fca5a5 !important;
}

/* 툴팁 스타일 */
.expense-field-tooltip {
  max-width: 300px;
  word-wrap: break-word;
  animation: fadeIn 0.2s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 검증 메시지 애니메이션 */
.field-validation-message {
  animation: slideIn 0.2s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 경비 코드 정보 박스 */
.expense-code-info {
  transition: all 0.3s ease;
}

/* 커스텀 필드 컨테이너 */
[data-expense-item-form-target="customFields"] {
  transition: all 0.3s ease;
}

/* 검증 진행 중 표시 */
input.validating {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239CA3AF' fill-rule='nonzero'%3E%3Cpath d='M10 2a8 8 0 100 16 8 8 0 000-16zm0 14a6 6 0 110-12 6 6 0 010 12z' opacity='.3'/%3E%3Cpath d='M10 2a8 8 0 018 8h-2a6 6 0 00-6-6V2z'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 10 10' to='360 10 10' dur='1s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
}

/* Choices.js 커스텀 스타일 import */
@import "choices-custom.css";

/* Kaminari 페이지네이션 스타일 import */
@import "pagination.css";

/* Sortable.js 커스텀 스타일 import */
@import "sortable_custom.css";