/* =========================================================
   排班與出勤
   ---------------------------------------------------------
   沿用 style.css 的 --ink / --line / --paper 色階，沒有新的色相。
   班別靠「階調 + 網點 + 規線」區分，不用顏色：
   影印出來貼在後場一樣讀得懂，色盲的夥伴也分得出來。

   sf-1 紙白 → sf-6 墨黑；so-N 是在該階調上讀得清楚的字色。
   慣例：時段越晚，階調越深。
   ========================================================= */

:root{
  --sf-1:#FFFFFF; --sf-2:#F2F1EE; --sf-3:#E2E1DD; --sf-4:#CBCAC5; --sf-5:#56565A; --sf-6:#141416;
  --so-1:var(--ink); --so-2:var(--ink); --so-3:var(--ink); --so-4:var(--ink);
  --so-5:#F7F6F4; --so-6:#F7F6F4;
  --sh-hatch:#C7C6C1;   /* 網點要淡到不吃掉上面的字，夠分辨就好 */
  --mono:ui-monospace,SFMono-Regular,Menlo,"Roboto Mono","Noto Sans Mono",monospace;
}

/* ---------- 版面骨架 ---------- */
.sh{max-width:var(--maxw);margin:0 auto}
.sh__bar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:0 0 16px}
.sh__sp{flex:1}
.sh__stores{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 16px}
.sh__store{padding:5px 13px;border:1px solid var(--line);background:transparent;cursor:pointer;
  font-size:13px;color:var(--ink-3);font-family:var(--sans)}
.sh__store:hover{border-color:var(--ink-3);color:var(--ink)}
.sh__store[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:500}
.sh__store b{font-weight:500}
.sh__store i{font-family:var(--mono);font-size:10.5px;font-style:normal;opacity:.6;margin-left:6px}

.sh__tabs{display:flex;border:1px solid var(--line)}
.sh__tab{padding:7px 16px;border:0;border-right:1px solid var(--line);background:transparent;
  cursor:pointer;color:var(--ink-3);font-size:13px;font-family:var(--sans)}
.sh__tab:last-child{border-right:0}
.sh__tab:hover{background:var(--paper-2)}
.sh__tab[aria-selected="true"]{background:var(--ink);color:var(--paper);font-weight:600}

.sh__nav{display:flex;align-items:center;border:1px solid var(--line)}
.sh__nav button{width:32px;height:30px;border:0;background:transparent;cursor:pointer;font-size:15px;line-height:1}
.sh__nav button:hover{background:var(--paper-2)}
.sh__nav .lbl{font-family:var(--mono);font-size:12.5px;padding:0 10px;min-width:152px;text-align:center;
  font-variant-numeric:tabular-nums;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.sh__nav .now{width:auto;padding:0 11px;font-size:12px;border-left:1px solid var(--line)}

.sh__st{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;padding:5px 10px}
.sh__st--draft{border:1px dashed var(--ink-4);color:var(--ink-3)}
.sh__st--pub{background:var(--ink);color:var(--paper)}

.sh__panel{background:var(--white);border:1px solid var(--line)}
.sh__hd{padding:11px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sh__hd h3{margin:0;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2)}

/* ---------- 班別色票（灰階 + 網點） ---------- */
.sh-chip{background:var(--fill);color:var(--on);border-left:var(--rw,3px) var(--rs,solid) var(--rc,var(--ink-3))}
.sh-chip--hatch{background-image:repeating-linear-gradient(45deg,transparent 0 4px,var(--sh-hatch) 4px 5px)}
.sh-chip--grid{background-image:repeating-linear-gradient(0deg,transparent 0 6px,var(--sh-hatch) 6px 7px),
                                repeating-linear-gradient(90deg,transparent 0 6px,var(--sh-hatch) 6px 7px)}

.sh__legend{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.sh__lg{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;padding:3px 8px 3px 6px}
.sh__lg b{font-weight:700;color:var(--on)}
.sh__lg i{font-style:normal;color:var(--on);opacity:.74}

/* ---------- 班表 ---------- */
.sh__scroll{overflow-x:auto}
table.sh__grid{border-collapse:separate;border-spacing:0;width:100%;min-width:980px}
table.sh__grid th,table.sh__grid td{border-bottom:1px solid var(--line);padding:0;text-align:center;vertical-align:middle}
table.sh__grid thead th{background:var(--paper);font-size:12px;font-weight:700;color:var(--ink-2);
  padding:9px 4px;position:sticky;top:0;z-index:3;border-bottom:1.5px solid var(--ink-4)}
table.sh__grid thead th span{font-family:var(--mono);font-size:11px;color:var(--ink-3);display:block;font-weight:400}
table.sh__grid th.is-we{background:var(--paper-2)}
table.sh__grid th.is-we,table.sh__grid th.is-we span{color:var(--ink)}

.sh__who{position:sticky;left:0;z-index:2;background:var(--white);text-align:left!important;
  padding:8px 14px!important;min-width:190px;border-right:1.5px solid var(--line)}
thead .sh__who{z-index:4;background:var(--paper)}
.sh__who .n{font-weight:500;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.sh__who .m{font-size:10.5px;color:var(--ink-3);font-family:var(--mono);letter-spacing:.02em}
tbody tr:hover .sh__who{background:var(--paper)}
.sh__tag{font-size:10px;padding:1px 5px;border:1px solid var(--line);color:var(--ink-3);
  font-weight:400;font-family:var(--mono);white-space:nowrap}
.sh__tag--key{border-color:var(--ink);color:var(--ink);font-weight:600}

td.sh__cell{padding:3px!important;min-width:88px}
.sh__sc{width:100%;min-height:42px;border-top:0;border-right:0;border-bottom:0;cursor:pointer;
  display:flex;flex-direction:column;justify-content:center;gap:1px;padding:5px 7px;text-align:left;font-family:var(--sans)}
.sh__sc:hover{outline:1.5px solid var(--ink);outline-offset:-1.5px}
.sh__sc .t{font-weight:700;font-size:13.5px;line-height:1.2;letter-spacing:.04em}
.sh__sc .h{font-family:var(--mono);font-size:10px;opacity:.7;letter-spacing:-.01em}
.sh__sc--empty{border:1px dashed var(--line);background:transparent;color:var(--ink-4);
  align-items:center;justify-content:center}
.sh__sc--empty:hover{border-style:solid;border-color:var(--ink);color:var(--ink);outline:0}
.sh__sc--empty .t{font-weight:300;font-size:17px;color:inherit}
.sh__sc--ro{cursor:default}
.sh__sc--ro:hover{outline:0}

td.sh__tot{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;font-size:13px;
  min-width:88px;padding:6px 10px!important;text-align:right}
td.sh__tot .ot{display:block;font-size:9.5px;color:var(--ink-3);font-weight:400;letter-spacing:.04em}
td.sh__tot.is-over{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

table.sh__grid tfoot td{background:var(--paper);font-family:var(--mono);font-size:12px;
  font-variant-numeric:tabular-nums;padding:7px 4px!important}
table.sh__grid tfoot tr:first-child td{border-top:1.5px solid var(--ink-4)}
table.sh__grid tfoot .sh__who{background:var(--paper);font-family:var(--sans);font-size:12px;
  color:var(--ink-2);font-weight:500}
table.sh__grid tfoot .is-short{background:var(--ink);color:var(--paper);font-weight:700}
table.sh__grid tfoot input{width:100%;border:1px solid var(--line);background:var(--white);padding:4px 5px;
  font-family:var(--mono);font-size:11.5px;text-align:right;color:inherit;font-variant-numeric:tabular-nums}
table.sh__grid tfoot input:hover{border-color:var(--ink-3)}

/* ---------- 選班別的浮層 ---------- */
.sh__pop{position:absolute;z-index:60;background:var(--white);border:1.5px solid var(--ink);
  box-shadow:0 16px 44px -10px rgba(0,0,0,.28);padding:12px;width:286px}
.sh__pop h4{margin:0 0 9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--ink-3);text-transform:uppercase;font-weight:600}
.sh__pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.sh__po{padding:7px 6px;cursor:pointer;text-align:left;border-top:0;border-right:0;border-bottom:0;font-family:var(--sans)}
.sh__po:hover{outline:1.5px solid var(--ink);outline-offset:-1.5px}
.sh__po b{display:block;font-size:13.5px;color:var(--on)}
.sh__po i{font-family:var(--mono);font-size:9.5px;color:var(--on);opacity:.72;font-style:normal}
.sh__clr{width:100%;margin-top:7px;padding:7px;border:1px dashed var(--line);background:transparent;
  cursor:pointer;font-size:12px;color:var(--ink-3);font-family:var(--sans)}
.sh__clr:hover{border-style:solid;border-color:var(--ink);color:var(--ink)}

/* ---------- 指標與勞基法檢查 ---------- */
.sh__below{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;align-items:start}
@media (max-width:900px){.sh__below{grid-template-columns:1fr}}
.sh__kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.sh__kpi{background:var(--white);padding:14px 16px}
.sh__kpi .k{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.13em;text-transform:uppercase}
.sh__kpi .v{font-family:var(--mono);font-size:24px;font-weight:500;font-variant-numeric:tabular-nums;
  line-height:1.35;letter-spacing:-.02em}
.sh__kpi .v i{font-size:12px;color:var(--ink-3);font-weight:400;letter-spacing:0;font-style:normal}
.sh__kpi .m{font-size:11px;color:var(--ink-3);line-height:1.5}
.sh__kpi.is-alert{background:var(--sf-6);color:var(--so-6)}
.sh__kpi.is-alert .k,.sh__kpi.is-alert .m,.sh__kpi.is-alert .v i{color:var(--so-6);opacity:.74}

.sh__rule{display:flex;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);align-items:flex-start}
.sh__rule:last-child{border-bottom:0}
.sh__sev{font-family:var(--mono);font-size:10px;font-weight:600;padding:3px 7px;flex:none;
  margin-top:2px;letter-spacing:.1em}
.sh__sev--v{background:var(--ink);color:var(--paper)}
.sh__sev--w{border:1px solid var(--ink-4);color:var(--ink-2)}
.sh__rule .w{font-weight:600}
.sh__rule .y{font-size:12.5px;color:var(--ink-2)}
.sh__rule .l{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.04em;margin-top:2px}
.sh__ok{padding:26px 16px;text-align:center;color:var(--ink-3);font-size:12.5px}
.sh__ok b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px;font-family:var(--serif);letter-spacing:.06em}

/* ---------- 月總覽 ---------- */
.sh__month{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.sh__mh{background:var(--paper);padding:8px;text-align:center;font-size:11.5px;font-weight:700;
  color:var(--ink-2);font-family:var(--mono);letter-spacing:.1em}
.sh__mh.is-we{background:var(--paper-2);color:var(--ink)}
.sh__mday{background:var(--white);min-height:108px;padding:6px 6px 8px;display:flex;flex-direction:column;gap:2px}
.sh__mday.is-out{background:var(--paper)}
.sh__mday.is-out .d{color:var(--ink-4)}
.sh__mday .d{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;
  display:flex;justify-content:space-between;margin-bottom:2px}
.sh__mday .d b{color:var(--ink);font-weight:600}
.sh__mday.is-today{box-shadow:inset 0 0 0 2px var(--ink)}
.sh__mc{font-size:11px;padding:2px 6px;display:flex;justify-content:space-between;gap:4px;
  border-top:0;border-right:0;border-bottom:0}
.sh__mc span{color:var(--on)}
.sh__mc i{font-family:var(--mono);font-size:9.5px;color:var(--on);opacity:.72;font-style:normal}
.sh__more{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);padding-left:5px;letter-spacing:.06em}

/* ---------- 打卡 ---------- */
.sh__punch{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:16px;align-items:start}
@media (max-width:880px){.sh__punch{grid-template-columns:1fr}}
.sh__prow{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.sh__prow:last-child{border-bottom:0}
.sh__prow .i{flex:1;min-width:0}
.sh__prow .n{font-weight:500;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.sh__prow .s{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.02em;margin-top:2px}
.sh__badge{font-family:var(--mono);font-size:11px;padding:4px 9px;border:1px solid var(--line);
  color:var(--ink-2);font-variant-numeric:tabular-nums;letter-spacing:.06em;white-space:nowrap}
.sh__badge--late{background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:600}
.sh__badge--ok{border-color:var(--ink-3);color:var(--ink)}
.sh__pbtn{padding:7px 13px;border:1px solid var(--line);background:var(--white);cursor:pointer;
  font-size:12.5px;white-space:nowrap;font-family:var(--sans)}
.sh__pbtn:hover{border-color:var(--ink)}
.sh__pbtn--go{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:600}
.sh__clock{font-family:var(--mono);font-size:46px;font-weight:400;font-variant-numeric:tabular-nums;
  letter-spacing:-.035em;padding:20px 16px 2px;text-align:center;line-height:1}
.sh__clockd{text-align:center;color:var(--ink-3);font-size:11px;padding-bottom:18px;
  font-family:var(--mono);letter-spacing:.14em}
.sh__side{padding:14px 16px 18px;font-size:12px;color:var(--ink-2);line-height:1.8;border-top:1px solid var(--line)}
.sh__side b{color:var(--ink)}

/* ---------- 人員 ---------- */
table.sh__staff{width:100%;border-collapse:collapse;min-width:900px}
table.sh__staff th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);padding:9px 14px;border-bottom:1.5px solid var(--line);font-weight:600}
table.sh__staff td{padding:8px 14px;border-bottom:1px solid var(--line);font-size:13px}
table.sh__staff tr:last-child td{border-bottom:0}
table.sh__staff tr.is-off td{opacity:.5}
table.sh__staff input,table.sh__staff select{border:1px solid transparent;background:transparent;
  color:inherit;font:inherit;font-family:var(--sans);padding:4px 6px;width:100%;min-width:0}
table.sh__staff input:hover,table.sh__staff select:hover{border-color:var(--line)}
table.sh__staff input:focus,table.sh__staff select:focus{border-color:var(--ink);background:var(--white);outline:0}
table.sh__staff input.num{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
table.sh__staff input[type=checkbox]{width:auto;min-width:0}
table.sh__staff td.act{width:44px;text-align:center}
.sh__del{border:1px solid transparent;background:transparent;cursor:pointer;color:var(--ink-4);
  padding:3px 7px;font-size:14px;line-height:1}
.sh__del:hover{border-color:var(--ink);color:var(--ink)}
.sh__add{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:13px 16px;
  border-top:1.5px solid var(--line);background:var(--paper)}
.sh__add input,.sh__add select{border:1px solid var(--line);background:var(--white);color:inherit;
  font:inherit;font-family:var(--sans);padding:6px 9px}
.sh__add input[name=n]{width:130px}
.sh__add input[name=email]{width:190px}
.sh__add .lb{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase}

/* ---------- 提示與空狀態 ---------- */
.sh__hint{display:flex;gap:12px;align-items:flex-start;padding:11px 16px;border:1px solid var(--line);
  border-left:4px solid var(--ink);background:var(--paper);margin:0 0 16px;font-size:12.5px;
  color:var(--ink-2);line-height:1.7}
.sh__hint b{color:var(--ink)}
.sh__hint .mk{font-family:var(--mono);font-size:10px;letter-spacing:.14em;padding:3px 7px;
  background:var(--ink);color:var(--paper);flex:none;margin-top:1px}
.sh__hint button{border:1px solid var(--ink);background:transparent;padding:4px 10px;cursor:pointer;
  font-size:12px;white-space:nowrap;margin-left:auto;flex:none;font-family:var(--sans)}
.sh__hint button:hover{background:var(--ink);color:var(--paper)}
.sh__empty{padding:40px 16px;text-align:center;color:var(--ink-3);font-size:13px;line-height:1.9}
.sh__empty b{display:block;color:var(--ink);font-family:var(--serif);font-size:16px;margin-bottom:6px;letter-spacing:.04em}

/* ---------- 列印：班表貼後場用 ---------- */
@media print{
  .nav,.foot,.sh__bar,.sh__stores,.sh__hint,.sh__below,.adminzone{display:none!important}
  .sh__panel{border:0}
  table.sh__grid{min-width:0}
  .sh__sc{outline:0!important}
}

/* ---------- 出勤異常的處理按鈕 ---------- */
.ex__acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap;flex:none}
.ex__acts select{border:1px solid var(--line);background:var(--white);color:inherit;font:inherit;
  font-family:var(--sans);padding:6px 8px;font-size:12.5px}
.ex__acts .sh__pbtn{padding:6px 10px;font-size:12px}
@media (max-width:760px){
  .sh__prow{flex-wrap:wrap}
  .ex__acts{width:100%;margin-top:8px}
}