/* ============================================================
 * 🖥️ TravelFlow desktop.css — 桌面版佈局協定 (V2026.ULTRA.A)
 * ------------------------------------------------------------
 * 設計原則：
 *   1. 全部規則鎖在 @media (min-width: 1024px) 內
 *      → 手機版（含 Chrome 手機模擬）100% 不受影響
 *   2. 方案 A：左側 200px 寬版導航欄，圖示+文字橫排
 *   3. 選中項：實心主題色膠囊；hover：淡粉浮現
 *   4. 搭配 viewEngine.js 的 .nav-dock-btn / .nav-active class
 * ------------------------------------------------------------
 * 斷點調整：若希望平板橫放也維持手機版，
 *          將 1024px 改為 1280px 即可
 * ============================================================ */

@media (min-width: 1024px) {

    /* ── 1. 殼層：為左側導航欄讓出空間 ───────────────────── */
    :root {
        --tf-sidebar-w: 200px;
    }

    #app {
        padding-left: var(--tf-sidebar-w);
    }

    /* ── 2. 頂部 Header：跟隨內容欄寬度 ─────────────────── */
    header .max-w-5xl {
        max-width: 860px !important;
    }

    /* ── 3. 主內容欄：限寬置中 + 桌面間距 ───────────────── */
    #content-container {
        max-width: 860px !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
        padding-bottom: 4rem !important; /* 底部 Dock 已移走，不需 160px 保留區 */
    }

    .schedule-card {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ── 4. 底部 Dock → 左側 200px 導航欄 ───────────────── */
    #nav-dock-container {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: auto !important;
        width: var(--tf-sidebar-w);
        z-index: 80; /* 低於 sticky header (z-100)，避免遮擋 */
    }

    /* Dock 外殼（第一個 div）：轉為全高側欄 */
    #nav-dock-container > div:first-child {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: auto !important;
        width: var(--tf-sidebar-w) !important;
        height: 100vh !important;
        border-radius: 0 !important;
        border-top: none !important;
        border-right: 0.5px solid rgba(212, 83, 126, 0.15) !important;
        background: rgba(255, 255, 255, 0.92) !important;
        padding: 5.5rem 0 1.5rem 0 !important; /* 上方避開 sticky header */
        margin: 0 !important;
    }

    /* 手機版佔位 spacer（第二個 div, height:110px）：桌面隱藏 */
    #nav-dock-container > div:not(:first-child) {
        display: none !important;
    }

    /* 覆寫 theme.css 中 #bottom-dock 的 92% 寬度浮動規則 */
    #bottom-dock {
        width: var(--tf-sidebar-w) !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        transform: none !important;
    }

    /* ── 5. 捲動軌道：橫向轉縱向 ────────────────────────── */
    #nav-scroll-track {
        flex-direction: column !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        touch-action: pan-y !important;
        scroll-snap-type: none !important;
        height: 100% !important;
        width: 100% !important;
        padding: 0 12px !important;
        gap: 3px !important;
    }

    /* ── 6. 按鈕：直排 → 橫排（圖示左、文字右）──────────── */
    .nav-dock-btn {
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 11px 16px !important;
        border-radius: 14px !important;
        scroll-snap-align: none !important;
        transition: background-color 0.15s ease, transform 0.18s ease !important;
    }

    .nav-dock-btn i {
        font-size: 17px !important;
        width: 22px;
        text-align: center;
        flex-shrink: 0;
    }

    .nav-dock-btn span {
        font-size: 14px !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em;
    }

    /* hover：淡粉浮現（未選中項） */
    .nav-dock-btn:not(.nav-active):hover {
        background: #F4E7DF !important;
    }
    .nav-dock-btn:not(.nav-active):hover i,
    .nav-dock-btn:not(.nav-active):hover span {
        color: var(--theme-primary) !important;
    }

    /* 選中項：實心主題色膠囊 + 白色圖文 */
    .nav-dock-btn.nav-active {
        background: var(--theme-primary) !important;
        box-shadow: 0 6px 16px var(--theme-shadow) !important;
    }
    .nav-dock-btn.nav-active i,
    .nav-dock-btn.nav-active span {
        color: #ffffff !important;
    }

    /* 特訓紅點：橫排下重新定位到右端垂直置中 */
    .nav-dock-btn > span[style*="border-radius:50%"],
    .nav-dock-btn > span[style*="border-radius: 50%"] {
        top: 50% !important;
        right: 14px !important;
        transform: translateY(-50%);
    }

    /* ── 7. 桌面質感微調 ────────────────────────────────── */

    /* Toast 在桌面移至右下角，不擋住內容中線 */
    .tf-toast {
        left: auto !important;
        right: 2rem !important;
        bottom: 2rem !important;
        transform: none !important;
    }
    @keyframes toast-in {
        0%   { opacity: 0; transform: translateY(16px) scale(0.95); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes toast-out {
        100% { opacity: 0; transform: translateY(8px) scale(0.97); }
    }

    /* 模態框在桌面限制最大寬度，避免巨型對話框 */
    #modal-registry .max-w-sm,
    #static-modal-container .max-w-sm {
        max-width: 26rem !important;
    }
}

/* ── 8. 超寬螢幕（≥1440px）：內容欄再放寬一階 ───────────── */
@media (min-width: 1440px) {
    header .max-w-5xl,
    #content-container {
        max-width: 960px !important;
    }
}