/* page-bookings.css —— 預約頁專屬樣式（v1.10.1 由 main.css 拆出）

   ⚠ 本檔內容是**從 main.css 原樣搬過來的**，v1.10.1 沒有改動任何一條規則的
     選擇器或宣告內容。要追原始出處看該版之前的 main.css。

   ⚠⚠ **本檔必須排在 index.html 的 main.css 之後。** CSS 的載入順序就是優先序：
     排到 main.css 前面，同權重的規則勝負會反轉，而且只會在少數幾個元素上出現，
     那是最難查的一種跑版。

   本檔的選擇器全部限定在 .bk-wrap 之下，與其他頁面檔的範圍互斥。 */

/* ══ 預約 · 日檢視（UI-10.0）══════════════════════════════════════════
   定稿：design/mockups/salon_bookings_v1.html

   ⚠⚠ **本區塊所有選擇器都限定在 .bk-wrap 之下，一條都不能拿掉。**
   定稿用了 .d / .t / .n / .nm / .sv / .pr / .act / .bar / .grid 這種通用 class，
   站上多處已經在用（.act 員工列操作區、.bar 工具列、.t 標題…）——
   直接照抄會讓別頁莫名跑版，UI-9.1 已經踩過一次，這裡沿用同樣的做法。

   ⚠ 定稿色值是內嵌 hex（單檔 mockup 的權宜），一律翻回 var(--lhrm-*)。
   ⚠ 定稿以 .frame[data-device="mobile"] 切手機版，實作翻成 @media (max-width:760px)。
   ⚠ 定稿的「＋ 建立預約」本批**不渲染**（沒有建單路徑），故不含其樣式。
   本區塊只**追加**，不改任何既有規則。 */

/* 「已報到」的綠色左邊條走既有的 var(--c-confirm)——DESIGN_TOKENS.css 早就定義了
   這個語意色（亮暗各一組），而且與定稿內嵌的兩個值**完全相同**，不需要在這裡重定義。
   本檔因此一個 hex 都不需要寫。 */

/* ── 週概覽條 ─────────────────────────────────────────── */
.bk-wrap .wk { display: flex; border: 1px solid var(--lhrm-border-2); background: var(--lhrm-surface); }
.bk-wrap .wk .d {
  flex: 1; padding: 8px 4px 9px; text-align: center;
  border-right: 1px solid var(--lhrm-border); position: relative;
}
.bk-wrap .wk .d:last-child { border-right: 0; }
.bk-wrap .wk .d .dw { font-size: 9px; letter-spacing: 1.5px; color: var(--lhrm-text-faint); }
.bk-wrap .wk .d .dd { font-size: 15px; margin-top: 2px; font-weight: 300; }
.bk-wrap .wk .d .load { height: 3px; margin: 6px 6px 0; background: var(--lhrm-border); }
.bk-wrap .wk .d .load i { display: block; height: 100%; background: var(--lhrm-gold-soft); }
.bk-wrap .wk .d .n { font-size: 9px; color: var(--lhrm-text-faint); margin-top: 4px; }
.bk-wrap .wk .d.on { background: var(--lhrm-surface-2); box-shadow: inset 0 -2px 0 var(--lhrm-gold); }
.bk-wrap .wk .d.on .dd { color: var(--lhrm-gold-text); }
.bk-wrap .wk .d.off .dd { color: var(--lhrm-text-faint); }
.bk-wrap .wk .d.off .n { color: var(--lhrm-text-faint); }
/* 切週 ‹ ›（v1.39.1）：同建單頁 .dates .wnav 的長相，改成嵌在框內 */
.bk-wrap .wk .wnav { flex: 0 0 28px; color: var(--lhrm-text-dim); font-size: 15px; border-right: 1px solid var(--lhrm-border); }
.bk-wrap .wk .wnav:last-child { border-right: 0; }
.bk-wrap .wk .wnav:hover { color: var(--lhrm-gold-text); background: var(--lhrm-surface-2); }
.bk-wrap .daybar .dt small.wr { color: var(--lhrm-text-dim); }

/* ── 日期列 ───────────────────────────────────────────── */
.bk-wrap .daybar { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.bk-wrap .daybar .dt { font-size: 16px; font-weight: 400; letter-spacing: .5px; }
.bk-wrap .daybar .dt small {
  font-size: 11px; color: var(--lhrm-text-faint); margin-left: 8px; letter-spacing: 1px;
}
.bk-wrap .daybar .act { margin-left: auto; display: flex; gap: 8px; }

/* ── 待確認佇列 ───────────────────────────────────────── */
/* 金框：這一區是「有事情等你處理」，用品牌金與其他區塊區隔。
   0 筆時整塊不渲染（見 bookings.js），所以不會有空的金框常駐。 */
.bk-wrap .pend { margin-top: 14px; border: 1px solid var(--lhrm-gold); background: var(--lhrm-surface); }
.bk-wrap .pend .ph {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  border-bottom: 1px solid var(--lhrm-border);
}
.bk-wrap .pend .ph .t { font-size: 13px; color: var(--lhrm-gold-text); }
.bk-wrap .pend .ph .c {
  font-size: 11px; color: var(--lhrm-gold-text);
  border: 1px solid currentColor; padding: 0 6px; line-height: 1.7;
}
.bk-wrap .pend .ph .hint { margin-left: auto; font-size: 11px; color: var(--lhrm-text-dim); }
.bk-wrap .pend .pr {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-bottom: 1px solid var(--lhrm-border); flex-wrap: wrap;
}
.bk-wrap .pend .pr:last-child { border-bottom: 0; }
.bk-wrap .pend .pr .tm { font-size: 13px; letter-spacing: .5px; flex: none; }
.bk-wrap .pend .pr .nm { font-size: 13px; }
.bk-wrap .pend .pr .sv { font-size: 11px; color: var(--lhrm-text-dim); }
.bk-wrap .pend .pr .by { font-size: 10px; color: var(--lhrm-text-faint); }
.bk-wrap .pend .pr .a { margin-left: auto; display: flex; gap: 7px; flex: none; }

/* ── 時間軸 ───────────────────────────────────────────── */
.bk-wrap .tl { margin-top: 16px; border: 1px solid var(--lhrm-border-2); background: var(--lhrm-surface); }
.bk-wrap .tl-hd { display: grid; border-bottom: 1px solid var(--lhrm-border-2); }
.bk-wrap .tl-hd .cell { padding: 9px 8px; text-align: center; border-right: 1px solid var(--lhrm-border); }
.bk-wrap .tl-hd .cell:last-child { border-right: 0; }
.bk-wrap .tl-hd .nm { font-size: 13px; }
.bk-wrap .tl-hd .cell.offd .nm { color: var(--lhrm-text-faint); }
.bk-wrap .tl-body { display: grid; position: relative; }
.bk-wrap .tl-time { border-right: 1px solid var(--lhrm-border-2); }
/* 列高 38px 是整個時間軸的基準：預約塊的 top / height 都由它換算
   （top =（開始 − 開店）/ 粒度 × 38；height = 時長 / 粒度 × 38 − 2）。
   改這個值就要同步改 bookings.js 的 ROW_H，否則塊會整片錯位。 */
.bk-wrap .tl-time .t {
  height: 38px; font-size: 10px; color: var(--lhrm-text-faint);
  padding: 2px 8px 0; text-align: right; border-bottom: 1px solid var(--lhrm-border);
}
/* 半點的時間標籤留空（透明），只有整點看得到數字——每格都標會太吵 */
.bk-wrap .tl-time .t.half { color: transparent; }
.bk-wrap .tl-col { position: relative; border-right: 1px solid var(--lhrm-border); }
.bk-wrap .tl-col:last-child { border-right: 0; }
.bk-wrap .tl-col .grid { position: absolute; inset: 0; }
.bk-wrap .tl-col .grid i { display: block; height: 38px; border-bottom: 1px solid var(--lhrm-border); }
.bk-wrap .tl-col .grid i.hr { border-bottom-color: var(--lhrm-border-2); }
/* 排休 / 整天假：整欄斜線底 + 字樣。**不得留白** —— 留白會被當成「還沒排到」 */
.bk-wrap .tl-col.offd {
  background: repeating-linear-gradient(45deg, transparent, transparent 7px,
    var(--lhrm-border) 7px, var(--lhrm-border) 8px);
}
.bk-wrap .tl-col .offlbl {
  position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);
  text-align: center; font-size: 10px; letter-spacing: 2px; color: var(--lhrm-text-faint);
}

/* ── 預約塊 ───────────────────────────────────────────── */
.bk-wrap .bk {
  position: absolute; left: 3px; right: 3px; background: var(--lhrm-surface-2);
  border: 1px solid var(--lhrm-border-2); border-left: 2px solid var(--lhrm-text-faint);
  padding: 5px 7px; overflow: hidden;
}
.bk-wrap .bk .t { font-size: 10px; color: var(--lhrm-text-faint); letter-spacing: .5px; }
.bk-wrap .bk .n {
  font-size: 12px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bk-wrap .bk .s {
  font-size: 10px; color: var(--lhrm-text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 四種狀態（定稿）：待確認虛線 + 金左邊條、已報到綠左邊條、已完成半透明、
   confirmed 維持一般樣式（沒有額外 class）。 */
.bk-wrap .bk.pending { border-left-color: var(--lhrm-gold); border-style: dashed; }
.bk-wrap .bk.pending .t { color: var(--lhrm-gold-text); }
.bk-wrap .bk.checked { border-left-color: var(--c-confirm); }
.bk-wrap .bk.done { opacity: .5; }
/* 練習單（批 3）：虛線框 + 藍左邊條。--c-practice 定義在本檔「建單」段（自訂屬性不看宣告先後）。
   完成的練習單只淡到 .85：它還有事要做（填評量表），淡到 .5 會被忽略。 */
.bk-wrap .bk.practice { border-style: dashed; border-left-color: var(--c-practice); }
.bk-wrap .bk.practice .t { color: var(--c-practice); }
/* 已報到的練習單：左邊條要回到綠色（上面那條 .practice 排在 .checked 之後，會把綠蓋掉）；虛線與藍字仍標示它是練習 */
.bk-wrap .bk.practice.checked { border-left-color: var(--c-confirm); }
.bk-wrap .bk.practice.done { opacity: .85; }
/* 時段已過仍未報到：琥珀左邊條 + 琥珀時間字。confirmed 本來沒有任何 class，
   這是它唯一會長出來的狀態樣式。--c-overdue 定義在本檔「建單」段，緊鄰 --c-practice。
   ⚠ 下面第三條不可省：.practice 排在本區塊之前，會把琥珀蓋回藍色（同 .practice.checked 的教訓）。 */
.bk-wrap .bk.overdue { border-left-color: var(--c-overdue); }
.bk-wrap .bk.overdue .t { color: var(--c-overdue); }
.bk-wrap .bk.practice.overdue { border-left-color: var(--c-overdue); }
.bk-wrap .bk[data-bk] { cursor: pointer; }

.bk-wrap .tl-empty {
  margin-top: 16px; border: 1px solid var(--lhrm-border-2); background: var(--lhrm-surface);
  padding: 26px 14px; text-align: center; font-size: 11px; letter-spacing: 2px;
  color: var(--lhrm-text-faint);
}

/* ── 手機（定稿的 .frame[data-device="mobile"]）──────────── */
@media (max-width: 760px) {
  /* 窄欄放不下筆數，只留日期與忙碌條（定稿寫法） */
  .bk-wrap .wk .d .n { display: none; }
  .bk-wrap .pend .pr { gap: 8px; }
  .bk-wrap .pend .pr .a { margin-left: 0; width: 100%; justify-content: flex-end; }
  .bk-wrap .tl { overflow-x: auto; }
}

/* ══ 建單（v1.19.0，批 2）══════════════════════════════════════════════
   定稿：design/mockups/salon_booking_create_v2.html（**本批開工時仍不在 repo**，版面基礎取自
   salon_bookings_v1.html 的建單稿，00 單型 / 01 就地建卡 / 撞號列 / 06 備註依 prompt 文字描述）。
   本區塊只**追加**，不改上面任何既有規則；選擇器一律限定在 .bk-wrap 之下。

   ⚠ --c-practice（練習單的藍）是**頁級語意色**，不是全站 token：只在本頁代表「練習 / 不收費 / 實習」，
     未經全站採用，故不進 DESIGN_TOKENS.css。亮暗各一組，跟著 [data-theme] 走。
     **本檔的 hex 只准出現在下面這兩行。**
   ⚠ 改名（8-1：頁內 class 撞到 main.css 不帶範圍的通用 class 會同時吃到全站那條）：
     定稿的 .empty → .mk-empty（全站 .empty 帶 uppercase + letter-spacing）·
     .note → .mk-note（全站 .note 帶左邊條）· 姓名的 .nm → .cn（全站 .nm 是 display:flex）·
     服務列的價格 .pr → .pc（.pr 在本頁已是待確認列，也是 00 練習格的修飾詞）。
     .fld / .two / .tag **刻意沿用全站那一套**，不重寫。 */
.bk-wrap, #bkDrawer { --c-practice: #5b7fa6; --c-overdue: #a85a18; }
[data-theme="dark"] .bk-wrap, [data-theme="dark"] #bkDrawer { --c-practice: #7fa3cc; --c-overdue: #e08a4c; }
/* ↑ --c-overdue（該報到而未報到的琥珀）與 --c-practice 同一個原則：頁級語意色、不進 DESIGN_TOKENS.css、
   hex 只准出現在上面兩行。**不沿用 --lhrm-gold**：那是 pending「待確認」的金，兩個狀態要分得出來。 */
/* ↑ 批 3：#bkDrawer（預約面板）掛在 #view-app、不在 .bk-wrap 之內，自訂屬性繼承不到，故併列在同兩行。 */

.bk-wrap .mk { max-width: 660px; }
.bk-wrap .step { margin-top: 20px; }
.bk-wrap .step-t {
  font-family: var(--lhrm-font-mono); font-size: 10px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--lhrm-text-faint);
  padding-bottom: 7px; border-bottom: 1px solid var(--lhrm-border);
  display: flex; align-items: center; gap: 9px;
}
.bk-wrap .step-t b { font-weight: 400; color: var(--lhrm-gold-soft); }
.bk-wrap .step-t .tail { margin-left: auto; letter-spacing: 1px; text-transform: none; }

/* 00 單型 */
.bk-wrap .types { display: flex; gap: 10px; margin-top: 12px; }
.bk-wrap .types .type {
  flex: 1; text-align: left; padding: 11px 14px;
  border: 1px solid var(--lhrm-border-2); background: var(--lhrm-surface);
}
.bk-wrap .types .type .tt { font-size: 14px; }
.bk-wrap .types .type .ts {
  font-family: var(--lhrm-font-mono); font-size: 10px; letter-spacing: 1.5px;
  color: var(--lhrm-text-faint); margin-top: 3px;
}
.bk-wrap .types .type.on { box-shadow: inset 0 -2px 0 var(--lhrm-gold); }
.bk-wrap .types .type.on .tt { color: var(--lhrm-gold-text); }
.bk-wrap .types .type.pr.on { box-shadow: inset 0 -2px 0 var(--c-practice); }
.bk-wrap .types .type.pr.on .tt, .bk-wrap .types .type.pr.on .ts { color: var(--c-practice); }

/* 01 顧客 */
.bk-wrap .pick {
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--lhrm-border-2); padding: 8px 0; margin-top: 6px;
}
.bk-wrap .pick svg { width: 15px; height: 15px; stroke: var(--lhrm-text-faint); fill: none; stroke-width: 1.6; flex: none; }
.bk-wrap .pick input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; font-size: 14px; }
.bk-wrap .res { border: 1px solid var(--lhrm-border-2); border-top: 0; background: var(--lhrm-surface); }
.bk-wrap .res:empty { display: none; }
.bk-wrap .res .r {
  display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
  padding: 9px 13px; border-bottom: 1px solid var(--lhrm-border);
}
.bk-wrap .res .r:last-child { border-bottom: 0; }
.bk-wrap .res .r:hover { background: var(--lhrm-surface-2); }
.bk-wrap .res .r .cn { font-size: 13px; }
.bk-wrap .res .r .ph { font-family: var(--lhrm-font-mono); font-size: 12px; color: var(--lhrm-text-dim); }
.bk-wrap .res .r .meta { margin-left: auto; font-family: var(--lhrm-font-mono); font-size: 10px; color: var(--lhrm-text-faint); }
.bk-wrap .res .r.new { color: var(--lhrm-gold-text); font-size: 13px; }
.bk-wrap .chosen {
  margin-top: 10px; border: 1px solid var(--lhrm-border-2); background: var(--lhrm-surface);
  padding: 10px 13px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.bk-wrap .chosen .cn { font-size: 14px; }
.bk-wrap .chosen .ph { font-family: var(--lhrm-font-mono); font-size: 12px; color: var(--lhrm-text-dim); }
.bk-wrap .chosen .x { margin-left: auto; font-size: 11px; color: var(--lhrm-text-faint); }
.bk-wrap .chosen .x:hover { color: var(--lhrm-gold-text); }
.bk-wrap .tag.model { border-color: var(--c-practice); color: var(--c-practice); }
.bk-wrap .newc {
  margin-top: 10px; border: 1px solid var(--lhrm-border-2); background: var(--lhrm-surface); padding: 12px 14px 14px;
}
.bk-wrap .newc .nh { display: flex; align-items: center; font-size: 12px; color: var(--lhrm-text-dim); }
.bk-wrap .newc .nh .x { margin-left: auto; font-size: 11px; color: var(--lhrm-text-faint); }
.bk-wrap .newc .nh .x:hover { color: var(--lhrm-gold-text); }
.bk-wrap .newc .fld { margin-top: 10px; }
/* 撞號列：不是錯誤，是要人做決定——用品牌金框，不用 danger 紅 */
.bk-wrap .dup {
  margin-top: 12px; border: 1px solid var(--lhrm-gold); background: var(--lhrm-surface);
  padding: 11px 13px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.bk-wrap .dup .tx { font-size: 12px; line-height: 1.7; flex: 1; min-width: 200px; }
.bk-wrap .dup .tx b { font-weight: 500; color: var(--lhrm-gold-text); }

/* 02 服務項目 */
.bk-wrap .svlist { margin-top: 10px; display: flex; flex-direction: column; max-height: 340px; overflow-y: auto; }
.bk-wrap .svlist .sv {
  display: flex; align-items: center; gap: 10px; padding: 9px 2px;
  border-bottom: 1px solid var(--lhrm-border); text-align: left; width: 100%; flex: none;
}
.bk-wrap .svlist .grp {
  font-family: var(--lhrm-font-mono); font-size: 10px; letter-spacing: 1.5px; color: var(--lhrm-gold-soft);
  padding: 12px 2px 4px; flex: none;
}
.bk-wrap .svlist .grp:first-child { padding-top: 2px; }
.bk-wrap .svlist .sv .bx {
  width: 15px; height: 15px; border: 1px solid var(--lhrm-border-2); flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--lhrm-bg);
}
.bk-wrap .svlist .sv.on .bx { background: var(--lhrm-text); border-color: var(--lhrm-text); }
.bk-wrap .svlist .sv .cn { font-size: 13px; }
.bk-wrap .svlist .sv .cat {
  font-family: var(--lhrm-font-mono); font-size: 9px; letter-spacing: 1.5px;
  color: var(--lhrm-text-faint); border: 1px solid var(--lhrm-border-2); padding: 0 4px;
}
.bk-wrap .svlist .sv .dur {
  margin-left: auto; font-family: var(--lhrm-font-mono); font-size: 11px; color: var(--lhrm-text-dim); flex: none;
}
.bk-wrap .svlist .sv .dur.no { color: var(--lhrm-danger); }
.bk-wrap .svlist .sv .pc {
  font-family: var(--lhrm-font-mono); font-size: 11px; color: var(--lhrm-text-faint);
  width: 58px; text-align: right; flex: none;
}
.bk-wrap .svlist .sv .pc.z { text-decoration: line-through; }
.bk-wrap .svlist .sv.dis { opacity: .45; cursor: default; }
.bk-wrap .sum {
  margin-top: 12px; display: flex; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--lhrm-border-2);
  padding-top: 11px; font-family: var(--lhrm-font-mono); font-size: 12px;
}
.bk-wrap .sum .k { color: var(--lhrm-text-faint); margin-right: 6px; font-size: 10px; letter-spacing: 1.5px; }
.bk-wrap .sum .pz { color: var(--c-practice); }

/* 03 美容師 */
.bk-wrap .people { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.bk-wrap .person { border: 1px solid var(--lhrm-border-2); padding: 9px 14px; min-width: 110px; text-align: left; }
.bk-wrap .person .cn { font-size: 13px; }
.bk-wrap .person .sk {
  font-family: var(--lhrm-font-mono); font-size: 9px; letter-spacing: 1.5px; color: var(--lhrm-text-faint); margin-top: 3px;
}
.bk-wrap .person .sk.in { color: var(--c-practice); }
.bk-wrap .person.on { border-color: var(--lhrm-gold); color: var(--lhrm-gold-text); }
.bk-wrap .person.on .sk { color: var(--lhrm-gold-text); }
.bk-wrap .person.dis { opacity: .35; cursor: default; }

/* 04 日期 */
.bk-wrap .dates { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; align-items: stretch; }
.bk-wrap .dates .wnav { width: 28px; border: 1px solid var(--lhrm-border-2); color: var(--lhrm-text-dim); font-size: 15px; }
.bk-wrap .dates .wnav:hover { border-color: var(--lhrm-gold); color: var(--lhrm-gold-text); }
.bk-wrap .date { border: 1px solid var(--lhrm-border-2); padding: 7px 0; width: 60px; text-align: center; }
.bk-wrap .date .dw { font-family: var(--lhrm-font-mono); font-size: 9px; letter-spacing: 1px; color: var(--lhrm-text-faint); }
.bk-wrap .date .dd { font-family: var(--lhrm-font-mono); font-size: 14px; margin-top: 2px; }
.bk-wrap .date.on { border-color: var(--lhrm-gold); color: var(--lhrm-gold-text); }
.bk-wrap .date.on .dw { color: var(--lhrm-gold-text); }
.bk-wrap .date.dis { opacity: .3; cursor: default; }

/* 05 可約時段 */
.bk-wrap .slots { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.bk-wrap .slot {
  border: 1px solid var(--lhrm-border-2); padding: 7px 0; width: 72px; text-align: center;
  font-family: var(--lhrm-font-mono); font-size: 13px; letter-spacing: .5px;
}
.bk-wrap .slot:hover { border-color: var(--lhrm-gold); }
.bk-wrap .slot.on { background: var(--lhrm-text); color: var(--lhrm-bg); border-color: var(--lhrm-text); }
.bk-wrap .mk-empty {
  margin-top: 12px; font-family: var(--lhrm-font-mono); font-size: 11px; letter-spacing: 1.5px; color: var(--lhrm-text-faint);
}

/* 06 備註 */
.bk-wrap .mk-note {
  display: block; width: 100%; box-sizing: border-box; margin-top: 12px; min-height: 64px; resize: vertical;
  font: inherit; font-size: 13px; line-height: 1.6; color: inherit;
  background: var(--lhrm-surface); border: 1px solid var(--lhrm-border-2); padding: 9px 11px; outline: none;
}
.bk-wrap .mk-note:focus { border-color: var(--lhrm-gold); }

/* 底列 */
.bk-wrap .mkbar {
  margin-top: 26px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  border-top: 1px solid var(--lhrm-border-2); padding-top: 14px; padding-bottom: 24px; align-items: center;
}
.bk-wrap .mkbar .rc {
  margin-right: auto; font-family: var(--lhrm-font-mono); font-size: 11px;
  color: var(--lhrm-text-dim); letter-spacing: .5px; line-height: 1.7;
}
.bk-wrap .mkbar .rc .pz { color: var(--c-practice); }
.bk-wrap .mkbar .rc .nc { color: var(--lhrm-text-faint); }

@media (max-width: 760px) {
  .bk-wrap .types { flex-direction: column; }
  .bk-wrap .slot { width: 64px; font-size: 12px; }
  .bk-wrap .date { width: 44px; }
  .bk-wrap .mkbar .rc { width: 100%; }
}

/* ══ 批 3：點空格建單 + 預約面板 ═══════════════════════════════════════
   只追加。空格 hover 由 CSS 自己做（::after 讀 data-lbl），沒有 bookings_manage 的人根本沒有 data-cell。 */
.bk-wrap .tl-col .grid i[data-cell] { position: relative; cursor: pointer; font-style: normal; }
.bk-wrap .tl-col .grid i[data-cell]:hover { background: var(--lhrm-surface-2); box-shadow: inset 0 0 0 1px var(--lhrm-gold); }
.bk-wrap .tl-col .grid i[data-cell]:hover::after {
  content: attr(data-lbl); position: absolute; top: 3px; left: 6px; white-space: nowrap;
  font-family: var(--lhrm-font-mono); font-size: 9px; letter-spacing: .5px; color: var(--lhrm-gold-text);
}
.bk-wrap .step-t .pre { margin-left: auto; letter-spacing: 1px; text-transform: none; color: var(--lhrm-gold-text); }
.bk-wrap .step-t .pre + .tail { margin-left: 12px; }

/* 預約面板：外殼是 main.css 的 .drawer（沿用，不新開浮層）；這裡只管內容。
   面板不在 .bk-wrap 之內，一律以 #bkDrawer 限定範圍、class 帶 bkp- 前綴（8-1）。 */
#bkDrawer .dh .eye.bkp-in, #bkDrawer .bkp-in { color: var(--c-practice); }
#bkDrawer .bkp-r { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--lhrm-border); font-size: 13px; line-height: 1.6; }
#bkDrawer .bkp-r .k { flex: none; width: 44px; font-size: 11px; color: var(--lhrm-text-faint); letter-spacing: 1px; padding-top: 2px; }
#bkDrawer .bkp-r .v { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#bkDrawer .bkp-r .v.mono { font-size: 12px; letter-spacing: .5px; }
#bkDrawer .bkp-it { display: flex; justify-content: space-between; gap: 10px; }
#bkDrawer .bkp-it .mono { font-size: 11px; color: var(--lhrm-text-dim); flex: none; }
#bkDrawer .bkp-it .mono.bkp-in { color: var(--c-practice); }
#bkDrawer .bkp-in.mono { font-size: 9px; letter-spacing: 1.5px; margin-left: 6px; }
#bkDrawer .bkp-todo { color: var(--lhrm-gold-text); }
#bkDrawer .bkp-ok { color: var(--c-confirm); }
#bkDrawer .bkp-eh { margin-top: 20px; padding-bottom: 6px; font-size: 10px; letter-spacing: 3px; color: var(--lhrm-text-faint); border-bottom: 1px solid var(--lhrm-border); }
#bkDrawer .bkp-e { padding: 6px 0; font-size: 10px; letter-spacing: .5px; color: var(--lhrm-text-dim); border-bottom: 1px solid var(--lhrm-border); }
#bkDrawer .dfoot .bkp-go { margin-left: auto; }
/* v1.41.0 時間軸下方「未成立」列（不佔格的單，點了開面板看取消紀錄） */
.bk-wrap .bkx { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.bk-wrap .bkx .h { font-size: 10px; letter-spacing: 1px; color: var(--lhrm-text-faint); margin-right: 4px; }
.bk-wrap .bkx-i {
  font-size: 11px; padding: 4px 8px; color: var(--lhrm-text-dim);
  border: 1px dashed var(--lhrm-border-2); text-decoration: line-through;
}
.bk-wrap .bkx-i:hover { color: var(--lhrm-text); border-color: var(--lhrm-text-faint); }
/* v1.41.0 取消確認：就地換掉 .dfoot（直向排列）；色值全走 token，危險色 = --lhrm-danger（.btn.danger 同一個） */
#bkDrawer .dfoot.bkp-cxf { flex-direction: column; align-items: stretch; gap: 8px; }
#bkDrawer .bkp-cxt { font-size: 14px; color: var(--lhrm-danger); }
#bkDrawer .bkp-cxi { font-size: 12px; color: var(--lhrm-text-dim); line-height: 1.6; }
#bkDrawer .bkp-cxin {
  width: 100%; padding: 8px 10px; font: inherit; font-size: 13px;
  background: var(--lhrm-surface); color: var(--lhrm-text); border: 1px solid var(--lhrm-border-2);
}
#bkDrawer .bkp-cxin:focus { outline: none; border-color: var(--lhrm-danger); }
#bkDrawer .bkp-cxa { display: flex; justify-content: flex-end; gap: 10px; }
#bkDrawer .bkp-cxa .btn:disabled { opacity: .45; cursor: not-allowed; }
#bkDrawer .bkp-cxr { font-size: 12px; color: var(--lhrm-text-dim); margin-top: 2px; }

/* 服務照片（批 2A / 2B）。定稿：design/mockups/salon_service_photos_v1.html「預約面板」檢視。
   ⚠ 批 3B 起照片元件本體（.ph-hd / .ph-two / .ph-col / .ph-grid / .ph-t 含 .up / .busy / .miss / .x / .seq /
   .ph-empty / .ph-foot）**整段搬到 main.css**（顧客卡相簿共用、去掉 #bkDrawer 前綴），本檔只留面板專屬的容器外距。 */
#bkDrawer .bkp-ph { margin-top: 18px; }

/* ══ 時間軸手機橫向捲動（v1.29.0）══════════════════════════════════════
   ≤760px 時 .tl 會橫向捲，但時間欄跟著滑走、表頭與內容欄寬不一致（欄寬改法在 bookings.js timelineHTML）。
   這裡只**追加**：時間欄與表頭第一格 sticky 釘在左緣，底色走 token（亮 / 暗主題都成立）；
   表頭 .cell 允許縮到 0、名字單行省略——長名字不再撐開表頭欄。
   ⚠ 全站 .nm 是 display:flex（main.css），flex 容器上的 text-overflow 對自己的文字無效，
     表頭的 .nm 只裝一段純文字，改回 block 才有省略號。 */
.bk-wrap .tl-time { position: sticky; left: 0; z-index: 2; background: var(--lhrm-surface); }
.bk-wrap .tl-hd .cell:first-child { position: sticky; left: 0; z-index: 2; background: var(--lhrm-surface); }
.bk-wrap .tl-hd .cell { min-width: 0; }
.bk-wrap .tl-hd .nm { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* sticky 的位移上限是自己的**包含區塊**（.tl-hd / .tl-body）。grid 軌道總寬超過 .tl 時，兩個 grid 的盒寬仍是 .tl 的內寬（360px），
   sticky 最多只能往右挪 (360 − 64)px，捲到底時間欄照樣滑出畫面（實測 left −737px）。讓兩個 grid 至少與軌道同寬才釘得住。
   ⚠ min-width: max-content 會用 intrinsic 尺寸算軌道：表頭 .cell 的文字若比 96px 寬，會把**表頭那份** 1fr 撐大、內容那份不會，
     兩邊再度錯位。contain: inline-size 讓 .nm 對 intrinsic 尺寸貢獻 0（用寬仍由容器決定，省略號照常），兩個 grid 的軌道就永遠同值。 */
.bk-wrap .tl-hd, .bk-wrap .tl-body { min-width: max-content; }
.bk-wrap .tl-hd .nm { contain: inline-size; }

/* ══ 顧客卡強化 C（040；定稿 salon_customer_card_v1 · 02）══════════════════
   等級徽章：VIP 金底、會員金框（同 page-customers.css 的 .cust .tier-b；兩頁各限定範圍，未升 main.css——
   升共用元件要連同 .ln-ic 一起搬，屬獨立的純重構批，8-1）。LINE 圖示為官方原檔，只給尺寸與位置、不加任何效果。 */
.bk-wrap .tier-b, #bkDrawer .tier-b { display: inline-block; font-family: var(--lhrm-font-mono); font-size: 9px; letter-spacing: 1px; line-height: 1; padding: 2px 5px; margin-left: 5px; border: 1px solid var(--lhrm-gold); vertical-align: 1px; white-space: nowrap; }
.bk-wrap .tier-b.vip, #bkDrawer .tier-b.vip { background: var(--lhrm-gold); color: var(--lhrm-text); }
[data-theme="dark"] .bk-wrap .tier-b.vip, [data-theme="dark"] #bkDrawer .tier-b.vip { color: var(--lhrm-bg); }
.bk-wrap .tier-b.member, #bkDrawer .tier-b.member { color: var(--lhrm-gold-text); }
#bkDrawer .dh h3 .tier-b { font-size: 10px; vertical-align: 3px; }
.bk-wrap .bk .ln-ic, #bkDrawer .ln-ic { width: 20px; height: 20px; margin-left: 5px; vertical-align: middle; }
.bk-wrap .bk .bk-pz { font-size: 10px; color: var(--lhrm-gold-text); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bkDrawer .bkp-orig { color: var(--lhrm-text-faint); margin-right: 4px; }
#bkDrawer .bkp-tier { color: var(--lhrm-gold-text); font-size: 11px; margin-left: 4px; }
.bk-wrap .bk .n .cs-ic { display: inline-block; }   /* 全站 svg 是 block，名字後的同意書 icon 被擠到下一行；改回與名字同列（批 3C 原意） */