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

/* ── Custom Tooltip ─────────────────────────────────────────────────────── */
/* Rendered by tooltip_controller.js (position:fixed, viewport-aware).     */
/* data-tooltip-align="right" is no longer needed — JS handles positioning. */

/* ── Onboarding Spotlight ────────────────────────────────────────────────── */

@keyframes onboarding-complete-bounce {
  0%   { transform: scale(0.3) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.3) rotate(8deg); }
  80%  { transform: scale(0.9) rotate(-4deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes onboarding-complete-fly {
  0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translateY(-120px) rotate(720deg) scale(0); opacity: 0; }
}

@keyframes onboarding-complete-fadeout {
  0%   { opacity: 1; transform: scale(1); }
  80%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.95); }
}

@keyframes onboarding-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(249,115,22,0.5); }
  60%  { box-shadow: 0 0 0 8px rgba(249,115,22,0); }
  100% { box-shadow: 0 0 0 0 rgba(249,115,22,0); }
}

/* 步驟 1：工具列全部降調，焦點在 banner */
body.onboarding-step-1 [data-controller="paintbrush"] {
  opacity: 0.2;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* 步驟 2：工具列非模板區降調，班種卡片 pulse */
body.onboarding-step-2 [data-controller="paintbrush"] {
  transition: opacity 0.4s ease;
}
body.onboarding-step-2 .paintbrush-non-template {
  opacity: 0.2;
  pointer-events: none;
}
body.onboarding-step-2 [data-paintbrush-target="templateCards"] {
  animation: onboarding-pulse 1.8s ease-in-out infinite;
  border-radius: 8px;
}

/* 步驟 2 選了班種後：只解鎖日期列和建班按鈕，其他繼續降調 */
body.onboarding-step-2-unlocked .paintbrush-non-template {
  opacity: 0.2;
  pointer-events: none;
}
body.onboarding-step-2-unlocked .paintbrush-scheduling {
  opacity: 1 !important;
  pointer-events: auto !important;
}
body.onboarding-step-2-unlocked [data-paintbrush-target="templateCards"] {
  animation: none;
}
/* 步驟 1、2（含 unlocked）：甘特主體降調 */
body.onboarding-step-1 .gantt-main,
body.onboarding-step-2 .gantt-main,
body.onboarding-step-2-unlocked .gantt-main {
  opacity: 0.2;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* 步驟 3：工具列降調，甘特主體正常，員工行降調，待排班列可點 */
body.onboarding-step-3 [data-controller="paintbrush"] > :not(.gantt-main) {
  opacity: 0.2;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
body.onboarding-step-3 .gantt-main .gantt-employee-rows {
  opacity: 0.2;
  pointer-events: none;
}