/* =========================================================
   📑 estimate.css — 碳足跡估算流程 (Estimate) 專屬樣式
   彙整原本分散於全站共用樣式檔案（custom.css）中的 Estimate 相關規則
   （Transport / Accommodation / Dining / Activity / BasicInfo /
     Report / ChartPanel 等子頁面），集中於此檔案維護。
   依賴 base.css 的設計變數 Tokens，請確保 base.css 先載入。
   ---------------------------------------------------------
   目錄：
    1. 交通與模組按鈕（Transport / Fixed row 基礎樣式）
    2. Tabs 模組專屬 active 顏色
    3. 圖片上傳與預覽核心（BasicInfo & Modal 共用）
    4. 輔助樣式（tag-chip 系列、Estimate Tabs、卡片 input 微調）
    5. 摺疊區塊（area-block-collapse，含手機版寬度修正）
    6. Tom Select 下拉選單樣式修正（交通模組）
    7. #app 模組（Modern Soft UI 主題、表單樣式、Tom Select 補充）
    8. 活動類型標籤樣式
    9. 手機版 Tab 與橫向滑動優化
   10. Report.cshtml 專屬樣式
   11. BasicInfo.cshtml 專屬樣式
   12. Module Header & Section Components
   13. Transport Card Components tc-*
   14. ChartPanel Components cp-*
   15. Estimate Index 頁面（Page bar / Stepper / Breadcrumb）
   16. Module component classes（Forest DS 重構元件）
   ========================================================= */

/* =========================================================
   1. 交通與模組按鈕
   ========================================================= */
.transport-row,
.fixed-row {
    font-size: var(--font-size-base);
    /* 原 0.875rem → 新 0.9375rem */
    color: #212529;
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

.transport-row .carbon,
.fixed-row .fixed-carbon {
    color: var(--m-transport);
    font-weight: 700;
    font-size: 28px;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.01em;
    line-height: 1;
}

/* 新增路段按鈕：全寬 + 虛線外框樣式（原 custom.css，Transport 專屬） */
#btnAddSegment,
#btnAddFixed {
  width: 100%;
  justify-content: center;
  padding: 11px 14px;
  border: 1.5px dashed var(--forest-300);
  color: var(--forest-700);
  background: transparent;
  font-size: 14px;
}
#btnAddSegment:hover,
#btnAddFixed:hover {
  border-color: var(--forest-500);
  background: var(--cream-50);
}

/* =========================================================
   2. Tabs 模組專屬 active 顏色
   ========================================================= */
#transport-tab.active {
    color: #fff;
    background-color: var(--c-transport);
}

#accommodation-tab.active {
    color: #fff;
    background-color: var(--c-accommodation);
}

#dining-tab.active {
    color: #212529;
    background-color: var(--c-dining);
}

#activity-tab.active {
    color: #fff;
    background-color: var(--c-activity);
}

#report-tab.active {
    color: #fff;
    background-color: var(--c-report);
}

/* =========================================================
   3. 圖片上傳與預覽核心 (BasicInfo & Modal 共用)
   ========================================================= */

/* 1. 容器樣式 */
.border-dashed {
    border-style: dashed !important;
    transition: all 0.3s ease;
}

.upload-container {
    transition: all 0.2s ease-in-out;
    min-height: 180px;
    border-color: #cbd5e1;
    background-color: #f8fafd;
}

.upload-container:hover,
.upload-container.dragover {
    border-color: var(--c-transport) !important;
    background-color: #f0f7ff !important;
}

/* 2. 預覽區域佈局 (重要：解決點擊穿透) */
#info-image-preview,
#imagePreviewArea {
    padding: 10px;
    pointer-events: none;
}

/* 3. 預覽卡片本體 */
.preview-card {
    width: 120px;
    height: 120px;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    flex-shrink: 0;
    pointer-events: auto;
    /* 恢復卡片點擊 */
    display: inline-block;
    vertical-align: top;
    margin: 5px;
}

.preview-card:hover {
    transform: scale(1.05);
}

.preview-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 4. 刪除按鈕 (紅色圓圈) */
.btn-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(220, 53, 69, 0.9);
    color: white;
    border: 2px solid #fff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-base);
    /* 原 14px → 新 15px */
    cursor: pointer;
    z-index: 10;
    pointer-events: auto;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-remove:hover {
    background: #dc3545;
    transform: scale(1.1);
}

/* 5. 分離式「新增圖片」按鈕卡片（尺寸 + 點擊穿透設定，原分散於 custom.css 兩處，已合併） */
.upload-btn-wrapper {
    pointer-events: auto;
    width: 120px;
    height: 120px;
}

.upload-btn-wrapper label:hover {
    background-color: #e9ecef !important;
    border-color: var(--c-transport) !important;
    color: var(--c-transport-text) !important;
}

/* 上傳按鈕 label：虛線框 + 指標（原 BasicInfo.cshtml 區塊） */
.upload-btn-wrapper label {
    cursor: pointer;
    border: 2px dashed var(--primary-color);
    transition: 0.3s;
}

/* =========================================================
   4. 輔助樣式（tag-chip 系列、Estimate Tabs、卡片 input 微調）
   ========================================================= */

/* 統一輸入框高度與對齊（對齊 inline style 的 38px / 13px） */
.transport-row .form-control-sm,
.transport-row .form-select-sm,
.transport-row .btn-sm {
    height: 38px;
    font-size: 14px;
}

/* 讓 Input Group 裡的按鈕不要搶空間 */
.transport-row .input-group .btn {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* 卡片懸停效果 */
.transport-row.card {
    transition: all 0.2s ease;
    background-color: #ffffff;
}

.transport-row.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-1px);
}

.transport-row .form-control,
.transport-row .btn {
    border-radius: 6px;
    /* 稍微圓角化更具現代感 */
}

.transport-row .distance:focus {
    box-shadow: none;
    /* 距離為唯讀，移除焦點陰影 */
}

/* 強制 Tab 不換行並允許橫向捲動 */
#estimateTabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    border-bottom: 1px solid #dee2e6;
    -webkit-overflow-scrolling: touch;
    /* 優化 iOS 滑動順暢度 */
}

/* 隱藏捲軸但保留功能 (可選) */
#estimateTabs::-webkit-scrollbar {
    height: 0px;
}

/* 確保每個 Tab 項目不會被壓縮 */
#estimateTabs .nav-item {
    flex: 0 0 auto;
}

/* 稍微調整左右間距，讓使用者知道後面還有內容 */
#estimateTabs .nav-link {
    padding: 0.75rem 1.25rem;
}

/* 標籤晶片基本樣式 */
.tag-chip {
    border-radius: 20px;
    padding: 0.4rem 1rem;
    font-size: var(--font-size-base-sm);
    /* 原 0.85rem → 新 0.875rem (14px) */
    transition: all 0.2s ease;
    border: 1px solid #dee2e6;
    background-color: #fff;
    color: #6c757d;
}

/* 懸停效果 */
.tag-chip:hover {
    background-color: #f8f9fa;
    border-color: #adb5bd;
    color: #495057;
}

/* 選中狀態 (Active) */
.tag-chip.active {
    background-color: #e8f5e9 !important;
    /* 淺綠背景 */
    border-color: #2e7d32 !important;
    /* 深綠邊框 */
    color: #2e7d32 !important;
    /* 深綠文字 */
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(46, 125, 50, 0.1);
}

/* 基本資料頁「遊程標籤屬性」容器（取代原本 Bootstrap utility class 組合
   d-flex/flex-wrap/gap-2/p-3/bg-light/rounded-3：那些工具類別預設帶
   !important，會讓下面手機版的 grid 排版蓋不過去，所以改用一般 class 撰寫，
   不必再靠 !important 互相對抗） */
.trip-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 0.5rem;
}

/* 手機版：排列不佳（自動換行的圓角藥丸），改成一列三個的方形印章。
   只鎖定 .trip-tags-list，不影響餐飲／活動模組共用 .tag-chip / .cf-filter-tag 的篩選列樣式 */
@media (max-width: 767px) {
    .trip-tags-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        padding: 10px;
    }
    .trip-tags-list .tag-chip {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 52px;
        border-radius: 10px;
        padding: 8px 4px;
        width: 100%;
        text-align: center;
        white-space: normal;
        font-size: 14px;
        line-height: 1.35;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
    /* "#" 前綴在窄欄位裡常被單獨擠成一行、字反而拆得更散，手機版方形印章直接省略，
       用背景/邊框已經足以表達「標籤」的意思 */
    .trip-tags-list .tag-chip .opacity-50 {
        display: none;
    }
}

/* 住宿卡片內的 input 樣式調整 */
.accommodation-card .form-control-sm {
    padding: 0.25rem 0.5rem !important;
    padding-right: 0rem !important;
    font-size: var(--font-size-base) !important;
}

.accommodation-card .form-control {
    width: 25% !important;
    padding: 0.375rem 0.5rem;
}

/* 數量輸入框（住宿/餐飲/活動三模組共用，原為三處重複宣告，已合併） */
.accommodation-card .quantity-input,
.dining-card .quantity-input,
.activity-card .quantity-input {
    max-width: 60px;
}

/* 餐飲類型標籤按鈕 */
.dining-type-tag {
    border-radius: 20px;
    padding: 0.4rem 1rem;
    font-size: var(--font-size-base-sm);
    /* 原 0.85rem → 新 0.875rem (14px) */
    transition: all 0.2s ease;
    border: 1px solid #dee2e6;
    background-color: #fff;
    color: #6c757d;
}

/* 未選中狀態 */
.dining-type-tag:not(.active) {
    opacity: 0.6;
    color: #212529 !important;
}

/* 懸停效果 */
.dining-type-tag:hover {
    background-color: #f5efe4;
    border-color: #b89968;
    color: #7a6440;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(184, 153, 104, 0.2);
}

/* 選中狀態 */
.dining-type-tag.active {
    background-color: #b89968 !important;
    color: white !important;
    border-color: #b89968 !important;
    font-weight: 600;
    opacity: 1;
    box-shadow: 0 2px 4px rgba(255, 193, 7, 0.3);
}

/* 餐飲卡片內的 input 樣式調整 */
.dining-card .form-control-sm {
    padding: 0.25rem 0.5rem !important;
    padding-right: 0rem !important;
    font-size: 0.875rem !important;
}

.dining-card .form-control {
    width: 25% !important;
    padding: 0.375rem 0.5rem;
}

/* 人員計數輸入框 (BasicInfo.cshtml) */
.form-count-input { max-width: 100px; }

/* =========================================================
   5. 修正 Mobile 寬度（Transport 模組）
   ⚠ .transport-row .col-md-5 為舊版 Bootstrap grid 卡片的殘留規則，
   TransportCustomCard.cshtml / TransportFixedCard.cshtml 改版為
   tc-card 系列 class 後已無 .col-md-5 節點、此規則不再命中，
   保留供其他頁面舊結構相容；.tc-card 系列另補上對應斷點（見下）。
   ========================================================= */
@media (max-width: 768px) {
    .transport-row .col-md-5 {
        margin-bottom: 1rem;
    }

    .bi-arrow-right {
        transform: rotate(90deg);
        margin: 5px 0;
        text-align: center;
    }

    /* tc-card 路段卡片：右側碳排欄固定 140px + 出發/抵達雙欄，
       窄螢幕下改為單欄堆疊，避免表單被擠壓 */
    .tc-card {
        grid-template-columns: 1fr;
    }
    .tc-row--route {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .tc-arrow {
        transform: rotate(90deg);
        padding-bottom: 0;
    }

    /* 模組說明文字（交通/住宿/餐飲/活動，比照報告頁做法在手機隱藏） */
    #transport-content .cf-module-subtitle,
    #accommodation-content .cf-module-subtitle,
    #dining-content .cf-module-subtitle,
    #activity-content .cf-module-subtitle {
        display: none;
    }

    /* 交通模組區塊說明文字：收進「?」tooltip，只留圖示，避免與標題擠在一起 */
    #transport-content .cf-section-desc__text {
        display: none;
    }

    /* Row 3（距離／數量／路線按鈕）：窄螢幕縮小輸入框寬度，確保三者仍能同一列排列 */
    .tc-row--inputs {
        flex-wrap: nowrap;
    }
    .tc-input-distance {
        width: 76px;
    }
    .tc-input-qty {
        width: 52px;
    }
    .tc-btn-route {
        flex-shrink: 0;
        padding: 0 10px;
    }
}

/* =========================================================
   5.1 交通卡片手機版 — 摘要收合 + 底部彈出詳情（tc-card）
   桌面版（≥768px）完全不受影響，維持原本兩欄卡片版面。
   DOM 結構不搬動，只靠 class 切換 + position:fixed 讓表單視覺上
   彈到畫面底部，Transport.js 既有的事件代理／Tom Select／地圖邏輯
   都掛在原本的節點上，完全不受影響。
   ========================================================= */

/* 摘要列（收合狀態的點擊區）、起訖地圖按鈕，預設（桌面）不顯示
   ⚠ 這三條必須放在 @media 區塊「之前」：CSS 特異度相同時比的是原始碼順序，
   之前誤放在區塊後面，導致就算手機斷點命中，後面這條 display:none
   仍會贏過區塊內的 display:flex，按鈕永遠顯示不出來。 */
.tc-card__summary { display: none; }
.tc-card__sheet-head { display: none; }
.tc-btn-location { display: none; }

@media (max-width: 767px) {
  .tc-card {
    position: relative;
  }

  /* 摘要列：運具 + 出發→抵達 預覽，點擊展開表單 */
  .tc-card__summary {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--cream-200);
  }
  .tc-card--expanded .tc-card__summary {
    display: none;
  }
  .tc-card__summary-tap {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 8px 14px 16px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
  }
  .tc-card__summary-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--m-transport) 12%, transparent);
    color: var(--m-transport);
    display: grid;
    place-items: center;
    font-size: 15px;
  }
  .tc-card__summary-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .tc-summary__mode {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tc-summary__route {
    font-size: 14px;
    color: var(--ink-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tc-card__summary-caret {
    align-self: center;
    color: var(--ink-300);
    font-size: 14px;
    flex-shrink: 0;
    margin-right: 12px;
  }
  .tc-card__summary-remove {
    flex-shrink: 0;
    width: 44px;
    border: none;
    border-left: 1px solid var(--cream-200);
    background: none;
    color: var(--ink-400);
    cursor: pointer;
  }
  .tc-card__summary-remove:hover { color: var(--clay-600); }

  /* 收合狀態：表單本體隱藏 */
  .tc-card__body {
    display: none;
  }

  /* 展開狀態：表單本體變成從底部彈出的面板，DOM 位置不變 */
  .tc-card--expanded .tc-card__body {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 85vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 30px rgba(16, 43, 34, 0.18);
    z-index: 1051;
    padding: 8px 18px 24px;
  }

  /* 面板頂部把手 + 收合鈕，只在展開時顯示 */
  .tc-card--expanded .tc-card__sheet-head {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 6px 0 12px;
  }
  .tc-card__sheet-handle {
    width: 36px;
    height: 4px;
    background: var(--cream-300);
    border-radius: 100px;
  }
  .tc-card__sheet-close {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--cream-100);
    color: var(--ink-500);
    display: grid;
    place-items: center;
    cursor: pointer;
  }
  .tc-card__sheet-close:hover { background: var(--cream-200); }

  /* 背景遮罩（交通模組共用一個） */
  .tc-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(16, 43, 34, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    z-index: 1050;
  }
  .tc-sheet-backdrop.is-open {
    opacity: 1;
    visibility: visible;
  }

  /* 底部碳排：比照報告頁 block 小計樣式，粗體置右，永遠可見（收合/展開皆同） */
  .tc-card__carbon {
    border-left: none;
    border-top: 1px solid var(--cream-200);
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    padding: 12px 18px;
  }
  .tc-card__carbon .tc-carbon__label {
    font-size: 14px;
    color: var(--ink-500);
    margin: 0 auto 0 0;
  }
  .tc-card__carbon .carbon,
  .tc-card__carbon .fixed-carbon {
    font-size: 16px;
    font-weight: 700;
    color: var(--m-transport);
    font-family: 'JetBrains Mono', monospace;
  }
  .tc-card__carbon .tc-carbon__unit {
    font-size: 14px;
    color: var(--ink-500);
  }

  /* 出發地/抵達地：只保留地圖選點，Tom Select 下拉在窄螢幕太擠且非唯一入口，
     直接隱藏（含 Tom Select 實際渲染出來的 .ts-wrapper，隱藏原生 select 本身沒用），
     改成單一按鈕開地圖選點，按鈕文字直接顯示目前選擇結果
     （由 Transport.js syncCardSummary 同步，超過 5 字截斷加 ...） */
  .tc-input-group select,
  .tc-input-group .ts-wrapper,
  .tc-input-group .tc-btn-pin {
    display: none;
  }
  /* 保險：萬一 Tom Select 把 wrapper 插在 .tc-input-group 之外（例如緊跟在
     .tc-row--route 底下而不是巢狀在 .tc-input-group 內），放寬到整張卡片範圍再擋一次 */
  .tc-card .ts-wrapper.tom-select-destination,
  .tc-card .ts-wrapper.fromInput,
  .tc-card .ts-wrapper.toInput {
    display: none;
  }
  .tc-btn-location {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--cream-300);
    border-radius: 6px;
    background: #fff;
    color: var(--ink-400);
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
  }
  .tc-btn-location i {
    color: var(--forest-600);
    flex-shrink: 0;
    font-size: 15px;
  }
  .tc-btn-location__text {
    flex: 1;
    min-width: 0;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tc-btn-location--filled {
    color: var(--ink-900);
  }
  .tc-btn-location--filled .tc-btn-location__text {
    font-weight: 600;
  }

  /* 係數/單位/來源/層級：文字容不下，收進 tc-meta__icon 的 tooltip，只留圖示 */
  .tc-meta > span,
  .tc-meta__sep {
    display: none;
  }
  .tc-meta__icon {
    font-size: 18px;
    cursor: pointer;
  }
}

/* 摺疊區塊視覺提示
   ⚠ 注意：另有一組 details.area-block-collapse 規則（見本檔第 7 段「#app 模組」），
   兩組選擇器精準度不同、屬性大致互補未衝突，故暫保留兩者，待日後視覺驗證後再合併 */
.area-block-collapse summary {
    cursor: pointer;
    list-style: none;
    transition: background-color 0.2s ease;
    padding: 0.5rem;
    margin: -0.5rem;
    border-radius: 0.5rem;
}

.area-block-collapse summary::-webkit-details-marker {
    display: none;
}

.area-block-collapse summary:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

/* 箭頭旋轉動畫 */
.area-block-collapse summary .collapse-icon {
    transition: transform 0.3s ease;
}

.area-block-collapse[open] summary .collapse-icon {
    transform: rotate(180deg);
}

/* =========================================================
   6. Tom Select 下拉選單樣式修正 (交通模組)
   ========================================================= */
/* 讓 Tom Select wrapper 在 transport-row 的 flex 容器內正確伸縮 */
.transport-row .ts-wrapper.tom-select-destination {
    flex: 1 1 auto;
    min-width: 0;
}

.ts-wrapper.tom-select-destination .ts-control {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding-right: 2rem !important;
    /* 留空間給箭頭 */
    height: 31px !important;
    /* 與 input-group-sm 一致的高度 */
    min-height: 31px !important;
    display: flex;
    align-items: center;
    /* 移除 max-width: 220px — wrapper 已正確 flex，不需硬限制寬度 */
    flex-wrap: nowrap !important;
    /* 🔥 防止輸入框換行 */
}

/* 確保輸入框也能縮小且不換行 */
.ts-wrapper.tom-select-destination .ts-control>input {
    min-width: 1px !important;
    flex-shrink: 1 !important;
    width: auto !important;
    /* 覆蓋預設 width */
}

/* 選中項目的樣式 */
.ts-wrapper.tom-select-destination .ts-control>.item {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    display: inline-block;
    vertical-align: middle;
}

/* 修正 input-group 內的樣式，確保不換行 */
.input-group.flex-nowrap .ts-wrapper {
    flex: 1 1 auto;
    width: 1%;
    /* 讓 flex 正常運作的關鍵，避免內容撐開寬度 */
    min-width: 0;
}

/* =========================================================
   7. #app 模組（Modern Soft UI 主題、表單樣式、Tom Select 補充）
   ========================================================= */

/* Estimate Module - Modern Soft UI Theme */
#app {
    --primary-color: #5B8C5A;
    --primary-bg: #EAF4EA;
    --secondary-text: #636E72;
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    --card-radius: 24px;
    --input-radius: 12px;
    --transition-speed: 0.3s;
}

.page-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: #2D3436;
    letter-spacing: -0.5px;
}

/* 表單標籤 */
#app .form-label {
    font-size: 1.125rem !important;
    /* 18px (原約 0.9rem = 14.4px，放大約 1.25 倍) */
    font-weight: 700;
}

/* 輸入框與選擇器文字 */
#app .form-control,
#app .form-select {
    font-size: 1.05rem !important;
    /* 16.8px (原約 0.95rem = 15.2px，放大 1.1 倍) */
}

/* 輸入框小提示文字 */
#app .form-text,
#app .form-text.small {
    font-size: 1rem !important;
    /* 16px (原約 0.75-0.875rem，放大至標準) */
}

/* 按鈕文字 */
#app .btn {
    font-size: 1.05rem !important;
    /* 16.8px */
}

/* 標籤晶片 */
#app .tag-chip {
    font-size: 1.05rem !important;
    /* 16.8px (原約 0.875rem = 14px，放大 1.2 倍) */
    padding: 0.5rem 1.2rem;
}

/* Badge 與小標籤 */
#app .badge {
    font-size: 0.95rem !important;
    /* 15.2px (原約 0.75rem，放大約 1.27 倍) */
}

/* 同行人員卡片標籤 */
#app .card label.small {
    font-size: 1.05rem !important;
    /* 16.8px */
}

/* Input Group 文字 */
#app .input-group-text {
    font-size: 1.05rem !important;
    /* 16.8px */
}

/* 輸入框與表單優化（⚠ 全站 .form-control/.form-select 皆套用此樣式，非僅 #app） */
.form-control,
.form-select {
    border-radius: var(--input-radius);
    border: 1px solid #E0E0E0;
    background-color: #FDFDFD;
    /* 修正：僅對非 small 的輸入框套用大 Padding，避免 SM 尺寸文字被切掉 */
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: all 0.2s;
}

/* 恢復 sm 輸入框的預設 Padding，但右側加大以避開 Arrow */
.form-control-sm,
.form-select-sm {
    padding: 0.25rem 0.5rem !important;
    /*padding-right: 2rem !important;*/
    /* 修正：加大右側 Padding 避免文字與箭頭重疊 */
    font-size: 0.875rem !important;
}

.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 4px rgba(91, 140, 90, 0.1);
    border-color: var(--primary-color);
    background-color: #FFF;
}

.form-label {
    font-weight: 700;
    color: #4A5568;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

/* Transport modal 的標籤：較小字級，對齊設計稿（覆蓋 #app .form-label 的 !important） */
#spotFormModal .form-label {
    font-size: 14px !important;
    color: var(--ink-500) !important;
    letter-spacing: 0.04em;
    font-weight: 400 !important;
    margin-bottom: 4px;
}

/* 🔧 Fix: 一體化 Input Group (解決 Icon 與 Input 分離感) */
.input-group-seamless {
    border: 1px solid #E0E0E0;
    border-radius: var(--input-radius);
    background-color: #FDFDFD;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* 確保圓角不被子元素切掉 */
}

/* 當內部任何元素被 Focus 時，改變外框 */
.input-group-seamless:focus-within {
    box-shadow: 0 0 0 4px rgba(91, 140, 90, 0.1);
    border-color: var(--primary-color);
    background-color: #FFF;
}

.input-group-seamless .input-group-text {
    border: none;
    background-color: transparent;
    color: var(--secondary-text);
    padding-right: 0.5rem;
    padding-left: 1rem;
}

.input-group-seamless .form-control,
.input-group-seamless .form-select {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    /* 移除 input 自身的 focus glow */
    padding-left: 0.5rem;
}

/* 🔽 下拉摺疊區塊樣式 (Collapsible Sections)
   ⚠ 注意：另有一組 .area-block-collapse summary 規則（見本檔第 5 段），
   兩組選擇器精準度不同、屬性大致互補未衝突，故暫保留兩者，待日後視覺驗證後再合併 */
details.area-block-collapse {
    border-bottom: 1px solid #eee;
    padding-bottom: 2rem;
    margin-bottom: 2rem !important;
}

details.area-block-collapse:last-child {
    border-bottom: none;
}

details.area-block-collapse>summary {
    list-style: none;
    /* 隱藏預設三角形 */
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
}

details.area-block-collapse>summary::-webkit-details-marker {
    display: none;
}

/* Icon 旋轉動畫 */
details.area-block-collapse .collapse-icon {
    transition: transform 0.3s ease;
}

details.area-block-collapse[open] .collapse-icon {
    transform: rotate(180deg);
}

/* 🔽 Tom Select 修正 (Bootstrap 5 Input Group) */
.ts-wrapper.form-select {
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.ts-control {
    border-radius: var(--bs-border-radius-sm) !important;
    border: 1px solid #ced4da;
    padding: 0.375rem 0.75rem;
    min-height: 31px;
    /* Match form-control-sm */
    background-color: #fff;
}

.ts-wrapper.single .ts-control {
    background-image: none !important;
    /* Remove dropdown arrow dupe */
}

/* 讓 Tom Select 在 Input Group 中正常顯示並作為 Flex Item */
.input-group .ts-wrapper {
    flex-grow: 1;
    width: 1%;
    /* Fix flex layout */
}

.input-group .ts-wrapper .ts-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* 🔧 Fix: Tom Select 下拉選單 */
.ts-dropdown {
    z-index: 1200 !important;
    /* 確保蓋過 Header */
}

.ts-dropdown .option,
.ts-dropdown .optgroup-header {
    padding-right: 20px;
}

/* =========================================================
   8. 活動類型標籤樣式（對齊住宿與餐飲模組）
   ========================================================= */
.activity-type-tag {
    cursor: pointer;
    transition: all 0.2s ease;
}

.activity-type-tag:not(.active) {
    opacity: 0.6;
    color: #212529 !important;
}

.activity-type-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(180, 95, 62, 0.2);
}

.activity-type-tag.active {
    background-color: #b45f3e !important;
    color: white !important;
    border-color: #b45f3e !important;
    font-weight: 600;
    opacity: 1;
}

/* =========================================================
   10. Report.cshtml — 欄寬輔助 class 與數值樣式
   ========================================================= */
.rpt-col-15 { width: 15%; }
.rpt-col-20 { width: 20%; }
.rpt-col-25 { width: 25%; }
.rpt-col-40 { width: 40%; }

#report-total-value { line-height: 1; }

/* ─────────────────────────────────────────────────────────
   10.1 Report 手機版 — 精簡表格 + 底部彈出詳情 (Bottom Sheet)
   桌面版（≥768px）維持原本多欄表格，不套用此區塊。
   ───────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .rpt-sheet-backdrop,
  .rpt-sheet {
    display: none;
  }
}

@media (max-width: 767px) {
  /* 表格只留第一欄（名稱／運具）與最後一欄（碳排），其餘欄位收進跳窗 */
  #report-details colgroup col:not(:first-child):not(:last-child) {
    display: none;
  }
  #report-details table th:not(:first-child):not(:last-child),
  #report-details table td:not(:first-child):not(:last-child) {
    display: none;
  }
  #report-details table tbody tr[data-detail] {
    cursor: pointer;
  }
  #report-details table tbody tr[data-detail]:hover,
  #report-details table tbody tr[data-detail]:active {
    background: var(--cream-50);
  }
  #report-details table td:first-child {
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #report-details table td:last-child::after {
    content: "\203A";
    display: inline-block;
    margin-left: 6px;
    color: var(--ink-300);
    font-weight: 700;
  }
}

/* Backdrop */
.rpt-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 43, 34, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
  z-index: 1050;
}
.rpt-sheet-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

/* Sheet panel */
.rpt-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 80vh;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 30px rgba(16, 43, 34, 0.18);
  transform: translateY(100%);
  transition: transform .25s ease;
  z-index: 1051;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rpt-sheet.is-open {
  transform: translateY(0);
}
.rpt-sheet__handle {
  width: 36px;
  height: 4px;
  background: var(--cream-300);
  border-radius: 100px;
  margin: 10px auto 0;
  flex-shrink: 0;
}
.rpt-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--cream-200);
  flex-shrink: 0;
}
.rpt-sheet__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--forest-900);
  margin: 0;
}
.rpt-sheet__close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--cream-100);
  color: var(--ink-500);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  cursor: pointer;
}
.rpt-sheet__close:hover { background: var(--cream-200); }
.rpt-sheet__body {
  padding: 8px 18px 24px;
  overflow-y: auto;
}
.rpt-sheet__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--cream-200);
}
.rpt-sheet__row:last-child { border-bottom: none; }
.rpt-sheet__label {
  font-size: 14px;
  color: var(--ink-500);
}
.rpt-sheet__value {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900);
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
}

/* =========================================================
   11. BasicInfo.cshtml（人員計數輸入框已併入第 4 段，上傳元件已併入第 3 段）
   ========================================================= */

/* =========================================================
   12. Module Header & Section Components
   Shared across Estimate modules（原 custom.css）
   ========================================================= */

/* Card with standard module padding */
.cf-card--padded { padding: 26px 30px 28px; }

/* 手機版：畫面本來就窄，卡片外層 padding 縮到最小，把空間讓給內容
   （這是所有模組共用的外層卡片，縮小對整體版面都有幫助，不只基本資料頁） */
@media (max-width: 767px) {
  .cf-card--padded { padding: 16px 12px 18px; }
}

/* Flex fill child (allow shrinking below content width) */
.cf-flex-fill { flex: 1; min-width: 0; }

/* Muted icon */
.cf-icon-muted { color: var(--ink-400); }

/* 13px text utility */
.cf-text-13 { font-size: 14px; }

/* Module top header: icon + title + subtitle */
.cf-module-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--cream-200);
}
.cf-module-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.cf-module-icon i  { font-size: 18px; }
.cf-module-title   { font-size: 20px; font-weight: 600; color: var(--forest-900); margin: 0; }
.cf-module-subtitle { font-size: 14px; color: var(--ink-500); margin-top: 2px; }

/* Section */
.cf-section-wrap { margin-top: 22px; }
.cf-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.cf-section-icon  { font-size: 15px; flex-shrink: 0; }
.cf-section-title { font-weight: 600; color: var(--ink-900); font-size: 15px; white-space: nowrap; flex-shrink: 0; }
.cf-section-desc  { font-size: 14px; color: var(--ink-500); min-width: 0; }
.cf-section-desc .bi-question-circle { color: var(--ink-400); }

/* Divider with standard top/bottom spacing */
.cf-divider--spaced { margin: 24px 0 22px; }

/* ─── Modal shared ─── */
.cf-modal-dialog { margin-top: 80px; }
.cf-modal-header         { border-bottom: 1px solid var(--cream-200) !important; }
.cf-modal-header--cream  { background: var(--cream-50); border-bottom: 1px solid var(--cream-200) !important; }
.cf-modal-footer         { border-top: 1px solid var(--cream-200) !important; }
.cf-modal-footer--cream  { background: var(--cream-50); border-top: 1px solid var(--cream-200) !important; }
.cf-modal-title          { font-weight: 600; color: var(--forest-900); }

/* Map container */
.cf-map { height: 55vh; width: 100%; }

/* Route modal: left+right split panel */
.cf-route-panel { height: 55vh; }

/* Route modal: sticky summary header */
.cf-route-header { background: var(--cream-50); }

/* Route modal: from/to meta labels */
.cf-route-meta { font-size: 14px; letter-spacing: 0.04em; }

/* Route modal: station names row */
.cf-route-names { color: var(--ink-900); font-size: 14px; }
#routeFromDisplay, #routeToDisplay { max-width: 45%; }

/* Route modal: footer info + selected text */
.cf-route-info          { font-size: 14px; color: var(--ink-500); }
.cf-route-info .fw-bold { color: var(--ink-900); }

/* Small loading spinner */
.cf-spinner--sm { color: var(--forest-500); width: 1.5rem; height: 1.5rem; }

/* Readonly cf-input: cream bg + muted text */
.cf-input--readonly { background: var(--cream-50) !important; color: var(--ink-500) !important; }

/* =========================================================
   13. Transport Card Components (tc-*)
   Extracted from TransportCustomCard.cshtml / TransportFixedCard.cshtml
   ========================================================= */

/* 卡片外框：二欄 grid 布局 */
.tc-card {
  background: #fff;
  border: 1px solid var(--cream-200);
  border-left: 3px solid var(--m-transport);
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 140px;
}

/* 左側表單區 */
.tc-card__body {
  padding: 16px 20px 14px 18px;
}

/* 右側碳排顯示區 */
.tc-card__carbon {
  background: var(--cream-50);
  border-left: 1px solid var(--cream-200);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px 12px;
  text-align: center;
}

/* 欄位標題 */
.tc-label {
  font-size: 14px;
  color: var(--ink-500);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

/* Row 1：運具 + 刪除按鈕 */
.tc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

/* Flex 填滿子元素 */
.tc-flex-fill {
  flex: 1;
  min-width: 0;
}

/* 刪除路段按鈕 */
.tc-btn-remove {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  background: transparent;
  border: 1px solid var(--cream-300);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--ink-400);
  margin-top: 18px;
}
.tc-btn-remove i { font-size: 12px; }
.tc-btn-remove:hover { border-color: var(--ink-300); color: var(--ink-600); }

/* Row 2：出發地 → 抵達地 */
.tc-row--route {
  display: grid;
  grid-template-columns: 1fr 20px 1fr;
  gap: 8px;
  align-items: end;
  margin-bottom: 12px;
}

/* 箭頭格 */
.tc-arrow {
  display: flex;
  justify-content: center;
  padding-bottom: 8px;
  color: var(--ink-400);
  font-size: 14px;
}

/* Select + 地圖 pin 按鈕群組 */
.tc-input-group {
  display: flex;
  gap: 4px;
}

/* 地圖 pin 按鈕 */
.tc-btn-pin {
  height: 38px;
  width: 34px;
  border-radius: 6px;
  border: 1px solid var(--cream-300);
  background: transparent;
  color: var(--forest-700);
  cursor: pointer;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.tc-btn-pin i { font-size: 14px; }
.tc-btn-pin:hover { background: var(--cream-50); border-color: var(--forest-300); }

/* Row 3：距離 / 數量 / 路線按鈕 */
.tc-row--inputs {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* 距離輸入框 */
.tc-input-distance {
  text-align: right;
  width: 100px;
  background: var(--cream-50);
  letter-spacing: 0.5px;
  font-family: 'JetBrains Mono', monospace;
}

/* 數量輸入框 */
.tc-input-qty {
  text-align: center;
  width: 72px;
  font-family: 'JetBrains Mono', monospace;
}

/* 在地圖規劃按鈕 */
.tc-btn-route {
  height: 38px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--cream-300);
  border-radius: 6px;
  color: var(--forest-700);
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.tc-btn-route i { font-size: 13px; }
.tc-btn-route:hover { background: var(--cream-50); border-color: var(--forest-300); }

/* Row 4：係數 / 單位 / 來源 meta */
.tc-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px dashed var(--cream-200);
  font-size: 14px;
  color: var(--ink-500);
}
.tc-meta__icon { font-size: 11px; color: var(--ink-400); flex-shrink: 0; }
.tc-meta__val  { color: var(--ink-800); font-family: 'JetBrains Mono', monospace; }
.tc-meta__val--plain { color: var(--ink-800); }
.tc-meta__sep  { color: var(--cream-300); }

/* 碳排標籤 / 單位文字 */
.tc-carbon__label { font-size: 14px; color: var(--ink-500); letter-spacing: 0.06em; margin-bottom: 6px; }
.tc-carbon__unit  { font-size: 14px; color: var(--ink-500); margin-top: 6px; }

/* 定點卡：自動帶入距離提示 */
.tc-hint { font-size: 14px; color: var(--ink-500); padding-bottom: 10px; }
.tc-hint i { color: var(--ink-400); }

/* =========================================================
   14. ChartPanel Components (cp-*)
   Extracted from ChartPanel.cshtml
   ========================================================= */

/* 深綠 header bar */
.cp-card-header {
  padding: 14px 18px;
  background: var(--forest-700);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  letter-spacing: 0.06em;
}

/* 計算基準區 */
.cp-basis { padding: 16px 18px 0; text-align: center; }
.cp-basis__label { font-size: 14px; color: var(--ink-500); letter-spacing: 0.06em; margin-bottom: 6px; }

/* 人數膠囊 badge */
.cp-people-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--cream-100);
  border-radius: 100px;
  font-size: 14px;
  color: var(--ink-700);
  margin-bottom: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Donut 圓圖容器 */
.cp-donut { position: relative; width: 180px; height: 180px; margin: 0 auto; }

/* ─────────────────────────────────────────────────────────
   10.2 Report 手機版 — 長條圖改直條、隱藏重複的概況清單
   （orientation 切換本身在 Report.js renderChart() 依 matchMedia 判斷）
   ───────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  #report-summary-card {
    display: none;
  }
  /* 報告頁模組說明文字（僅此頁，其他模組副標題不受影響） */
  #report-content .cf-module-subtitle {
    display: none;
  }
  /* 原本 180x180 是給橫向長條圖用的正方形容器，直條圖需要更寬的畫布 */
  #report-content .cp-donut {
    width: 100%;
    height: 220px;
  }
}

/* ─────────────────────────────────────────────────────────
   10.3 Report 模組明細 — 標題列與小計金額
   手機（預設）：小計移到表格下方，避免跟標題擠在同一行。
   桌面（≥768px）：改用 grid 把小計拉回標題列右側，維持原本樣式。
   ───────────────────────────────────────────────────────── */
.rpt-module__head {
  margin-bottom: 8px;
}
.rpt-module__amount {
  display: block;
  text-align: right;
  margin-top: 8px;
}
@media (min-width: 768px) {
  .rpt-module {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "head amount" "table table";
    align-items: center;
    column-gap: 12px;
  }
  .rpt-module__head   { grid-area: head; margin-bottom: 8px; }
  .rpt-module__amount { grid-area: amount; margin: 0 0 8px; }
  .rpt-module__table  { grid-area: table; }
}

/* Donut 中心文字 */
.cp-donut__center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.cp-donut__value { font-size: 24px; font-weight: 700; color: var(--forest-900); display: block; line-height: 1.1; }
.cp-donut__unit  { font-size: 14px; color: var(--ink-500); }

/* 即時更新提示 */
.cp-update-hint { margin-top: 8px; font-size: 14px; color: var(--ink-500); }

/* 圖例區 */
.cp-legend { padding: 12px 18px 0; border-top: 1px solid var(--cream-200); margin-top: 14px; }
.cp-legend__list  { font-size: 14px; }
.cp-legend__empty { color: var(--ink-400); font-size: 14px; }

/* 門市碳排列 */
.cp-office-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 14px;
  border-top: 1px dashed var(--cream-200);
  margin-top: 4px;
}
.cp-office-dot   { width: 8px; height: 8px; border-radius: 2px; background: #6c757d; flex-shrink: 0; }
.cp-office-label { color: var(--ink-800); flex: 1; }
.cp-office-value { color: var(--ink-900); font-weight: 600; }
.cp-office-kg    { font-size: 14px; color: var(--ink-400); font-weight: 400; }

/* 儲存按鈕區 */
.cp-save { padding: 14px 18px 18px; }
.cp-save__hint { text-align: center; margin-top: 8px; margin-bottom: 0; font-size: 14px; color: var(--ink-500); }

/* Tip 提示卡 */
.cp-tip {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--forest-50);
  border: 1px solid var(--forest-100);
  border-radius: 10px;
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: var(--forest-700);
  line-height: 1.55;
}
.cp-tip__icon  { flex-shrink: 0; margin-top: 2px; font-size: 15px; }
.cp-tip__title { display: block; margin-bottom: 3px; font-size: 14px; }

/* =========================================================
   15. Estimate Index — Page bar, Stepper, Layout
   Extracted from Views/Estimate/Index.cshtml <style> block
   ========================================================= */

/* ── Page bar ── */
.cf-estimate-bar {
  background: #fff;
  border-bottom: 1px solid var(--cream-200);
  padding: 18px 48px 14px;
}
@media (max-width:1279px) { .cf-estimate-bar { padding: 14px 24px 12px; } }
@media (max-width:767px)  { .cf-estimate-bar { padding: 12px 16px 10px; } }

/* ── 3-col body layout ── */
.cf-estimate-body {
  display: grid;
  grid-template-columns: 220px 1fr 300px;
  gap: 24px;
  padding: 24px 40px 60px;
  background: var(--cream-50);
  min-height: calc(100vh - 160px);
  align-items: start;
}
/* Grid item 預設 min-width:auto，內部只要有不換行內容（例如 tc-card 固定欄、
   .flex-nowrap 橫向標籤列）就會撐開欄寬、把整個版面推出螢幕外。
   三欄一律加上 min-width:0，讓內部改用各自的 overflow-auto／換行處理，
   不會外溢整頁（Transport／Dining／Activity 手機版超出螢幕即此原因）。 */
.cf-estimate-left,
.cf-estimate-main,
.cf-estimate-right {
  min-width: 0;
}
@media (max-width:1279px) {
  .cf-estimate-body { grid-template-columns: 200px 1fr; gap: 20px; padding: 20px 24px 60px; }
  .cf-estimate-right { display: none; }
}
@media (max-width:767px) {
  /* 手機版畫面窄，外層 padding 盡量收到最小，卡片本身的 .cf-card--padded
     已經有自己的留白，這層不需要再疊加一次 */
  .cf-estimate-body  { grid-template-columns: 1fr; padding: 10px 0 24px; }
  .cf-estimate-left  { display: none; }
  .cf-estimate-right { display: none; }
}

/* ── Stepper ── */
.cf-step-item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--ink-700);
  transition: background 0.15s;
  position: relative;
}
.cf-step-item:hover          { background: var(--cream-50); }
.cf-step-item.is-active      { background: var(--forest-50); color: var(--forest-900); }

.cf-step-circle {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink-500);
  border: 2px solid var(--cream-300);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  position: relative;
  z-index: 1;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.cf-step-item.is-active  .cf-step-circle { background: var(--forest-700); color: #fff; border-color: var(--forest-700); }
.cf-step-item.is-done    .cf-step-circle { background: var(--forest-500); color: #fff; border-color: var(--forest-500); }
.cf-step-item.is-inprog  .cf-step-circle { border-color: var(--forest-400); }

.cf-step-name { font-size: 14px; font-weight: 500; line-height: 1.3; }
.cf-step-item.is-active .cf-step-name { font-weight: 600; }
.cf-step-sub  { font-size: 14px; color: var(--ink-400); margin-top: 2px; }
.cf-step-item.is-active .cf-step-sub { color: var(--forest-600); }

/* ── Prev/Next nav ── */
.cf-step-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--cream-200);
}

/* ── Breadcrumb / Page title row ── */
/* 已搬移至 base.css（全站共用，Trips Browse 等頁面同樣使用） */

/* ── Stepper sidebar card ── */
.cf-stepper-card         { padding:16px 8px; position:sticky; top:90px; }
.cf-stepper-label        { font-size: 14px; color:var(--ink-500); letter-spacing:0.06em; padding:0 12px 10px; }
.cf-stepper-list         { list-style:none; margin:0; padding:0; position:relative; }
.cf-stepper-line         { position:absolute; left:25px; top:22px; bottom:18px; width:2px; background:var(--cream-200); pointer-events:none; }
.cf-stepper-footer       { padding:10px 12px 4px; border-top:1px solid var(--cream-200); margin-top:8px; }
.cf-stepper-progress-label { font-size: 14px; color:var(--ink-500); }
.cf-stepper-progress-row { display:flex; align-items:center; gap:8px; margin-top:4px; }
.cf-stepper-track        { flex:1; height:4px; background:var(--cream-200); border-radius:2px; overflow:hidden; }
.cf-stepper-fill         { width:0%; height:100%; background:var(--forest-500); transition:width 0.3s; }
.cf-stepper-pct          { font-size: 14px; font-weight:600; color:var(--forest-700); }

/* ── Step indicator (middle of prev/next bar) ── */
.cf-step-indicator { font-size: 14px; color:var(--ink-500); }

/* ── Sidebar sticky wrapper ── */
.cf-sidebar-sticky { position:sticky; top:90px; }

/* ── Initial state: prev button hidden ── */
#btn-step-prev { visibility: hidden; }

/* =========================================================
   16. Module component classes — full Forest DS rebuild
   Supports the Accommodation / Dining / Activity
   / BasicInfo / Report pages.
   ========================================================= */

/* ─── Extra module tokens ─────────────────────────────── */
.cf-module-bg-forest { background-color: var(--forest-700); }
.cf-module-forest    { color: var(--forest-700); }

/* ─── Required field marker ───────────────────────────── */
.cf-required { color: var(--m-activity); font-weight: 700; }

/* ─── Office-carbon accent ────────────────────────────── */
.cf-label--office      { color: var(--m-office) !important; }
.cf-input-icon--office { color: var(--m-office) !important; }

/* ─── Filter bar (search + type chips row) ────────────── */
/* .row 內的 .col-12 為 Bootstrap flex item，預設 min-width:auto，
   若子層有 .flex-nowrap（餐飲/活動的橫向類型標籤列）會撐開整個 row，
   導致外溢。這裡強制欄位可縮小，讓標籤列自身的 overflow-auto 生效。 */
.cf-filter-bar .row > [class*="col-"] {
  min-width: 0;
}
.cf-filter-bar {
  background: var(--cream-50);
  border: 1px solid var(--cream-200);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}
.cf-filter-bar .form-label {
  font-size: 14px !important;
  color: var(--ink-500) !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.cf-filter-bar .form-control,
.cf-filter-bar .form-select  { border-color: var(--cream-200); background: #fff; }

/* Filter / tag chips */
.cf-filter-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  background: #fff;
  border: 1px solid var(--cream-200);
  color: var(--ink-500);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.cf-filter-tag:hover {
  background: var(--forest-50);
  border-color: var(--forest-300);
  color: var(--forest-700);
}
.cf-filter-tag.active {
  background: var(--forest-50);
  border-color: var(--forest-300);
  color: var(--forest-700);
}

/* ─── Calculation settings bar ───────────────────────── */
.cf-calc-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--cream-200);
  margin-bottom: 22px;
}
.cf-calc-bar__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--forest-50);
  color: var(--forest-700);
}
.cf-calc-bar__sep  { width: 1px; height: 16px; background: var(--cream-200); flex-shrink: 0; }
.cf-calc-bar__desc { font-size: 14px; color: var(--ink-500); }
.cf-calc-bar__hint { font-size: 14px; color: var(--ink-400); font-style: italic; margin-left: auto; }
.cf-calc-bar .form-check-label,
.cf-calc-bar__label--check { font-size: 14px; color: var(--ink-600, #555f6d); }

/* ─── Group section header (replaces border-start border-4 border-primary) */
.cf-group-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  padding-left: 10px;
  border-left: 3px solid currentColor;
  line-height: 1.4;
}
.cf-group-header--stay     { color: var(--m-stay); }
.cf-group-header--dining   { color: var(--m-dining-text); }
.cf-group-header--activity { color: var(--m-activity); }
.cf-group-header--gold     { color: #a07840; }    /* 推薦區 — 暖棕金 */
.cf-group-header--forest   { color: var(--forest-700); }
.cf-group-header__count {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-400);
  background: var(--cream-100);
  border-radius: 100px;
  padding: 1px 8px;
  margin-left: 4px;
}

/* ─── Item selection card ─────────────────────────────── */
.cf-item-card {
  background: #fff;
  border: 1px solid var(--cream-200);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.cf-item-card:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border-color: var(--cream-300, #d5c9b0);
}
.cf-item-card__body {
  padding: 14px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cf-item-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--forest-900);
  line-height: 1.4;
  margin: 0 0 2px;
}
.cf-item-card__factor { font-size: 14px; color: var(--ink-500); }
.cf-item-card__factor strong {
  color: var(--ink-800);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
}
.cf-item-card__source { font-size: 14px; color: var(--ink-400); }

.cf-eco-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  font-weight: 600;
  color: var(--m-stay);
  background: var(--forest-50);
  border: 1px solid var(--forest-200);
  border-radius: 100px;
  padding: 2px 8px;
}

.cf-item-card__footer {
  padding: 10px 16px;
  border-top: 1px solid var(--cream-100);
  background: var(--cream-50);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ─── Quantity controls ───────────────────────────────── */
.cf-qty-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.cf-qty-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--cream-200);
  background: #fff;
  color: var(--ink-700);
  font-size: 16px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background 0.15s;
}
.cf-qty-btn:hover { background: var(--cream-50); }
.cf-qty-btn--plus { color: #fff; border: none; }

/* Module-colour plus buttons */
.accommodation-card .cf-qty-btn--plus { background: var(--m-stay); }
.accommodation-card .cf-qty-btn--plus:hover { background: var(--forest-600, #2c5b46); }
.dining-card        .cf-qty-btn--plus { background: var(--m-dining); }
.dining-card        .cf-qty-btn--plus:hover { filter: brightness(0.88); }
.activity-card      .cf-qty-btn--plus { background: var(--m-activity); }
.activity-card      .cf-qty-btn--plus:hover { filter: brightness(0.88); }

.cf-qty-input {
  width: 52px;
  text-align: center;
  border: 1px solid var(--cream-200);
  border-radius: 6px;
  font-size: 14px;
  padding: 3px 4px;
  font-family: 'JetBrains Mono', monospace;
}

/* ─── Carbon value display ────────────────────────────── */
.cf-carbon-value {
  font-size: 15px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  text-align: right;
  line-height: 1.2;
}
.cf-carbon-label { font-size: 14px; color: var(--ink-400); text-align: right; }

/* Module-specific carbon value colours */
.accommodation-card .cf-carbon-value { color: var(--m-stay); }
.dining-card        .cf-carbon-value { color: var(--m-dining-text); }
.activity-card      .cf-carbon-value { color: var(--m-activity); }

/* ─── Notice / no-results alert ──────────────────────── */
.cf-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
  background: var(--cream-50);
  border-left: 3px solid var(--forest-300);
  color: var(--ink-700);
}
.cf-notice--dining   { border-left-color: var(--m-dining); }
.cf-notice--activity { border-left-color: var(--m-activity); }
.cf-notice i { flex-shrink: 0; margin-top: 2px; }

/* ─── Module-specific filter tag active states ─── */
/* 住宿 (使用 #accommodation-filters 包裹，預設 forest green 已合適，可選擇性覆蓋) */
#dining-filters .cf-filter-tag.active {
  background: color-mix(in srgb, var(--m-dining) 12%, #fff);
  border-color: var(--m-dining);
  color: var(--m-dining-text);
}
#dining-filters .cf-filter-tag:hover {
  background: color-mix(in srgb, var(--m-dining) 8%, #fff);
  border-color: var(--m-dining);
  color: var(--m-dining-text);
}
#activity-filters .cf-filter-tag.active {
  background: color-mix(in srgb, var(--m-activity) 12%, #fff);
  border-color: var(--m-activity);
  color: var(--m-activity);
}
#activity-filters .cf-filter-tag:hover {
  background: color-mix(in srgb, var(--m-activity) 8%, #fff);
  border-color: var(--m-activity);
  color: var(--m-activity);
}