/**
 * Toast Component Styles
 * Based on TinTint Design System (Figma)
 * 
 * 類型：Success / Info / Warning / Error
 * 變體：
 *   - Toast 01：自動消失 (4s)
 *   - Toast 02：自動消失 + 操作按鈕 (6s)
 *   - Toast 03：手動關閉 (有 X 按鈕)
 * 
 * 單位：rem (基準 16px = 1rem)
 */

/* ==========================================================================
   Toast Container
   位置：Header 下方 12px，水平置中
   ========================================================================== */
.tt-toast-container {
    position: fixed;
    top: calc(var(--header-height, 0px) + 0.75rem); /* header 高度 + 12px */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px */
    pointer-events: none;
}

/* 位置變體 */
.tt-toast-container--top-right {
    left: auto;
    right: 1rem;
    transform: none;
}

.tt-toast-container--top-left {
    left: 1rem;
    transform: none;
}

.tt-toast-container--bottom-center {
    top: auto;
    bottom: 0.75rem;
}

.tt-toast-container--bottom-right {
    top: auto;
    bottom: 0.75rem;
    left: auto;
    right: 1rem;
    transform: none;
}

.tt-toast-container--bottom-left {
    top: auto;
    bottom: 0.75rem;
    left: 1rem;
    transform: none;
}

/* ==========================================================================
   Toast Base Styles
   ========================================================================== */
.tt-toast {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 1rem; /* 16px */
    gap: 0.5rem; /* 8px */
    
    width: 25rem; /* 400px */
    max-width: calc(100vw - 2rem); /* 32px */
    
    border-radius: 0.25rem; /* 4px */
    box-shadow: 0 0.375rem 0.75rem rgba(0, 0, 0, 0.08); /* 0 6px 12px */
    
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 0.875rem; /* 14px */
    font-weight: 400;
    line-height: 150%;
    
    pointer-events: auto;
    
    /* Animation */
    opacity: 0;
    transform: translateY(-1.25rem); /* -20px */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.tt-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.tt-toast.hiding {
    opacity: 0;
    transform: translateY(-1.25rem); /* -20px */
}

/* ==========================================================================
   Toast Content Layout
   ========================================================================== */
.tt-toast__content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem; /* 4px */
    flex: 1;
    min-width: 0; /* 允許文字截斷 */
}

.tt-toast__wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem; /* 8px */
    flex: 1;
    min-width: 0;
}

/* Icon */
.tt-toast__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1rem; /* 16px */
    height: 1rem; /* 16px */
    flex-shrink: 0;
}

.tt-toast__icon i,
.tt-toast__icon svg {
    width: 1rem; /* 16px */
    height: 1rem; /* 16px */
}

/* Text */
.tt-toast__text {
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ==========================================================================
   Toast Types - Color Schemes
   ========================================================================== */

/* Success */
.tt-toast--success {
    background: #EEFAF1;
    border: 1px solid #DDF5E2;
    color: #2A7445;
}

.tt-toast--success .tt-toast__icon {
    color: #2A7445;
}

/* Info */
.tt-toast--info {
    background: #EEF8FB;
    border: 1px solid #DCF0F7;
    color: #22697A;
}

.tt-toast--info .tt-toast__icon {
    color: #22697A;
}

/* Warning */
.tt-toast--warning {
    background: #FFF8E6;
    border: 1px solid #FFEFC2;
    color: #8B6914;
}

.tt-toast--warning .tt-toast__icon {
    color: #8B6914;
}

/* Error / Alert / Danger */
.tt-toast--error {
    background: #FFEFE8;
    border: 1px solid #FFDED1;
    color: #90341A;
}

.tt-toast--error .tt-toast__icon {
    color: #90341A;
}

/* ==========================================================================
   Action Button
   ========================================================================== */
.tt-toast__action {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0.25rem 0.5rem; /* 4px 8px */
    gap: 0.25rem; /* 4px */
    
    background: #212121;
    border: 1px solid #212121;
    border-radius: 0.25rem; /* 4px */
    
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    line-height: 1.375rem; /* 22px */
    color: #FFFFFF;
    
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.tt-toast__action:hover {
    background: #333333;
}

.tt-toast__action:active {
    transform: scale(0.98);
}

/* ==========================================================================
   Close Button
   ========================================================================== */
.tt-toast__close {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.5rem; /* 24px */
    height: 1.5rem; /* 24px */
    padding: 0.25rem; /* 4px */
    
    background: transparent;
    border: none;
    border-radius: 0.25rem; /* 4px */
    
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.tt-toast__close:hover {
    background: rgba(0, 0, 0, 0.05);
}

.tt-toast__close svg {
    width: 1rem; /* 16px */
    height: 1rem; /* 16px */
    transition: opacity 0.2s ease;
}

.tt-toast__close:hover svg {
    opacity: 0.8;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
@media (max-width: 30em) { /* 480px */
    .tt-toast-container {
        left: 1rem; /* 16px */
        right: 1rem; /* 16px */
        transform: none;
    }
    
    .tt-toast {
        width: 100%;
    }
}

/* ==========================================================================
   Progress Bar (Optional)
   顯示倒數計時進度
   ========================================================================== */
.tt-toast__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0.1875rem; /* 3px */
    background: currentColor;
    opacity: 0.3;
    border-radius: 0 0 0.25rem 0.25rem; /* 4px */
    transition: width linear;
}

.tt-toast--success .tt-toast__progress { background: #2A7445; }
.tt-toast--info .tt-toast__progress { background: #22697A; }
.tt-toast--warning .tt-toast__progress { background: #8B6914; }
.tt-toast--error .tt-toast__progress { background: #90341A; }

/* ==========================================================================
   Legacy Bootstrap Override (如果需要相容舊版)
   ========================================================================== */
.tt-toast-container .toast {
    /* Reset Bootstrap styles */
    background: none;
    border: none;
    box-shadow: none;
}