/* 員工網頁：交件頁（打卡卡 card.html、加班單 sheet.html、首頁 index.html；P4 的收據、報價頁也可以用）的樣式。P3。
   顏色、字、間距都用 theme.css 的變數；CSP style-src 'self'：頁面沒有 <style>、style 屬性，都寫在這裡。手機直式為主。 */

.sp-main--wide { width: min(760px, 100%); }
.sp-subhead { display: grid; gap: var(--s2); }
.sp-status { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
/* 長的狀態（「要修改：10/6（二）…」、老闆寫得長的退回原因）會換行，不把整頁撐寬（整體審查第 28 條） */
.sp-chip { display: inline-block; max-width: 100%; padding: 2px var(--s2); border-radius: 12px; font-size: 13px; font-weight: 600; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; background: var(--paper-2); color: var(--ink-2); }
.sp-chip--todo { background: var(--redline-tint); color: var(--redline); }
.sp-chip--draft { background: var(--ochre-tint); color: var(--ochre); }
.sp-chip--wait { background: var(--verdigris-tint); color: var(--verdigris); }
.sp-chip--done { background: var(--moss-tint); color: var(--moss); }
.sp-chip--off { background: var(--paper-2); color: var(--ink-3); }

/* 選月份、哪一面 */
.sp-pick { display: grid; gap: var(--s3); }
.sp-pick__month { display: grid; gap: var(--s2); }
.sp-pick__sides { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.sp-pick__btn { display: grid; gap: 2px; justify-items: start; min-height: 64px; padding: var(--s2) var(--s3); text-align: left; font-size: var(--fs-body); }
.sp-pick__btn small { color: var(--ink-3); font-size: 13px; font-weight: 400; }
.sp-pick__btn.sp-btn--primary small { color: inherit; opacity: .9; }
.sp-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

/* 照片縮圖（固定在頁首下面，邊看邊填） */
.sp-photo { position: sticky; top: 57px; z-index: 5; padding: var(--s2) var(--s3); background: var(--sheet); border: var(--line); border-radius: var(--r-panel); box-shadow: var(--lift); }
.sp-photo__row { display: flex; gap: var(--s3); align-items: center; }
.sp-photo__thumb { flex: none; width: 76px; height: 76px; padding: 0; border: 1px solid var(--rule-2); border-radius: var(--r-ctl); background: var(--paper-2); overflow: hidden; cursor: zoom-in; }
.sp-photo__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-photo__side { display: grid; gap: var(--s1); min-width: 0; }
.sp-photo__state { font-size: var(--fs-sm); color: var(--ink-2); }
.sp-photo__pick { justify-self: start; }
.sp-zoom { position: fixed; inset: 0; z-index: 30; display: grid; grid-template-rows: auto 1fr; gap: var(--s2); padding: var(--s3); background: rgba(15, 20, 22, .92); }
.sp-zoom__close { justify-self: end; }
.sp-zoom__img { max-width: 100%; max-height: 100%; margin: 0 auto; object-fit: contain; touch-action: pinch-zoom; }

/* 每一天（打卡卡、加班單） */
.sp-days { display: grid; gap: var(--s2); }
.sp-day { display: grid; gap: var(--s2); padding: var(--s3); background: var(--sheet); border: var(--line); border-radius: var(--r-ctl); }
.sp-day.is-off { background: var(--paper-2); }
.sp-day.is-bad { border-color: var(--redline); }
.sp-day.is-flash { box-shadow: var(--focus); }
.sp-day__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.sp-day__date { font-weight: 700; }
.sp-day__tag { margin-left: var(--s2); color: var(--ink-3); font-size: 13px; font-weight: 600; }
.sp-day__tools { display: flex; gap: var(--s1); flex-wrap: wrap; justify-content: flex-end; }
.sp-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.sp-cell { display: grid; gap: 2px; font-size: 13px; color: var(--ink-3); font-weight: 600; }
.sp-time { min-height: 44px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.sp-time.is-bad { border-color: var(--redline); }
.sp-day__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.sp-day__leave { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s2); }
.sp-select { width: 100%; min-height: 44px; padding: 0 var(--s2); border: 1px solid var(--rule-2); border-radius: var(--r-ctl); background: var(--sheet); color: var(--ink); font: inherit; font-size: 16px; }
.sp-day__issues { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--fs-sm); }
.sp-day__issues li { color: var(--redline); }
.sp-day__issues li.is-boss { color: var(--ochre); }
.sp-day__calc { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sp-btn--ghost { min-height: 36px; padding: 0 var(--s2); border-color: transparent; background: transparent; color: var(--verdigris); font-size: var(--fs-sm); }
.sp-btn--ghost:hover { background: var(--verdigris-tint); }

/* 程式核對、審核意見 */
.sp-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); font-size: var(--fs-sm); }
.sp-checks li { padding-left: 1.2em; text-indent: -1.2em; }
.sp-checks li::before { content: "・"; }
.sp-checks li.is-staff { color: var(--redline); font-weight: 600; }
.sp-checks li.is-boss { color: var(--ink-2); }
.sp-review { display: grid; gap: var(--s3); }
.sp-review__head { display: grid; gap: var(--s2); }
.sp-review__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.sp-review__item { display: grid; gap: var(--s2); padding: var(--s3); border: var(--line); border-left: 4px solid var(--rule-2); border-radius: var(--r-ctl); background: var(--sheet); }
.sp-review__item.is-open { border-left-color: var(--redline); }
.sp-review__item.is-done { border-left-color: var(--moss); }
.sp-review__item.is-minor { border-left-color: var(--rule); color: var(--ink-2); }
.sp-review__msg { font-size: var(--fs-body); }
.sp-review__btns { display: flex; flex-wrap: wrap; gap: var(--s2); }
.sp-review__why { color: var(--redline); font-size: var(--fs-sm); font-weight: 600; }
.sp-review__go { justify-self: start; }
.sp-review__minor > summary { cursor: pointer; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; }
.sp-choice.is-on { background: var(--verdigris); border-color: var(--verdigris); color: var(--on-accent); }

/* 送出 */
.sp-send { display: grid; gap: var(--s3); }
.sp-why { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--fs-sm); color: var(--ochre); font-weight: 600; }
.sp-why li::before { content: "・"; }
.sp-saved { color: var(--ink-3); font-size: 13px; }

/* 要修改（中繼、會計那邊核對出來的每一條；「帶我去那一格」） */
.sp-fixlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.sp-fixlist li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s2) var(--s3); border: var(--line); border-left: 4px solid var(--redline); border-radius: var(--r-ctl); background: var(--sheet); color: var(--redline); font-size: var(--fs-sm); font-weight: 600; }

/* 首頁 */
.sp-todo { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.sp-todo__item { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3); border: var(--line); border-left: 4px solid var(--ochre); border-radius: var(--r-ctl); background: var(--sheet); }
.sp-todo__item.is-red { border-left-color: var(--redline); }
.sp-todo__item.is-info { border-left-color: var(--rule-2); }
.sp-todo__text { display: grid; gap: 2px; min-width: 0; }
.sp-todo__title { font-weight: 600; overflow-wrap: anywhere; }
.sp-todo__sub { color: var(--ink-3); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.sp-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s2); }

@media (min-width: 560px) {
  .sp-cells { grid-template-columns: repeat(2, minmax(0, 180px)); }
  .sp-day__more { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}