/* =========================================================
   📑 base.css — 全站共用基礎樣式
   內容：設計變數 Tokens（舊版 + Forest 設計系統）、全站字型背景、
         文字色彩／字級 utility class、按鈕、頁籤基礎樣式、
         共用動畫與輔助 utility。
   載入順序：必須最先載入（其他 css 檔案依賴此處定義的 CSS 變數）。
   ========================================================= */

/* ─────────────────────────────────────────────────────────
   1. 設計變數 Tokens
   ───────────────────────────────────────────────────────── */

/* 1.1 舊版主題色票與字級系統（Estimate 模組沿用） */
:root {
    --c-transport: #0d6efd;
    --c-accommodation: #198754;
    --c-dining: #ffc107;
    --c-activity: #dc3545;
    --c-report: #6c757d;
    --c-transport-text: #0a58ca;
    --c-accommodation-text: #146c43;
    --c-dining-text: #a15900;
    --c-activity-text: #b02a37;

    /* 📏 字體大小系統 (Font Size System) */
    /* 原數值保留註解，新數值稍微放大以提升可讀性 */

    /* 極小圓點圖示 */
    --font-size-xxs: 0.5rem;
    /* 8px (不變) */

    /* 極小提示文字 */
    /* 原: 0.7rem (11.2px) → 新: 0.75rem (12px) */
    --font-size-xs: 0.75rem;

    /* Badge 計數 */
    /* 原: 0.75rem (12px) → 新: 0.8rem (12.8px) */
    --font-size-sm: 0.8rem;

    /* 標籤按鈕 */
    /* 原: 0.85rem (13.6px) → 新: 0.875rem (14px) */
    --font-size-base-sm: 0.875rem;

    /* 次要文字、標籤 ⭐ 主力使用 */
    /* 原: 0.875rem (14px) → 新: 1rem (16px) - 標準正文大小 */
    --font-size-base: 1rem;

    /* 正文 */
    --font-size-md: 1rem;
    /* 16px (不變) */

    /* 標題 (h2, fs-5) */
    --font-size-lg: 1.25rem;
    /* 20px (不變) */

    /* 大數值 (總碳排) */
    --font-size-xl: 1.75rem;
    /* 28px (不變) */

    /* 大圖示 (空狀態) */
    --font-size-xxl: 3rem;
    /* 48px (不變) */
}

/* 1.2 Forest 設計系統色票（原 custom.css，搬移至此與舊版 tokens 集中管理） */
:root {
  /* Forest greens — primary identity */
  --forest-900: #102b22;  /* deepest, headlines on cream */
  --forest-800: #163b2e;  /* dark CTA, footer */
  --forest-700: #1f4332;  /* primary brand color */
  --forest-600: #2c5b46;
  --forest-500: #3d6b53;  /* secondary, module "stay" color */
  --forest-400: #5b8a72;
  --forest-300: #8aae97;  /* dashed borders, muted accents */
  --forest-200: #b7cdb9;
  --forest-100: #dde8dd;  /* chip backgrounds */
  --forest-50:  #ecf2ec;  /* lightest tint, hover bg */

  /* Cream / paper — surface system */
  --cream-50:  #faf7ee;   /* page background */
  --cream-100: #f5f0e1;   /* section/panel bg */
  --cream-200: #ece6d2;   /* hairline borders, dividers */
  --cream-300: #dcd2b6;   /* form input borders, button outlines */
  --cream-400: #c4b894;   /* disabled state */

  /* Ink — text */
  --ink-900: #1a1814;     /* headlines */
  --ink-800: #2a2620;     /* body */
  --ink-700: #3f3a2e;     /* body-secondary */
  --ink-500: #6b6555;     /* metadata, labels */
  --ink-400: #6f6a5a;     /* hint text（原 #8a8473 對比不足，加深至 4.5:1 以上） */
  --ink-300: #857e69;     /* placeholder（原 #aca693 對比不足，加深至 3:1 以上） */

  /* Accents — used sparingly */
  --clay-600: #a35033;
  --clay-500: #b45f3e;    /* WARN / accent badges */
  --gold-600: #9b7c4c;
  --gold-500: #b89968;

  /* Module hues — one color per carbon module */
  --m-transport: #4a7c8d;  /* 交通 — slate blue-green */
  --m-stay:      #3d6b53;  /* 住宿 — forest */
  --m-dining:    #b89968;  /* 餐飲 — warm gold（僅供背景/邊框/裝飾使用，勿直接作為文字色） */
  --m-dining-text: #8a6a2e;  /* 餐飲文字專用色：加深版 --m-dining，白底對比 ~5.0:1，符合 4.5:1 門檻 */
  --m-activity:  #b45f3e;  /* 活動 — clay */
  --m-office:    #6b6555;  /* 旅行業門市 — ink-mute */
}

/* ─────────────────────────────────────────────────────────
   2. 全站字型與背景（原 custom.css，
      此規則為全站 body 唯一定義，無其他檔案再覆寫）
   ───────────────────────────────────────────────────────── */
body {
  background-color: var(--cream-50) !important;
  font-family: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', system-ui, sans-serif;
  color: var(--ink-800);
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.01em;
}

/* ─────────────────────────────────────────────────────────
   3. Typography helpers（原 custom.css）
   ───────────────────────────────────────────────────────── */
.cf-serif {
  font-family: 'Noto Serif TC', 'Source Han Serif TC', 'PMingLiU', serif;
}
/* Tabular numbers for numeric values — use on any element with numbers */
.cf-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ─────────────────────────────────────────────────────────
   5. 字體大小 Utility Classes
   ───────────────────────────────────────────────────────── */
.text-sm {
    font-size: var(--font-size-sm) !important;
}

.text-base {
    font-size: var(--font-size-base) !important;
}

.text-lg {
    font-size: var(--font-size-lg) !important;
}

.text-xxl {
    font-size: var(--font-size-xxl) !important;
}

/* ─────────────────────────────────────────────────────────
   6. 觀光署主色按鈕（原 Login.cshtml 專屬區塊，
      實際也用於 Review 等其他頁面的「新增」按鈕，故列為全站共用）
   ───────────────────────────────────────────────────────── */
.btn-tourism-main {
    /* 原 #f15a22 對白字對比僅 3.37:1（未達一般文字 4.5:1 門檻），
       加深至 #c94a1b，白字對比提升至約 4.69:1，維持相同橘色色系 */
    background-color: #c94a1b;
    border-color: #c94a1b;
    color: #fff;
    font-weight: bold;
}

.btn-tourism-main:hover {
    background-color: #a83d15;
    border-color: #a83d15;
    color: #fff;
}

/* ─────────────────────────────────────────────────────────
   7. Tabs 分頁導航 — 基礎樣式
   （模組專屬 active 顏色，如 #transport-tab.active，隨 Estimate 內容移至 estimate.css）
   ───────────────────────────────────────────────────────── */
.nav-tabs {
    border-bottom: 2px solid #dee2e6;
}

.nav-tabs .nav-link {
    color: #6c757d;
    border: none;
    border-bottom: 2px solid transparent;
    font-weight: 500;
    transition: all 0.2s;
    background: transparent;
}

/* ─────────────────────────────────────────────────────────
   8. 共用動畫與輔助 Utility
   ───────────────────────────────────────────────────────── */
.form-switch .form-check-input:checked {
    background-color: var(--c-accommodation);
    border-color: var(--c-accommodation);
}

.form-switch .form-check-input {
    cursor: pointer;
}

/* 隱藏橫向捲軸但保留滾動功能 */
.hide-scrollbar {
    scrollbar-width: none; /* Firefox */
}
.hide-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

/* ─────────────────────────────────────────────────────────
   9. 麵包屑導覽 + 頁面標題列（全站共用，原於 estimate.css）
      Estimate/Index.cshtml、Trips/Browse.cshtml 等頁面共用此 class
   ───────────────────────────────────────────────────────── */

/* ── Breadcrumb ── */
.cf-breadcrumb         { display:flex; align-items:center; gap:8px; font-size: 14px; color:var(--ink-500); letter-spacing:0.04em; margin-bottom:10px; }
.cf-breadcrumb__link   { color:var(--ink-500); text-decoration:none; transition:color 0.15s; }
.cf-breadcrumb__link:hover { color: var(--forest-700); }
.cf-breadcrumb__current { color: var(--forest-700); }

/* ── Page title row ── */
.cf-page-title-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.cf-page-title     { font-size:24px; font-weight:600; color:var(--forest-900); margin:0; }
.cf-status-badge   { padding:3px 10px; background:var(--cream-100); color:var(--ink-700); font-size: 14px; border-radius:100px; letter-spacing:0.04em; }
.cf-page-actions   { margin-left:auto; display:flex; gap:8px; }

/* ─────────────────────────────────────────────────────────
   10. RWD — 大螢幕（40 吋以上高解析度顯示器）全站字體放大
   站內文字多以固定 px 撰寫，散落在各 css 檔案中，逐一調整成本高
   且難以維護一致比例，故採用 zoom 對整站（文字＋按鈕／表格等元件）
   做等比例放大，視覺效果等同使用者將瀏覽器縮放調整為 115%。
   zoom 不影響 media query 版面判斷所用的實際 viewport 寬度，
   僅放大畫面呈現比例，大螢幕可視空間充裕，不會造成版面跑版。
   （zoom 屬性主流瀏覽器皆已支援：Chrome/Edge/Safari 長期支援，
   Firefox 126+ 起亦支援。）
   ───────────────────────────────────────────────────────── */
@media (min-width: 1920px) {
  body {
    zoom: 1.15;
  }
}