/* 路燈專案派工申報系統
   版面位置與操作沿用穩茂（左選單、標題列＋新增、查詢條件、清單左欄操作、表單欄位順序），
   視覺重新整理：同樣的紫灰＋橘色系，但更乾淨、好讀。不使用市府市徽與名稱。 */
:root {
  /* 品牌色（深淺模式都一樣） */
  --plum-900: #2c2230; --plum-800: #3b2e41; --plum-700: #4e3d55; --plum-600: #614c66; --plum-500: #7b6681;
  --orange: #e8930c; --orange-h: #d0820a;
  --red: #c0392f; --green: #2f7d4a; --amber: #a8640a;
  --radius: 12px;
  --font: "Microsoft JhengHei", "微軟正黑體", "PingFang TC", "Noto Sans TC", sans-serif;
  /* 柔和配色（預設）：底色與卡片都不是純白，降低刺眼感 */
  --bg: #e5e1e8; --card: #f4f2f6; --card-2: #ebe7ee; --top-bg: #efecf2;
  --row-alt: #e7e2ec; --row-hover: #d9e9e9;
  --line: #cdc5d3; --line-2: #ddd7e2;
  --input-bg: #faf9fb; --input-line: #bdb4c4; --overlay: rgba(244, 242, 246, .85);
  --text: #1d1722; --text-2: #3f3745; --muted: #6f6676;
  --accent: #614c66; --accent-strong: #3b2e41;          /* 文字用的品牌色（連結、標題） */
  --plum-100: #ddd5e2; --plum-50: #e9e3ec;
  --teal-50: #dfecec; --cream-50: #f0ebe2; --orange-50: #f5e9d4; --red-50: #f3e2e1; --green-50: #dde9e1; --blue-50: #dde6f1;
  --blue: #2a5f9e;
  --shadow: 0 1px 2px rgba(44, 34, 48, .05), 0 2px 6px rgba(44, 34, 48, .04);
}
/* 深色 */
:root[data-theme="dark"] {
  --bg: #17141a; --card: #221e26; --card-2: #2a2530; --top-bg: #1d1921;
  --row-alt: #28232d; --row-hover: #1f3237;
  --line: #3a3340; --line-2: #2f2935;
  --input-bg: #1a171e; --input-line: #4a4252; --overlay: rgba(34, 30, 38, .85);
  --text: #e5dfe8; --text-2: #bbb1c1; --muted: #8d8394;
  --accent: #cdb6d4; --accent-strong: #e7d9ec;
  --plum-100: #3d3445; --plum-50: #2f2836;
  --teal-50: #1d2c2f; --cream-50: #2a251f; --orange-50: #3a2c14; --red-50: #3b1f1d; --green-50: #1c2e23; --blue-50: #1c2838;
  --blue: #8db4e6; --red: #e8776f; --green: #6cc08a; --amber: #e0a24a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font: 15px/1.6 var(--font); letter-spacing: .4px; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); }
.ic { flex: none; vertical-align: -3px; }
.inline { display: inline; }
.muted { color: var(--muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* ═══ 頂列 ═══ */
.top { height: 58px; display: flex; align-items: center; gap: 16px; padding: 0 22px; background: var(--top-bg); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30; }
.top .banner { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; color: var(--accent-strong); letter-spacing: 1px; }
.top .banner .emblem { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--plum-500), var(--plum-700)); box-shadow: 0 2px 6px rgba(78, 61, 85, .3); }
.top .menu { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 14px; color: var(--text-2); }
.top .menu .who { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; font-size: 13px; color: var(--muted); }
.top .menu .who b { color: var(--text); font-size: 14px; font-weight: 600; }
.top .menu a, .top .menu button { color: var(--accent); background: none; border: 0; font: inherit; letter-spacing: inherit; cursor: pointer;
  padding: 6px 10px; border-radius: 8px; display: inline-flex; align-items: center; gap: 4px; }
.top .menu a:hover, .top .menu button:hover { background: var(--plum-50); }
.topline { display: none; }

/* ═══ 左選單＋內容 ═══ */
.layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: calc(100vh - 58px); }
.side { background: var(--plum-800); padding: 14px 10px; position: sticky; top: 58px; height: calc(100vh - 58px); overflow: auto; }
.side a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin: 1px 0; border-radius: 8px; color: #d9cfdc; font-size: 15px; position: relative; }
.side a .ic { color: #b3a5b8; }
.side a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.side a.on { background: rgba(255, 255, 255, .12); color: #fff; font-weight: 700; }
.side a.on .ic { color: var(--orange); }
.side a.on::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--orange); }
.side .sec { font-size: 12px; color: #9c8ea2; letter-spacing: 2px; padding: 16px 12px 6px; }
.main { min-width: 0; padding: 20px 22px 60px; max-width: 1440px; }

/* ═══ 頁面標題列（穩茂的灰色標題列 → 標題在左、按鈕在右） ═══ */
.ttl { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-bottom: 14px; flex-wrap: wrap; }
.ttl h1 { order: 0; flex: 1; margin: 0; font-size: 21px; font-weight: 700; color: var(--text); letter-spacing: 1px; }
.ttl .l { order: 1; display: flex; gap: 8px; } .ttl .r { order: 2; display: flex; gap: 8px; align-items: center; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.st-維修中 { background: var(--blue-50); color: var(--blue); } .badge.st-已送審 { background: var(--orange-50); color: var(--amber); }
.badge.st-退件 { background: var(--red-50); color: var(--red); } .badge.st-已結案 { background: var(--green-50); color: var(--green); }

/* ═══ 按鈕 ═══ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 9px; border: 1px solid var(--plum-600);
  background: var(--plum-600); color: #fff; font: inherit; font-size: 15px; font-weight: 600; letter-spacing: .5px; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, box-shadow .15s; }
.btn:hover { background: var(--plum-700); border-color: var(--plum-700); color: #fff; }
.btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px #dccfe0; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.orange, .btn.amber { background: var(--orange); border-color: var(--orange); }
.btn.orange:hover, .btn.amber:hover { background: var(--orange-h); border-color: var(--orange-h); }
.btn.ghost { background: var(--card); color: var(--accent); border-color: var(--line); font-weight: 500; }
.btn.ghost:hover { background: var(--plum-50); color: var(--accent-strong); }
.btn.green { background: var(--green); border-color: var(--green); } .btn.green:hover { background: #276a3e; }
.btn.red { background: var(--card); color: var(--red); border-color: #efc1be; font-weight: 500; } .btn.red:hover { background: var(--red-50); color: var(--red); }
.btn.sm { height: 30px; padding: 0 11px; font-size: 13px; border-radius: 7px; }

.flash { display: flex; gap: 8px; align-items: center; background: var(--orange-50); border: 1px solid var(--line); color: var(--amber); padding: 10px 14px; border-radius: 10px; margin: 0 0 14px; }

/* ═══ 查詢條件 ═══ */
.tool { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 16px; margin-bottom: 14px; line-height: 44px; }
.tool br { display: none; }
.tool .grp { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; white-space: nowrap; color: var(--text-2); font-size: 14px; }
.tool .count { margin-left: 8px; }

input[type=text], input[type=password], input[type=date], input[type=number], select, textarea {
  font: inherit; font-size: 15px; letter-spacing: normal; color: var(--text); height: 36px; padding: 0 10px; border: 1px solid var(--input-line); border-radius: 8px; background: var(--input-bg); min-width: 0;
  transition: border-color .15s, box-shadow .15s; }
textarea { height: auto; padding: 8px 10px; width: 100%; resize: vertical; line-height: 1.6; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--plum-500); box-shadow: 0 0 0 3px #e7dcea; }
input::placeholder, textarea::placeholder { color: #b2a9b6; }
input[readonly] { background: var(--plum-50); }
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset[disabled] input, fieldset[disabled] select, fieldset[disabled] textarea { background: transparent; border-color: transparent; color: var(--text); opacity: 1; padding-left: 0; }

/* ═══ 清單（穩茂 GridView 的欄位與左欄操作，改成卡片＋細線） ═══ */
.list-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
table.List { width: 100%; min-width: 1000px; border-collapse: collapse; font-size: 14px; letter-spacing: 0; }
table.List th { background: var(--card-2); color: var(--text-2); font-weight: 600; font-size: 13px; padding: 11px 9px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
table.List td { padding: 10px 9px; border-bottom: 1px solid var(--line-2); color: var(--text); vertical-align: top; }
table.List tbody tr:nth-child(odd) td { background: var(--card); }
table.List tbody tr:nth-child(even) td { background: var(--row-alt); }
table.List tbody tr td { border-bottom-color: var(--line); }
table.List tbody tr:hover td { background: var(--row-hover); }
table.List tbody tr:last-child td { border-bottom: 0; }
table.List td.c { text-align: left; white-space: nowrap; }
table.List td.content { min-width: 170px; color: var(--text-2); }
table.List td.date { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-2); }
/* 穩茂左欄 7 個連結直排很佔高度 → 兩欄小連結，主要動作用按鈕 */
table.List td.act { width: 150px; min-width: 150px; padding: 8px 8px; }
table.List .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
table.List .acts a { margin: 0 !important; }
table.List .acts a.main-act { justify-content: center; }
table.List .acts a.main-act.wide { grid-column: 1 / -1; }
table.List td.act a.photo-link { display: inline-flex !important; align-items: center; gap: 4px; margin: 6px 0 4px !important; font-size: 13px; }
/* 四個文件：同樣大小的小按鈕，2×2 排好 */
table.List .docs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
table.List .docs a { display: block !important; margin: 0 !important; text-align: center; font-size: 12px !important; line-height: 22px !important;
  border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--text-2) !important; }
table.List .docs a:hover { border-color: var(--plum-500); color: var(--accent) !important; background: var(--plum-50); text-decoration: none !important; }
table.List td.act a { display: inline-block; font-size: 13px; line-height: 1.5; color: var(--accent); margin: 0 6px 2px 0; white-space: nowrap; }
table.List td.act a:hover { color: var(--accent-strong); text-decoration: underline; }
table.List td.act a.main-act { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 6px;
  background: var(--plum-50); border: 1px solid var(--plum-100); font-weight: 600; text-decoration: none; }
table.List td.act a.main-act:hover { background: var(--plum-100); }
table.List a.red, a.red, table.List td.act a.red { color: var(--red) !important; }
table.List .late { color: var(--red); font-weight: 700; display: inline-block; margin-left: 4px; font-size: 12px; background: var(--red-50); padding: 0 6px; border-radius: 4px; }
table.List .empty td { text-align: center; padding: 40px; color: var(--muted); }
.st-維修中, .st-已送審, .st-退件, .st-已結案 { font-weight: 600; }
td.st-維修中 span, .st-維修中 { color: var(--blue); } .st-已送審 { color: var(--amber); } .st-退件 { color: var(--red); } .st-已結案 { color: var(--green); }
table.List td[class*="st-"] { white-space: nowrap; }
.pager { display: flex; gap: 12px; align-items: center; justify-content: center; padding: 14px; font-size: 14px; color: var(--muted); }
.pager a { padding: 4px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); }
.pager a:hover { background: var(--plum-50); }
.count { font-size: 13px; color: var(--muted); }

/* ═══ 表單（穩茂 table.Form：區塊標題＋欄位列 → 卡片） ═══ */
table.Form { width: 100%; max-width: 1100px; margin: 0 0 16px; border-collapse: separate; border-spacing: 0; font-size: 15px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
table.Form tr.Title td { background: var(--card); color: var(--accent-strong); font-weight: 700; font-size: 16px; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); letter-spacing: 1px; }
table.Form tr.Title td .r { float: right; display: flex; gap: 8px; font-weight: 400; }
table.Form tr:not(.Title):not(:first-child) + tr.Title td { border-top: 1px solid var(--line); }
table.Form td { padding: 10px 16px; vertical-align: middle; color: var(--text); border-bottom: 1px solid var(--line-2); }
table.Form tr:last-child td { border-bottom: 0; }
table.Form td.k { width: 150px; white-space: nowrap; color: var(--text-2); font-size: 14px; background: var(--card-2); }
table.Form td.v input[type=text], table.Form td.v textarea { width: 100%; max-width: 620px; }
table.Form td.v textarea { max-width: none; }
table.Form .hint { font-size: 13px; color: var(--muted); margin-left: 6px; letter-spacing: .2px; }
table.Form tr.option td { text-align: right; background: var(--card-2); padding: 12px 16px; }
table.Form tr.option td .btn { margin-left: 6px; }
.req { color: var(--red); margin-left: 2px; }
.no-big { font-size: 22px; font-weight: 700; color: var(--accent); letter-spacing: 1.5px; font-variant-numeric: tabular-nums; }

/* 單張各頁的頁面連結（像分頁標籤） */
.subnav { display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center; margin: -4px 0 14px; padding: 4px; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); font-size: 14px; }
.subnav a { padding: 6px 12px; border-radius: 7px; color: var(--text-2); }
.subnav a:hover { background: var(--plum-50); color: var(--accent-strong); }
.subnav a.on { background: var(--plum-600); color: #fff; font-weight: 600; }
.subnav a.on.red { color: #fff !important; background: var(--plum-600); }
.subnav .sep { color: var(--line); margin: 0 4px; }

/* ═══ 維修項目 ═══ */
table.items { width: 100%; border-collapse: collapse; font-size: 14px; letter-spacing: .2px; }
table.items th { background: var(--card-2); color: var(--text-2); padding: 9px 8px; font-weight: 600; font-size: 13px; text-align: left; border-bottom: 1px solid var(--line); }
table.items td { padding: 8px; border-bottom: 1px solid var(--line-2); background: var(--card); }
table.items td.act a { font-size: 13px; margin-right: 6px; }
table.items .amt { color: var(--text); font-weight: 600; }
table.items tfoot td { font-weight: 700; color: var(--accent-strong); background: var(--card-2); border-bottom: 0; font-size: 15px; }
table.items .empty td { text-align: center; color: var(--muted); padding: 20px; }
table.items tr.flashrow td { animation: flashrow 1.6s ease-out; }
@keyframes flashrow { from { background: var(--orange-50); } to { background: var(--card); } }
.quickbox { background: var(--teal-50); padding: 10px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; border-bottom: 1px solid #d6ecec; }
.quickbox .grp { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--text-2); font-size: 14px; }
.addbox { background: var(--cream-50); padding: 10px 16px; border-bottom: 1px solid #efe5d2; line-height: 44px; }
.addbox .grp { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; white-space: nowrap; color: var(--text-2); font-size: 14px; }
.addbox textarea { line-height: 1.6; }
#pastePreview { line-height: 1.8; } #pastePreview .bad { color: var(--red); }

/* ═══ 照片 ═══ */
.photo-wrap { max-width: 900px; }
.grp-cols, .grp { display: grid; grid-template-columns: 50px repeat(3, minmax(0, 1fr)); gap: 8px; }
.grp-cols { text-align: center; font-size: 13px; margin-bottom: 6px; color: var(--text-2); font-weight: 600; }
.groups { display: flex; flex-direction: column; gap: 8px; }
.grp-h { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--plum-50); color: var(--text-2); font-size: 12px; border-radius: 8px; }
.grp-h b { font-size: 18px; color: var(--accent); }
.slot { position: relative; aspect-ratio: 4 / 3; border: 1.5px dashed #cfc5d3; background: var(--card-2); border-radius: 10px; display: flex; align-items: center; justify-content: center;
  color: #b1a7b5; font-size: 13px; overflow: hidden; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.slot:hover { border-color: var(--plum-500); }
.slot.filled { border: 1px solid var(--line); background: #1d1720; }
.slot.over { border: 2px solid var(--plum-600); box-shadow: 0 0 0 4px #e7dcea; }
.slot img { width: 100%; height: 100%; object-fit: contain; }
.slot .x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: #fff;
  cursor: pointer; display: none; place-items: center; padding: 0; }
.slot.filled:hover .x { display: grid; }
.slot .busy { position: absolute; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; color: var(--accent); font-weight: 700; }
.grpnav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
#grpNav { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; flex: 1; }
.gchip { display: inline-grid; place-items: center; min-width: 28px; height: 26px; padding: 0 5px; font-size: 12px; letter-spacing: 0; border-radius: 6px; color: #fff; text-decoration: none; }
.gchip.full { background: #4b9363; } .gchip.part { background: #e3962f; } .gchip.none { background: #c3bcc6; }
.gchip.cur { outline: 2px solid var(--plum-700); outline-offset: 1px; font-weight: 700; }
.gchip.sample { min-width: 12px; height: 12px; padding: 0; vertical-align: -1px; border-radius: 3px; }
a.gchip:hover { color: #fff; filter: brightness(1.08); }

.file-list { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.file-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line-2); }
.file-list li:last-child { border-bottom: 0; }
.file-list a { color: var(--accent); font-weight: 500; }
.events { font-size: 14px; }
.events div { padding: 4px 0; border-bottom: 1px dashed var(--line-2); }

.reject { background: var(--red-50); border: 1px solid var(--line); color: var(--red); padding: 10px 14px; margin: 0 0 14px; border-radius: 10px; max-width: 1100px; }
.lightbox { position: fixed; inset: 0; background: rgba(20, 14, 22, .88); display: flex; align-items: center; justify-content: center; z-index: 100; cursor: zoom-out; }
.lightbox img { max-width: 94vw; max-height: 92vh; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }

/* ═══ 登入 ═══ */
.auth { min-height: calc(100vh - 58px); display: flex; justify-content: center; align-items: flex-start; padding: 8vh 16px 40px;
  background: radial-gradient(900px 400px at 50% -10%, var(--plum-100) 0%, transparent 70%), var(--bg); }
.auth-card { width: 420px; max-width: 100%; }
.auth-card table.Form { font-size: 15px; }
.auth-card input { width: 100%; height: 40px; }
.auth-card tr.option td { text-align: center; } .auth-card tr.option .btn { width: 100%; height: 42px; margin: 0; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .side { position: static; height: auto; display: flex; flex-wrap: wrap; gap: 2px; padding: 8px; }
  .side .sec { display: none; } .side a.on::before { display: none; }
  .main { padding: 16px 14px 48px; }
  .top { padding: 0 12px; } .top .banner .name { font-size: 15px; } .top .menu .who { display: none; }
  .photo-wrap { grid-template-columns: 1fr; }
  table.Form td.k { width: 110px; }
}

table.List td.place { min-width: 116px; max-width: 200px; }
table.List td.type { min-width: 84px; max-width: 110px; font-size: 13px; color: var(--text-2); }
table.List td .reason { color: var(--red); font-size: 12px; margin-top: 4px; white-space: normal; max-width: 160px; }
/* 下載小選單：四個文件收在一起，列不會被撐高 */
details.dl { display: inline-block; position: relative; }
details.dl summary { list-style: none; cursor: pointer; font-size: 13px; color: var(--accent); }
details.dl summary::-webkit-details-marker { display: none; }
details.dl summary::after { content: " ▾"; font-size: 11px; }
details.dl[open] summary { color: var(--accent-strong); font-weight: 600; }
details.dl .dl-menu { position: absolute; left: 0; top: 100%; z-index: 20; background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(44, 34, 48, .14); padding: 6px; min-width: 130px; display: flex; flex-direction: column; }
details.dl .dl-menu a { display: block !important; margin: 0 !important; padding: 6px 10px !important; height: auto !important; border: 0 !important; background: none !important;
  border-radius: 6px; font-weight: 400 !important; line-height: 1.5; }
details.dl .dl-menu a:hover { background: var(--plum-50) !important; text-decoration: none; }

/* 待辦事件：整列就是連結，右邊大數字 */
table.Form.todo tr:not(.Title) td { padding: 0; }
a.todo-link { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; color: var(--text); font-size: 16px; }
a.todo-link b { font-size: 22px; color: var(--accent); font-variant-numeric: tabular-nums; }
a.todo-link:hover { background: var(--plum-50); color: var(--accent-strong); }
a.todo-link.hot span, a.todo-link.hot b { color: var(--red); }

/* 主題切換 */
.theme-btn { font-size: 14px; }
:root[data-theme="dark"] .side { background: #120f15; }
:root[data-theme="dark"] .slot.filled { background: #0d0b0f; }
:root[data-theme="dark"] .btn.ghost { border-color: var(--line); }
:root[data-theme="dark"] .btn.red { border-color: #6a3330; }
:root[data-theme="dark"] input[type=date] { color-scheme: dark; }

/* 估驗計價：篩選＋批次勾選 */
.pick-tool .row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; line-height: 1.6; padding: 4px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: inherit; font-size: 14px; letter-spacing: .3px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text-2); cursor: pointer; }
.chip span { color: var(--muted); font-size: 12px; }
.chip.on { background: var(--plum-600); border-color: var(--plum-600); color: #fff; }
.chip.on span { color: #e8dcec; }
table.pick-table tr.zone-row td { background: var(--plum-50) !important; border-bottom: 1px solid var(--line); padding: 8px 9px; }
table.pick-table tr.pick-row { cursor: pointer; }
table.pick-table tr.pick-row:has(.pick-cb:checked) td { background: var(--teal-50) !important; }
table.pick-table .content .clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; color: var(--text-2); }
.in-period { display: inline-block; margin-left: 6px; font-size: 11px; padding: 0 6px; border-radius: 4px; background: var(--green-50); color: var(--green); }
.pick-bar { position: sticky; bottom: 0; z-index: 15; margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; justify-content: space-between;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 -4px 16px rgba(44, 34, 48, .08); padding: 12px 16px; }
.pick-bar .acts-bar { display: flex; gap: 8px; align-items: center; }

/* 比照穩茂：欄與欄之間有框線區隔、字色深（看得清楚的關鍵） */
table.List th, table.List td { border-right: 1px solid var(--line); }
table.List th:last-child, table.List td:last-child { border-right: 0; }
table.List th { border-bottom: 1px solid var(--line); color: var(--text); }
table.List td.date, table.List td.type, table.List td.content, table.List td.content .clamp { color: var(--text); }
table.Form td.k { border-right: 1px solid var(--line-2); color: var(--text-2); }
table.items th, table.items td { border-right: 1px solid var(--line-2); }
table.items th:last-child, table.items td:last-child { border-right: 0; }

/* 收合區塊（估驗計價：匯入舊計價單） */
details.fold { margin: 0 0 16px; }
details.fold > summary { cursor: pointer; font-size: 14px; color: var(--accent); padding: 6px 0; }
details.fold[open] > summary { margin-bottom: 8px; }

/* 跳出視窗（清單上的編輯／完工送審／附檔） */
.pop-mask { position: fixed; inset: 0; z-index: 100; background: rgba(20, 14, 26, .45); display: flex; align-items: center; justify-content: center; padding: 18px; }
.pop-mask[hidden] { display: none; }
.pop-win { width: min(1080px, 100%); height: 100%; background: var(--bg); border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); }
.pop-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 16px; background: var(--card); border-bottom: 1px solid var(--line); }
.pop-ttl { flex: 1; font-weight: 600; color: var(--text); }
.pop-tab { font-size: 13px; color: var(--accent); }
.pop-x { border: 0; background: none; font-size: 18px; line-height: 1; padding: 6px 10px; border-radius: 8px; cursor: pointer; color: var(--text); }
.pop-x:hover { background: var(--line); }
.pop-frame { flex: 1; width: 100%; border: 0; background: var(--bg); }
body.pop-open { overflow: hidden; }
html.in-pop header.top, html.in-pop nav.side { display: none; }
html.in-pop .layout { display: block; min-height: 0; }
html.in-pop .main { padding: 14px 18px 40px; max-width: none; }
html.in-pop table.Form { width: 100%; max-width: none !important; }   /* 表單跟標題列一樣寬，右邊不留空 */
html.in-pop .back-list { display: none; }
.pop-bar { cursor: move; user-select: none; }
.pop-mask.dragging .pop-frame { pointer-events: none; }   /* 拖曳時滑鼠不要被 iframe 吃掉 */

/* 已估驗（已結案且排進某一期估驗計價） */
.badge.st-已估驗 { background: var(--plum-50); color: var(--accent); font-weight: 600; }
:root[data-theme="dark"] .badge.st-已估驗 { background: rgba(205, 182, 212, .16); }
.reason.billed { color: var(--accent); }

/* 上方列：切換契約 */
.ctr-switch select { max-width: 300px; height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .12); color: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.ctr-switch select option { color: #1d1722; background: #fff; }
.ctr-one { font-weight: 600; font-size: 14px; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
.ctr-k { font-size: 12px; opacity: .75; margin-right: 6px; }

/* 照片：空格的提示、「換」按鈕 */
.photo-hint { font-size: 13px; color: var(--muted); margin: 0 0 10px; line-height: 1.7; }
.slot-tip { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 14px; color: var(--muted); pointer-events: none; }
.slot-tip small { font-size: 11px; opacity: .8; }
.slot:not(.filled):hover .slot-tip { color: var(--accent); }
.slot .swap { position: absolute; top: 6px; left: 6px; height: 26px; padding: 0 9px; border-radius: 13px; border: 0; background: rgba(0, 0, 0, .6); color: #fff;
  font-size: 12px; cursor: pointer; display: none; }
.slot.filled:hover .swap { display: block; }
.slot.filled { cursor: zoom-in; }

/* 新增派工：派工類型 */
.kind-pick label { display: inline-flex; align-items: center; gap: 4px; margin-right: 16px; cursor: pointer; white-space: nowrap; }
.kind-tag { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 8px; background: var(--plum-50); color: var(--accent); margin-top: 2px; }

/* 試用站標示 */
.site-label { background: #f2b544; color: #3b2a05; text-align: center; font-size: 13px; font-weight: 700; padding: 3px 8px; letter-spacing: .5px; }
html.in-pop .site-label { display: none; }

/* 跟穩茂併行的契約：唯讀標示 */
.sync-note { display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 8px; background: #fdf1d6; color: #7a5200; font-size: 13px; font-weight: 600; }
:root[data-theme="dark"] .sync-note { background: #4a3a14; color: #f5d891; }