/* 員工網頁 共用外觀（手機優先）。
   顏色沿用會計人資系統「圖紙」那組（描圖紙底、石墨字、銅綠主色），但這是員工網站自己的一份，兩邊不共用檔案。
   CSP style-src 'self'：頁面不能有 <style>、style 屬性，所有樣式都寫在這裡（或之後各頁自己的 .css）。
   深色只跟系統設定（prefers-color-scheme），不用 script 切換。字一律系統字，不載外部字型。
   元件前綴 sp-（staff portal）。輸入框字級 16px 以上，iPhone 點進去才不會自動放大。 */

:root {
  --paper: #F3F5F2;
  --paper-2: #E9EDE8;
  --sheet: #FFFFFF;
  --ink: #1E2327;
  --ink-2: #545E67;
  --ink-3: #626C75;
  --rule: #D5DAD4;
  --rule-2: #BCC3BC;
  --verdigris: #1F6B66;
  --verdigris-2: #17534F;
  --verdigris-tint: #E1EEEB;
  --redline: #B5352A;
  --redline-tint: #F6E3E0;
  --moss: #3D7550;
  --moss-tint: #E3EFE6;
  --ochre: #875812;
  --ochre-tint: #F5EAD6;
  --on-accent: #FFFFFF;

  --font-text: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
  --fs-sm: 14px;
  --fs-body: 16px;
  --fs-lead: 18px;
  --fs-h2: 24px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;
  --r-ctl: 6px;
  --r-panel: 10px;
  --line: 1px solid var(--rule);
  --focus: 0 0 0 3px rgba(31, 107, 102, .3);
  --lift: 0 1px 2px rgba(30, 35, 39, .06), 0 4px 16px rgba(30, 35, 39, .06);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #15191C;
    --paper-2: #1D2226;
    --sheet: #20262A;
    --ink: #E6EAE7;
    --ink-2: #B3BCC2;
    --ink-3: #9AA4AB;
    --rule: #343C42;
    --rule-2: #4A535A;
    --verdigris: #5DB3AB;
    --verdigris-2: #7CC6BF;
    --verdigris-tint: #1C3634;
    --redline: #F08A7E;
    --redline-tint: #3A2220;
    --moss: #7DC195;
    --moss-tint: #1E3326;
    --ochre: #E2B261;
    --ochre-tint: #3A2F1C;
    --on-accent: #0F1416;
    --focus: 0 0 0 3px rgba(93, 179, 171, .4);
    --lift: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .3);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.6;
}
h1, h2, h3, p { margin: 0; }
a { color: var(--verdigris); }
a:hover { color: var(--verdigris-2); }
:focus-visible { outline: none; box-shadow: var(--focus); }

/* 置中的單張卡片（登入、開通、404） */
.sp-center {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(8vh, var(--s6)) var(--s4) var(--s8);
  padding-left: max(var(--s4), env(safe-area-inset-left));
  padding-right: max(var(--s4), env(safe-area-inset-right));
}
.sp-card {
  width: min(420px, 100%);
  background: var(--sheet);
  border: var(--line);
  border-top: 3px solid var(--verdigris);
  border-radius: var(--r-panel);
  box-shadow: var(--lift);
}
.sp-card__head { padding: var(--s6) var(--s6) var(--s4); border-bottom: var(--line); }
.sp-card__body { display: grid; gap: var(--s4); padding: var(--s5) var(--s6) var(--s6); }
.sp-title { font-size: var(--fs-h2); font-weight: 600; line-height: 1.3; }
.sp-sub { margin-top: var(--s1); color: var(--ink-2); font-size: var(--fs-sm); }

/* 欄位 */
.sp-field { display: grid; gap: var(--s1); }
.sp-field > label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.sp-input {
  width: 100%;
  min-height: 48px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-ctl);
  background: var(--sheet);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.sp-input:focus { border-color: var(--verdigris); box-shadow: var(--focus); outline: none; }
.sp-input:disabled { background: var(--paper-2); color: var(--ink-3); }
.sp-check { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); color: var(--ink-2); }
.sp-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--verdigris); }

/* 按鈕 */
.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--s5);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-ctl);
  background: var(--sheet);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-lead);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.sp-btn--primary { background: var(--verdigris); border-color: var(--verdigris); color: var(--on-accent); }
.sp-btn--primary:hover { background: var(--verdigris-2); border-color: var(--verdigris-2); color: var(--on-accent); }
.sp-btn:disabled { opacity: .55; cursor: not-allowed; }

/* 說明、提示、狀態列 */
.sp-note { padding: var(--s3); border-radius: var(--r-ctl); background: var(--ochre-tint); color: var(--ochre); font-size: var(--fs-sm); font-weight: 600; }
.sp-error { padding: var(--s3); border-radius: var(--r-ctl); background: var(--redline-tint); color: var(--redline); font-size: var(--fs-sm); font-weight: 600; }
.sp-ok { padding: var(--s3); border-radius: var(--r-ctl); background: var(--moss-tint); color: var(--moss); font-size: var(--fs-sm); font-weight: 600; }
.sp-hint { color: var(--ink-3); font-size: var(--fs-sm); }
/* 頁首的黃條（事務所電腦沒連線、AI 暫停；P3／P9 用） */
.sp-banner { padding: var(--s2) var(--s4); background: var(--ochre-tint); color: var(--ochre); font-size: var(--fs-sm); font-weight: 600; }
.sp-hidden { display: none !important; }

/* 表單（登入、設密碼、改密碼） */
.sp-form { display: grid; gap: var(--s4); }
.sp-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); font-size: var(--fs-sm); color: var(--ink-3); }
.sp-rules li::before { content: "・"; }
.sp-rules li.is-ok { color: var(--moss); font-weight: 600; }
.sp-rules li.is-ok::before { content: "✓ "; }
.sp-rules li.is-bad { color: var(--redline); }

/* 登入後的頁面：頁首（網站名稱、姓名、我的帳號、登出）＋內容 */
.sp-top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s2) var(--s4);
  padding-left: max(var(--s4), env(safe-area-inset-left));
  padding-right: max(var(--s4), env(safe-area-inset-right));
  background: var(--sheet);
  border-bottom: var(--line);
}
/* 頁首左上角回首頁：看得出來是按鈕（主畫面 App 沒有瀏覽器的返回鍵，整體審查第 34 條） */
.sp-top__home { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s3); border: var(--line); border-radius: var(--r-ctl); color: var(--ink); font-weight: 700; text-decoration: none; white-space: nowrap; background: var(--paper); }
.sp-top__brand { color: var(--ink); font-weight: 700; white-space: nowrap; }   /* 首頁自己：只是標題，不是按鈕 */
.sp-top__nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); min-width: 0; }
.sp-top__name { color: var(--ink-2); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12em; }
.sp-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); width: min(640px, 100%); margin: 0 auto; padding: var(--s5) var(--s4) var(--s8); }
.sp-main > * { min-width: 0; }
.sp-panel { display: grid; gap: var(--s4); padding: var(--s5); background: var(--sheet); border: var(--line); border-radius: var(--r-panel); }
.sp-h1 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.3; }
.sp-h2 { font-size: var(--fs-lead); font-weight: 600; line-height: 1.4; }
.sp-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s4); margin: 0; }
.sp-dl dt { color: var(--ink-3); font-size: var(--fs-sm); }
.sp-dl dd { margin: 0; }
.sp-btn--small { min-height: 40px; padding: 0 var(--s3); font-size: var(--fs-sm); }
.sp-btn--danger { color: var(--redline); border-color: var(--redline); }

/* 清單（登入中的裝置） */
.sp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.sp-list__item { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3); border: var(--line); border-radius: var(--r-ctl); }
.sp-list__main { display: grid; gap: 2px; min-width: 0; }
.sp-list__title { font-weight: 600; overflow-wrap: anywhere; }
.sp-list__sub { color: var(--ink-3); font-size: var(--fs-sm); }

/* 閒置登出提醒（沒勾「這是我自己的手機」，第 25 分鐘起） */
.sp-idle {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s3);
  padding: var(--s3) var(--s4) max(var(--s3), env(safe-area-inset-bottom));
  background: var(--ochre-tint);
  color: var(--ochre);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-top: 1px solid var(--rule-2);
}

[hidden] { display: none !important; }

@media (min-width: 560px) {
  .sp-card__head { padding: var(--s8) var(--s8) var(--s5); }
  .sp-card__body { padding: var(--s6) var(--s8) var(--s8); }
  .sp-main { padding-top: var(--s8); }
}