/* 打卡頁底下那幾頁的新外觀（2026-10-05）：人員動態、我的紀錄、補打卡、提醒設定。
 *
 * 跟打卡頁同一套視覺語言：頂部一條天空帶（顏色跟著時段，色票在 punch2.css）、
 * 大圓角白卡、漸層藍的主要按鈕、浮起來的底部入口列。
 * 頁面由 scripts/build-sub2.mjs 從原頁產生，這個檔疊在各頁自己的 <style> 後面。
 *
 * ⚠ 一律淺色（2026-10-05 拿掉深淺色設定）：天空在夜裡是深的，所以壓在天空上的字用
 *   --ph-hero-ink／--ph-hero-sub（跟著時段），其餘照一般的淺色色票。
 * ⚠ 全部掛在 .sub2 底下：這幾頁的 <body class="sub2 …">。其他頁不受影響。
 */

/* ---------------------------------------------------------------- 底 */
.sub2 {
  --bg: #f1f6fc; --panel: #ffffff; --panel2: #edf3fa; --line: #e2eaf4; --line-strong: #a9b9cd;
  --head: #0f1f40; --sub: #5f6f86; --muted: #93a1b5;
  max-width: 480px; margin: 0 auto;
  padding: 0 0 calc(var(--ph-tabs-h) + env(safe-area-inset-bottom, 0px) + 18px) !important;
  background: var(--bg);
}
.sub2 .sb-main { padding: 0 16px; }

/* ---------------------------------------------------------------- 頂部：天空帶 */
.sb-hero {
  position: relative; overflow: hidden; padding: 12px 16px 50px;
  background: linear-gradient(180deg, var(--ph-sky-a) 0%, var(--ph-sky-b) 100%);
}
.sb-hero > svg { position: absolute; left: 0; width: 100%; pointer-events: none; display: block; }
.sb-sky { top: 0; height: 60px; }
.sb-city { bottom: 0; height: 46px; }
/* 太陽／月亮：標題那一列的右邊（右上角留給「更新」那類按鈕） */
.sub2 .sb-hero .ph-orb {
  width: 24px; height: 24px; top: 52px; right: 22px; left: auto; bottom: auto;
  box-shadow: 0 0 0 5px var(--ph-orb-glow), 0 0 18px 8px var(--ph-orb-glow);
}
:root[data-sky="dawn"] .sub2 .sb-hero .ph-orb { top: auto; right: auto; left: 16%; bottom: 18px; }
:root[data-sky="dusk"] .sub2 .sb-hero .ph-orb { top: auto; right: 28%; bottom: 16px; }

.sb-hdin { position: relative; z-index: 1; }
.sb-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
/* 「‹ 打卡」：回打卡頁。一顆小膠囊，不是一整條按鈕——它不是這一頁的主角 */
.sb-back {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px 0 11px;
  border-radius: 999px; font-size: .8rem; font-weight: 700; text-decoration: none; color: var(--head);
  background: var(--ph-chip); border: 1px solid var(--ph-chip-line); box-shadow: 0 2px 8px rgba(20, 50, 110, .08);
}
.sb-back::before {
  content: ''; width: 7px; height: 7px; margin-top: 1px;
  border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(45deg);
}
.sub2 .sb-act {
  display: inline-flex; align-items: center; gap: 6px; width: auto; height: 32px; margin: 0; padding: 0 13px 0 11px;
  border-radius: 999px; font-size: .8rem; font-weight: 700; color: var(--ph-accent);
  background: var(--ph-chip); border: 1px solid var(--ph-chip-line); box-shadow: 0 2px 8px rgba(20, 50, 110, .08);
}
/* 「更新」的圖示畫在 ::before：程式會直接改按鈕的字（更新中…），子元素會被洗掉 */
.sub2 .sb-ref::before {
  content: ''; flex: none; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.6'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.6'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sb-title h1 {
  margin: 12px 0 0; font-size: 1.55rem; font-weight: 900; letter-spacing: .5px; line-height: 1.2;
  color: var(--ph-hero-ink);
}
.sb-title p { margin: 4px 0 0; padding-right: 48px; font-size: .8rem; line-height: 1.45; color: var(--ph-hero-sub); }
.sb-title p:empty { display: none; }

/* ---------------------------------------------------------------- 卡片與元件 */
.sub2 .card {
  border-radius: 20px; padding: 16px; margin: 0 0 12px;
  background: var(--ph-card); border: 1px solid var(--ph-card-line); box-shadow: var(--ph-card-shadow);
}
.sub2 .card > h2,
.sub2 .card > h3 { font-weight: 800; color: var(--head); }
.sub2 label { display: block; margin: 16px 0 7px; font-size: .8rem; font-weight: 700; color: var(--sub); }
.sub2 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.sub2 select,
.sub2 textarea {
  border-radius: 14px; background: var(--panel2); border: 1px solid var(--line); color: var(--head);
  margin: 2px 0 4px; /* 跟日期選擇器一樣：欄位之間的距離只由下一個標題的上距決定 */
}
.sub2 input:focus, .sub2 select:focus, .sub2 textarea:focus {
  outline: none; border-color: var(--ph-accent); box-shadow: 0 0 0 3px var(--ph-tile);
}
/* 日期、時間選擇器（app.js 換掉原生欄位畫出來的那兩種） */
.sub2 .dpick { border-radius: 14px; background: var(--panel2); border: 1px solid var(--line); }
.sub2 .dpick .rel { border-radius: 999px; }
.sub2 .tpick .num { border-radius: 14px; background: var(--panel2); border: 1px solid var(--line); font-weight: 800; }
.sub2 .tpick .ap button { border-radius: 999px; font-weight: 700; background: var(--ph-card); border: 1.5px solid var(--line); }
.sub2 .tpick .ap button.on { color: #fff; border-color: transparent; background: linear-gradient(150deg, #3a8ef0 0%, #2f74e3 100%); }

/* 主要按鈕：漸層藍（跟打卡頁的重試、工地管理同一款）。白字壓在上面要讀得清楚，所以是深一點的藍 */
.sub2 .btn-in {
  margin: 18px 0 0; padding: 14px 16px; border: 0; border-radius: 16px;
  font-size: 1rem; font-weight: 800; letter-spacing: .5px; color: #fff;
  background: var(--btn-primary);
  box-shadow: 0 8px 18px rgba(47, 116, 227, .3), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.sub2 .btn-in:active { transform: scale(.98); }
.sub2 .btn-plain {
  border-radius: 16px; font-weight: 700; color: var(--ph-accent);
  background: var(--ph-card); border: 1.5px solid var(--ph-tile);
}
.sub2 .status { border-radius: 14px; }
.sub2 .loading-box { color: var(--sub); }

/* ---------------------------------------------------------------- 底部五個入口（跟打卡頁同一款）*/
.sub2 .sb-dock.ph-tabs {
  position: fixed; z-index: 40;
  left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  max-width: 456px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  box-sizing: border-box; height: calc(var(--ph-tabs-h) - 10px); padding: 0 6px;
  border-radius: 22px; background: var(--ph-card); border: 1px solid var(--ph-card-line);
  box-shadow: 0 10px 28px rgba(20, 50, 110, .16);
}
/* 現在這一頁：字跟著那一顆的顏色，小方塊深一階、加一圈框 */
.sub2 .sb-dock a.on { color: rgb(var(--ph-tab)); }
.sub2 .sb-dock a.on .ico { background: rgba(var(--ph-tab), .26); box-shadow: inset 0 0 0 1.5px rgba(var(--ph-tab), .45); }
/* 這一列是浮著的：捲到它後面的內容從空隙露出來很亂，墊一層往上淡出的底色 */
.sub2::after {
  content: ''; position: fixed; z-index: 39; left: 0; right: 0; bottom: 0; pointer-events: none;
  height: calc(var(--ph-tabs-h) + env(safe-area-inset-bottom, 0px) + 12px);
  background: linear-gradient(to bottom, transparent 0, var(--bg) 46%);
}

/* ================================================================ 人員動態 */
/* 日期：一張卡，左右兩顆圓鈕 */
.p-staff .datenav {
  gap: 6px; margin: 0 0 12px; padding: 6px; border-radius: 18px;
  background: var(--ph-card); border: 1px solid var(--ph-card-line); box-shadow: var(--ph-card-shadow);
}
.p-staff .datenav button {
  width: 38px; height: 38px; padding: 0; border-radius: 50%; font-size: 1.2rem; font-weight: 700;
  background: var(--panel2); border: 0; color: var(--ph-accent);
}
.p-staff .datenav .cur { background: transparent; border: 0; }
.p-staff .datenav .cur b { font-size: 1.02rem; font-weight: 800; }
.p-staff .datenav .today { width: auto; padding: 0 12px; border-radius: 999px; font-size: .8rem; }
.p-staff .pastnote { border-radius: 14px; }

/* 分組：白卡，左邊那條色帶拿掉，換成標題前面一個有顏色的小方塊（顏色＝這一組代表什麼）。
   顏色照原本的意思：紅＝今日未打卡、橘＝外出、紫＝請假、綠＝在公司、青＝在工地、灰＝已下班或不明。 */
.p-staff .gcard {
  --g: 120, 140, 170;
  border: 1px solid var(--ph-card-line); border-radius: 20px; padding: 14px 14px 16px; margin-bottom: 12px;
  background: var(--ph-card); box-shadow: var(--ph-card-shadow);
}
.p-staff .gcard h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1rem; font-weight: 800; }
.p-staff .gcard h2 > span:not(.cnt) { flex: 1; min-width: 0; font-weight: 800; color: var(--head); }
.p-staff .gcard h2 .cnt {
  flex: none; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700;
  color: rgb(var(--g)); background: rgba(var(--g), .12);
}
.p-staff .gcard .gi {
  flex: none; width: 34px; height: 34px; padding: 8px; box-sizing: border-box; border-radius: 11px;
  color: rgb(var(--g)); background: rgba(var(--g), .14);
}
.p-staff .gcard .gi svg { width: 100%; height: 100%; display: block; }
.p-staff .g-none { --g: 214, 64, 64; }
.p-staff .g-leave { --g: 128, 92, 214; }
.p-staff .g-company { --g: 30, 150, 100; }
.p-staff .g-site { --g: 20, 140, 170; }
.p-staff .g-errand { --g: 226, 110, 30; }
.p-staff .g-moving { --g: 47, 116, 227; }
.p-staff .g-lunch { --g: 180, 140, 30; }
.p-staff .g-off,
.p-staff .g-unknown { --g: 120, 136, 160; }
/* 名字：膠囊，不要框；「今日未打卡」那一組是淡紅底紅字（那一組要被看見） */
.p-staff .chips { gap: 8px; }
.p-staff .chip { border: 0; border-radius: 999px; padding: 7px 14px; background: var(--panel2); color: var(--head); font-weight: 600; }
.p-staff .g-none .chip { background: rgba(214, 64, 64, .09); color: #b3261e; }
.p-staff .g-leave .chip { background: rgba(128, 92, 214, .1); }
.p-staff .chip.open { box-shadow: inset 0 0 0 2px var(--ph-accent); color: var(--ph-accent); }
.p-staff .detail { border-radius: 16px; background: var(--panel2); border: 0; }

/* ================================================================ 我的紀錄 */
/* 月份：一顆膠囊（原本是「月份」標題＋一整條輸入框） */
.p-records .sb-month {
  display: flex; align-items: center; gap: 8px; height: 46px; margin: 0 0 12px; padding: 0 6px 0 14px;
  border-radius: 999px; background: var(--ph-card); border: 1px solid var(--ph-card-line); box-shadow: var(--ph-card-shadow);
}
.p-records .sb-month .ico { flex: none; width: 20px; height: 20px; color: var(--ph-accent); }
.p-records .sb-month .ico svg { width: 100%; height: 100%; display: block; }
/* ⚠ 要 !important：上面那條通用的輸入框規則（.sub2 input:not(…):not(…):not(…)）權重比較高，
   不蓋掉的話膠囊裡面會再套一個灰底的框 */
.p-records .sb-month input {
  flex: 1; height: 38px; margin: 0; padding: 0 8px;
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  font-size: 1.02rem; font-weight: 800;
}
/* 每一天一張白卡。左邊那條顏色（綠＝正常、橘＝要注意、紫＝請假）照舊是結論，
   改成畫在卡片裡面的一條圓頭色帶，不再是卡片的邊框。 */
.p-records .drec {
  --d: 30, 150, 100;
  position: relative; margin: 0 0 10px; padding: 14px 16px 12px 22px;
  border: 1px solid var(--ph-card-line); border-radius: 18px;
  background: var(--ph-card); box-shadow: var(--ph-card-shadow);
}
.p-records .drec::before {
  content: ''; position: absolute; left: 9px; top: 14px; bottom: 14px; width: 4px; border-radius: 4px;
  background: rgb(var(--d));
}
.p-records .drec.warn { --d: 226, 110, 30; }
.p-records .drec.leave { --d: 128, 92, 214; }
.p-records .drec.off { --d: 190, 200, 214; opacity: 1; }
.p-records .dh b { font-size: 1.02rem; font-weight: 800; }
.p-records .track .bar { height: 4px; border-radius: 4px; }
.p-records .dtag { border-radius: 999px; padding: 2px 9px; font-weight: 600; }
/* 這個月的總結（出勤幾天、加班幾小時）：淡藍的一條，跟下面一天一張的白卡分開 */
.p-records #content > .status:first-child {
  margin: 0 0 12px !important; padding: 11px 15px; border: 0; border-radius: 16px;
  font-size: .88rem !important; font-weight: 700; line-height: 1.6; color: var(--head); background: var(--ph-tile);
}

/* ================================================================ 補打卡 */
.p-makeup #quota { padding: 10px 14px; border-radius: 14px; background: var(--ph-tile); color: var(--head); line-height: 1.6; }
.p-makeup .card > #form > label:first-of-type { margin-top: 14px; }
.p-makeup .rsnpick button {
  border-radius: 999px; font-weight: 700; background: var(--ph-card); border: 1.5px solid var(--line); color: var(--sub);
}
.p-makeup .rsnpick button.on { color: #fff; border-color: transparent; background: linear-gradient(150deg, #3a8ef0 0%, #2f74e3 100%); }
.p-makeup .done-card { border-radius: 18px; }

/* ================================================================ 提醒設定 */
/* 上班、下班兩個提醒各一張卡：圖示、標題、開關一列，時間在下面 */
.p-reminder .sb-plain { padding: 0; }
.p-reminder .rrow {
  margin: 0 0 12px; padding: 16px; border: 1px solid var(--ph-card-line); border-radius: 20px;
  background: var(--ph-card); box-shadow: var(--ph-card-shadow);
}
.p-reminder .rrow .top { display: flex; align-items: center; gap: 12px; }
.p-reminder .rrow .lbl { flex: 1; min-width: 0; }
.p-reminder .rrow .lbl b { font-size: 1rem; font-weight: 800; color: var(--head); }
.p-reminder .rr-ic {
  flex: none; width: 40px; height: 40px; padding: 9px; box-sizing: border-box; border-radius: 12px;
  color: var(--ph-accent); background: var(--ph-tile);
}
.p-reminder .rr-ic svg { width: 100%; height: 100%; display: block; }
.p-reminder .rrow .tpick { margin-top: 14px; }
/* 關著的那一個：原本整列變淡（opacity），套在白卡上會讓卡片本身也變灰、像壞掉。
   改成卡片照舊，只有時間跟圖示變淡。 */
.p-reminder .rrow.off { opacity: 1; }
.p-reminder .rrow.off .tpick { opacity: .4; }
.p-reminder .rrow.off .lbl b { color: var(--sub); }
.p-reminder .rrow.off .rr-ic { color: var(--muted); background: var(--panel2); }
/* 開關：iOS 那一款，開著是漸層藍 */
.p-reminder .sw { width: 50px; height: 30px; border-radius: 999px; background: var(--line); border: 0; }
.p-reminder .sw::after { width: 24px; height: 24px; top: 3px; left: 3px; box-shadow: 0 2px 6px rgba(20, 50, 110, .25); }
.p-reminder .sw.on { background: linear-gradient(150deg, #3a8ef0 0%, #2f74e3 100%); }
.p-reminder .sw.on::after { left: 23px; }
.p-reminder #quota:not(:empty) { margin: 0 0 12px; }

/* ================================================================ 沒有底部入口列的頁（電子簽核、其他功能）
   這兩頁是圖文選單／打卡頁「其他」直接進來的入口，不在打卡頁那排五顆裡。
   底部不用讓出入口列的高度，也不要那層往上淡出的底色（底下沒有東西要墊）。 */
.sub2.nodock { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
.sub2.nodock::after { content: none; }

/* 圖示方塊：跟打卡頁底部那排同一款（淡色底＋同色線稿），一格一個顏色 */
.p-esign .ico, .p-other .ico {
  flex: none; width: 44px; height: 44px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: rgb(var(--ph-tab)); background: rgba(var(--ph-tab), .14);
}
.p-esign .ico svg, .p-other .ico svg { width: 22px; height: 22px; display: block; }

/* ================================================================ 電子簽核 */
.p-esign .sb-title h1 { margin-top: 4px; }
/* 待我簽核：沒有待簽的時候是一般的白卡（只是入口），有的時候整張變實心藍（要你動手） */
.es-todo {
  display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 14px 16px;
  border-radius: 20px; text-decoration: none; color: var(--head);
  background: var(--ph-card); border: 1px solid var(--ph-card-line); box-shadow: var(--ph-card-shadow);
  --ph-tab: 59, 142, 240;
}
.es-todo-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.es-todo-tx b { font-size: 1.02rem; font-weight: 800; }
.es-todo-tx small { font-size: .78rem; color: var(--sub); }
.es-todo-n {
  flex: none; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; font-weight: 900; font-variant-numeric: tabular-nums;
}
.es-chev, .es-all { color: var(--muted); }
.es-chev::before { content: '›'; font-size: 1.3rem; }
.es-todo.has {
  color: #fff; border-color: transparent;
  background: var(--btn-primary);
  box-shadow: 0 10px 22px rgba(47, 116, 227, .32);
}
.es-todo.has .es-todo-tx small, .es-todo.has .es-chev { color: rgba(255, 255, 255, .85); }
.es-todo.has .ico { color: #fff; background: rgba(255, 255, 255, .2); }
.es-todo.has .es-todo-n { color: #2f74e3; background: #fff; }
.es-todo:active { transform: scale(.985); }

.es-h { margin: 0 0 12px; font-size: 1rem; font-weight: 800; color: var(--head); }
/* 提出申請：一排三格（加班被鎖定的人只剩兩格，照樣平分） */
.es-grid { display: flex; gap: 10px; }
.es-tile {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  padding: 14px 6px 12px; border-radius: 16px; text-decoration: none; color: var(--head);
  background: var(--panel2);
}
.es-tile b { font-size: .92rem; font-weight: 700; }
.es-tile:active { transform: scale(.97); }
.es-tile.t-ot { --ph-tab: 240, 138, 36; }
.es-tile.t-leave { --ph-tab: 34, 176, 125; }
.es-tile.t-fuel { --ph-tab: 139, 108, 240; }
.es-tag:empty, .es-why:empty { display: none; }
.es-tag {
  font-size: .66rem; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  color: var(--sub); background: var(--panel); border: 1px solid var(--line);
}
.es-why { font-size: .66rem; color: var(--muted); text-align: center; line-height: 1.3; }
.es-tile.soon { cursor: default; }
.es-tile.soon .ico, .es-tile.soon b { opacity: .45; }
/* 還在等設定回來時點了：先別動，回來再決定 */
.es-tile.wait { opacity: .6; }

/* 我的申請：標題列就是入口，底下最近三張 */
.es-mh { display: flex; align-items: center; gap: 8px; margin: -2px 0 6px; text-decoration: none; color: var(--head); }
.es-mh b { font-size: 1rem; font-weight: 800; }
.es-all { margin-left: auto; font-size: .8rem; font-weight: 700; color: var(--ph-accent); }
.es-pill {
  font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  color: var(--orange-ink, #b45309); background: rgba(240, 138, 36, .14);
}
.es-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 0; text-decoration: none;
  color: var(--head); border-top: 1px solid var(--line);
}
.es-st {
  flex: none; font-size: .7rem; font-weight: 700; padding: 3px 8px; border-radius: 8px;
  background: var(--panel2); color: var(--sub);
}
.es-st.pending { background: rgba(240, 138, 36, .14); color: #b45309; }
.es-st.approved { background: rgba(34, 176, 125, .14); color: #0f7a54; }
.es-st.rejected { background: rgba(236, 84, 84, .12); color: #b42318; }
.es-what { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.es-what b { font-size: .88rem; }
.es-what small { font-size: .74rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-who { flex: none; font-size: .74rem; color: var(--muted); }
.es-empty { margin: 4px 0 2px; font-size: .84rem; color: var(--muted); }

/* ================================================================ 其他功能 */
/* 2026-10-28 使用者：改四欄；「卡面一個框、顏色又一個框」改成一個框——整格就是那個顏色的色塊（也就是按得到的範圍），
   圖示與名稱都在色塊裡。原本是灰卡裡再套一個 44px 的色框。
   一格約 70px 寬，名稱一律 4 個字以內、一行放完（6 個字會折兩行，同一排高低不齊——使用者不要）；
   名稱只在這裡縮短，進去的頁面標題照舊。white-space: nowrap 守住一行。 */
.ot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.ot-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  min-height: 78px; padding: 12px 4px; border-radius: 14px; text-align: center; text-decoration: none;
  color: var(--head); background: rgba(var(--ph-tab), .13); box-shadow: inset 0 0 0 1px rgba(var(--ph-tab), .16);
}
.ot-tile b { font-size: .8rem; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.p-other .ot-tile .ico { width: auto; height: auto; border-radius: 0; background: none; }
.p-other .ot-tile .ico svg { width: 26px; height: 26px; }
.ot-tile:active { transform: scale(.96); background: rgba(var(--ph-tab), .22); }
.ot-tile.t-meal { --ph-tab: 240, 138, 36; }
.ot-tile.t-faq { --ph-tab: 59, 142, 240; }
.ot-tile.t-report { --ph-tab: 236, 84, 122; }
.ot-tile.t-upload { --ph-tab: 34, 176, 125; }
.ot-tile.t-err { --ph-tab: 139, 108, 240; }
.ot-tile.t-items { --ph-tab: 20, 150, 170; }   /* 物品領用（2026-10-21） */
.ot-tile.t-icon { --ph-tab: 47, 116, 227; }   /* 建立桌面捷徑（2026-10-28） */

/* ================================================================ 請假申請（2026-10-06）
   一張長表拆成三張卡：假別／時間／代理人與事由。送出鈕在卡片外面、整排寬。 */
.p-leave .lv-card { padding: 16px; }
.lv-h { margin: 0 0 12px; font-size: 1rem; font-weight: 800; color: var(--head); }
.p-leave .lv-card > label:first-of-type { margin-top: 0; }

/* 常用假別四顆：一按就選好，選中的那顆是實心藍。全部假別仍在下面的選單 */
.lv-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 10px; }
.lv-types button {
  display: flex; align-items: center; justify-content: center; padding: 0;
  margin: 0; height: 44px; border: 0; border-radius: 12px; cursor: pointer;
  font-size: .92rem; font-weight: 700; color: var(--head); background: var(--panel2);
}
.lv-types button.on { color: #fff; background: linear-gradient(150deg, #3a8ef0 0%, #2f74e3 100%); box-shadow: 0 4px 12px rgba(47, 116, 227, .28); }
.lv-types button:active { transform: scale(.97); }

/* 班制：兩格分段，格子上寫起訖時間 */
.lv-shift {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 10px;
  padding: 4px; border-radius: 14px; background: var(--panel2);
}
.lv-shift button {
  margin: 0; padding: 8px 4px; border: 0; border-radius: 11px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: transparent; color: var(--sub);
}
.lv-shift button b { font-size: .92rem; font-weight: 700; }
.lv-shift button small { font-size: .72rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.lv-shift button.on { background: var(--ph-card); color: var(--ph-accent); box-shadow: 0 2px 8px rgba(20, 50, 110, .12); cursor: default; }
.lv-shift button.on small { color: var(--sub); }

/* 全天／上午／下午 */
.lv-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
/* ⚠ padding: 0 ＋ flex 置中：全站的 button 預設上下各 12px，38px 高扣掉之後只剩 11px 放字，
   字會被擠到下面（2026-10-06 使用者：「全天、上午、下午的中文字好像有點偏移」）。 */
.lv-quick button {
  display: flex; align-items: center; justify-content: center; padding: 0;
  margin: 0; height: 38px; border-radius: 999px; cursor: pointer; font-size: .86rem; font-weight: 700;
  color: var(--ph-accent); background: var(--ph-card); border: 1.5px solid var(--ph-tile);
}
.lv-quick button.on { color: #fff; border-color: transparent; background: linear-gradient(150deg, #3a8ef0 0%, #2f74e3 100%); }

/* 開始／結束：淡底圓角的兩塊 */
.p-leave .dtgrp { border: 0; border-radius: 16px; background: var(--panel2); }
.p-leave .dtgrp .h { font-weight: 700; color: var(--sub); }
.p-leave .segadd { border-radius: 14px; border-color: var(--ph-tile); color: var(--ph-accent); }

/* 試算：結果字大，算法小字 */
.p-leave .durbox { border: 0; border-radius: 16px; background: var(--panel2); padding: 12px 14px; margin-bottom: 0; }
.lv-dur { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.lv-dur small { font-size: .78rem; font-weight: 700; color: var(--sub); }
.lv-dur b { font-size: 1.35rem; font-weight: 900; color: var(--head); font-variant-numeric: tabular-nums; }
.p-leave .durbox > small { display: block; line-height: 1.55; }

/* 餘額：收起來的那一行 */
.p-leave .balwrap > summary { border: 0; border-radius: 12px; background: var(--panel2); }

.p-leave .lv-submit { width: 100%; margin: 4px 0 14px; padding: 15px; font-size: 1rem; }

/* ================================================================ 加班申請（2026-10-06）
   四張卡：申報方式／時間／內容／現場照片。組標題右邊放那一組的規則（沿用原本的 .gh）。
   班制那款兩格分段（.lv-shift）拿來當申報方式，格子上的小字講兩種差在哪。 */
.p-ot .ot-card { padding: 16px; }
.p-ot .ot-card > .gh {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 10px;
  font-size: 1rem; font-weight: 800; color: var(--head);
}
.p-ot .ot-card > .gh .rule { font-size: .76rem; font-weight: 700; color: var(--ph-accent); text-align: right; }
.p-ot .ot-card > .gh .rule.must { color: var(--red); }
.p-ot .ot-card > .gh .rule:empty { display: none; }
.p-ot .ot-card > .gh + label, .p-ot .ot-rules + label { margin-top: 4px; }
.p-ot .loading-box { padding: 18px 16px; text-align: center; }

.p-ot .ot-mode { margin: 0; }
.p-ot .ot-mode button { padding: 9px 4px; }
.p-ot .ot-note { margin: 10px 2px 0; font-size: .8rem; line-height: 1.55; color: var(--sub); }
.p-ot .ot-note:empty { display: none; }
.p-ot .ot-plan, .p-ot #dateWhy, .p-ot #carriedBox { margin: 10px 0 0; font-size: .84rem; line-height: 1.6; }
.p-ot .ot-plan .btn-plain { display: inline-flex; align-items: center; }

/* 這一天的規則：淡底一塊，「為什麼從 18:00 起算？」可展開 */
.p-ot .ot-rules { margin: 0 0 6px; font-size: .8rem; line-height: 1.6; color: var(--sub); }
.p-ot .ot-rules:empty { display: none; }
.p-ot .ot-rules details.why summary { color: var(--ph-accent); font-weight: 700; }
.p-ot #endNote { font-size: .76rem !important; line-height: 1.5; color: var(--muted); }

/* 試算：結果字大，怎麼加出來的跟在旁邊 */
.p-ot .ot-dur { margin: 12px 0 0; padding: 12px 14px; border-radius: 16px; background: var(--panel2); }
.p-ot .ot-dur:empty { display: none; }
.p-ot .ot-dur .lv-dur { flex-wrap: wrap; margin: 0; }
.p-ot .ot-dur .lv-dur em { font-style: normal; font-size: .82rem; color: var(--sub); font-variant-numeric: tabular-nums; }
.p-ot .ot-times { display: block; margin-top: 4px; font-size: .76rem; line-height: 1.5; color: var(--muted); font-variant-numeric: tabular-nums; }

/* 最近報過的案子 */
.ot-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.ot-chips[hidden] { display: none; }
.ot-chips button {
  display: inline-flex; align-items: center; width: auto; max-width: 100%; height: 32px; margin: 0; padding: 0 12px;
  border-radius: 999px; border: 1.5px solid var(--ph-tile); background: var(--ph-card); cursor: pointer;
  font-size: .8rem; font-weight: 700; color: var(--ph-accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 相機：整排一大塊虛線框，一看就知道「這裡要拍」 */
.p-ot .shot { margin: 0; }
.p-ot .ot-cam {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 100%; margin: 0; padding: 18px 12px; border-radius: 16px; cursor: pointer;
  border: 1.5px dashed rgba(47, 116, 227, .4); background: var(--panel2); color: var(--ph-accent);
}
.p-ot .ot-cam .ico { width: 30px; height: 30px; }
.p-ot .ot-cam b { font-size: .98rem; font-weight: 800; }
.p-ot .ot-cam small { font-size: .74rem; color: var(--muted); }
.p-ot .ot-cam:active { transform: scale(.98); }
.p-ot .shot-prev { margin-top: 0; padding: 10px; border-radius: 16px; background: var(--panel2); }
.p-ot .shot-prev .meta b { color: var(--green-ink, var(--green)); }
.p-ot .shot-prev button { display: inline-flex; align-items: center; justify-content: center; }
.p-ot #shotMsg { margin-top: 6px; }
.p-ot #shotMsg:empty { display: none; }

/* 誤餐費：一整列可點 */
.p-ot .ot-meal { margin: 12px 0 0; }
.p-ot .ot-meal label {
  display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; cursor: pointer;
  border-radius: 16px; background: var(--panel2);
}
.p-ot .ot-meal input { width: 22px; height: 22px; margin: 0; flex-shrink: 0; accent-color: #2f74e3; }
.p-ot .ot-meal span { display: flex; flex-direction: column; gap: 2px; }
.p-ot .ot-meal b { font-size: .92rem; color: var(--head); }
.p-ot .ot-meal small { font-size: .74rem; font-weight: 400; color: var(--muted); }

/* 送出鈕：吸在底部（表單長，填完最後一格時按鈕常在螢幕外） */
.p-ot .sticky-submit {
  margin: 0 -16px; padding: 8px 16px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(241, 246, 252, 0), var(--bg) 35%);
}
.p-ot .sticky-submit .btn-in { width: 100%; padding: 15px; }
.p-ot #msg:empty { display: none; }
.p-ot #doneBox .row { margin-top: 12px; }
/* 請假送出完成：兩顆按鈕同高、上緣對齊，下面跟「我的請假申請」留空（第十五輪 simW：67px 對 49px、白底貼著下一張卡） */
.p-leave #doneBox { margin-bottom: 14px; }
.p-leave #doneBox .row { align-items: stretch; }
.p-leave #doneBox .row > button { margin: 0; padding: 14px 8px; min-height: 0; line-height: 1.3; }
/* 補打卡送出完成：同上，兩顆同高、上緣對齊，320 寬也不會把「查看我的申請」折成兩行（第十五輪 simZ） */
.p-makeup #doneBox .row { align-items: stretch; }
.p-makeup #doneBox .row > button { margin: 0; padding: 14px 6px; min-height: 0; line-height: 1.3; white-space: nowrap; }

/* ================================================================ 雙主管：送給哪一位（2026-10-13，見 app.js 的 approverPicker） */
/* 兩位一排各半；三、四位以上自動換行（每顆至少 92px，三個字的名字放得下），不會擠成一條細縫 */
.sub2 .appick { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.sub2 .appick button {
  width: auto; margin: 0; height: 40px; padding: 0 10px; border-radius: 999px; font-size: .9rem; font-weight: 700;
  background: var(--ph-card); border: 1.5px solid var(--line); color: var(--sub);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sub2 .appick button.on { color: #fff; border-color: transparent; background: linear-gradient(150deg, #3a8ef0 0%, #2f74e3 100%); }
.sub2 #apPick.card > label:first-child { margin-top: 0; }   /* 「送給」那塊卡片的第一行不要再多一截上邊距（2026-10-13 第四輪模擬） */

/* 「送給」按鈕：今天整天請假的主管標一行小字（2026-10-14 使用者） */
.sub2 .appick button.away { height: auto; min-height: 40px; padding: 4px 10px; line-height: 1.2; }
.sub2 .appick button small { display: block; font-size: .7rem; font-weight: 600; color: #b26a00; }
.sub2 .appick button.on small { color: #fff; opacity: .9; }
.sub2 .apaway { margin: 8px 0 0; font-size: .8rem; color: var(--sub); }