/**
 * Soft UI — 柔光玻璃視覺層（2026-10-13，第一步：首頁＋手機底部導覽列）
 * ============================================
 * 載入順序：tokens → base → motion → layout → components → apple → **soft（本檔）**
 * 要整層退回：拿掉 index.html 那行 soft.css 的 <link> 即可——
 *   ・首頁外層的 .soft-home 只是掛樣式的殼，沒有本檔就沒有任何效果
 *   ・底部導覽列（js/components/bottom-nav.js）偵測不到 --soft-ui:1 就不掛
 *
 * 風格：很淡的灰白底（2026-10-14 使用者：不要暖色，改灰色調的白）、白色半透明面板＋1px 白亮邊、極淡擴散大陰影、大圓角、
 *       按鈕上緣內亮光、整體黑白灰、一張卡最多一個重點色（品牌色漸層 #334E5A → 淺青綠）。
 *
 * 為什麼新 token 放在這裡、不放 tokens.css：
 *   1. 「拿掉一行就退回」——token 也在同一檔，退回時不會留下孤兒變數，也不會有人誤用到別頁
 *   2. tokens.css 是全站共用，第一步只套首頁，放進去等於邀請其他頁面提早引用
 *   推到全系統時（第二步）再把確定要全站用的 --soft-* 搬進 tokens.css。
 *   既有 token 的「全域值」一個都沒改；只有在 .soft-home 範圍內把幾個灰字／警示色調深（見 §1），為了對比度 AA。
 *
 * 對比度（WCAG 2.1，實測公式）：
 *   次要灰字 #5E6468 on 灰白底 #F2F4F5 = 5.44:1、on 白面板 #FBFCFD = 5.84:1（原 #7C8891 on 灰底只有 3.20:1）
 *   主要字 #1E2A30 on #F2F4F5 = 13.32:1
 *   白字 on 漸層最淺端 #3F7D7B = 4.74:1（最深端 #334E5A = 8.83:1）
 *   警示 #8F5A1F on 面板 = 5.52:1、危險 #A84A40 on 面板 = 5.41:1（原 #C97A2D 只有 3.19:1）
 *   底部列文字 #55595C on 半透明列（0.9）最壞情況（疊在主色上 ≈ #E7E9E8）= 5.80:1
 */

/* ================================================================
   0. Token（只在本檔用）
   ================================================================ */
:root {
  --soft-ui: 1;                      /* bottom-nav.js 用這個判斷視覺層有沒有載入 */

  --soft-canvas:      #F2F4F5;       /* 灰白底（冷中性，不偏黃） */
  --soft-panel:       rgba(255, 255, 255, 0.72);   /* 白色半透明面板（疊在灰白底上 ≈ #FBFCFD） */
  --soft-panel-solid: #FBFCFD;
  --soft-edge:        rgba(255, 255, 255, 0.95);   /* 1px 白色亮邊 */
  --soft-line:        #E1E6E9;       /* 面板內的分隔線 / 外框（極淡冷灰） */
  --soft-fill:        rgba(30, 42, 48, 0.06);      /* 中性小底色（標籤、晶片） */

  --soft-text-1: #1E2A30;
  --soft-text-2: #5E6468;
  --soft-text-nav: #55595C;
  --soft-warn:   #8F5A1F;
  --soft-danger: #A84A40;

  --soft-radius-card: 36px;
  --soft-radius-tile: 28px;
  --soft-radius-icon: 12px;

  /* 極淡、擴散的大陰影（用品牌深色當陰影色，跟灰白底同溫） */
  --soft-shadow:       0 1px 2px rgba(30, 42, 48, 0.04), 0 18px 44px -16px rgba(30, 42, 48, 0.16);
  --soft-shadow-hover: 0 2px 4px rgba(30, 42, 48, 0.05), 0 26px 56px -18px rgba(30, 42, 48, 0.22);
  /* 輕度擬物：上緣白色內亮光＋下緣淡陰影 */
  --soft-raised: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(30, 42, 48, 0.08), 0 6px 14px -6px rgba(30, 42, 48, 0.20);

  /* 品牌色延伸漸層：主色 → 淺青綠（白字在最淺端仍 4.74:1） */
  --soft-grad:       linear-gradient(135deg, #334E5A 0%, #38616A 50%, #3F7D7B 100%);
  --soft-grad-hover: linear-gradient(135deg, #2B4450 0%, #31575F 50%, #376F6E 100%);
  --soft-glow:       inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 2px 6px rgba(51, 78, 90, 0.22), 0 12px 26px -10px rgba(63, 125, 123, 0.60);
  --soft-glow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 3px 8px rgba(51, 78, 90, 0.26), 0 16px 32px -10px rgba(63, 125, 123, 0.70);
  --soft-focus:      0 0 0 3px #FFFFFF, 0 0 0 5px #3F7D7B;

  --soft-bnav-h:   64px;
  --soft-bnav-gap: 10px;             /* 列與螢幕底（安全區之上）的距離 */
}


/* ================================================================
   1. 首頁畫布與範圍
   ================================================================ */
/* 只有首頁（#view-outlet 裡是 .soft-home）時，白色主面板換成灰白底；其他頁 :has 不成立，維持原樣 */
.app-main:has(> #view-outlet > .soft-home) {
  background:
    radial-gradient(ellipse 720px 420px at 8% -6%, rgba(255, 255, 255, 0.85), transparent 62%),
    radial-gradient(ellipse 640px 420px at 100% 100%, rgba(63, 125, 123, 0.05), transparent 64%),
    var(--soft-canvas);
}

/* 範圍內調深灰字與警示色，達 AA（只影響 .soft-home 子樹，全域 token 值不變） */
.soft-home {
  --color-text-mute: var(--soft-text-2);
  --color-text-dim:  var(--soft-text-2);
  --color-warning:   var(--soft-warn);
  --color-danger:    var(--soft-danger);
  --tint-peach-fg:   var(--soft-warn);
  color: var(--soft-text-1);
}
.soft-home .page-sub { color: var(--soft-text-2); font-size: var(--fs-sm); letter-spacing: 0.02em; }


/* ================================================================
   2. 區塊標題：深灰字＋圖示方塊（浮起的乳白小方塊）
   ================================================================ */
.soft-home .dash-section__title {
  color: var(--soft-text-1);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}
.soft-home .dash-section__sub { font-size: var(--fs-xs); letter-spacing: 0.02em; }
.soft-home .dash-section__icon {
  width: 38px; height: 38px;
  border-radius: var(--soft-radius-icon);
  background: var(--soft-panel-solid);
  border: 1px solid var(--soft-edge);
  box-shadow: var(--soft-raised);
  color: var(--soft-text-1);
}


/* ================================================================
   3. 統計卡：數字是主角（大、細長），說明字小而灰
   ================================================================ */
.soft-home .stats-grid { gap: 14px; }
.soft-home .stat-card {
  background: var(--soft-panel);
  border: 1px solid var(--soft-edge);
  border-radius: var(--soft-radius-tile);
  box-shadow: var(--soft-shadow);
  padding: 20px 22px 22px;
}
.soft-home .stat-card:hover {
  background: var(--soft-panel-solid);
  box-shadow: var(--soft-shadow-hover);
  transform: translateY(-2px);
}
.soft-home .stat-card__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--soft-text-2);
  letter-spacing: 0.04em;
}
.soft-home .stat-card__value {
  color: var(--soft-text-1);
  font-family: var(--font-display);
  font-weight: 700;                  /* 粗體（2026-10-14 使用者：重點數字用粗體；原本 300 細字太淡） */
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-top: 10px;
}
/* 年度營運（件數，1～3 位數）→ 放很大 */
.soft-home #stats-grid .stat-card__value { font-size: clamp(34px, 10vw, 52px); }
@supports (font-size: 1cqi) {
  .soft-home #stats-grid .stat-card__value { font-size: clamp(34px, 28cqi, 56px); }
}
/* 業績儀表板（金額，七～九位數）→ 一行放完（nowrap 沿用 apple.css），字級跟著卡片寬 */
.soft-home #financial-content .stat-card__value { font-size: clamp(20px, 5.4vw, 34px); }
@supports (font-size: 1cqi) {
  .soft-home #financial-content .stat-card__value { font-size: clamp(18px, 15cqi, 36px); }
}
.soft-home .stat-card--warning .stat-card__value { color: var(--soft-warn); }


/* ================================================================
   4. 今日重點條：主要按鈕（今日工地）＋柔光晶片
   ================================================================ */
.soft-home .today-strip { gap: 12px; }
.soft-home .btn--primary,
.soft-home .btn--accent {
  background: var(--soft-grad);
  color: #FFFFFF;
  border-radius: var(--radius-pill);
  box-shadow: var(--soft-glow);
}
.soft-home .btn--primary:hover,
.soft-home .btn--accent:hover {
  background: var(--soft-grad-hover);
  box-shadow: var(--soft-glow-hover);
}
.soft-home .btn--primary:focus-visible,
.soft-home .btn--ghost:focus-visible,
.soft-home .case-card__share:focus-visible { box-shadow: var(--soft-focus); outline: none; }
.soft-home .today-site-link {
  align-self: flex-start;
  min-height: 44px;
  padding: 0 22px;
  font-size: var(--fs-base);
}

.soft-home .today-strip__item {
  min-height: 44px;                  /* 觸控目標 ≥ 44px（工地單手操作） */
  padding: 8px 16px;
  border: 1px solid var(--soft-edge);
  background: var(--soft-panel);
  box-shadow: var(--soft-raised);
  color: var(--soft-text-1);
}
.soft-home .today-strip__item:hover { background: var(--soft-panel-solid); }
.soft-home .today-strip__item.is-danger  { color: var(--soft-danger); border-color: rgba(168, 74, 64, 0.35); }
.soft-home .today-strip__item.is-warning { color: var(--soft-warn);   border-color: rgba(143, 90, 31, 0.35); }
.soft-home .today-strip__item.is-clear   { color: var(--soft-text-2); }

.soft-home .recent-chip {
  background: var(--soft-fill);
  color: var(--soft-text-1);
  min-height: 32px;
  line-height: 22px;
}
.soft-home .recent-chip:hover { background: rgba(30, 42, 48, 0.11); color: var(--soft-text-1); }

/* 次要按鈕（看全部、隱藏金額、輸出報表）：浮起的乳白膠囊 */
.soft-home .btn--ghost {
  background: var(--soft-panel-solid);
  color: var(--soft-text-1);
  border: 1px solid var(--soft-edge);
  border-radius: var(--radius-pill);
  box-shadow: var(--soft-raised);
}
.soft-home .btn--ghost:hover { background: #FFFFFF; }


/* ================================================================
   5. 案場卡：柔光面板；唯一重點色＝「分享工班須知」漸層鈕（進度條同色系）
   ================================================================ */
.soft-home .case-grid { gap: 18px; }
.soft-home .case-card {
  background: var(--soft-panel);
  border: 1px solid var(--soft-edge);
  border-radius: var(--soft-radius-card);
  box-shadow: var(--soft-shadow);
  padding: 24px;
  gap: 14px;
}
.soft-home .case-card:hover {
  border-color: var(--soft-edge);
  background: var(--soft-panel-solid);
  box-shadow: var(--soft-shadow-hover);
  transform: translateY(-3px);
}
.soft-home .case-card__title { color: var(--soft-text-1); font-weight: var(--fw-semibold); }
/* 階段標籤改中性（一張卡只留一個重點色） */
.soft-home .case-card .pill {
  background: var(--soft-fill);
  color: var(--soft-text-1);
  border: none;
}
.soft-home .case-card__info,
.soft-home .case-card__site,
.soft-home .case-card__metrics { border-color: var(--soft-line); }
.soft-home .case-card__icon {
  background: var(--soft-fill);
  color: var(--soft-text-2);
  border-radius: 8px;
}
.soft-home .case-card__share-row .case-card__share {
  background: var(--soft-grad);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-pill);
  box-shadow: var(--soft-glow);
  min-height: 48px;
}
.soft-home .case-card__share-row .case-card__share:hover {
  background: var(--soft-grad-hover);
  box-shadow: var(--soft-glow-hover);
}
.soft-home .case-card__bar { background: #E3E8EB; height: 8px; }
.soft-home .case-card__bar-fill { background: var(--soft-grad); }
.soft-home .case-card__pct {
  color: var(--soft-text-1);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.soft-home .case-card__sched { color: var(--soft-text-1); }
.soft-home .case-card__today.is-logged  { background: var(--soft-fill); color: var(--soft-text-1); }
.soft-home .case-card__today.is-missing { background: transparent; color: var(--soft-text-2); box-shadow: inset 0 0 0 1px var(--soft-line); }
.soft-home .case-card__metric-label { color: var(--soft-text-2); font-size: var(--fs-xs); letter-spacing: 0.04em; }
.soft-home .case-card__metric-value strong {
  color: var(--soft-text-1);
  font-family: var(--font-display);
  font-weight: 700;                  /* 同上：案場卡收款進度％也用粗體 */
  font-size: 30px;
  letter-spacing: -0.02em;
}


/* ================================================================
   6. 其餘首頁面板（空狀態卡、待辦、通知、案件分配）：同一張乳白面板
   ================================================================ */
.soft-home .card {
  background: var(--soft-panel);
  border: 1px solid var(--soft-edge);
  border-radius: var(--soft-radius-tile);
  box-shadow: var(--soft-shadow);
}
.soft-home .card:hover { background: var(--soft-panel-solid); }
.soft-home .alltodo-row,
.soft-home .member-row {
  background: var(--soft-panel);
  border-color: var(--soft-edge);
}


/* ================================================================
   7. FAB（＋快速新增）：品牌漸層＋柔光暈（桌機右下角；手機改由底部列中間的 ＋ 開啟）
   ================================================================ */
.fab__btn {
  background: var(--soft-grad);
  box-shadow: var(--soft-glow), 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.fab__btn:hover { background: var(--soft-grad-hover); box-shadow: var(--soft-glow-hover); }
.fab__btn.is-open { background: var(--soft-text-1); }
.fab__menu { border-radius: 24px; padding: 8px; }
.fab__item { border-radius: 16px; min-height: 44px; }


/* ================================================================
   8. 手機底部導覽列（< 768px；桌機不出現，維持原本側欄）
   ================================================================ */
.bnav { display: none; }

@media (max-width: 767px) {
  .bnav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 2px;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--soft-bnav-gap) + env(safe-area-inset-bottom, 0px));
    height: var(--soft-bnav-h);
    padding: 6px;
    /* z-index 74：高於 topbar（70）、低於側欄遮罩（75）／側欄（80）／modal（200）／FAB 選單（900）
       → 「更多」打開抽屜時抽屜蓋過列；開 modal／bottom sheet 時列在遮罩底下，點不到、也不會蓋住儲存鈕 */
    z-index: 74;
    border-radius: 32px;
    background: rgba(251, 250, 248, 0.97);        /* 不支援 backdrop-filter 的退路：幾乎不透明 */
    border: 1px solid var(--soft-edge);
    box-shadow: 0 1px 2px rgba(30, 42, 48, 0.06), 0 18px 40px -12px rgba(30, 42, 48, 0.28);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .bnav {
      background: rgba(251, 250, 248, 0.9);
      -webkit-backdrop-filter: saturate(160%) blur(16px);
      backdrop-filter: saturate(160%) blur(16px);
    }
  }

  .bnav__item {
    flex: 1 1 0;
    min-width: 44px;
    min-height: 52px;                 /* 觸控目標 ≥ 44px */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: none;
    color: var(--soft-text-nav);
    font: inherit;
    font-size: 11px;
    font-weight: var(--fw-medium);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--transition-fast), background-color var(--transition-fast);
  }
  .bnav__item:active { background: var(--soft-fill); }
  .bnav__item:focus-visible { outline: 2px solid #3F7D7B; outline-offset: -2px; }
  .bnav__ico { display: flex; width: 24px; height: 24px; }
  .bnav__svg { width: 24px; height: 24px; }
  .bnav__svg--solid { display: none; }
  /* 目前頁：實心深色圖示；其他：灰色線條 */
  .bnav__item.is-active { color: var(--soft-text-1); font-weight: var(--fw-semibold); }
  .bnav__item.is-active .bnav__svg--line  { display: none; }
  .bnav__item.is-active .bnav__svg--solid { display: block; }
  .bnav__label { white-space: nowrap; }

  /* 中間主要動作：凸起的品牌漸層膠囊 */
  .bnav__plus {
    flex: 0 0 64px;
    height: 52px;
    margin: 0 2px;
    transform: translateY(-14px);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 26px;
    background: var(--soft-grad);
    color: #FFFFFF;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* 外圈一道灰白「切口」讓它像從列裡浮出來 */
    box-shadow: 0 0 0 5px rgba(241, 240, 236, 0.92), var(--soft-glow);
    transition: transform var(--transition), background var(--transition-fast);
  }
  .bnav__plus:active { transform: translateY(-12px) scale(0.96); }
  .bnav__plus:focus-visible { outline: 2px solid #3F7D7B; outline-offset: 7px; }
  .bnav__plus svg { transition: transform var(--transition); }
  .bnav__plus.is-open { background: var(--soft-text-1); }
  .bnav__plus.is-open svg { transform: rotate(45deg); }

  /* 內容底部讓出導覽列高度（列高＋離底距離＋呼吸空間＋iPhone 安全區） */
  body.has-bnav .app-main {
    padding-bottom: calc(var(--soft-bnav-h) + var(--soft-bnav-gap) + 32px + env(safe-area-inset-bottom, 0px));
  }

  /* 底部列出現時：藏起右下角 FAB 圓鈕（避免兩顆＋），選單改從中間 ＋ 往上長 */
  body.has-bnav .fab__btn { display: none; }
  body.has-bnav .fab {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: calc(var(--soft-bnav-h) + var(--soft-bnav-gap) + 22px + env(safe-area-inset-bottom, 0px));
    align-items: center;
  }

  /* 有 modal／bottom sheet 開著：列整個收起來（雙保險；z-index 本來就在遮罩底下） */
  body:has(.modal.is-open) .bnav { display: none; }

  /* SW 更新橫幅原本貼底 20px，會跟列重疊 → 抬到列上方 */
  body.has-bnav .sw-update-banner {
    bottom: calc(var(--soft-bnav-h) + var(--soft-bnav-gap) + 14px + env(safe-area-inset-bottom, 0px));
  }
}


/* ================================================================
   9. 減少動態：拿掉浮起／旋轉位移（base.css 已把 transition 時間歸零，這裡處理 transform 本身）
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .soft-home .stat-card:hover,
  .soft-home .case-card:hover,
  .soft-home .case-card:active { transform: none; }
  .bnav__plus.is-open svg { transform: none; }
}


/* ================================================================
   電腦版左側選單：透明感（2026-10-14 使用者：「電腦版左側的選單欄也要依樣有透明感設計」）
   ================================================================
   毛玻璃要「後面有東西」才看得出來：純色底上的半透明白就只是淡灰。
   所以在 .app-shell 的左側鋪兩團很淡的品牌色光暈，讓側欄透出一點青綠。
   ・只在 ≥ 768px：手機的抽屜側欄維持不透明（apple.css 第 20 節：疊在遮罩上會糊掉）
   ・這段是**整個 shell 層級**的，所以每一頁的桌機側欄都會變（使用者要的就是側欄本身）
   ・不支援 backdrop-filter 的瀏覽器退回幾乎不透明的白 */
@media (min-width: 768px) {
  .app-shell {
    background:
      radial-gradient(ellipse 520px 560px at -4% 20%, rgba(63, 125, 123, 0.34), transparent 66%),
      radial-gradient(ellipse 460px 500px at 8% 98%, rgba(51, 78, 90, 0.26), transparent 68%),
      radial-gradient(ellipse 800px 500px at 100% 100%, rgba(51, 78, 90, 0.05), transparent 62%),
      var(--soft-canvas);
  }
  .nav {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.34));
    backdrop-filter: saturate(170%) blur(26px);
    -webkit-backdrop-filter: saturate(170%) blur(26px);
    box-shadow: inset 0 0 0 1px var(--soft-edge), var(--soft-shadow);
  }
  /* 選中的那一項：白色浮起膠囊（跟首頁按鈕同一種內亮光） */
  .nav__item.is-active .nav__link {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--soft-raised);
  }
  /* 半透明底上的小灰字要調深才過 AA（版本號、分組標題） */
  .nav__brand-sub,
  .nav__divider,
  .nav__link { color: var(--soft-text-2); }   /* 原 #7C8891 在透出青綠的底上只有約 2.9:1；#5E6468 最深處 4.7:1 */
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (min-width: 768px) {
    .nav { background: rgba(251, 252, 253, 0.97); }
  }
}