/* ============================================================================
 * driver-layout.css — 司機端版面樣式（batch13-D 規則 ＋ batch15 己案 D 包座位圖）
 * 版本記號：cyc-ride-ui155-d25-seat50-20260912
 * ----------------------------------------------------------------------------
 * 🔴 本檔內容＝原 driver.html 裡 <style id="drvLayout"> 那一整塊，**逐字搬出**，
 *    一個字元都沒有增刪（下面的斷言會用字串比對證明這件事）。
 * 🔴 為什麼要外部檔：兩站 CSP 都是 style-src 'self'（沒有 unsafe-inline），
 *    內嵌 <style> 一律被擋（.sheet 為 null），batch13-D 的版面因此從未生效。
 *    同源的 .css 檔在 style-src 'self' 下是放行的。
 * 🔴 不動 app.css 等共用檔；本檔所有選擇器都是司機端自有的 class／id。
 * ========================================================================== */
  .drv-topbar{background:#1f2d3d;color:#fff;padding:10px 14px;font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:8px}
  .drv-topbar b{font-size:17px;flex:0 0 auto}
  .drv-topbar .drv-route{flex:1;text-align:center;font-size:15px}
  .drv-voice{background:none;border:0;color:#fff;font-size:20px;padding:0 2px;cursor:pointer}
  .drv-substrip{display:flex;justify-content:space-between;align-items:center;padding:6px 14px;font-size:13px;color:#5a6572;background:#f2f4f7}
  .drv-substrip .drv-link{background:none;border:0;color:#1f6feb;font-size:13px;text-decoration:underline;cursor:pointer;padding:0}
  .drv-cam{margin:12px;border-radius:14px;background:#111;position:relative;overflow:hidden}
  .drv-cam video{width:100%;display:block;border-radius:14px;background:#000}
  .drv-cam .drv-small-note{color:#9aa;font-size:14px;text-align:center;padding:6px 0 10px}
  .drv-cam .btn{position:absolute;top:8px;right:8px}
  .drv-code{margin:0 12px;display:flex;gap:10px}
  .drv-code button{flex:1;font-size:17px;padding:12px;border-radius:12px;border:1.5px solid #cfd6df;background:#f7f9fb;color:#1f2d3d;font-weight:700;cursor:pointer}
  .drv-code button.primary{background:#1f6feb;color:#fff;border-color:#1f6feb}
  .drv-nfc-status{margin:10px 12px 0;padding:10px 12px;border-radius:12px;display:flex;flex-direction:column;gap:2px;font-weight:700}
  .drv-nfc-status.is-on{background:#e8f6ec;color:#1b5e20;border:1.5px solid #2e7d32}
  .drv-nfc-status.is-off{background:#f2f4f7;color:#5a6572;border:1.5px solid #cfd6df}
  .drv-nfc-status .drv-nfc-label{font-size:17px}
  .drv-nfc-status .drv-nfc-hint{font-size:14px;font-weight:500;opacity:.9}
  .listhead{margin:14px 12px 6px;display:flex;justify-content:space-between;align-items:center;font-size:15px;color:#555;gap:8px}
  .listhead .total{font-weight:700;color:#111;font-size:16px}
  .listhead button{font-size:14px;padding:6px 12px;border-radius:10px;border:1px solid #cfd6df;background:#fff;cursor:pointer}
  .list{margin:0 12px 12px;display:flex;flex-direction:column;gap:8px}
  .list .row{border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:12px;font-size:20px;font-weight:700}
  .list .row .n{min-width:74px;font-size:22px}
  .list .row .what{flex:1}
  .list .row .amt{font-size:20px;opacity:.85}
  .list .row.ok{background:#e8f6ec;color:#1b5e20}
  .list .row.pass{background:#e7f0fb;color:#0b3d91}
  .list .row.fail{background:#fde8e8;color:#b71c1c}
  .list .row.guest{background:#fff3e0;color:#8a3d00}
  .list .row.latest{outline:3px solid #2e7d32;font-size:24px;padding:16px 14px}
  .list .row.latest .n{font-size:26px}
  .list .row.fail.latest{outline-color:#c62828}
  .list .row.guest.latest{outline-color:#F57C00}
  .list .reason{display:block;font-size:15px;font-weight:500;margin-top:2px;opacity:.9}
  .old{margin:6px 12px 16px;color:#888;font-size:14px;text-align:center}
  .drv-foot{position:sticky;bottom:0;background:#fff;border-top:1px solid #e3e6ea;padding:10px 12px 14px;z-index:5}
  .drv-foot select{width:100%;font-size:15px;padding:8px;border-radius:10px;border:1px solid #cfd6df;margin-bottom:8px}
  .drv-foot .guard{width:100%;font-size:18px;font-weight:700;padding:14px;border-radius:14px;border:2px solid #d84315;background:#fff3e0;color:#bf360c;cursor:pointer}
  .drv-foot .guard[disabled]{opacity:.5}
  .drv-foot .guard .drv-guard-sub{display:block;font-size:13px;font-weight:500;color:#8d4a2b;margin-top:2px}
  .drv-modal{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:9999;display:flex;align-items:center;justify-content:center;padding:18px}
  .drv-modal.hidden{display:none}
  .drv-modal-card{background:#fff;border-radius:20px;padding:20px;width:min(420px,94vw);max-height:88vh;overflow:auto;box-shadow:0 24px 70px rgba(15,23,42,.32)}
  .drv-modal-card .input{width:100%;box-sizing:border-box;font-size:18px;padding:12px;border-radius:12px;border:1.5px solid #cfd6df;margin-bottom:10px}
  .drv-modal-actions{display:flex;gap:10px}
  .drv-modal-actions button{flex:1;font-size:17px;padding:12px;border-radius:12px;border:1.5px solid #cfd6df;background:#f7f9fb;cursor:pointer}
  .drv-modal-actions button.primary{background:#1f6feb;color:#fff;border-color:#1f6feb}

/* ── batch15 D 包（座位圖與定位燈）以下為本包新增，逐條取自定案圖 v2（單屏不捲動）。
   🔴 全部選擇器都帶 #drvSeatMap／.drv-geo／.seathead 等本包新增的 class，
   不改動任何共用 CSS 檔（裁示第六點）。 */
.drv-geo{margin:6px 10px 0;padding:4px 10px;border-radius:8px;font-size:12px;font-weight:700;display:inline-block}
.drv-geo.on{background:#c8e6c9;color:#1b5e20}
.drv-geo.off{background:#eceff1;color:#607d8b}
.drv-geo.stale{background:#fff3e0;color:#bf360c}
.seathead{margin:8px 10px 3px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#555}
.seathead .total{font-weight:700;color:#111;font-size:15px}
.seathead .lg{display:flex;gap:6px;font-size:11px}
.seathead .lg i{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin-right:2px}
.seathead .lg .lg-on{background:#c8e6c9;border:1px solid #2e7d32}
.seathead .lg .lg-pass{background:#bbdefb;border:1px solid #1565c0}
.seathead .lg .lg-guest{background:#ffe0b2;border:1px solid #F57C00}
.seathead .lg .lg-fail{background:#ffcdd2;border:1px solid #c62828}
.seathead .lg .lg-empty{background:#eceff1;border:1px solid #cfd8dc}
#drvSeatMap{margin:0 10px;border:2px solid #b0bec5;border-radius:14px 14px 8px 8px;padding:6px 8px 8px;background:#fafbfc}
#drvSeatMap .front{display:flex;justify-content:space-between;align-items:center;margin:0 2px 5px;font-size:11px;color:#777}
#drvSeatMap .front .drv{width:52px;height:24px;border-radius:6px;background:#37474f;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px}
#drvSeatMap .front .front-pad{width:52px}
#drvSeatMap .rows{display:flex;flex-direction:column;gap:4px}
#drvSeatMap .row{display:grid;grid-template-columns:1fr 1fr 18px 1fr;gap:5px;align-items:center}
#drvSeatMap .seat{height:50px;border-radius:7px;display:flex;align-items:center;justify-content:center;gap:4px;font-size:15px;font-weight:700;border:2px solid transparent}
#drvSeatMap .seat small{font-size:10px;font-weight:500;opacity:.85}
#drvSeatMap .seat.empty{background:#eceff1;color:#78909c;border-color:#cfd8dc}
#drvSeatMap .seat.on{background:#c8e6c9;color:#1b5e20;border-color:#2e7d32}
#drvSeatMap .seat.pass{background:#bbdefb;color:#0b3d91;border-color:#1565c0}
#drvSeatMap .seat.guest{background:#ffe0b2;color:#8a3d00;border-color:#F57C00}
#drvSeatMap .seat.fail{background:#ffcdd2;color:#b71c1c;border-color:#c62828}
#drvSeatMap .seat.latest{outline:3px solid #2e7d32;outline-offset:1px}
#drvSeatMap .seat.fail.latest{outline-color:#c62828}
#drvSeatMap .seat.guest.latest{outline-color:#F57C00}
#drvSeatMap .seat.none{visibility:hidden}
#drvSeatMap .aisle{font-size:9px;color:#b0bec5;text-align:center}
#drvSeatMap .doorrow{margin:-1px 0}
#drvSeatMap .doorrow .door{height:16px;border-radius:5px;border:2px dashed #90a4ae;display:flex;align-items:center;justify-content:center;font-size:10px;color:#607d8b;background:#fff}

/* ============================================================================
 * batch15 D 包 v2.1：一屏版面（412×780）｜cyc-ride-ui155-d25-seat50-20260912
 * ----------------------------------------------------------------------------
 * 🔴 以上 v2 的規則一字未動。以下每一條都對應一條「實測到正在蓋過我們」的共用規則
 *    （DevTools 協定 CSS.getMatchedStylesForNode 查得，工具 tools/pw/d21-lab.js rules）。
 * 🔴 只在有共用規則搶的地方加 !important；特異度一律用 id 或我們自己的 class 拉高。
 *    app.css、role-ui-passenger-theme-v1.css、role-ui-clean-v2.css、r38w-driver-live.css 一條不動。
 * ========================================================================== */

/* ── 1. 座位格 ── 蓋 app.css 的通用 .empty{padding:30px;font-weight:800}
 *   （空格因此被撐成 64px 高，是定案圖 30px 的兩倍）。#drvSeatMap 內只動 padding／line-height 類。 */
#drvSeatMap .seat,
#drvSeatMap .seat.empty{padding:0;margin:0;line-height:1;font-weight:700;min-height:0}

/* ── 2. 掃描／輸入隨身碼 按鈕列 ──
 *   蓋 role-ui-passenger-theme-v1.css：body.role-ui-passenger-theme button.primary
 *   {min-height:50px!important;padding:11px 18px!important;background:linear-gradient(…)!important}
 *   ⇒ 掃描鈕回到定案圖的藍色 #1f6feb，按鈕列變薄。 */
.drv-code{margin:6px 12px 0;gap:8px}
body .drv-code #cameraScanBtn,
body .drv-code #manualOpenBtn{min-height:0!important;padding:8px!important;font-size:15px!important;line-height:1.25!important;border-radius:10px!important;box-shadow:none!important}
body .drv-code #cameraScanBtn{background:#1f6feb!important;background-image:none!important;color:#fff!important;border:1.5px solid #1f6feb!important}
body .drv-code #manualOpenBtn{background:#f7f9fb!important;color:#1f2d3d!important;border:1.5px solid #cfd6df!important}

/* ── 3. 「語音自動啟用／登出」列 ── 高度 ≤ 26px、單行小字、不是藥丸。
 *   蓋 app.css .pill{padding:8px 13px;font-size:16px!important}、
 *      role-ui-passenger-theme-v1.css body.role-ui-passenger-theme .pill.ok{background:#ecfdf5!important;border…!important}、
 *      role-ui-clean-v2.css body.role-ui-clean-v2 #logoutBtn{background:#fff7f7!important;border:1px solid #f1d6dc!important}。 */
.drv-substrip{padding:3px 14px;height:26px;box-sizing:border-box;font-size:12px}
.drv-substrip #voiceStatus{display:inline!important;background:none!important;background-image:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;border-radius:0!important;min-height:0!important;font-size:12px!important;font-weight:500!important;line-height:1.2!important;color:#5a6572!important}
body.role-ui-clean-v2 .drv-substrip #logoutBtn{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;min-height:0!important;font-size:12px!important;line-height:1.2!important;color:#1f6feb!important}

/* ── 4. 底部：班次選單與誤班鈕並排，整列 ≤ 60px ──
 *   蓋 app.css .input,select,textarea{min-height:54px!important;padding:14px 15px!important;font-size:18.5px!important}
 *   與 role-ui-passenger-theme-v1.css body.role-ui-passenger-theme input…{min-height:52px!important;…}。 */
.drv-foot{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;padding:5px 12px 6px}
.drv-foot #delayWindowSelect{flex:1 1 0;min-width:0;width:auto!important;margin:0!important;min-height:0!important;height:auto!important;padding:6px 8px!important;font-size:15px!important;border-radius:10px!important}
.drv-foot #delayBtn{flex:0 0 120px;width:120px;padding:4px 6px;font-size:15px;line-height:1.15;border-radius:10px}
.drv-foot #delayBtn .drv-guard-sub{font-size:12px;line-height:1.15;margin-top:1px}
.drv-foot #delayMsg{flex-basis:100%}
.drv-foot #delayMsg:empty{display:none}

/* ── 5. P1：NFC 狀態列與定位燈並排成兩顆藥丸 ──
 *   DOM 順序是 nfcStatusRow → #scanMsg → drvGeoStatus（三個兄弟，中間夾 scanMsg）。
 *   scanMsg 空的時候收合，兩顆就相鄰；用 float 讓它們各佔一半（無法加 wrapper，只能改 html 記號）。
 *   scanMsg 有內容時 clear:both 落到藥丸下方正常顯示；seathead 也 clear，座位圖從新的一行開始。 */
#scanMsg:empty{display:none}
/* batch15 v2.4（N2）：改用 flex 兩欄容器取代 float —— float 兩顆各自獨立，
 * 高度不會互相對齊；flex ＋ align-items:stretch 才等高。#scanMsg 在容器外，自然落到整列下方。 */
.drv-status-row{display:flex;align-items:stretch;gap:8px;margin:6px 12px 0}
.drv-status-row > *{flex:1 1 0;min-width:0;box-sizing:border-box}
.drv-nfc-status{margin:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;
  padding:5px 10px;border-radius:10px;line-height:1.25;min-height:30px}
.drv-nfc-status .drv-nfc-label{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.drv-nfc-status .drv-nfc-hint{font-size:12px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.drv-geo{margin:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;
  padding:5px 10px;font-size:13px;line-height:1.25;min-height:30px;border-radius:10px}
.drv-geo .drv-geo-label{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.drv-geo .drv-geo-hint{font-size:12px;font-weight:500;opacity:.9;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.drv-geo .drv-geo-hint:empty{display:none}
/* G5：省電提示自成一列，空則整列收合，不佔高度。 */
.drv-wake-hint{margin:4px 12px 0;font-size:12px;color:#bf360c;line-height:1.25}
.drv-wake-hint:empty{display:none}

/* ── v2.5（裁示第二十節 1-a）：司機頁專用，把共用版面的尾端 padding 歸零 ──
 *   實測司機頁計算值：.app padding-bottom 22px、main.container 24px，合計 46px，
 *   就是「底部列收於」與 scrollHeight 之間那一段；歸零後座位格才放得下 50px。
 * 🔴 app.css 對這兩者有 !important 規則（body .app／body .container），
 *   不用 !important 蓋不掉。driver-layout.css 是司機頁最後載入的樣式表，
 *   再以 :has(#drvSeatMap) 限定 —— 只有司機頁有這個節點，乘客端與後台不受影響。
 * 🔴 不動 app.css。 */
body:has(#drvSeatMap) .app{padding-bottom:0 !important}
body:has(#drvSeatMap) main.container{padding-bottom:0 !important}

/* ── 6. 間距比照定案圖（6–8px）── */
.seathead{clear:both;margin:6px 10px 4px}
.listhead{margin:8px 12px 6px}
.old{margin:4px 12px 6px}

/* ── 7. P2：上車列表縮回座位圖 v2 定案圖大小（取代 9/5 大字列表定案）──
 *   一般列 14px／padding 6px 10px；latest 列 18px／padding 10px、outline 保留；.n 最小寬 56px。 */
.list{margin:0 12px 8px;gap:6px}
.list .row{padding:6px 10px;font-size:14px;gap:8px}
.list .row .n{min-width:56px;font-size:15px}
.list .row .amt{font-size:14px}
.list .reason{font-size:12px;margin-top:1px}
.list .row.latest{padding:10px;font-size:18px}
.list .row.latest .n{font-size:19px}

/* ── 8. P3：列表區固定高度、內部捲動，列表再多也不撐頁面 ──
 *   兩列（latest≈48 ＋ 一般≈33 ＋ gap 6）≈ 87；取 96 留餘裕。listhead 不變。 */
.list{max-height:96px;overflow-y:auto}

/* ── 9. v2.6（§三十五 3／5、§五十一 Q12／Q13 甲）：定位醒目提示（兩句共用 #drvGeoAlert）──
 *   頂端固定浮層、深紅底白字、粗體、全寬、字級＝定位藥丸標籤（13px）；
 *   position:fixed 不佔版面高度 ⇒ 不推座位圖、不破壞一屏。隱藏靠 hidden 屬性，不動 style 屬性。 */
#drvGeoAlert.drv-geo-alert{position:fixed;top:0;left:0;right:0;z-index:2147483000;margin:0;padding:10px 12px;background:#b71c1c;color:#fff;font-size:13px;font-weight:700;line-height:1.4;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.35)}
#drvGeoAlert.drv-geo-alert[hidden]{display:none}
/* 測試站網域會由 social-bus-api.js 加上 #cycTestEnvBanner（fixed、top:0、z-index 最大、高 26px），會把提示整條蓋住；
 * 頁面上有該橫幅時才把提示移到橫幅下方。正式站網域不會產生橫幅，本條不生效。 */
body:has(#cycTestEnvBanner) #drvGeoAlert.drv-geo-alert{top:26px}

/* ── 10. D27（§九十 2）：反灰藥丸可點，尾端「重新啟動讀卡」──
 *   只有 .is-off 時才有手指游標；動作字沿用藥丸內既有字級級距，空字串時整段收合，
 *   所以掃描中（綠燈）的高度與 BASE 完全相同，不會把座位圖往下推。 */
.drv-nfc-status.is-off{cursor:pointer}
.drv-nfc-status .drv-nfc-action{font-size:12px;font-weight:700;text-decoration:underline;line-height:1.2}
.drv-nfc-status .drv-nfc-action:empty{display:none}
/* ── 11. D27b（§九十補充三 3）：反灰且有失敗原因時，提示欄放寬到 3 行（被封鎖那句較長，2 行會被截斷）──
 *   只在 .is-off.has-fail 時生效；綠燈與沒有失敗原因時與 D27 完全相同。 */
.drv-nfc-status.is-off.has-fail .drv-nfc-hint{-webkit-line-clamp:3}
/* §一百一十八續二：司機端「整車清空」確認視窗（彈窗底與卡片沿用 app.css 的 .modal-backdrop／.modal-card；只作用在本視窗）。 */
#seatClearAllModal .seat-clear-card h3{margin:0 0 10px;font-size:20px}
#seatClearAllModal .seat-clear-card p{margin:0 0 18px;font-size:17px;line-height:1.6}
#seatClearAllModal .seat-clear-actions{display:flex;gap:12px}
#seatClearAllModal .seat-clear-actions button{flex:1 1 0;min-width:0;min-height:48px;font-size:17px;border-radius:12px;cursor:pointer}
#seatClearAllModal #seatClearAllCancel{border:1px solid #cfd6df;background:#fff;color:#333}
#seatClearAllModal #seatClearAllOk:disabled{opacity:.5}