/* 來源：Suiyuecare/Platform packages/ui/jellycat.css（commit c34fecd）。
   島嶼只用它的變數與元件（jc-*），不要在這裡改；要改請改 Platform 那份再整份複製過來。 */
/* 歲悅 Jellycat 樣式：島嶼的配色與絨毛質感，給所有模組頁面共用。
   用法：載入這個檔案與 Huninn 字型，在 <body class="jc"> 底下用 jc-* class。
   原則：簡約、少說明文字；按鈕與點擊範圍至少 44px；深色模式跟著系統，或用 data-theme 指定。
   手動切換淺色／深色：所有模組共用 localStorage 鍵 suiyuecare.theme（值 light 或 dark，沒有就跟系統），
   在 <head> 先讀出來設到 <html data-theme>（theme-head.js）；開關用 .jc-theme-switch 加 theme-switch.js（packages/README.md）。
   同在 erp.suiyuecare.com 底下的模組就會一起換。 */

:root {
  --jc-bg: #fbf3e8;
  --jc-paper: #fffaf3;
  --jc-ink: #5a3d2b;
  --jc-muted: #7a5c44;
  --jc-line: #ead9c3;
  --jc-soft: #f4e9da;
  --jc-stitch: #d9bf9f;
  --jc-accent: #ee9a4d;
  --jc-accent-strong: #9a4f15;
  --jc-on-accent: #3b2414;
  /* 狀態色在 paper、soft、bg 上都 ≥ 4.5:1（小字也讀得清楚） */
  --jc-ok: #437534;
  --jc-warn: #8a5d00;
  --jc-bad: #b0402a;
  --jc-scrim: rgb(90 61 43 / 0.32);
  --jc-shadow: 0 14px 34px rgb(150 105 70 / 0.18);
  --jc-shadow-lift: 0 24px 60px rgb(120 80 50 / 0.26);
  --jc-puff: inset 0 2px 0 rgb(255 255 255 / 0.7), inset 0 -3px 0 rgb(150 105 70 / 0.1);
  --jc-radius-s: 14px;
  --jc-radius: 22px;
  --jc-radius-l: 30px;
  --jc-font: "Huninn", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;

  /* 每個模組一個絨毛色，用在房子、名牌、模組標籤；深色模式也不變，上面的字一律用 --jc-on-pastel */
  --jc-on-pastel: #3b2414;
  --jc-mod: var(--jc-accent); /* 目前模組的代表色；由 data-module 設定 */
  --jc-m-finance: #f5b77a; /* 2026-11-02 使用者決定會計用橘色；--jc-on-pastel 在上面 8.24:1 */
  --jc-m-hr: #f4a96b; /* 2026-11-02 使用者決定人資用橘色；--jc-on-pastel 在上面 7.4:1 */
  --jc-m-apm: #f2a76a; /* 2026-11-02 使用者決定 APM 用橘色調；--jc-on-pastel 在上面 7.26:1 */
  --jc-m-edoc: #b9c8a7;
  --jc-m-homecare: #f5c9a3;
  --jc-m-daycare: #d9c8e8;
  --jc-m-crm: #a9dccb;
  --jc-m-academy: #c3d0f0;
  --jc-m-web: #e6d3bd;
  --jc-m-island: #c9dfa8;
  --jc-m-logging: #f7c9a0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --jc-bg: #241b16; --jc-paper: #2f241d; --jc-ink: #f6e7d6; --jc-muted: #cdb39b; --jc-line: #4e3c2f; --jc-soft: #3a2d24;
    --jc-stitch: #6b5442; --jc-accent: #f2a462; --jc-accent-strong: #f6b77f; --jc-on-accent: #3b2414;
    --jc-ok: #8fc07a; --jc-warn: #e6b452; --jc-bad: #f08670; --jc-scrim: rgb(0 0 0 / 0.5);
    --jc-shadow: 0 14px 34px rgb(0 0 0 / 0.45); --jc-shadow-lift: 0 24px 60px rgb(0 0 0 / 0.55);
    --jc-puff: inset 0 2px 0 rgb(255 255 255 / 0.08), inset 0 -3px 0 rgb(0 0 0 / 0.2);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --jc-bg: #241b16; --jc-paper: #2f241d; --jc-ink: #f6e7d6; --jc-muted: #cdb39b; --jc-line: #4e3c2f; --jc-soft: #3a2d24;
  --jc-stitch: #6b5442; --jc-accent: #f2a462; --jc-accent-strong: #f6b77f; --jc-on-accent: #3b2414;
  --jc-ok: #8fc07a; --jc-warn: #e6b452; --jc-bad: #f08670; --jc-scrim: rgb(0 0 0 / 0.5);
  --jc-shadow: 0 14px 34px rgb(0 0 0 / 0.45); --jc-shadow-lift: 0 24px 60px rgb(0 0 0 / 0.55);
  --jc-puff: inset 0 2px 0 rgb(255 255 255 / 0.08), inset 0 -3px 0 rgb(0 0 0 / 0.2);
  color-scheme: dark;
}

/* ── 基本 ── */
.jc { background: var(--jc-bg); color: var(--jc-ink); font: 15px/1.55 var(--jc-font); -webkit-font-smoothing: antialiased; }
.jc *, .jc *::before, .jc *::after { box-sizing: border-box; }
:where(.jc) :where(h1, h2, h3) { margin: 0; font-weight: 400; text-wrap: balance; }
:where(.jc) :where(h1) { font-size: 26px; line-height: 1.25; }
:where(.jc) :where(h2) { font-size: 20px; line-height: 1.3; }
:where(.jc) :where(h3) { font-size: 17px; line-height: 1.35; }
/* 區塊上方的小標（灰色小字）；用 class，不改模組自己的 h3 */
.jc-eyebrow { margin: 0; font-size: 13px; font-weight: 400; color: var(--jc-muted); letter-spacing: 0.06em; }
/* :where 讓這條基本規則權重為 0，不會蓋掉 jc-btn--primary 等元件自己的字色 */
:where(.jc) :where(button, input, select, textarea) { font: inherit; color: inherit; }
/* 焦點框用深一階的強調色：在紙色上 ≥ 3:1 */
.jc :focus-visible { outline: 2.5px solid var(--jc-accent-strong); outline-offset: 2px; }
/* hidden 一律藏起來，即使元件自己設了 display: grid／flex */
.jc [hidden], .jc[hidden] { display: none !important; }
.jc-muted { color: var(--jc-muted); }
.jc-small { font-size: 13px; }

/* ── 絨毛布面板：有一圈縫線 ── */
.jc-felt {
  background: var(--jc-paper); border: 1.5px solid var(--jc-line); border-radius: var(--jc-radius);
  box-shadow: var(--jc-shadow); outline: 1.5px dashed var(--jc-stitch); outline-offset: -8px;
}
.jc-felt--flat { box-shadow: none; }

/* ── 模組視窗（島嶼點房子打開的近滿版視窗） ── */
.jc-scrim { background: var(--jc-scrim); backdrop-filter: blur(3px); }
.jc-window {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--jc-bg); border: 1.5px solid var(--jc-line); border-radius: var(--jc-radius-l);
  box-shadow: var(--jc-shadow-lift);
}
.jc-window__bar {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 20px;
  background: var(--jc-paper); border-bottom: 1.5px dashed var(--jc-stitch);
}
.jc-window__title { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; font-size: 17px; }
.jc-window__body { flex: 1; min-height: 0; overflow: auto; }

/* ── 按鈕 ── */
.jc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  color: var(--jc-ink); text-decoration: none; /* 用在 <a> 上也不會變成藍色底線 */
  background: var(--jc-paper); border: 1.5px solid var(--jc-line); box-shadow: var(--jc-puff);
  transition: border-color .15s, transform .15s, background-color .15s;
}
.jc-btn:hover { border-color: var(--jc-accent); transform: translateY(-1px); }
.jc-btn:active { transform: translateY(0); }
.jc-btn--primary { background: var(--jc-accent); border-color: var(--jc-accent); color: var(--jc-on-accent); }
.jc-btn--primary:hover { border-color: var(--jc-accent-strong); }
.jc-btn--quiet { background: transparent; border-color: transparent; box-shadow: none; }
.jc-btn--quiet:hover { background: var(--jc-soft); border-color: transparent; }
.jc-btn--danger { color: var(--jc-bad); }
.jc-btn--danger:hover { border-color: var(--jc-bad); }
.jc-icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; flex: none;
  border-radius: 50%; border: 1.5px solid var(--jc-line); background: var(--jc-paper); box-shadow: var(--jc-puff); cursor: pointer;
  color: var(--jc-ink); text-decoration: none;
}
.jc-icon-btn:hover { border-color: var(--jc-accent); }
.jc-icon-btn svg, .jc-btn svg { width: 20px; height: 20px; flex: none; }

/* ── 輸入 ── */
.jc-field { display: grid; gap: 6px; }
.jc-label { font-size: 13px; color: var(--jc-muted); }
.jc-input, .jc-select {
  width: 100%; min-height: 44px; padding: 0 14px; border-radius: var(--jc-radius-s);
  background: var(--jc-paper); border: 1.5px solid var(--jc-line); box-shadow: inset 0 2px 4px rgb(150 105 70 / 0.08);
}
.jc-input::placeholder { color: var(--jc-muted); }
.jc-search { position: relative; }
.jc-search > svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--jc-muted); pointer-events: none; }
.jc-search .jc-input { padding-left: 40px; }
/* 搜尋框統一不用瀏覽器原生的清除鈕；需要清除時放 .jc-search__clear（右側的小圓鈕） */
.jc-input[type="search"]::-webkit-search-cancel-button { display: none; }
.jc-search:has(.jc-search__clear) .jc-input { padding-right: 44px; }
.jc-search__clear {
  position: absolute; right: 6px; top: 50%; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; transform: translateY(-50%);
  border: 0; border-radius: 50%; background: transparent; color: var(--jc-muted); cursor: pointer;
}
.jc-search__clear:hover { background: var(--jc-soft); color: var(--jc-ink); }
/* 看起來 32px，點擊範圍 44px */
.jc-search__clear::before { content: ""; position: absolute; inset: -6px; }
.jc-search__clear svg { width: 16px; height: 16px; }

/* ── 分段切換（例：開／依單位／關） ── */
.jc-seg {
  display: inline-flex; gap: 2px; max-width: 100%; overflow-x: auto; padding: 3px; border-radius: 999px;
  background: var(--jc-soft); box-shadow: inset 0 1px 3px rgb(150 105 70 / 0.12);
}
.jc-seg button {
  flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--jc-muted);
  white-space: nowrap; cursor: pointer;
}
.jc-seg button[aria-pressed="true"] { background: var(--jc-paper); color: var(--jc-ink); box-shadow: 0 1px 3px rgb(150 105 70 / 0.22), var(--jc-puff); }

/* ── 開關 ── */
.jc-switch {
  position: relative; width: 52px; height: 32px; flex: none; padding: 0; cursor: pointer;
  border-radius: 999px; border: 1.5px solid var(--jc-line); background: var(--jc-soft); transition: background-color .15s, border-color .15s;
}
.jc-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 23px; height: 23px; border-radius: 50%;
  background: var(--jc-paper); box-shadow: 0 2px 4px rgb(150 105 70 / 0.3), var(--jc-puff); transition: transform .18s;
}
.jc-switch[aria-checked="true"] { background: var(--jc-accent); border-color: var(--jc-accent); }
.jc-switch[aria-checked="true"]::after { transform: translateX(20px); }
.jc-switch::before { content: ""; position: absolute; inset: -7px -2px; }
.jc-switch:disabled { opacity: 0.5; cursor: default; }

/* ── 深淺色開關（搭配 theme-switch.js，用法見 README）：左邊月亮＝暗、右邊太陽＝亮 ──
   <button type="button" class="jc-theme-switch" role="switch" aria-label="切換淺色／深色"><span aria-hidden="true"></span></button>
   圓鈕位置只看主題（data-theme 或系統設定），載入時不會先跳一下；JS 負責切換、aria-checked 與整頁淡入淡出。 */
.jc-theme-switch, .jc-theme-switch::before, .jc-theme-switch::after, .jc-theme-switch > span { box-sizing: border-box; }
.jc-theme-switch {
  position: relative; width: 56px; height: 28px; flex: none; padding: 0; cursor: pointer;
  border-radius: 999px; border: 1.5px solid var(--jc-muted); background: var(--jc-soft);
}
.jc-theme-switch::before { content: ""; position: absolute; inset: -9px -2px; } /* 點擊範圍 44px 高 */
.jc-theme-switch > span {
  position: absolute; inset: 0 6px; background: var(--jc-muted); pointer-events: none;
  -webkit-mask: var(--jc-icon-moon) left center / 14px no-repeat, var(--jc-icon-sun) right center / 14px no-repeat;
  mask: var(--jc-icon-moon) left center / 14px no-repeat, var(--jc-icon-sun) right center / 14px no-repeat;
  --jc-icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E");
  --jc-icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v3M12 20v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M1 12h3M20 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* 圓鈕：亮色在右、暗色在左；外圈用 --jc-muted，兩種模式在底色上都 ≥ 5:1 */
.jc-theme-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%;
  background: var(--jc-paper); box-shadow: 0 0 0 1.5px var(--jc-muted), 0 2px 4px rgb(150 105 70 / 0.3), var(--jc-puff);
  transform: translateX(28px); transition: transform .28s cubic-bezier(.3, 1.25, .5, 1);
}
:root[data-theme="dark"] .jc-theme-switch::after { transform: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .jc-theme-switch::after { transform: none; } }
.jc-theme-switch:focus-visible { outline: 2.5px solid var(--jc-accent-strong); outline-offset: 3px; }

/* 整頁慢慢變亮／變暗（theme-switch.js 切換時才加 class，結束就拿掉）：
   支援 View Transitions 時整頁淡入淡出 0.5 秒，開關本身不參與淡出，圓鈕照樣滑過去；不支援時暫時對顏色加 transition。 */
:root.jc-theme-fading::view-transition-old(root), :root.jc-theme-fading::view-transition-new(root) { animation-duration: .5s; }
:root.jc-theme-fading::view-transition-old(jc-theme-switch) { display: none; }
:root.jc-theme-fading::view-transition-new(jc-theme-switch) { animation: none; }
:root.jc-theme-fading:not(.jc-theme-vt), :root.jc-theme-fading:not(.jc-theme-vt) *,
:root.jc-theme-fading:not(.jc-theme-vt) *::before, :root.jc-theme-fading:not(.jc-theme-vt) *::after {
  transition: background-color .5s ease, color .5s ease, border-color .5s ease, fill .5s ease, stroke .5s ease, box-shadow .5s ease !important;
}
:root.jc-theme-fading:not(.jc-theme-vt) .jc-theme-switch::after {
  transition: transform .28s cubic-bezier(.3, 1.25, .5, 1), background-color .5s ease, box-shadow .5s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  .jc-theme-switch::after { transition: none; }
}

/* ── 小東西 ── */
.jc-avatar {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: var(--c, var(--jc-m-hr)); color: var(--jc-on-pastel); font-size: 16px; box-shadow: var(--jc-puff);
  outline: 1.5px dashed rgb(255 255 255 / 0.7); outline-offset: -5px;
}
.jc-avatar--l { width: 64px; height: 64px; font-size: 24px; }
.jc-avatar--s { width: 32px; height: 32px; font-size: 14px; }
.jc-avatar--xs { width: 24px; height: 24px; font-size: 11px; outline-offset: -4px; }
.jc-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: 999px;
  background: var(--c, var(--jc-soft)); font-size: 12.5px; box-shadow: var(--jc-puff);
}
.jc-chip--pastel { color: var(--jc-on-pastel); }
.jc-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--c, var(--jc-muted)); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08); }
.jc-dot--off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--jc-muted); }

/* ── 清單 ── */
.jc-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.jc-row {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 14px;
  border: 1.5px solid transparent; border-radius: 18px; background: transparent; text-align: left; cursor: pointer;
}
.jc-row:hover { background: var(--jc-soft); }
.jc-row[aria-current="true"] { background: var(--jc-paper); border-color: var(--jc-accent); box-shadow: var(--jc-puff); }
.jc-row__main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.jc-row__sub { font-size: 13px; color: var(--jc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══ 模組樣板：每個模組都用同一套外框與版型，只換代表色（data-module） ══ */

/* ── 外框：上方列（模組名稱與代表色、使用者、回島嶼）＋需要時才有的側邊選單＋內容 ── */
.jc-app { display: flex; flex-direction: column; min-height: 100%; background: var(--jc-bg); }
/* data-module 可以放在 .jc-app、body 或對話框上；被 JS 移到 body 底下的對話框也拿得到代表色 */
[data-module="finance"] { --jc-mod: var(--jc-m-finance); }
[data-module="hr"] { --jc-mod: var(--jc-m-hr); }
[data-module="apm"] { --jc-mod: var(--jc-m-apm); }
[data-module="edoc"] { --jc-mod: var(--jc-m-edoc); }
[data-module="homecare"] { --jc-mod: var(--jc-m-homecare); }
[data-module="daycare"] { --jc-mod: var(--jc-m-daycare); }
[data-module="crm"] { --jc-mod: var(--jc-m-crm); }
[data-module="academy"] { --jc-mod: var(--jc-m-academy); }
[data-module="web"] { --jc-mod: var(--jc-m-web); }
[data-module="island"] { --jc-mod: var(--jc-m-island); }
[data-module="logging"] { --jc-mod: var(--jc-m-logging); }

.jc-appbar {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px;
  background: var(--jc-paper); border-bottom: 1.5px dashed var(--jc-stitch); box-shadow: inset 0 5px 0 var(--jc-mod);
}
.jc-appbar__module { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 17px; white-space: nowrap; }
.jc-appbar__badge {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: var(--jc-mod); color: var(--jc-on-pastel); box-shadow: var(--jc-puff); outline: 1.5px dashed rgb(255 255 255 / 0.7); outline-offset: -5px;
}
.jc-appbar__badge svg { width: 20px; height: 20px; }
.jc-appbar__spacer { flex: 1; }
.jc-appbar__user { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--jc-muted); white-space: nowrap; }
.jc-app__body { display: flex; flex: 1; min-height: 0; }
/* 嵌在島嶼的模組視窗裡：視窗已有模組名稱與關閉鈕，模組不再顯示自己的上方列 */
.jc-app--embedded .jc-appbar { display: none; }
.jc-nav {
  display: flex; flex-direction: column; gap: 4px; width: 210px; flex: none; padding: 16px 12px;
  background: var(--jc-paper); border-right: 1.5px dashed var(--jc-stitch);
}
/* 項目是 jc-nav（或 jc-nav__section）底下直接的 <a>／<button>，或 .jc-nav__item；目前頁用 aria-current="page"。
   只認直接子元素，選單裡的搜尋框清除鈕等其他按鈕不會被撐成整列 */
:is(.jc-nav, .jc-nav__section) > :is(a, button), .jc-nav__item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 14px;
  background: transparent; color: var(--jc-ink); font: inherit; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer;
}
:is(.jc-nav, .jc-nav__section) > :is(a, button):hover, .jc-nav__item:hover { background: var(--jc-soft); }
.jc-nav [aria-current="page"] { background: var(--jc-mod); color: var(--jc-on-pastel); box-shadow: var(--jc-puff); }
.jc-nav__group { margin: 12px 12px 4px; font-size: 12.5px; letter-spacing: 0.06em; color: var(--jc-muted); }
.jc-nav__group:first-child { margin-top: 0; }
.jc-nav .jc-count { margin-left: auto; }
.jc-nav [aria-current="page"] .jc-count { background: var(--jc-paper); color: var(--jc-ink); }
.jc-nav svg { width: 18px; height: 18px; flex: none; }
.jc-main { display: flex; flex-direction: column; gap: 20px; flex: 1; min-width: 0; padding: 24px; }
@media (max-width: 760px) {
  .jc-app__body { flex-direction: column; }
  .jc-nav:not(.jc-nav--drawer) { flex-direction: row; width: auto; overflow-x: auto; padding: 8px 12px; border-right: 0; border-bottom: 1.5px dashed var(--jc-stitch); }
  .jc-nav:not(.jc-nav--drawer) > :is(a, button), .jc-nav:not(.jc-nav--drawer) .jc-nav__item { width: auto; }
  .jc-nav:not(.jc-nav--drawer) .jc-nav__group { display: none; }
  .jc-main { padding: 16px; }
  .jc-appbar__user > span:not(.jc-avatar) { display: none; }
}

/* ── 頁首與工具列 ── */
.jc-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.jc-pagehead__title { display: grid; gap: 2px; min-width: 0; }
/* 頁首標題自帶字級：沒在 body 加 .jc、或 Tailwind preflight 把 h1 歸零時也正確 */
.jc-pagehead h1 { margin: 0; font-size: 26px; font-weight: 400; line-height: 1.25; text-wrap: balance; }
.jc-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jc-split { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.jc-split > :first-child { flex: 999 1 420px; min-width: 0; }
.jc-split > :last-child { flex: 1 1 300px; min-width: 0; }

/* ── 表格 ── */
.jc-table-wrap { overflow-x: auto; background: var(--jc-paper); border: 1.5px solid var(--jc-line); border-radius: var(--jc-radius); }
.jc-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.jc-table th { padding: 12px 16px; text-align: left; font-weight: 400; font-size: 13px; color: var(--jc-muted); white-space: nowrap; border-bottom: 1.5px dashed var(--jc-stitch); }
.jc-table td { padding: 12px 16px; vertical-align: middle; border-bottom: 1px solid var(--jc-line); }
.jc-table tbody tr:last-child td { border-bottom: 0; }
.jc-table tbody tr:hover { background: var(--jc-soft); }
.jc-table tr[aria-selected="true"] { background: var(--jc-soft); box-shadow: inset 4px 0 0 var(--jc-accent); }
.jc-table tfoot td { border-top: 1.5px dashed var(--jc-stitch); border-bottom: 0; }
.jc-table .jc-num { text-align: right; }

/* ── 狀態標籤：顏色之外也有文字 ── */
.jc-status {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 12.5px; white-space: nowrap; color: var(--jc-muted); border: 1.5px solid currentColor;
}
.jc-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.jc-status--ok { color: var(--jc-ok); }
.jc-status--warn { color: var(--jc-warn); }
.jc-status--bad { color: var(--jc-bad); }
.jc-status--info { color: var(--jc-accent-strong); }

/* ── 數字卡 ── */
.jc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.jc-stat { display: grid; gap: 4px; padding: 14px 18px; background: var(--jc-paper); border: 1.5px solid var(--jc-line); border-radius: var(--jc-radius); }
.jc-stat__label { font-size: 13px; color: var(--jc-muted); }
.jc-stat__value { font-size: 28px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.jc-stat__note { font-size: 12.5px; color: var(--jc-muted); }
/* 需要注意的數字（例：需處理、未到）；重點數字（例：應發金額）用 --accent */
.jc-stat--warn { border-color: var(--jc-warn); }
.jc-stat--bad { border-color: var(--jc-bad); }
.jc-stat--ok { border-color: var(--jc-ok); }
.jc-stat--accent { border-color: var(--jc-accent); }

/* ── 簽核流程 ── */
.jc-steps { display: grid; margin: 0; padding: 0; list-style: none; }
.jc-step { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 0 12px; padding-bottom: 18px; }
.jc-step::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; border-left: 2px dashed var(--jc-stitch); }
.jc-step:last-child { padding-bottom: 0; }
.jc-step:last-child::before { display: none; }
.jc-step__mark {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 13px;
  background: var(--jc-soft); border: 1.5px solid var(--jc-line); color: var(--jc-muted);
}
.jc-step__mark svg { width: 15px; height: 15px; }
.jc-step[data-state="done"] .jc-step__mark { background: var(--jc-ok); border-color: var(--jc-ok); color: var(--jc-paper); }
.jc-step[data-state="current"] .jc-step__mark { background: var(--jc-accent); border-color: var(--jc-accent); color: var(--jc-on-accent); box-shadow: 0 0 0 4px var(--jc-soft); }
.jc-step[data-state="rejected"] .jc-step__mark { background: var(--jc-bad); border-color: var(--jc-bad); color: var(--jc-paper); }
.jc-step__body { display: grid; gap: 1px; padding-top: 3px; }
.jc-step__meta { font-size: 12.5px; color: var(--jc-muted); }

/* ── 空狀態與錯誤 ── */
.jc-empty {
  display: grid; justify-items: center; gap: 10px; padding: 36px 20px; text-align: center; color: var(--jc-muted);
  background: var(--jc-paper); border: 1.5px dashed var(--jc-stitch); border-radius: var(--jc-radius);
}
.jc-empty__art { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--jc-soft); color: var(--jc-muted); box-shadow: var(--jc-puff); }
.jc-empty__art svg { width: 30px; height: 30px; }
.jc-empty__title { color: var(--jc-ink); font-size: 17px; }
.jc-alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--jc-paper); border: 1.5px solid var(--jc-line); }
.jc-alert > svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.jc-alert--bad { border-color: var(--jc-bad); } .jc-alert--bad > svg { color: var(--jc-bad); }
.jc-alert--warn { border-color: var(--jc-warn); } .jc-alert--warn > svg { color: var(--jc-warn); }
.jc-alert--ok { border-color: var(--jc-ok); } .jc-alert--ok > svg { color: var(--jc-ok); }

/* ── 表單 ── */
.jc-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.jc-form .jc-field--wide { grid-column: 1 / -1; }
@media (max-width: 600px) { .jc-form { grid-template-columns: 1fr; } }
.jc-textarea {
  width: 100%; min-height: 120px; padding: 12px 14px; resize: vertical; border-radius: var(--jc-radius-s);
  background: var(--jc-paper); border: 1.5px solid var(--jc-line); box-shadow: inset 0 2px 4px rgb(150 105 70 / 0.08);
}
.jc-check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.jc-check input { width: 20px; height: 20px; flex: none; accent-color: var(--jc-accent); }

/* ── 進度 ── */
.jc-progress { height: 12px; overflow: hidden; border-radius: 999px; background: var(--jc-soft); box-shadow: inset 0 1px 3px rgb(150 105 70 / 0.2); }
.jc-progress > span { display: block; height: 100%; border-radius: 999px; background: var(--jc-mod, var(--jc-accent)); box-shadow: var(--jc-puff); }

/* ── 看板 ── */
.jc-board { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 14px; align-items: start; overflow-x: auto; padding-bottom: 4px; }
.jc-col { display: grid; gap: 10px; padding: 12px; border-radius: var(--jc-radius); background: var(--jc-soft); }
.jc-col__head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px; font-size: 14px; }
.jc-card { display: grid; gap: 8px; padding: 12px 14px; border-radius: 16px; background: var(--jc-paper); border: 1.5px solid var(--jc-line); box-shadow: var(--jc-puff); }
.jc-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--jc-muted); }

/* ── 對話 ── */
.jc-chat { display: flex; flex-direction: column; gap: 10px; }
.jc-bubble { max-width: 78%; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--jc-paper); border: 1.5px solid var(--jc-line); box-shadow: var(--jc-puff); }
.jc-bubble--out { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: var(--jc-mod, var(--jc-accent)); border-color: transparent; color: var(--jc-on-pastel); }
.jc-bubble__time { display: block; margin-top: 4px; font-size: 11.5px; opacity: 0.75; }

/* ── 圖示（inline SVG 共用） ── */
.jc-i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── 數字標記（待處理數、未讀數）：放在 jc-nav 項目、jc-seg 按鈕或標題旁 ── */
.jc-count {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 6px; padding: 0 7px; border-radius: 999px;
  background: var(--jc-soft); color: var(--jc-ink); font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums;
}
.jc-seg button[aria-pressed="true"] .jc-count { background: var(--jc-accent); color: var(--jc-on-accent); }

/* ── 停用狀態 ── */
.jc-btn:disabled, .jc-icon-btn:disabled, .jc-seg button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ── 分頁器：上一頁／第幾頁／下一頁 ── */
.jc-pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--jc-muted); font-variant-numeric: tabular-nums; }
.jc-pager__page { min-width: 6em; text-align: center; }

/* ── 手機底部分頁列：在 .jc-app 加 jc-app--tabbar，手機上用它取代側邊選單 ── */
.jc-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px;
  padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
  background: var(--jc-paper); border-top: 1.5px dashed var(--jc-stitch); box-shadow: 0 -6px 16px rgb(150 105 70 / 0.12);
}
.jc-tabbar a, .jc-tabbar button {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 54px; padding: 4px 2px; border: 0; border-radius: 14px;
  background: transparent; color: var(--jc-muted); font: inherit; font-size: 12px; text-decoration: none; cursor: pointer;
}
.jc-tabbar svg { width: 22px; height: 22px; }
.jc-tabbar [aria-current="page"] { background: var(--jc-mod); color: var(--jc-on-pastel); box-shadow: var(--jc-puff); }
.jc-tabbar .jc-count { position: absolute; top: 2px; left: 50%; margin-left: 6px; background: var(--jc-bad); color: var(--jc-paper); }
/* 側邊選單要到 1024px 才放得下的模組，改用 jc-app--tabbar-wide：1023px 以下都用底部分頁列 */
@media (max-width: 1023px) {
  .jc-app--tabbar-wide .jc-tabbar { display: grid; }
  .jc-app--tabbar-wide .jc-nav { display: none; }
  .jc-app--tabbar-wide .jc-main { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 760px) {
  .jc-app--tabbar .jc-tabbar { display: grid; }
  .jc-app--tabbar .jc-nav { display: none; }
  .jc-app--tabbar .jc-main { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}

/* ── 對話框與側邊明細：<dialog class="jc-dialog">（或一般 div 搭配 jc-scrim）；手機上從底部滑出 ── */
.jc-dialog {
  display: flex; flex-direction: column; width: min(560px, calc(100vw - 32px)); max-width: none; max-height: min(86vh, 900px); padding: 0; overflow: hidden;
  background: var(--jc-bg); color: var(--jc-ink); border: 1.5px solid var(--jc-line); border-radius: var(--jc-radius-l); box-shadow: var(--jc-shadow-lift);
}
dialog.jc-dialog:not([open]) { display: none; }
.jc-dialog::backdrop { background: var(--jc-scrim); backdrop-filter: blur(3px); }
.jc-dialog__head { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 20px; background: var(--jc-paper); border-bottom: 1.5px dashed var(--jc-stitch); }
.jc-dialog__title { flex: 1; min-width: 0; margin: 0; font-size: 18px; font-weight: 400; }
.jc-dialog__body { display: grid; align-content: start; gap: 16px; flex: 1; min-height: 0; padding: 20px; overflow: auto; }
.jc-dialog__foot {
  display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--jc-paper); border-top: 1.5px dashed var(--jc-stitch);
}
.jc-dialog--sheet { width: min(480px, 100vw); height: 100dvh; max-height: none; margin: 0 0 0 auto; border-radius: var(--jc-radius-l) 0 0 var(--jc-radius-l); }
@media (max-width: 600px) {
  .jc-dialog, .jc-dialog--sheet, .jc-dialog--drawer {
    width: 100vw; height: auto; max-height: 92dvh; margin: auto 0 0; border-radius: var(--jc-radius-l) var(--jc-radius-l) 0 0;
  }
}

/* ── 表格的手機卡片版：table 加 jc-table--stack，每個 td 加 data-label="欄名" ── */
@media (max-width: 600px) {
  .jc-table-wrap:has(> .jc-table--stack) { overflow: visible; background: transparent; border: 0; }
  .jc-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .jc-table--stack, .jc-table--stack tbody, .jc-table--stack tfoot, .jc-table--stack tr, .jc-table--stack td { display: block; width: 100%; }
  .jc-table--stack tbody, .jc-table--stack tfoot { display: grid; gap: 10px; }
  .jc-table--stack tfoot { margin-top: 10px; }
  .jc-table--stack tr { padding: 10px 14px; border: 1.5px solid var(--jc-line); border-radius: 16px; background: var(--jc-paper); }
  .jc-table--stack tbody tr:hover { background: var(--jc-paper); }
  .jc-table--stack tr[aria-selected="true"] { border-color: var(--jc-accent); box-shadow: none; }
  .jc-table--stack td, .jc-table--stack tfoot td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0; border: 0; text-align: right; }
  .jc-table--stack td::before { content: attr(data-label); flex: none; color: var(--jc-muted); font-size: 13px; text-align: left; }
  .jc-table--stack td:not([data-label])::before { content: none; }
}

/* ── 橫向簽核流程：ol 加 jc-steps--row（等寬，手機上自動改回直排）；
   關卡多或關名長就用 jc-steps--scroll（每關最小寬、整列左右捲動；請加 tabindex="0" 與 aria-label 讓鍵盤能捲） ── */
.jc-steps--row { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.jc-steps--scroll { grid-auto-flow: column; grid-auto-columns: minmax(128px, max-content); overflow-x: auto; padding-bottom: 6px; }
:is(.jc-steps--row, .jc-steps--scroll) .jc-step { grid-template-columns: 1fr; justify-items: center; gap: 6px; padding-bottom: 0; text-align: center; }
:is(.jc-steps--row, .jc-steps--scroll) .jc-step::before { left: calc(50% + 18px); right: calc(-50% + 18px); top: 13px; bottom: auto; border-left: 0; border-top: 2px dashed var(--jc-stitch); }
:is(.jc-steps--row, .jc-steps--scroll) .jc-step__body { justify-items: center; padding-top: 0; }
@media (max-width: 600px) {
  .jc-steps--row { grid-auto-flow: row; }
  .jc-steps--row .jc-step { grid-template-columns: 28px 1fr; justify-items: start; gap: 0 12px; padding-bottom: 18px; text-align: left; }
  .jc-steps--row .jc-step:last-child { padding-bottom: 0; }
  .jc-steps--row .jc-step::before { left: 13px; right: auto; top: 30px; bottom: 2px; border-top: 0; border-left: 2px dashed var(--jc-stitch); }
  .jc-steps--row .jc-step__body { justify-items: start; padding-top: 3px; }
}

/* ── 短暫提示（toast）：放在 .jc-toasts 裡；一般用 role="status"，錯誤用 role="alert" ── */
.jc-toasts {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 50; display: grid; gap: 8px;
  width: min(420px, calc(100vw - 32px)); transform: translateX(-50%); pointer-events: none;
}
@media (max-width: 760px) { .jc-app--tabbar .jc-toasts { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
.jc-toast {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 16px; border-radius: 18px; pointer-events: auto;
  background: var(--jc-paper); border: 1.5px solid var(--jc-line); box-shadow: var(--jc-shadow-lift);
}
.jc-toasts > .jc-toast { animation: jc-toast-in 0.2s ease-out; }
/* 底部有固定操作列的頁面，提示改放右上角 */
.jc-toasts--top-right { top: calc(16px + env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: auto; left: auto; transform: none; }
.jc-toast > svg { width: 20px; height: 20px; flex: none; }
.jc-toast__action { margin-left: auto; }
.jc-toast--ok { border-color: var(--jc-ok); } .jc-toast--ok > svg { color: var(--jc-ok); }
.jc-toast--warn { border-color: var(--jc-warn); } .jc-toast--warn > svg { color: var(--jc-warn); }
.jc-toast--bad { border-color: var(--jc-bad); } .jc-toast--bad > svg { color: var(--jc-bad); }
@keyframes jc-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .jc-toasts > .jc-toast { animation: none; } }

/* ── 三欄收件匣：清單｜內容｜明細；窄螢幕明細移到內容下方，手機上下排 ── */
.jc-inbox {
  display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(240px, 300px);
  grid-template-areas: "list main side"; gap: 16px; align-items: start;
}
.jc-inbox__list { grid-area: list; min-width: 0; }
.jc-inbox__main { grid-area: main; min-width: 0; }
.jc-inbox__side { grid-area: side; min-width: 0; }
@media (max-width: 1100px) {
  .jc-inbox { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); grid-template-areas: "list main" "list side"; }
}
@media (max-width: 760px) {
  .jc-inbox { grid-template-columns: minmax(0, 1fr); grid-template-areas: "list" "main" "side"; }
}

/* ── 輸入列：輸入框＋送出鈕，永遠同一行 ── */
.jc-composer { display: flex; align-items: flex-end; gap: 8px; }
.jc-composer > .jc-input, .jc-composer > .jc-textarea { flex: 1; min-width: 0; }
.jc-composer > .jc-textarea { min-height: 44px; }
.jc-composer > button { flex: none; }

/* ── 欄位清單：<dl class="jc-kv"><dt>關係</dt><dd>兒子</dd>…；金額靠右加 jc-kv--num ── */
.jc-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: 14px; }
.jc-kv dt { color: var(--jc-muted); }
.jc-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.jc-kv--num dd { text-align: right; font-variant-numeric: tabular-nums; }

/* ── 人員／訪視列卡片：頭像＋兩行字＋右側狀態或按鈕 ── */
.jc-person { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--jc-paper); border: 1.5px solid var(--jc-line); }
.jc-person__main { display: grid; gap: 2px; flex: 1; min-width: 0; font-size: 14px; }
.jc-person__sub { font-size: 12.5px; color: var(--jc-muted); overflow-wrap: anywhere; }
.jc-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }

/* ── 大型選單：可收合分組＋選單內搜尋（頁面很多的模組，例如人資） ──
   <nav class="jc-nav"><input class="jc-input jc-nav__search" type="search">
     <details class="jc-nav__section" open><summary class="jc-nav__group">員工</summary>…項目…</details></nav> */
.jc-nav__search { min-height: 40px; margin-bottom: 8px; }
.jc-nav__section { display: grid; gap: 4px; }
.jc-nav__section > summary.jc-nav__group {
  display: flex; align-items: center; justify-content: space-between; min-height: 40px; margin: 4px 0 0; padding: 0 12px;
  border-radius: 12px; list-style: none; cursor: pointer;
}
.jc-nav__section > summary.jc-nav__group::-webkit-details-marker { display: none; }
.jc-nav__section > summary.jc-nav__group::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; }
.jc-nav__section[open] > summary.jc-nav__group::after { transform: rotate(45deg); }
.jc-nav__section > summary.jc-nav__group:hover { background: var(--jc-soft); }

/* ── 「全部功能」抽屜：<dialog class="jc-dialog jc-dialog--drawer">，裡面放 jc-nav jc-nav--drawer；
   底部分頁列的「更多」打開它。桌機從左邊滑出，手機從底部滑出 ── */
.jc-dialog--drawer { width: min(320px, 100vw); height: 100dvh; max-height: none; margin: 0 auto 0 0; border-radius: 0 var(--jc-radius-l) var(--jc-radius-l) 0; }
.jc-dialog--drawer .jc-nav { width: auto; border-right: 0; background: transparent; }

/* ── 固定外框：上方列不動，選單與內容各自捲動。.jc-app 加 jc-app--fixed ── */
.jc-app--fixed { height: 100dvh; overflow: hidden; }
.jc-app--fixed > .jc-app__body { min-height: 0; }
.jc-app--fixed .jc-main, .jc-app--fixed .jc-nav { overflow-y: auto; }

/* ── 封面（課程卡等）：預設是代表色底＋置中圖示；有圖片就放 <img>，左上角可放 jc-chip ── */
.jc-cover {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; border-radius: 14px;
  background: var(--c, var(--jc-mod)); color: var(--jc-on-pastel); box-shadow: var(--jc-puff);
}
.jc-cover > svg { width: 34px; height: 34px; }
.jc-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jc-cover > .jc-chip { position: absolute; top: 8px; left: 8px; background: var(--jc-paper); color: var(--jc-ink); }

/* ── 倒數（天／時／分）：<div class="jc-countdown" role="timer"><span class="jc-countdown__unit"><b>02</b>天</span>… ── */
.jc-countdown { display: flex; gap: 8px; }
.jc-countdown__unit {
  display: grid; justify-items: center; gap: 2px; min-width: 56px; padding: 8px 6px; border-radius: 14px;
  background: var(--jc-paper); border: 1.5px solid var(--jc-line); box-shadow: var(--jc-puff); font-size: 12.5px; color: var(--jc-muted);
}
.jc-countdown__unit > b { font-size: 24px; font-weight: 400; line-height: 1.1; color: var(--jc-ink); font-variant-numeric: tabular-nums; }