/* =========================================================
   Stimulus 컨트롤러 CSS
   coin_price, trade_form, modal, toast 관련 스타일
   ========================================================= */

/* -------------------------------------------------------
   코인 가격 변동 깜빡임 애니메이션
   coin_price_controller.js: flashChange()
   ------------------------------------------------------- */
@keyframes flash-up {
  0%   { background-color: transparent; }
  30%  { background-color: rgba(239, 68, 68, 0.15); }  /* red-500 */
  100% { background-color: transparent; }
}

@keyframes flash-down {
  0%   { background-color: transparent; }
  30%  { background-color: rgba(59, 130, 246, 0.15); }  /* blue-500 */
  100% { background-color: transparent; }
}

.flash-up {
  animation: flash-up 0.8s ease-out;
}

.flash-down {
  animation: flash-down 0.8s ease-out;
}

/* -------------------------------------------------------
   모달 애니메이션
   modal_controller.js: open/close
   ------------------------------------------------------- */

/* backdrop */
.modal-backdrop-visible {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* 모달 패널 */
.modal-panel-visible {
  transform: scale(1) !important;
  opacity: 1 !important;
}

/* trade_form_controller.js 확인 모달 */
.modal-visible .modal-panel,
.modal-visible {
  opacity: 1;
  transform: scale(1);
}

/* -------------------------------------------------------
   토스트 알림 애니메이션
   toast_controller.js
   ------------------------------------------------------- */

@keyframes toast-slide-in {
  from {
    transform: translateY(8px) translateX(8px);
    opacity: 0;
  }
  to {
    transform: translateY(0) translateX(0);
    opacity: 1;
  }
}

@keyframes toast-slide-out {
  from {
    transform: translateY(0) translateX(0);
    opacity: 1;
  }
  to {
    transform: translateY(4px) translateX(4px);
    opacity: 0;
  }
}

.toast-item.toast-visible {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

.toast-item.toast-hiding {
  animation: toast-slide-out 0.3s ease-in forwards;
}

/* 서버 렌더링 단일 토스트 */
[data-controller="toast"].toast-visible {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

[data-controller="toast"].toast-hiding {
  animation: toast-slide-out 0.3s ease-in forwards;
}

/* -------------------------------------------------------
   매수/매도 탭 스타일
   trade_form_controller.js
   ------------------------------------------------------- */
.tab-buy {
  background-color: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
}

.tab-sell {
  background-color: #3b82f6;
  color: #ffffff;
  border-color: #3b82f6;
}

.tab-inactive {
  background-color: #f9fafb;
  color: #6b7280;
  border-color: #e5e7eb;
}

/* -------------------------------------------------------
   주문 내역 신규 항목 등장 애니메이션
   _order.turbo_stream.erb
   ------------------------------------------------------- */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

/* -------------------------------------------------------
   출석 버튼 상태
   attendance_controller.js
   ------------------------------------------------------- */
[data-controller="attendance"] button:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* -------------------------------------------------------
   포트폴리오 차트
   portfolio_chart_controller.js
   ------------------------------------------------------- */
[data-controller="portfolio-chart"] canvas {
  max-width: 100%;
  height: auto;
}