:root{font-family:Inter,"Noto Sans TC","Microsoft JhengHei",sans-serif;color:#202124;background:#f7f7f5;font-size:15px;--bg:#f7f7f5;--card:#fff;--text:#202124;--muted:#777;--line:#e6e6e2;--dark:#17181b;--yellow:#f7c948;--green:#20b486;--red:#e85d5d;--soft-red:#fff0f0;--soft-green:#ebfaf5;--soft-yellow:#fff8df;--blue:#3b82f6}
*{box-sizing:border-box}body{margin:0}[hidden]{display:none!important}
.demo{background:var(--soft-yellow);color:#946b00;text-align:center;padding:9px;font-size:12px}
main{max-width:1500px;padding:20px 18px 70px;margin:auto}
h1{font-size:28px;margin:6px 0}h2{font-size:19px;margin:0}h3{font-size:14px;margin:0 0 12px}p{line-height:1.65}
.eyebrow{font-size:10px;letter-spacing:2px;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 2px 12px rgba(0,0,0,.03)}
.login{max-width:440px;margin:6vh auto}.login button{width:100%;margin-top:12px}
label{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;font-size:14px;font-weight:600}
input,select,button{font:inherit;border:1px solid var(--line);border-radius:10px;min-height:44px;padding:10px 14px;background:white;color:inherit}
button{cursor:pointer}button:hover{background:#f2f2f0}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
button:disabled{opacity:.55;cursor:default}.primary,button.selected{background:var(--dark);color:white;border-color:var(--dark)}.primary:hover,button.selected:hover{background:#2b2c30}
.muted{color:var(--muted);font-size:13px}header{display:flex;align-items:center;justify-content:space-between;gap:12px}header p{margin:8px 0 20px}
nav{display:flex;gap:8px;margin:10px 0 16px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px;width:max-content;max-width:100%;box-shadow:0 2px 12px rgba(0,0,0,.03)}nav button{border:0;font-weight:800;min-width:120px;padding:10px 22px;color:var(--muted)}nav button.selected{color:#fff}.toolbar{display:flex;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:16px}.card.toolbar{background:transparent;border:0;padding:0;box-shadow:none;border-radius:0}
.toolbar label{margin:0;min-width:145px}.toolbar #sync{margin-left:auto;align-self:center;font-size:12px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 10px}
.layout{display:grid;grid-template-columns:300px minmax(0,1fr) 320px;align-items:start;gap:18px}
.layout>*{min-width:0}.employee-panel,.checks-panel{position:sticky;top:18px;padding:14px}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-14px -14px 0;padding:16px 18px;border-bottom:1px solid var(--line)}.panel-heading h2{font-size:16px;font-weight:800}
.badge{font-size:12px;background:#fff;color:var(--muted);border:1px solid var(--line);padding:6px 10px;border-radius:999px;white-space:nowrap}.badge.bad{background:var(--soft-red);color:#b63838;border-color:#f3cccc}
.employee-list{display:flex;flex-direction:column;gap:3px;margin-top:14px;max-height:690px;overflow:auto}
.employee-item{display:flex;align-items:center;gap:10px;text-align:left;padding:13px;width:100%;border:0;border-radius:12px;background:#fff;min-height:68px}
.employee-item:hover,.employee-item.active{background:#f2f2f0;box-shadow:none}.employee-item.readonly{background:#fff}
.avatar{width:34px;height:34px;border-radius:50%;background:#eee;color:var(--text);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex-shrink:0}.employee-item.active .avatar{background:var(--dark);color:#fff}
.employee-info{flex:1;min-width:0}.employee-info b{display:block;overflow-wrap:anywhere;font-size:14px;font-weight:700}.employee-info small{display:block;margin-top:3px;font-size:12px;color:var(--muted);line-height:1.6}
.employee-marker{font-size:11px;color:var(--muted);flex-shrink:0}.panel-note{margin-top:20px;padding-top:15px;border-top:1px solid var(--line);font-size:11px;color:#999;line-height:1.7}
.calendar-panel{padding:16px}.calendar-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-16px -16px 0;padding:16px 18px;border-bottom:1px solid var(--line)}.calendar-heading h2{margin-top:7px;font-size:22px;font-weight:800}
.month-buttons{display:flex;gap:6px}.month-buttons button{font-size:22px;min-width:44px;padding:3px 10px}
.calendar-context{padding:18px 0 12px}.calendar-context b{font-size:14px}.calendar-context p{font-size:12px;color:var(--muted);margin:7px 0 0}
.calendar-legend{display:flex;align-items:center;gap:14px;font-size:10px;color:var(--muted);margin-bottom:16px;flex-wrap:wrap}.calendar-legend span{display:flex;align-items:center;gap:5px}
.legend-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--dark)}.legend-dot.unsaved{background:var(--yellow);border:1px dashed #d68a00}
.calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.weekday{text-align:center;font-size:13px;color:var(--muted);padding:6px}.weekend-label{color:#946b00}.empty-day{border:1px solid var(--line);background:#fafafa;border-radius:14px}
.calendar-day{min-width:0;min-height:92px;padding:10px;display:flex;flex-direction:column;align-items:stretch;text-align:left;background:#fff;border-color:var(--line);border-radius:14px}.calendar-day:hover{border-color:#bbb}
.calendar-day.weekend{background:#fff9e9}.calendar-day.picked{background:var(--dark);border-color:var(--dark);color:#fff}.calendar-day.draft{outline:2px dashed #d68a00;outline-offset:-3px}
.calendar-day:disabled{opacity:1}.day-heading{display:flex;justify-content:space-between;align-items:center;gap:3px;flex-wrap:wrap}.day-heading b{font-size:15px;font-weight:800}.day-state{font-size:9px;color:#d68a00}.picked .day-state{color:var(--yellow)}
.day-leaves{display:flex;flex-direction:column;gap:4px;margin-top:9px}.leave-chip{display:block;border-radius:5px;padding:3px 4px;background:#f2f2f0;color:#777;font-size:10px;line-height:1.3;overflow-wrap:anywhere}.leave-chip.mine{background:#333439;color:#fff}.picked .leave-chip{background:#333439;color:#ddd}.picked .leave-chip.mine{color:var(--yellow)}
.day-foot{display:block;padding-top:12px;margin-top:auto;color:#999;font-size:9px}.picked .day-foot{color:#ccc}.calendar-help{margin:18px 0 0;font-size:11px}
.checks-list{display:flex;flex-direction:column;gap:8px;margin:18px 0}.check-item{display:flex;gap:10px;align-items:flex-start;padding:11px;border-radius:12px;font-size:13px}.check-item.pass{background:var(--soft-green);color:#13795b}.check-item.fail{background:var(--soft-red);color:#b63838}.check-icon{height:23px;width:23px;display:flex;align-items:center;justify-content:center;background:transparent;color:inherit;border-radius:50%;font-size:14px;font-weight:800;flex-shrink:0}
.check-item b{font-size:13px}.check-item small{display:block;font-size:12px;line-height:1.5;color:inherit;opacity:.85;margin-top:3px}.check-item p{font-size:11px;margin:6px 0 0;color:inherit}
.check-item.fail .check-icon{background:transparent;color:inherit}.check-error{font-size:12px;color:#b63838;overflow-wrap:anywhere}
.selection-summary{border-top:1px solid var(--line);padding-top:18px}.date-tags{display:flex;gap:6px;flex-wrap:wrap}.date-tag{font-size:12px;background:#f2f2f0;color:#555;border-radius:8px;padding:6px 10px}.date-tag.pending{outline:1px dashed #d68a00;background:var(--soft-yellow)}
.savebar{margin-top:20px;border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:10px}.savebar span{font-size:11px;color:var(--muted)}.savebar button{width:100%}
#people,#rules{max-width:680px}#people h2,#rules h2{margin-bottom:15px}form{max-width:480px}
#message{position:fixed;bottom:0;left:0;right:0;margin:0;padding:10px 20px;text-align:center;background:var(--soft-green);color:#13795b;z-index:5;font-size:13px}#message:empty{display:none}#message.error{background:var(--soft-red);color:#b63838}
@media(max-width:1250px){.layout{grid-template-columns:260px minmax(0,1fr)}.checks-panel{grid-column:1/-1;position:static}.checks-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.checks-panel .savebar{flex-direction:row;align-items:center;justify-content:space-between}.checks-panel .savebar button{width:180px}}
@media(max-width:700px){main{padding:20px 10px 65px}h1{font-size:22px}nav{overflow:auto;white-space:nowrap}nav button{min-width:100px;padding:10px 14px}.toolbar{gap:10px}.toolbar label{flex:1;min-width:125px}.toolbar #sync{width:100%;margin:0}.layout{grid-template-columns:minmax(0,1fr);gap:14px}.employee-panel{position:static}.employee-panel .muted{margin:10px 0}.employee-list{flex-direction:column;max-height:320px;overflow:auto;margin-top:12px;padding-bottom:6px}.employee-item{width:100%;min-height:64px}.panel-note{margin-top:10px;padding-top:10px}.calendar-panel{padding:14px 10px}.calendar-heading{margin:-14px -10px 0;padding:14px 12px}.calendar-context,.calendar-legend,.calendar-help{margin-left:2px;margin-right:2px}.calendar-heading h2{font-size:20px}.calendar{gap:4px}.calendar-day{padding:7px 4px;min-height:72px}.day-heading b{font-size:13px}.day-state{font-size:8px}.day-leaves{gap:3px;margin-top:6px}.leave-chip{font-size:9px;padding:2px}.day-foot{font-size:8px}.checks-panel{grid-column:auto}.checks-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.checks-panel .savebar{position:sticky;bottom:35px;background:#fff;border-radius:10px;padding:12px 0}.checks-panel .savebar button{width:150px}}

/* ── 排班表（2026-09-30）──────────────────────────────────── */
.roster-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.roster-actions{display:flex;gap:8px;align-items:center}
.demand-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0;font-size:13px}
.demand-row input{width:44px;text-align:center}
.roster-pills{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.roster-pills .pill{font-size:12px;padding:3px 9px;border-radius:999px;border:1px solid #d8d8d3;background:#fff}
.roster-pills .pill.bad{border-color:#b3261e;color:#b3261e;background:#fdecea}
.roster-pills .pill.ok{border-color:#1d6b4a;color:#1d6b4a;background:#e8f3ed}
/* 整月 30 欄一定放不下 —— 只讓表格自己橫捲，頁面本身不要跟著捲 */
.roster-scroll{overflow-x:auto;margin-top:8px}
table.roster{border-collapse:collapse;font-size:12px;min-width:640px}
table.roster th,table.roster td{border:1px solid #e5e5e0;padding:2px 4px;text-align:center;white-space:nowrap}
table.roster th.name,table.roster td.name{position:sticky;left:0;background:#fff;text-align:left;min-width:82px;z-index:1}
table.roster thead th{font-weight:600;color:#6b6b66;background:#faf9f7}
table.roster thead th.we{background:#fff9e9}
table.roster td.we{background:#fffdf5}
table.roster td.rest{background:#eef3fb;color:#2c5c8f;font-weight:600}
table.roster td.ex{background:#e6eefa;color:#1f4a78;font-weight:600}
table.roster td.pick{background:#fff3d6;color:#8a5406;font-weight:600}
table.roster td.lock{background:#f1efec;color:#6b6b66}
table.roster tr.total td{background:#faf9f7;color:#6b6b66}
table.roster tr.total td.short{background:#fdecea;color:#b3261e;font-weight:600}
.whybox{margin-top:12px;border:1px solid #e5e5e0;border-radius:8px;padding:6px 10px;font-size:13px;background:#fafbfc}
.whybox>summary{cursor:pointer;color:#8a5406;font-weight:600}
.whybox li{margin:4px 0;line-height:1.7}