/**
 * Tooltip 樣式系統
 *
 * 包含 5 種 Tooltip 類型：
 * - default: 預設黑色半透明背景
 * - warning: 橙色警告提示
 * - error: 紅色錯誤提示
 * - success: 綠色成功提示
 * - info: 藍色資訊提示
 *
 * 特色：
 * - 淡入淡出動畫效果
 * - 5px 向上移動動畫
 * - 響應式設計支援
 * - 自動邊界檢測
 */

/* ===== 基礎 Tooltip 樣式 ===== */
.custom-tooltip {
  position: fixed;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 400;
  white-space: nowrap;
  max-width: 300px;
  word-wrap: break-word;

  /* 視覺效果 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);

  /* 層級與互動 */
  z-index: 99999;
  pointer-events: none;
  user-select: none;

  /* 初始狀態（隱藏） */
  opacity: 0;
  visibility: hidden;
  display: block;

  /* 動畫過渡 */
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  transform: translateY(5px); /* 初始位置稍微下移 */
}

/* ===== 顯示狀態 ===== */
.custom-tooltip.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0); /* 向上移動到最終位置 */
  transition-delay: 0s;
}

/* ===== Tooltip 位置變化 ===== */
.custom-tooltip.bottom {
  /* 當 Tooltip 顯示在元素下方時，反向動畫 */
  transform: translateY(-5px);
}

.custom-tooltip.bottom.show {
  transform: translateY(0);
}

/* ===== Tooltip 類型樣式 ===== */

/* 預設類型：黑色半透明 */
.custom-tooltip.default {
  background: rgba(0, 0, 0, 0.9);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 警告類型：橙色 */
.custom-tooltip.warning {
  background: rgba(255, 152, 0, 0.95);
  color: #ffffff;
  border: 1px solid rgba(255, 193, 7, 0.3);
}

/* 錯誤類型：紅色 */
.custom-tooltip.error {
  background: rgba(244, 67, 54, 0.95);
  color: #ffffff;
  border: 1px solid rgba(255, 82, 82, 0.3);
}

/* 成功類型：綠色 */
.custom-tooltip.success {
  background: rgba(76, 175, 80, 0.95);
  color: #ffffff;
  border: 1px solid rgba(129, 199, 132, 0.3);
}

/* 資訊類型：藍色 */
.custom-tooltip.info {
  background: rgba(33, 150, 243, 0.95);
  color: #ffffff;
  border: 1px solid rgba(100, 181, 246, 0.3);
}

/* ===== 響應式設計 ===== */

/* 平板裝置 (768px - 1024px) */
@media (max-width: 1024px) {
  .custom-tooltip {
    font-size: 12px;
    padding: 7px 10px;
    max-width: 250px;
  }
}

/* 手機裝置 (< 768px) */
@media (max-width: 768px) {
  .custom-tooltip {
    font-size: 11px;
    padding: 6px 9px;
    max-width: 200px;
    border-radius: 4px;
  }
}

/* 小螢幕手機 (< 480px) */
@media (max-width: 480px) {
  .custom-tooltip {
    font-size: 10px;
    padding: 5px 8px;
    max-width: 150px;
    white-space: normal; /* 允許換行 */
  }
}

/* ===== 特殊狀態樣式 ===== */

/* 禁用狀態的元素不顯示 Tooltip */
[disabled] .custom-tooltip,
.disabled .custom-tooltip {
  display: none !important;
}

/* ===== 可訪問性增強 ===== */

/* 高對比度模式支援 */
@media (prefers-contrast: high) {
  .custom-tooltip {
    border-width: 2px;
  }

  .custom-tooltip.default {
    background: rgba(0, 0, 0, 1);
    border-color: rgba(255, 255, 255, 0.5);
  }

  .custom-tooltip.warning {
    background: rgba(255, 152, 0, 1);
    border-color: rgba(255, 255, 255, 0.5);
  }

  .custom-tooltip.error {
    background: rgba(244, 67, 54, 1);
    border-color: rgba(255, 255, 255, 0.5);
  }

  .custom-tooltip.success {
    background: rgba(76, 175, 80, 1);
    border-color: rgba(255, 255, 255, 0.5);
  }

  .custom-tooltip.info {
    background: rgba(33, 150, 243, 1);
    border-color: rgba(255, 255, 255, 0.5);
  }
}

/* 減少動畫偏好支援 */
@media (prefers-reduced-motion: reduce) {
  .custom-tooltip {
    transition: opacity 0.1s ease;
    transform: none !important;
  }

  .custom-tooltip.show {
    transform: none !important;
  }
}

/* ===== 深色模式支援（未來擴展） ===== */
@media (prefers-color-scheme: dark) {
  .custom-tooltip.default {
    background: rgba(255, 255, 255, 0.95);
    color: #000000;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
}

/* ===== 列印樣式 ===== */
@media print {
  .custom-tooltip {
    display: none !important;
  }
}

/* ===== 動畫效果（淡入） ===== */
@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== 輔助類別 ===== */

/* 強制顯示 Tooltip（用於測試） */
.custom-tooltip.force-show {
  display: block !important;
  opacity: 1 !important;
}

/* 固定 Tooltip（不會自動隱藏，用於特殊場景） */
.custom-tooltip.pinned {
  pointer-events: auto;
  cursor: pointer;
}

/* 多行 Tooltip */
.custom-tooltip.multiline {
  white-space: normal;
  max-width: 400px;
}

/* 大型 Tooltip */
.custom-tooltip.large {
  font-size: 15px;
  padding: 12px 16px;
  max-width: 400px;
}

/* 小型 Tooltip */
.custom-tooltip.small {
  font-size: 11px;
  padding: 4px 8px;
  max-width: 200px;
}

/* ===== Z-index 管理註解 ===== */
/*
 * Tooltip z-index: 10000
 * 確保 Tooltip 顯示在大多數元素之上
 *
 * 如果需要調整層級順序，請參考以下指南：
 * - Modal/Dialog: 9000
 * - Dropdown Menu: 8000
 * - Header/Navigation: 1000
 * - Tooltip: 10000 (最高)
 */