/* ===== ExpenTrip 1.0 - Mobile-First Responsive Design ===== */

/* 增強的響應式設計和移動端優化 */

/* 移動端優先設計原則 */
/* 基礎樣式已經適合移動端，然後向上擴展到桌面端 */

/* === 移動端基礎樣式 (320px - 768px) === */
@media (max-width: 768px) {
    /* 主容器移動端優化 */
    .main-container {
        margin: 0;
        border-radius: 0;
        min-height: 100vh;
        padding: var(--spacing-sm);
        background: rgba(255, 255, 255, 0.98);
    }
    
    /* 強制所有頁面的 page-header 不影響 LOGO 定位 */
    body.cellphone-mode .page-header {
        display: block !important;
        justify-content: flex-start !important;
        position: static !important;
        overflow: visible !important;
    }
    
    /* 在媒體查詢內也確保 LOGO 浮動定位 */
    body.cellphone-mode .page-header-logo,
    body.cellphone-mode .page-header .page-header-logo,
    body.cellphone-mode div.page-header-logo {
        position: fixed !important;
        top: 15px !important;
        right: 15px !important;
        z-index: 99999 !important;
        width: 75px !important;
        height: 75px !important;
    }
    
    /* 頁面標題移動端優化 */
    .page-header {
        padding: var(--spacing-lg) var(--spacing-md);
        border-radius: 0;
        margin: calc(-1 * var(--spacing-sm)) calc(-1 * var(--spacing-sm)) var(--spacing-md);
        /* 確保不會干擾 LOGO 的固定定位 */
        position: static !important;
        /* 簡單的 block 佈局，LOGO 使用固定定位完全分離 */
        display: block !important;
        justify-content: flex-start !important;
        min-height: auto !important;
        overflow: visible !important;
        /* 為頂部固定的 LOGO 預留空間 */
        padding-top: calc(var(--spacing-lg) + 20px) !important;
    }
    
    /* 手機模式下隱藏 header 內的 LOGO */
    body.cellphone-mode .page-header .page-header-logo,
    body.cellphone-mode .page-header-logo {
        display: none !important;
    }

    /* 移動端獨立浮動 LOGO - 只在手機模式下顯示 */
    .floating-logo {
        position: fixed !important;
        top: 15px !important;
        right: 15px !important;
        left: auto !important; /* 覆蓋可能的 left 設定 */
        bottom: auto !important; /* 覆蓋可能的 bottom 設定 */
        margin: 0 !important; /* 覆蓋所有 margin 設定 */
        z-index: 99999 !important; /* 確保始終在最上層 */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        /* 調整為 75px 容器尺寸 */
        width: 75px !important;
        height: 75px !important;
        min-width: 75px !important;
        min-height: 75px !important;
        max-width: 75px !important;
        max-height: 75px !important;
        /* 浮動設計 - 不影響頁面流且始終可見 */
        pointer-events: auto !important;
        /* 確保在所有背景上都清晰可見 */
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 12px !important; /* 適合 75px 尺寸的圓角 */
        backdrop-filter: blur(5px) !important;
    }
    
    /* 手機模式下強制覆蓋所有頁面的 LOGO 圖片樣式 */
    .page-header .page-header-logo img,
    .page-header-logo img,
    div.page-header-logo img {
        height: 75px !important; /* Logo-IncMapleBill.png 75px x 75px 尺寸 */
        width: 75px !important; /* 完整的 75px 顯示尺寸 */
        object-fit: cover !important; /* 圖像填滿容器 */
        border-radius: 10px !important; /* 適合 75px 尺寸的圓角 */
        transition: all 0.3s ease !important;
        position: relative !important;
        display: block !important;
        margin: 0 !important; /* 覆蓋所有 margin 設定 */
        /* 浮動 LOGO 增強陰影效果 */
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 
                    0 1px 3px rgba(0, 0, 0, 0.2) !important;
        animation: shadowPulse 10s infinite ease-in-out !important;
        /* 確保 LOGO 在浮動狀態下清晰可見 */
        filter: brightness(1.05) contrast(1.1) !important;
        /* 強制確保移動端尺寸不被覆蓋 */
        min-height: 75px !important;
        min-width: 75px !important;
        max-height: 75px !important;
        max-width: 75px !important;
    }

    /* 浮動 LOGO 內的圖片樣式 */
    .floating-logo img {
        height: 75px !important; /* Logo-IncMapleBill.png 75px x 75px 尺寸 */
        width: 75px !important; /* 完整的 75px 顯示尺寸 */
        object-fit: cover !important; /* 圖像填滿容器 */
        border-radius: 8px !important; /* 適合浮動 LOGO 的圓角 */
        transition: all 0.3s ease !important;
        display: block !important;
        margin: 0 !important; /* 覆蓋所有 margin 設定 */
        /* 浮動 LOGO 增強陰影效果 */
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 
                    0 1px 3px rgba(0, 0, 0, 0.2) !important;
        animation: shadowPulse 10s infinite ease-in-out !important;
        /* 確保 LOGO 在浮動狀態下清晰可見 */
        filter: brightness(1.05) contrast(1.1) !important;
        /* 強制確保移動端尺寸不被覆蓋 */
        min-height: 75px !important;
        min-width: 75px !important;
        max-height: 75px !important;
        max-width: 75px !important;
    }
    
    /* Logo 簡潔設計 - 溫和的陰影閃爍效果 */
    @keyframes shadowPulse {
        0% {
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) !important;
        }
        5% {
            box-shadow: 0 0 15px rgba(59, 130, 246, 0.6), 
                       0 0 25px rgba(59, 130, 246, 0.3) !important;
        }
        10% {
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) !important;
        }
        100% {
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) !important;
        }
    }
    
    /* Logo 簡單懸停效果 */
    .page-header-logo:hover img {
        transform: scale(1.05) !important;
        transition: transform 0.2s ease !important;
    }
    
    /* 文字內容區域，LOGO 使用固定定位完全分離 */
    .page-header-content {
        display: block !important;
        padding: var(--spacing-sm) var(--spacing-md) !important;
        /* LOGO 在獨立層級，文字區域使用全寬度 */
        width: 100% !important;
        min-height: auto !important;
    }
    
    .page-title {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
        color: var(--text-primary) !important;
        margin: 0 0 var(--spacing-sm) 0 !important;
        /* 允許自然換行，適應較窄的文字區域 */
        word-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    .page-subtitle {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        color: var(--text-secondary) !important;
        margin: 0 !important;
        /* 允許適度換行，但限制最大行數 */
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        word-wrap: break-word !important;
    }
    
    /* 導航優化 - 水平滾動 */
    .nav-links {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .nav-links::-webkit-scrollbar {
        display: none;
    }
    
    .nav-links a {
        flex-shrink: 0;
        white-space: nowrap;
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.9rem;
        min-width: auto;
        border-radius: var(--radius-lg);
    }
    
    /* 語言切換器移動端優化 */
    .lang-switch-fixed {
        position: fixed;
        top: var(--spacing-sm);
        right: var(--spacing-sm);
        z-index: 1000;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: var(--radius-lg);
        padding: var(--spacing-xs);
        box-shadow: var(--shadow-md);
        font-size: 0.8rem;
    }
    
    /* 控制按鈕優化 */
    .header-controls {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
        margin: var(--spacing-md) 0;
    }
    
    .controls-group {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: var(--spacing-sm);
        justify-content: stretch;
    }
    
    .control-btn {
        padding: var(--spacing-md);
        font-size: 0.9rem;
        white-space: nowrap;
        text-align: center;
        min-height: 44px; /* 適合觸摸的最小尺寸 */
    }
    
    /* 表單優化 */
    .form-container {
        padding: var(--spacing-md);
        margin: var(--spacing-sm) 0;
    }
    
    .form-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .form-input,
    .form-select,
    .form-textarea {
        font-size: 16px; /* 防止iOS縮放 */
        padding: var(--spacing-md);
        min-height: 44px;
        border-radius: var(--radius-md);
    }
    
    .form-label {
        font-size: 0.9rem;
        font-weight: 600;
        margin-bottom: var(--spacing-sm);
    }
    
    /* 表格移動端優化 */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
    }
    
    .data-table {
        min-width: 600px; /* 確保表格可讀性 */
        font-size: 0.85rem;
    }
    
    .data-table th,
    .data-table td {
        padding: var(--spacing-sm);
        white-space: nowrap;
    }
    
    /* 移動端專用的卡片式布局 */
    .mobile-card-view {
        display: block;
    }
    
    .mobile-card {
        background: var(--white);
        border-radius: var(--radius-md);
        padding: var(--spacing-md);
        margin: var(--spacing-sm) 0;
        box-shadow: var(--shadow-sm);
        border-left: 4px solid var(--primary-color);
    }
    
    .mobile-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--spacing-sm);
        font-weight: 600;
        color: var(--text-primary);
    }
    
    .mobile-card-content {
        font-size: 0.9rem;
        color: var(--text-secondary);
        line-height: 1.5;
    }
    
    /* 總結卡片移動端優化 */
    .summary-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        margin: var(--spacing-md) 0;
    }
    
    .summary-card {
        padding: var(--spacing-lg);
        text-align: center;
    }
    
    .summary-card .value {
        font-size: 1.5rem;
        font-weight: 700;
        margin: var(--spacing-sm) 0;
    }
    
    .summary-card .label {
        font-size: 0.9rem;
        font-weight: 500;
    }
    
    /* Summary 頁面統計卡片手機版優化 */
    .stat-cards-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas: 
            "income expense"
            "reimbursable net-savings"
            "special-notes special-notes";
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-xl);
        align-items: stretch; /* 確保所有卡片高度一致 */
    }
    
    /* 確保所有統計卡片寬度完全對稱 */
    .stat-cards-container .stat-card {
        min-width: 0 !important; /* 防止內容撐開寬度 */
        width: 100% !important; /* 確保填滿 grid 區域 */
        box-sizing: border-box !important; /* 包含 padding 和 border 在寬度計算內 */
        padding: var(--spacing-lg) !important; /* 統一內距 */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important; /* 垂直居中對齊 */
        min-height: 120px !important; /* 統一最小高度 */
    }
    
    /* 統一文字樣式確保對稱 */
    .stat-cards-container .stat-card .label {
        font-size: 0.9rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important; /* 長文字自動換行 */
    }
    
    .stat-cards-container .stat-card .value {
        font-size: 1.4rem !important;
        font-weight: 700 !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }
    
    /* 手機模式統計卡片排列 */
    .stat-cards-container .stat-card:nth-child(1) { /* Total Income */
        grid-area: income;
    }
    
    .stat-cards-container .stat-card:nth-child(2) { /* Total Expense */
        grid-area: expense;
    }
    
    .stat-cards-container .stat-card:nth-child(3) { /* Reimbursable */
        grid-area: reimbursable;
    }
    
    .stat-cards-container .stat-card:nth-child(4) { /* Net Savings */
        grid-area: net-savings;
    }
    
    .stat-cards-container .stat-card:nth-child(5) { /* Special Notes */
        grid-area: special-notes;
    }
    
    /* 閃現訊息移動端優化 */
    .flash-messages {
        position: fixed;
        top: 60px;
        left: var(--spacing-sm);
        right: var(--spacing-sm);
        z-index: 999;
        max-width: none;
    }
    
    /* 模態框移動端優化 */
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2000;
        padding: var(--spacing-sm);
        display: flex;
        align-items: flex-start;
        padding-top: 60px;
    }
    
    .modal-content {
        width: 100%;
        max-width: none;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        border-radius: var(--radius-lg);
    }
    
    /* 按鈕組移動端優化 */
    .btn-group {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: var(--spacing-sm);
        margin: var(--spacing-md) 0;
    }
    
    .btn {
        padding: var(--spacing-md);
        min-height: 44px;
        font-size: 0.9rem;
        border-radius: var(--radius-md);
        white-space: nowrap;
        text-align: center;
    }
}

/* === 平板端優化 (768px - 1024px) === */
@media (min-width: 768px) and (max-width: 1024px) {
    /* 平板模式下也隱藏浮動LOGO */
    .floating-logo {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* 平板版 Logo 中等大小 */
    .page-header-logo img {
        height: 100px !important; /* 平板版使用中等大小 */
        border-radius: 10px !important;
    }
    
    .page-header-content {
        max-width: calc(100% - 120px) !important; /* 平板版預留空間 */
        min-height: 100px !important; /* 與平板版 Logo 高度對齊 */
    }
    
    .main-container {
        margin: var(--spacing-sm);
        border-radius: var(--radius-lg);
        padding: var(--spacing-lg);
    }
    
    .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .controls-group {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
    
    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* === 大螢幕優化 (1024px+) === */
@media (min-width: 1024px) {
    /* Computer Mode 下完全隱藏浮動LOGO */
    .floating-logo {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
        z-index: -999 !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* Computer Mode 下隱藏固定語言切換器 */
    .lang-switch-fixed {
        display: none !important;
    }
    
    /* 桌面版 Logo 恢復正常大小 */
    .page-header-logo img {
        height: 80px !important; /* 桌面版使用正常大小 */
        border-radius: 8px !important;
    }
    
    .page-header-content {
        max-width: calc(100% - 100px) !important; /* 桌面版預留空間 */
        min-height: 80px !important; /* 與桌面版 Logo 高度對齊 */
    }
    
    .summary-cards {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .form-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .controls-group {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        max-width: 800px;
    }
    
    /* 桌面端專用的側邊欄導航 */
    .desktop-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: 240px;
        height: 100vh;
        background: var(--white);
        box-shadow: var(--shadow-lg);
        padding: var(--spacing-xl);
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .desktop-sidebar.open {
        transform: translateX(0);
    }
    
    .sidebar-toggle {
        position: fixed;
        top: var(--spacing-lg);
        left: var(--spacing-lg);
        z-index: 101;
        background: var(--primary-color);
        color: var(--white);
        border: none;
        border-radius: var(--radius-md);
        padding: var(--spacing-sm);
        cursor: pointer;
        box-shadow: var(--shadow-md);
    }
}

/* === 超寬螢幕優化 (1440px+) === */
@media (min-width: 1440px) {
    .main-container {
        max-width: 1200px;
    }
    
    .summary-cards {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-xl);
    }
    
    .data-table {
        font-size: 1rem;
    }
}

/* === 平板端 Logo 優化 (769px - 1023px) === */
@media (min-width: 769px) and (max-width: 1023px) {
    /* 平板模式下隱藏浮動LOGO */
    .floating-logo {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    .page-header-logo {
        top: var(--spacing-lg) !important;
        right: var(--spacing-lg) !important;
    }
    
    .page-header-logo img {
        height: 70px !important; /* 平板尺寸：稍微比原本大但不是雙倍 */
        animation: shadowPulse 10s infinite ease-in-out !important;
    }
    
    .page-header-content {
        max-width: calc(100% - 90px) !important;
    }
}

/* === 桌面端 Logo 優化 (1024px+) === */
@media (min-width: 1024px) {
    .page-header-logo {
        top: var(--spacing-xl) !important;
        right: var(--spacing-xl) !important;
    }
    
    .page-header-logo img {
        height: 80px !important; /* 桌面端：維持原本大小 */
        animation: shadowPulse 10s infinite ease-in-out !important;
    }
    
    .page-header-content {
        max-width: calc(100% - 100px) !important;
    }
    
    /* 移除桌面端閃光效果 */
}

/* === 觸摸設備優化 === */
@media (pointer: coarse) {
    /* 增大觸摸目標 */
    .btn,
    .control-btn,
    .nav-links a,
    .action-btn {
        min-height: 44px;
        min-width: 44px;
        padding: var(--spacing-md);
    }
    
    /* 表格行間距增大 */
    .data-table td,
    .data-table th {
        padding: var(--spacing-md) var(--spacing-sm);
    }
    
    /* 表單元素觸摸優化 */
    .form-input,
    .form-select {
        min-height: 48px;
        padding: var(--spacing-md);
    }
}

/* === 高對比度和無障礙優化 === */
@media (prefers-contrast: high) {
    :root {
        --text-primary: #000000;
        --text-secondary: #333333;
        --border-color: #000000;
    }
}

/* === 減少動畫偏好 === */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* === 橫屏模式優化 === */
@media (orientation: landscape) and (max-height: 500px) {
    .page-header {
        padding: var(--spacing-md);
    }
    
    .page-title {
        font-size: 1.5rem;
    }
    
    .main-container {
        padding: var(--spacing-sm);
    }
}

/* === Trip Dropdown Mobile Optimization === */
/* Cellphone mode trip dropdown fixes */
@media (max-width: 768px) {
    body.cellphone-mode #trip_filter,
    body.cellphone-mode .form-select {
        /* Limit width to container size and set proper z-index */
        max-width: 100% !important;
        min-width: auto !important;
        width: 100% !important;
        z-index: 5000 !important;
        
        /* Ensure dropdown stays within trip card boundaries */
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Specific styling for trip selector in header */
    body.cellphone-mode div[style*="z-index: 1000"] select#trip_filter {
        z-index: 5000 !important;
        max-width: calc(100vw - 120px) !important; /* Leave space for logo */
        min-width: auto !important;
    }
    
    /* Prevent dropdown from extending beyond parent container */
    body.cellphone-mode .filter-controls-container select#trip_filter {
        z-index: 5000 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: auto !important;
    }
    
    /* Override inline styles for mobile */
    body.cellphone-mode select[style*="min-width: 200px"] {
        min-width: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    body.cellphone-mode select[style*="z-index: 1001"] {
        z-index: 5000 !important;
    }
}

/* === 打印樣式 === */
@media print {
    .lang-switch-fixed,
    .nav-links,
    .header-controls,
    .control-btn {
        display: none !important;
    }
    
    .main-container {
        background: white !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .page-header {
        background: none !important;
        color: black !important;
        border-bottom: 2px solid black;
    }
}