/* ============================================
   通用提示工具樣式 (Help Tooltips)
   可在任何地方使用的問號提示圖示
   ============================================ */

/* 提示圖示容器 */
.help-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    cursor: help;
    vertical-align: middle;
}

/* 問號圖示 */
.help-tooltip-icon {
    width: 14px;
    height: 14px;
    color: var(--neutral-400);
    transition: color var(--duration-normal) var(--ease-out);
}

.help-tooltip:hover .help-tooltip-icon {
    color: var(--primary, #FF6B35);
}

/* 提示框 */
.help-tooltip-content {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);

    /* 外觀 */
    background: var(--neutral-800);
    color: var(--neutral-100);
    font-size: var(--text-xs);
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);

    /* 尺寸 */
    width: max-content;
    max-width: 280px;
    min-width: 180px;

    /* 隱藏狀態 */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(4px);
    transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out), visibility var(--duration-normal) var(--ease-out);

    /* 層級 - 必須高於 Modal (1050) 才能正確顯示 */
    z-index: var(--z-tooltip);

    /* 防止文字換行過多 */
    white-space: normal;
    text-align: left;

    /* 確保不影響父元素佈局 */
    pointer-events: none;
    contain: layout;
}

/* 提示框箭頭 */
.help-tooltip-content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--neutral-800);
}

/* Hover 顯示 - 原生 CSS hover 已由 TooltipManager.js 接管 */
/* 保留這個規則作為無 JS 時的 fallback */
.help-tooltip:hover .help-tooltip-content {
    /* 由 JS Portal 處理，這裡不顯示避免重複 */
    /* opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0); */
}

/* Portal 容器中的 tooltip 樣式 */
.tooltip-portal-content {
    position: fixed !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: var(--z-tooltip) !important;
    /* 重置 transform，由 JS 控制位置 */
    transform: none !important;
    bottom: auto !important;
}

/* Portal tooltip 向下顯示時的箭頭調整 */
.tooltip-portal-content.tooltip-portal-bottom::after {
    top: -12px;
    bottom: auto;
    border-top-color: transparent;
    border-bottom-color: var(--neutral-800);
}

/* Warning tooltip portal 樣式 */
.tooltip-portal-content.warning-tooltip-content.tooltip-portal-bottom::after {
    border-bottom-color: var(--border-warning);
}

/* ========== 變體：向下顯示 ========== */
.help-tooltip.tooltip-bottom .help-tooltip-content {
    bottom: auto;
    top: calc(100% + 8px);
    transform: translateX(-50%) translateY(-4px);
}

.help-tooltip.tooltip-bottom .help-tooltip-content::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--neutral-800);
}

.help-tooltip.tooltip-bottom:hover .help-tooltip-content {
    transform: translateX(-50%) translateY(0);
}

/* ========== 變體：向左對齊 ========== */
.help-tooltip.tooltip-left .help-tooltip-content {
    left: 0;
    transform: translateX(0) translateY(4px);
}

.help-tooltip.tooltip-left .help-tooltip-content::after {
    left: 12px;
    transform: none;
}

.help-tooltip.tooltip-left:hover .help-tooltip-content {
    transform: translateX(0) translateY(0);
}

/* ========== 變體：向右對齊 ========== */
.help-tooltip.tooltip-right .help-tooltip-content {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(4px);
}

.help-tooltip.tooltip-right .help-tooltip-content::after {
    left: auto;
    right: 12px;
    transform: none;
}

.help-tooltip.tooltip-right:hover .help-tooltip-content {
    transform: translateX(0) translateY(0);
}

/* ========== 變體：不同寬度 ========== */
.help-tooltip.tooltip-wide .help-tooltip-content {
    max-width: 360px;
}

.help-tooltip.tooltip-narrow .help-tooltip-content {
    max-width: 200px;
    min-width: 140px;
}

/* ========== 深色/淺色主題支援 ========== */
.help-tooltip.tooltip-light .help-tooltip-content {
    background: var(--bg-primary);
    color: var(--neutral-700);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

.help-tooltip.tooltip-light .help-tooltip-content::after {
    border-top-color: var(--bg-primary);
}

/* ========== 標籤內聯使用 ========== */
.label-with-tooltip {
    display: inline-flex;
    align-items: center;
}

.label-with-tooltip .help-tooltip {
    margin-left: 4px;
}

/* ========== 響應式調整 ========== */
@media (max-width: 640px) {
    .help-tooltip-content {
        max-width: 220px;
        min-width: 160px;
        font-size: 11px;
        padding: 6px 10px;
    }
}


/* ============================================
   警告提示 (Warning Tooltip) - 驚嘆號
   用於提示用戶注意事項
   ============================================ */

.warning-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    cursor: help;
    vertical-align: middle;
}

.warning-tooltip-icon {
    width: 14px;
    height: 14px;
    color: var(--warning);
    transition: color var(--duration-normal) var(--ease-out);
}

.warning-tooltip:hover .warning-tooltip-icon {
    color: var(--warning-dark);
}

.warning-tooltip-content {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);

    /* 外觀 - 警告色調 */
    background: var(--bg-warning);
    color: var(--text-warning);
    font-size: var(--text-xs);
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-warning);
    box-shadow: var(--shadow-md);

    /* 尺寸 */
    width: max-content;
    max-width: 280px;
    min-width: 180px;

    /* 隱藏狀態 */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(4px);
    transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out), visibility var(--duration-normal) var(--ease-out);

    /* 層級 - 必須高於 Modal (1050) 才能正確顯示 */
    z-index: var(--z-tooltip);
    white-space: normal;
    text-align: left;
}

.warning-tooltip-content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--border-warning);
}

.warning-tooltip:hover .warning-tooltip-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ============================================
   Toast 通知 (底部彈出提示)
   用於狀態切換、操作反饋
   ============================================ */

.toast-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
    /* 限制容器寬度 */
    width: auto;
    max-width: 90vw;
}

.toast {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--input-padding-y) var(--space-lg);
    border-radius: var(--btn-radius);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: 1.4;
    pointer-events: auto;
    /* 文字和背景對齊 */
    max-width: min(90vw, 500px);
    box-sizing: border-box;
    text-align: left;

    /* 動畫 */
    opacity: 0;
    transform: translateY(20px);
    animation: toast-in var(--duration-slow) var(--ease-out) forwards;
}

.toast.toast-out {
    animation: toast-out var(--duration-slow) var(--ease-out) forwards;
}

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

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

/* Toast 類型 */
.toast.toast-info {
    background: var(--neutral-800);
    color: var(--neutral-100);
}

.toast.toast-success {
    background: var(--text-success);
    color: var(--bg-success);
}

.toast.toast-warning {
    background: var(--bg-warning);
    color: var(--text-warning);
    border: 1px solid var(--border-warning);
}

.toast.toast-error {
    background: #7f1d1d;
    color: var(--border-error);
}

/* Toast 圖示 */
.toast-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px; /* 與文字視覺對齊 */
}

.toast-message {
    flex: 1;
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: break-word;
}

.toast-close {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--duration-normal);
}

.toast-close:hover {
    opacity: 1;
}

/* ============================================
   內聯標籤提示 (Inline Label Tips)
   用於表單標籤旁的小提示
   ============================================ */

.inline-tip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--neutral-500);
    margin-left: var(--space-sm);
}

.inline-tip.inline-tip-warning {
    color: var(--warning-dark);
}

.inline-tip.inline-tip-error {
    color: var(--error-dark);
}

.inline-tip.inline-tip-success {
    color: var(--success-dark);
}

.inline-tip-icon {
    width: 14px;
    height: 14px;
}