/* 客服工作站示範「手機版」第 4–5 段（ws-phone-orders.js：車卡確認、改時間）的樣式，跟 ws.css、ws-phone.css 載進同一個 Shadow DOM。
   色票用 ws.css 的 --w-*（含 --w-held／--w-held-bg），動畫時長用 ws-phone.css 的 --m-fast／--m-base／--m-sheet（工作站的真實值 ÷1.6）；
   手機外殼（標題列、底部分頁、底部抽屜、提示位置）已經在 ws-phone.css，這裡只放訂單分頁自己的畫面。
   數值照 apps/workstation/styles.css 的手機規則（註解寫行號）；class 用 o- 前綴（車趟卡照工作站叫 .mride、只在 .morders 裡生效），不跟別段撞名。 */

/* ───────── 訂單分頁：整欄一起捲（.pane-list 底色 surface），標題列黏在上面；卡片區是 paper（.morders） ───────── */
.o-scr{position:relative;height:100%;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;background:var(--w-surface)}
.o-scr::-webkit-scrollbar{display:none}
/* 標題列（styles.css 334-335、2555-2578）：「訂單」13px 灰字；「發到群組 N」、篩選、查詢 44px 圓角 12；單號欄 selected 底＋放大鏡 */
.o-head{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:8px 16px 10px;background:var(--w-surface);border-bottom:1px solid var(--w-line)}
.o-head h2{grid-column:1;min-width:0;margin:0;overflow:hidden;font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--w-muted);white-space:nowrap;text-overflow:ellipsis}
.o-b,.o-sel{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:44px;border:1px solid var(--w-line-strong);border-radius:12px;background:var(--w-field);color:var(--w-ink);font-weight:600;white-space:nowrap}
.o-b{padding:0 14px;font-size:15px;transition:scale var(--m-fast) var(--m-eo)}
.o-sel{gap:4px;padding:0 8px 0 12px;font-size:16px}
.o-sel svg{color:var(--w-ink2)}
.o-sq{grid-column:1/-1;position:relative;display:flex;align-items:center;gap:8px;min-width:0}
.o-sq>svg{position:absolute;left:12px;top:50%;translate:0 -50%;color:var(--w-muted)}
.o-sq .in{flex:1 1 auto;min-width:0;height:44px;display:flex;align-items:center;padding:0 12px 0 38px;border-radius:12px;background:var(--w-selected);color:var(--w-muted);font-size:16px;white-space:nowrap;overflow:hidden}
.o-sq .o-b{flex:none;min-width:72px;padding:0 16px}

/* ───────── 「車卡待確認（N）」置頂區（app.js holdGroup 1344-1362；styles.css 2596-2625，手機段 2618-2625） ───────── */
.o-hold{margin:2px 16px 12px;border:1px solid var(--w-held);border-radius:12px;background:var(--w-held-bg);overflow:hidden}
.o-hold .hd{display:flex;align-items:center;padding:8px 12px 7px}
.o-hold h3{margin:0;font-size:14px;font-weight:700;color:var(--w-held)}
.o-hrow{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 12px;align-items:center;padding:10px 12px;border-top:1px solid var(--w-line);background:var(--w-surface)}
.o-hrow .mn{display:flex;align-items:baseline;gap:8px;min-width:0}
.o-hrow .id{flex:none;font-weight:700;color:var(--w-ink)}
.o-hrow .rt{min-width:0;overflow:hidden;font-size:14.5px;color:var(--w-ink2);white-space:nowrap;text-overflow:ellipsis}
.o-hrow .ar{margin:0 4px;color:var(--w-muted)}
.o-hrow .inf{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;font-size:12.5px;color:var(--w-ink2)}
.o-hrow .who{font-weight:600;color:var(--w-ink)}
.o-hrow .t{color:var(--w-held);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
/* 兩顆鈕各佔一半、44px；DOM 是「確認、退回」，手機把危險的「退回」排到左邊（右下角剛按完的手指落在確認） */
.o-hrow .acts{display:flex;gap:6px;margin-top:4px}
.o-hrow .acts .w-btn{flex:1 1 0;min-width:0;min-height:44px;padding:0 12px;border-radius:12px;font-size:15px;font-weight:600}
.o-hrow .acts .w-btn.dang{order:-1;background:var(--w-field)}

/* ───────── 車趟卡（mchat.js rideCard；styles.css 1524-1603、2029-2034、2475-2476、2627-2632） ───────── */
.morders{display:grid;gap:12px;padding:12px 16px 16px;background:var(--w-paper)}
.morders .mride{position:relative;isolation:isolate;max-width:100%;margin:0;overflow:hidden;border:1px solid var(--w-line);border-radius:16px;background:var(--w-surface);box-shadow:0 1px 2px color-mix(in srgb,var(--w-ink) 10%,transparent);overflow-wrap:anywhere}
/* 狀態變了亮一下的那層（app.js replayFlash、styles.css 1140 .flash-veil） */
.morders .o-veil{position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;opacity:0}
/* 第一行客人＋建單時間（訂單分頁的卡才有，取代對話裡的「車趟 · 只有客服看得到」） */
.morders .mride-cust{display:flex;align-items:center;gap:8px;min-width:0;min-height:36px;padding:6px 14px 0;font-size:14px;color:var(--w-ink2)}
.morders .mride-cust-name{display:inline-flex;align-items:center;min-width:0;min-height:32px;overflow:hidden;font-weight:600;color:var(--w-act);white-space:nowrap;text-overflow:ellipsis}
.morders .mride-cust-time{flex:none;margin-left:auto;font-size:12.5px;color:var(--w-ink2)}
.morders .mride-head{display:flex;align-items:center;gap:8px;min-width:0;padding:4px 14px 6px}
.morders .mride-head:has(>.disp){flex-wrap:wrap;row-gap:4px}
.morders .mride-id{flex:none;font-size:15.5px;font-weight:700;color:var(--w-ink)}
.morders .mride-status{flex:none}
.morders .mride-status.disp{flex:0 1 auto;min-width:0;white-space:normal;font-variant-numeric:tabular-nums}
/* 待接單琥珀字配琥珀淡底對比不夠：卡片上的狀態籤字改墨色、狀態靠底色（styles.css 1602） */
.morders .mride-status.OPEN{color:var(--w-ink)}
.morders .mride-time{min-width:0;margin-left:auto;font-size:13px;font-weight:600;color:var(--w-ink2);text-align:right;white-space:nowrap}
.morders .timer{font-variant-numeric:tabular-nums}
.morders .pickup-elapsed{white-space:normal;overflow-wrap:anywhere}
.morders .mride-route{position:relative;display:grid;gap:2px;padding:2px 14px}
.morders .mride-route::before{content:"";position:absolute;left:18px;top:17px;bottom:17px;width:1.5px;background:var(--w-line-strong)}
.morders .mride-stop{position:relative;display:flex;align-items:flex-start;gap:10px;padding:3px 0;font-size:15.5px;line-height:1.4;color:var(--w-ink)}
.morders .mride-dot{position:relative;z-index:1;flex:none;width:9px;height:9px;margin-top:7px;border-radius:50%;background:var(--w-pick)}
.morders .mride-stop.is-drop .mride-dot{background:var(--w-drop)}
.morders .mride-addr{flex:1;min-width:0}
.morders .mride-stop .w-tag{flex:none;margin-top:2px}
.morders .mride-meta{padding:4px 14px 0 33px;font-size:13px;color:var(--w-ink2)}
.morders .mride-driver{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;min-height:52px;margin:10px 12px 0;padding:4px 4px 4px 12px;border-radius:12px;background:var(--w-paper)}
.morders .mride-dname{font-size:14.5px;font-weight:700;color:var(--w-ink)}
.morders .mride-plate{color:var(--w-ink2)}
.morders .mride-car{font-size:13px;color:var(--w-ink2)}
.morders .mride-call{display:grid;place-items:center;width:44px;height:44px;margin-left:auto;border-radius:12px;background:var(--w-accepted-bg);color:var(--w-accepted)}
/* 車卡待確認：說明一行用 held 色（styles.css 2627） */
.morders .mride-hold{padding:6px 14px 0 33px;font-size:13px;font-weight:600;color:var(--w-held)}
.morders .mride-notify{padding:8px 14px 0}
/* 通知籤（styles.css 379-381 .chip-notify）：傳送中是灰框灰字、送到 LINE 是綠框綠字（ws.css .w-chip.notify） */
.morders .w-chip.notify.pend{border-color:var(--w-line-strong);color:var(--w-ink2)}
/* 進度四格＋字（待接、已接、到達、上車）：新亮的那格從左長出來（220ms÷1.6） */
.morders .mride-progress{display:flex;gap:4px;padding:12px 14px 5px}
.morders .mride-progress i{position:relative;flex:1;height:4px;overflow:hidden;border-radius:2px;background:var(--w-selected)}
.morders .mride-progress i::after{content:"";position:absolute;inset:0;background:var(--w-accepted);scale:0 1;transform-origin:left center;transition:scale var(--m-base) var(--m-eo)}
.morders .mride-progress i.is-done::after{scale:1 1}
.morders .mride[data-phase="open"] .mride-progress i::after{background:var(--w-open)}
.morders .mride-steps{display:flex;padding:0 14px 2px;font-size:11.5px;color:var(--w-ink2)}
.morders .mride-steps span{flex:1}
.morders .mride-steps .is-on{color:var(--w-ink);font-weight:700}
/* 按鈕列：44px、圓角 12、粗字；危險鍵白底紅框、主鍵主色；「詳情 ›」靠右、沒底色 */
.morders .mride-acts{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px 12px}
.morders .mride-btn{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:2px;min-height:44px;padding:0 10px;border-radius:12px;background:var(--w-selected);color:var(--w-ink);font-size:14px;font-weight:700;white-space:nowrap;transition:scale var(--m-fast) var(--m-eo)}
.morders .mride-btn.is-danger{background:var(--w-surface);color:var(--w-danger);box-shadow:inset 0 0 0 1.5px var(--w-danger)}
.morders .mride-btn.is-primary{background:var(--w-act);color:var(--w-act-ink)}
.morders .mride-btn.hold{flex:1 1 calc(50% - 4px)}
.morders .mride-more{flex:0 0 auto;padding:0 6px 0 12px;background:none;color:var(--w-act)}

/* ───────── 改預約時間抽屜（app.js rescheduleRide；styles.css 2638-2682 手機 .is-typed）：抽屜本身在 ws-phone.css ───────── */
.o-rs-when{display:grid;gap:8px}
/* 欄位名「新的預約時間 *」（.form label 13px ink-2、.req::after 主色星號，styles.css 585、597） */
.o-rs-lab{font-size:13px;color:var(--w-ink2)}
.o-rs-lab::after{content:" *";color:var(--w-act)}
/* 日期快速鈕：今天／明天／後天（小字 MM/DD）＋其他日期，選中的主色實心 */
.o-rs-days{display:flex;gap:6px}
.o-rs-days>span{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:46px;padding:0 4px;overflow:hidden;border-radius:12px;background:var(--w-field);box-shadow:inset 0 0 0 1px var(--w-line-strong);color:var(--w-ink);font-size:14px;font-weight:700;line-height:1.15;white-space:nowrap}
.o-rs-days small{font-size:11.5px;font-weight:500;color:var(--w-ink2)}
.o-rs-days .on{background:var(--w-act);color:var(--w-act-ink);box-shadow:none}
.o-rs-days .on small{color:inherit;opacity:.8}
/* 時刻直接打＋−15／+15 分（Ives 1001「改直接用打的，不要用滑動的」） */
.o-rs-time{display:flex;align-items:center;gap:6px}
.o-rs-step{flex:none;min-width:72px;min-height:46px;padding:0 8px;display:grid;place-items:center;border-radius:12px;background:var(--w-selected);color:var(--w-ink2);font-size:14px;font-weight:600;transition:scale var(--m-fast) var(--m-eo)}
.o-rs-val{flex:1;min-width:0;min-height:46px;display:grid;place-items:center;border-radius:12px;background:var(--w-field);box-shadow:inset 0 0 0 1px var(--w-line-strong);font-family:var(--w-mono);font-size:20px;font-weight:600;color:var(--w-ink);font-variant-numeric:tabular-nums}
/* 0166 起預約改時間不傳 LINE：「預約改時間不傳 LINE…」一行（.sheet-line.muted.resched-quiet：14.5px muted）、小字（13px muted） */
.ws .o-rs-quiet{color:var(--w-muted)}
.ws .o-rs-hint{font-size:13px;color:var(--w-muted)}

/* ───────── 原生操作感（Native v1，2026-10-12；native.css 的 .list-head-orders、.native-forward、.morders .mride-acts） ─────────
   整頁是灰底（--w-paper），標題列也是灰底、沒有底線；「訂單」32px 粗體＋放大鏡，右邊「轉發圖示＋數字」與「進行中」原生下拉，13px、44 高 */
.o-scr{background:var(--w-paper)}
.o-head{grid-template-columns:minmax(0,1fr) auto auto;gap:8px;padding:18px 16px 14px;background:var(--w-paper);border-bottom:0}
.o-head .m-nh{grid-column:1}
.o-head .m-nh h2{grid-column:auto;overflow:visible;font-size:32px;line-height:1.2;font-weight:750;letter-spacing:-.035em;color:var(--w-ink)}
.o-b,.o-sel{border-radius:12px;font-size:13px;font-weight:600}
.o-b.o-fwd{gap:6px;min-width:54px;padding:0 10px;font-variant-numeric:tabular-nums}
.o-b.o-fwd svg{display:block;flex:none;width:22px;height:22px}
.o-sel{gap:6px;padding:0 10px 0 12px;font-weight:500}
.o-sel svg{width:10px;height:14px;color:var(--w-ink2)}
.morders{padding:4px 16px 16px}
.o-hold{border-radius:16px}
.o-kinds-row{padding:0 16px 12px}
.o-kinds{display:flex;gap:0;padding:3px;border-radius:12px;background:var(--w-control);overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.o-kinds::-webkit-scrollbar{display:none}
.o-kind{flex:1 0 72px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:0 9px;border-radius:9px;color:var(--w-ink2);font-size:13px;font-weight:500;white-space:nowrap}
.o-kind.on{background:var(--w-surface);color:var(--w-ink);font-weight:650;box-shadow:0 1px 4px #0002}
.o-kind small{font-size:11px;font-variant-numeric:tabular-nums}
.o-quick-row{display:flex;align-items:center;gap:8px;flex:1 0 100%;min-width:0}
.morders .o-quick-row .o-actions{flex:0 0 auto;min-width:96px;gap:6px}
.morders .o-quick-row .mride-more{margin-left:auto}
.morders .o-quick-row.has-tracking .o-actions{flex:1 1 auto}
.morders .o-quick-row.has-tracking .o-track{flex:0 0 44px;width:44px;min-height:44px;padding:0}
.o-action-route{margin:0;color:var(--w-ink2);font-size:14px}
.o-action-section h4{margin:0 0 8px;font-size:13px;font-weight:500;color:var(--w-muted)}
.o-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.o-action-item{display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px;border-radius:12px;background:var(--w-selected);color:var(--w-ink);font-size:14px;font-weight:600}
.o-action-item.is-danger{background:var(--w-surface);color:var(--w-danger);box-shadow:inset 0 0 0 1px currentColor}
/* 車趟卡下面的鍵：轉發只剩 44×44 圖示，其他鍵照字寬（不再撐滿），「詳情 ›」靠右 */
.morders .mride-acts:has(.o-forward) .mride-btn:not(.mride-more){flex:0 1 auto}
.morders .mride-btn.o-forward{flex:0 0 44px;width:44px;padding:0}
.morders .mride-btn.o-forward svg{display:block;width:22px;height:22px}
.morders .mride-acts:has(.o-forward) .mride-more{margin-left:auto}
/* 完成單的詳情（司機實收那一段）：灰底上兩張白卡 */
.o-det{position:absolute;inset:0;display:grid;align-content:start;gap:12px;padding:20px 16px 32px;background:var(--w-paper);overflow:hidden}
.o-dh{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.o-dh .id{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--w-ink)}
.o-fare{gap:4px;padding:16px 18px}
.o-fare h3{margin:0}
.o-fare b{font-size:26px;line-height:1.2;font-weight:700;color:var(--w-ink)}