/* Flight Manager v1.3 樣式 */
* { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

:root {
    --primary-50: color-mix(in srgb, var(--primary) 10%, var(--bg-card));
    --primary-100: color-mix(in srgb, var(--primary) 20%, var(--bg-card));
    --primary-500: var(--primary);
    --primary-600: var(--primary-dark);
    --success-50: color-mix(in srgb, var(--success) 10%, var(--bg-card));
    --success-500: var(--success);
    --danger-50: color-mix(in srgb, var(--danger) 10%, var(--bg-card));
    --danger-500: var(--danger);
    --warning-50: color-mix(in srgb, var(--warning) 10%, var(--bg-card));
    --warning-500: var(--warning);
    --gray-100: var(--bg-surface);
}

.app-bg {
    background: linear-gradient(135deg, var(--bg-main) 0%, color-mix(in srgb, var(--bg-main) 95%, var(--primary) 5%) 100%);
    min-height: 100vh;
}

.header {
    background: rgba(30, 41, 59, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
[data-theme="light"] .header {
    background: color-mix(in srgb, var(--bg-card) 85%, transparent);
}

.header-buttons { display: flex; align-items: center; gap: 0.5rem; }

/* 統一 Header 按鈕尺寸 */
.header-buttons .btn-sync,
.header-buttons .btn-import,
.header-buttons .btn-add {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    box-sizing: border-box;
    padding: 0 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.header-buttons .btn-add {
    width: 40px;
    padding: 0;
}

.btn-sync {
    background: var(--success);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.btn-sync:hover { 
    background: var(--success-dark);
}
.btn-sync.connected {
    background: var(--primary);
}
.btn-sync.connected:hover {
    background: var(--primary-dark);
}

.btn-import {
    background: var(--success);
    color: white;
}
.btn-import:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* 航班卡片 */
.flight-card {
    background: var(--bg-card); border-radius: 16px; padding: 1.25rem;
    box-shadow: var(--shadow-sm); border: 1px solid var(--border);
    transition: all 0.2s ease; position: relative; overflow: hidden;
    flex: 1; display: flex; align-items: center; gap: 1rem;
}
.flight-card:hover { box-shadow: var(--shadow-md); border-color: var(--primary-light); }
.flight-item-wrapper { display: flex; align-items: center; gap: 10px; }

/* 倒數計時 */
.countdown {
    min-width: 70px; text-align: center; padding: 0.75rem;
    background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
    border-radius: 12px;
}
.countdown-number { font-size: 1.75rem; font-weight: 700; color: var(--primary); line-height: 1; }
.countdown-label { font-size: 0.75rem; color: var(--primary); font-weight: 500; margin-top: 0.25rem; }

/* 航班號碼標籤 */
.flight-number-badge {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.375rem 0.75rem; background: linear-gradient(135deg, #1e293b, #0f172a);
    color: white; font-size: 0.8125rem; font-weight: 600;
    border-radius: 8px; letter-spacing: 0.025em;
}
[data-theme="light"] .flight-number-badge { background: linear-gradient(135deg, #334155, #1e293b); }

/* 航線顯示 */
.route-display { display: flex; align-items: center; gap: 0.75rem; }
.airport { text-align: center; }
.airport-code { font-size: 1.125rem; font-weight: 700; color: var(--text-primary); }
.airport-time { font-size: 0.75rem; color: var(--text-secondary); font-weight: 500; }
.airport-terminal { font-size: 0.625rem; color: var(--text-muted); margin-top: 0.125rem; }
.route-line { flex: 1; display: flex; align-items: center; gap: 0.5rem; }
.route-line-bar { flex: 1; height: 2px; background: linear-gradient(90deg, var(--success), var(--primary), var(--danger)); border-radius: 1px; }
.route-line-icon { color: var(--text-muted); }

/* 旅程類型標籤 */
.trip-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.625rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; }
.trip-badge-outbound { background: var(--primary-50); color: var(--primary); }
.trip-badge-return { background: var(--danger-50); color: var(--danger); }
.trip-badge-transfer { background: var(--gray-100); color: var(--text-secondary); }

/* 操作按鈕 */
.action-buttons-outside { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.action-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 10px; transition: all 0.2s ease; border: none; cursor: pointer; }
.action-btn:hover { transform: scale(1.08); }
.action-btn-calendar { background: var(--success-50); color: var(--success); }
.action-btn-calendar:hover { background: var(--success); color: white; }
.action-btn-edit { background: var(--primary-50); color: var(--primary); }
.action-btn-edit:hover { background: var(--primary); color: white; }
.action-btn-delete { background: var(--danger-50); color: var(--danger); }
.action-btn-delete:hover { background: var(--danger); color: white; }
@media (max-width: 640px) { .action-buttons-outside { display: none; } }

/* 旅程類型選擇 */
.trip-type-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem; }
.trip-btn { padding: 0.625rem 0.75rem; border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer; transition: all 0.2s ease; background: var(--bg-card); font-weight: 600; font-size: 0.875rem; color: var(--text-secondary); }
.trip-btn:hover { border-color: var(--primary-light); background: var(--primary-50); color: var(--primary); }
.trip-btn.active.outbound { background: var(--primary-50); border-color: var(--primary); color: var(--primary); }
.trip-btn.active.return { background: var(--danger-50); border-color: var(--danger); color: var(--danger); }
.trip-btn.active.transfer { background: var(--warning-50); border-color: var(--warning); color: var(--warning); }

/* 旅程資訊卡 */
.trip-info-card { background: linear-gradient(135deg, var(--primary-50), var(--primary-100)); border: 1px solid rgba(79, 70, 229, 0.2); border-radius: 12px; padding: 1rem 1.25rem; display: flex; align-items: center; gap: 0.875rem; }
.trip-info-icon { width: 40px; height: 40px; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; box-shadow: var(--shadow-sm); }
.trip-info-content h3 { font-weight: 600; color: var(--text-primary); font-size: 0.9375rem; }
.trip-info-content p { font-size: 0.8125rem; color: var(--text-secondary); margin-top: 0.125rem; }

/* 歷史區塊 */
.history-section { background: var(--bg-surface); border-radius: 16px; padding: 1.25rem; border: 1px solid var(--border); }

/* 滑動刪除 */
.swipe-delete { position: absolute; right: 0; top: 0; bottom: 0; width: 80px; background: var(--danger); display: flex; align-items: center; justify-content: center; border-radius: 0 16px 16px 0; transform: translateX(100%); transition: transform 0.2s ease; }
.swipe-delete button { color: white; font-size: 0.75rem; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; background: none; border: none; cursor: pointer; }

/* 載入動畫 */
.spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Modal 動畫 */
.modal-enter { animation: slideIn 0.25s ease-out; }
.modal-exit { animation: slideOut 0.2s ease-in; }
.toast-enter { animation: slideIn 0.25s ease-out; }
.toast-exit { animation: slideOut 0.2s ease-in; }
@keyframes slideIn { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-10px); opacity: 0; } }

/* 匯入功能 */
.import-dropzone { border: 2px dashed var(--border); border-radius: 12px; padding: 2rem; text-align: center; cursor: pointer; transition: all 0.2s ease; }
.import-dropzone:hover, .import-dropzone.dragover { border-color: var(--primary); background: var(--primary-50); }
.import-dropzone-icon { width: 48px; height: 48px; margin: 0 auto 1rem; background: var(--primary-50); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--primary); }

.import-preview-list { max-height: 50vh; overflow-y: auto; }
.import-preview-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 0.5rem; background: var(--bg-card); }
.import-preview-item.duplicate { opacity: 0.5; background: var(--bg-surface); }
.import-preview-checkbox { width: 20px; height: 20px; accent-color: var(--primary); }
.import-preview-info { flex: 1; min-width: 0; }
.import-preview-flight { font-weight: 600; color: var(--text-primary); }
.import-preview-route { font-size: 0.8125rem; color: var(--text-secondary); }
.import-preview-date { font-size: 0.75rem; color: var(--text-muted); }
.import-trip-select { padding: 0.375rem 0.5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text-primary); font-size: 0.8125rem; cursor: pointer; }
.import-trip-select:focus { outline: none; border-color: var(--primary); }
.duplicate-badge { font-size: 0.625rem; padding: 0.125rem 0.375rem; background: var(--warning-50); color: var(--warning); border-radius: 4px; font-weight: 600; margin-left: 0.5rem; }

/* Utility classes */
.sticky { position: sticky; } .top-0 { top: 0; } .z-10 { z-index: 10; } .z-50 { z-index: 50; }
.max-w-2xl { max-width: 42rem; } .mx-auto { margin-left: auto; margin-right: auto; }
.px-4 { padding-left: 1rem; padding-right: 1rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.flex { display: flex; } .flex-1 { flex: 1; } .flex-shrink-0 { flex-shrink: 0; } .flex-wrap { flex-wrap: wrap; }
.justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .items-center { align-items: center; }
.gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .mt-3 { margin-top: 0.75rem; } .mb-2 { margin-bottom: 0.5rem; }
.min-w-0 { min-width: 0; } .space-y-3 > * + * { margin-top: 0.75rem; } .space-y-6 > * + * { margin-top: 1.5rem; }
.min-h-screen { min-height: 100vh; } .text-xs { font-size: 0.75rem; } .text-right { text-align: right; }
.font-medium { font-weight: 500; } .opacity-50 { opacity: 0.5; }
.w-3 { width: 0.75rem; } .w-4 { width: 1rem; } .w-5 { width: 1.25rem; }
.h-3 { height: 0.75rem; } .h-4 { height: 1rem; } .h-5 { height: 1.25rem; }
.fixed { position: fixed; } .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } .hidden { display: none; }

/* 匯入預覽 Modal 加寬 */
.import-preview-modal {
    max-width: 720px !important;
    width: 95vw !important;
}

/* Modal 尺寸 */
.modal-md { max-width: 480px; width: 95vw; }
.modal-lg { max-width: 720px; width: 95vw; }