/* 出勤打卡的樣式（只給 出勤.js 用）。
 *
 * 照 DESIGN.md：紙墨色票（變數在 app.css 的 :root）、字級只有 14/16/18/22/28/40、
 * 圓角只有按鈕 6px 與浮動面板 12px、陰影只有浮動面板那一種、線是 1px --line。
 * 可以點的東西一律 ≥44px；上下班那兩顆是「每天第一件事」，加大到 56px。
 * 沒有寫死大於 375px 的寬度（手機不能有橫向捲軸），表格一律包在 .tbl-scroll 裡。
 */

/* ---------------------------------------------------------------- 狀態行上的打卡（v5）
   v4 是「打卡一整張卡＋兩顆 56px 大鈕」。v5 收進頂部條那條狀態行：
   一天只按一次的東西不需要每天佔掉第一屏的三分之一。
   鈕還是 ≥44px（DESIGN 第六節），只是不再是整排大按鈕。 */
.st-act .打卡鈕{min-height:2.75rem;font-weight:600;}
.st-act .linkbtn.打卡鈕{min-width:0;}

/* 手機（<600px）狀態行的三行怎麼排，寫在 app.css 的 .st-mid 那一段（全站一份）。
   ⚠ 這裡以前有兩條「只給上班中」的覆寫（左邊佔滿一行、進度只給 8rem），
     那讓「已記 4h 45分 ／」與「應記 5h 07分」被切成兩行、「還差…收工」又自己一行
     ——實測 375×812 整條變成五行。現在改成「打卡那一組一行、計時那一組一行」，
     兩組各自完整，就不需要在這裡覆寫了。 */

/* 「今天的狀態」：頂部條放不下的（判定方式、扣午休、預計可下班、第三件以後的異常） */
.今日表{margin:0.5rem 0 0;}
.今日列{display:flex;align-items:baseline;gap:0.75rem;flex-wrap:wrap;
  padding:0.6rem 0;border-top:1px solid var(--line);font-size:1rem;}
.今日列:first-child{border-top:none;}
.今日名{font-size:0.875rem;color:var(--ink-2);flex:none;width:6rem;}
.今日值{flex:1;min-width:0;}

.打卡好{display:inline-flex;align-items:baseline;gap:0.35rem;min-width:0;}
.打卡好 b{font-size:1.125rem;font-weight:600;}
.打卡方式{font-size:0.875rem;color:var(--ink-2);}
.讀不到打卡{color:var(--bad);}

/* 外勤備註格、停留原因格：從狀態行下面那格長出來，用紙-深當底，上下各一條線 */
.出勤展開{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:0.25rem 0.75rem 0.75rem;margin:0.5rem 0;}
.出勤展開 input,.出勤展開 textarea{background:var(--paper);}
.出勤展開 .notice{background:var(--paper);}

/* ---------------------------------------------------------------- 告知書 */

.告知書{margin:0.5rem 0 0;}
.告知書 dt{font-size:0.875rem;color:var(--ink-2);margin-top:0.75rem;}
.告知書 dd{margin:0.25rem 0 0;font-size:1rem;}

/* ---------------------------------------------------------------- 我的出勤 */

.出勤異常{color:var(--warn);font-size:0.875rem;white-space:nowrap;}
/* 待確認：不是「錯」而是「還沒有人看過」，用提示條的底色跟其他異常分開 */
.出勤待確認{display:inline-block;margin:0;padding:0.15rem 0.4rem;font-size:0.875rem;white-space:nowrap;}

.出勤彙總{font-size:0.875rem;color:var(--ink-2);margin:0.75rem 0 0;}
.出勤彙總 b{color:var(--ink);font-size:1.125rem;font-weight:600;}
.出勤特休{font-size:0.875rem;color:var(--ink-2);margin:0.5rem 0 0;
  padding-top:0.5rem;border-top:1px solid var(--line);}
.出勤特休 b{color:var(--ink);font-size:1.125rem;font-weight:600;}

.申請清單{list-style:none;margin:0;padding:0;}
.申請列{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;
  padding:0.6rem 0;border-top:1px solid var(--line);font-size:1rem;}
.申請列:first-child{border-top:none;}
.申請原因{display:block;font-size:0.875rem;color:var(--ink-2);}
.申請狀態{font-size:0.875rem;font-weight:600;flex:none;}
.狀態待核{color:var(--warn);}
.狀態已核{color:var(--live);}
.狀態退回{color:var(--bad);}
/* 已核之後被核准者撤銷的（伺服器 2026-09-05 加的狀態）：不是錯，只是不算數了 */
.狀態已撤銷{color:var(--ink-3);}

/* ---------------------------------------------------------------- 管理端 */

/* 小標的上下間距走 app.css 那一份（1.5rem），不要在這裡另訂一個——
   同一種小標在計時與打卡兩邊上緣差 8px，擺在一起看得出來。 */

.待核部門{display:block;font-size:0.875rem;}
.待核動作{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;}
.待核動作 .核准分{max-width:5rem;text-align:right;}
.核准分標{display:inline;font-size:0.875rem;}
.不能核{font-size:0.875rem;}
.退回格{display:flex;align-items:center;gap:0.5rem;flex:1 1 100%;min-width:0;margin-top:0.5rem;}
.退回格 input{flex:1;min-width:0;}

/* 出勤管理頁上每一種清單長得一樣：不要項目符號、不縮排、每列一條細線隔開。
   ⚠ 本來是一份一份複製出來的，加「已核的 N 張」那一份時漏寫，
     那張清單就長出黑色小圓點、往右縮排 40px、也沒有分隔線
     ——跟正上方「待確認的外勤」那張擺在同一頁，一看就是兩個地方寫的。 */
.待確認清單,.放假清單,.已核清單{list-style:none;margin:0;padding:0;}
.待確認列,.放假列,.已核列{display:flex;align-items:center;gap:0.5rem;padding:0.6rem 0;
  border-top:1px solid var(--line);font-size:1rem;}
.待確認列:first-child,.放假列:first-child,.已核列:first-child{border-top:none;}

.出勤匯出{gap:0.5rem;margin:0.5rem 0 0.75rem;}
/* 「給儀表板的 JSON」是一條連結，但看起來要跟旁邊那顆鈕一樣、也要按得到（44px） */
.連結鈕{display:inline-flex;align-items:center;min-height:2.75rem;padding:0.35rem 0.7rem;
  border:1px solid var(--line);border-radius:var(--r-btn);background:var(--paper);color:var(--ink);
  font-size:0.875rem;font-weight:600;text-decoration:none;}
@media (hover:hover){.連結鈕:hover{background:var(--paper-2);}}

.某人逐日 td{background:var(--paper-2);}
.逐日表{margin:0.5rem 0;}

.篩選列{gap:0.5rem;margin:0.5rem 0 0.75rem;font-size:1rem;}
/* 勾選框的樣式統一在 app.css（點擊區 44px、視覺 20px），這裡不要再訂一份大小 */

/* 設定 */
.座標列{gap:0.75rem;}
.座標列 .半格{flex:1 1 8rem;min-width:0;margin:0.75rem 0 0.25rem;}
.規則列{gap:0.75rem;align-items:flex-end;}
.規則格{flex:1 1 8rem;min-width:0;}
#定位結果{display:block;margin:0.5rem 0 0;}

.加放假列{gap:0.5rem;margin-top:0.5rem;}
.加放假列 input{flex:1 1 8rem;min-width:0;}

/* 班表：七天各一列（手機讀得完），桌機再排成兩欄 */
.班表格{display:flex;flex-direction:column;gap:0.25rem;}
.班一天{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;}
.班星期{font-size:0.875rem;color:var(--ink-2);flex:none;width:2.5rem;}
.班一天 input{max-width:6.5rem;}
.班參考{font-size:0.875rem;color:var(--ink-3);min-width:0;}
.班參考註{display:block;font-size:0.875rem;color:var(--ink-3);}

@media (min-width:600px){
  .班表格{display:grid;grid-template-columns:1fr 1fr;gap:0.25rem 1rem;}
}

/* 桌機的位置：v5 起打卡在頂部條裡，沒有「打卡卡要排哪一列」這回事了
   （app.css 的 ≥1024px 那一段只剩今天／本週／本月三塊） */