/* ==========================================================
   全球快遞 品牌主題（依 www.global-business.com.tw：主色 #cc110b、強調線 #de140e、頁尾 #1a1a1a）
   客戶叫件：電腦為主 / 手機為輔；外務：手機；調度 / 客服：電腦
   ========================================================== */
:root[data-theme=light], :root {
  --red: #cc110b; --red-line: #de140e; --red-btn: #cb4335; --red-hover: #b50b06;
  --ink: #333; --ink-2: #555; --muted-ink: #666; --ground: #f5f5f5; --paper: #fff; --footer: #1a1a1a;
  --pico-font-family: 'Roboto', 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', 'PingFang TC', sans-serif;
  --pico-font-size: 15px; --pico-line-height: 1.6; --pico-border-radius: 6px;
  --pico-background-color: var(--ground); --pico-color: var(--ink);
  --pico-h1-color: var(--ink); --pico-h2-color: var(--ink); --pico-h3-color: var(--ink); --pico-h4-color: var(--ink);
  --pico-primary: var(--red); --pico-primary-background: var(--red); --pico-primary-border: var(--red);
  --pico-primary-hover: var(--red-hover); --pico-primary-hover-background: var(--red-hover); --pico-primary-hover-border: var(--red-hover);
  --pico-primary-underline: rgba(204,17,11,.4); --pico-primary-hover-underline: var(--red-hover);
  --pico-primary-focus: rgba(204,17,11,.25); --pico-primary-inverse: #fff;
  --pico-secondary: #5c5c5c; --pico-secondary-background: #5c5c5c; --pico-secondary-border: #5c5c5c;
  --pico-secondary-hover: #444; --pico-secondary-hover-background: #444; --pico-secondary-hover-border: #444; --pico-secondary-inverse: #fff;
  --pico-form-element-focus-color: var(--red); --pico-form-element-active-border-color: var(--red);
  --pico-form-element-border-color: #cfcfcf; --pico-form-element-background-color: #fff;
  --pico-card-background-color: var(--paper); --pico-card-sectioning-background-color: #fafafa;
  --pico-card-box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.05);
  --pico-muted-color: #777; --pico-muted-border-color: #e4e4e4;
  --pico-spacing: .9rem; --pico-form-element-spacing-vertical: .55rem; --pico-form-element-spacing-horizontal: .8rem;
}
body { background: var(--ground); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
.wrap { max-width: 1400px; margin: 0 auto; padding: 0 1rem; }

/* 頁首：紅色細條 + 白色主列 + 紅色強調線（同官網） */
.site-header { background: var(--paper); border-bottom: 3px solid var(--red-line); margin-bottom: 1.25rem; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.brand-bar { background: var(--red); color: #fff; font-size: .8rem; }
.brand-bar .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 26px; }
.brand-bar .slogan { color: rgba(255,255,255,.75); letter-spacing: 2px; font-weight: 300; }
.brand-bar .tel { color: #fff; text-decoration: none; }
.brand-bar .tel strong { font-family: 'Roboto', Arial, sans-serif; font-style: italic; letter-spacing: 1px; font-size: 1.02em; }
.brand-bar .tel span { font-weight: 300; opacity: .9; }
.main-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; min-height: 60px; flex-wrap: wrap; padding-top: .3rem; padding-bottom: .3rem; }
.logo { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; }
.logo img { height: 35px; width: auto; display: block; }
.logo .sys { font-size: .95rem; color: var(--muted-ink); border-left: 1px solid #ddd; padding-left: .6rem; margin-left: .35rem; white-space: nowrap; letter-spacing: 1px; }
.nav { display: flex; align-items: center; gap: .25rem 1.1rem; flex-wrap: wrap; font-size: .95rem; }
.nav a { color: var(--ink); text-decoration: none; padding: .35rem 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover, .nav a.active { color: var(--red); border-bottom-color: var(--red); }
.nav .who { color: var(--muted-ink); font-size: .85rem; white-space: nowrap; }
.nav form { margin: 0; }
button.sm, .nav button.sm { padding: .3rem .8rem; font-size: .82rem; margin: 0; width: auto; }
@media (max-width: 640px) {
  .brand-bar .slogan, .logo .sys, .nav .who { display: none; }
  .main-bar .wrap { min-height: 50px; }
  .logo img { height: 30px; }
  .nav { gap: .25rem .8rem; font-size: .92rem; }
}

/* 頁尾（同官網深色） */
.site-footer { background: var(--footer); color: #ccc; margin-top: 2.5rem; padding: 1rem 0; font-size: .82rem; }
.site-footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .35rem 1rem; }
.site-footer a { color: #fff; }

/* 標題：紅色左側線（官網日期方塊的延伸） */
main > h2, .toolbar > h2, .toolbar .title > h2 { font-size: 1.4rem; line-height: 1.3; padding-left: .65rem; border-left: 5px solid var(--red); margin-bottom: 1rem; }
h3 { font-size: 1.1rem; }
article { box-shadow: var(--pico-card-box-shadow); border: 1px solid #ececec; }
article > header { background: #fafafa; }
.table-card { overflow-x: auto; background: var(--paper); border-radius: 8px; box-shadow: var(--pico-card-box-shadow); padding: .25rem .5rem; }
table.compact thead th { background: #fafafa; color: var(--ink-2); }
fieldset.group { background: var(--paper); border: 1px solid #ececec; box-shadow: var(--pico-card-box-shadow); }
fieldset.group > legend { color: var(--red); }
fieldset fieldset legend { font-weight: 600; color: var(--ink-2); font-size: .95rem; padding: 0; }
.flash { padding: .6rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
.flash.ok { background: #e6f7ea; color: #1b5e20; border: 1px solid #a5d6a7; }
.flash.err { background: #fdecea; color: #b71c1c; border: 1px solid #f5c6cb; }
.banner.warn { background: #fff3cd; color: #7a5a00; padding: .5rem 1rem; text-align: center; font-weight: 600; margin-top: .25rem; border-radius: 6px; }
.badge { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; color: #fff; background: #777; vertical-align: middle; }
.st-new { background: #e65100; } .st-assigned { background: #1565c0; } .st-accepted { background: #0277bd; }
.st-picked_up { background: #6a1b9a; } .st-delivered { background: #2e7d32; } .st-failed { background: #c62828; } .st-cancelled { background: #757575; }
.sv-express_normal { background: #546e7a; } .sv-express_special { background: #d84315; } .sv-truck { background: #4e342e; } .sv-home_delivery { background: #00838f; }
.pre { white-space: pre-line; }
.muted { color: var(--pico-muted-color); font-size: .85rem; }
.req { color: #c62828; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
table.compact td, table.compact th { padding: .35rem .5rem; font-size: .88rem; vertical-align: top; }
table.compact tr.clickable { cursor: pointer; }
.toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.toolbar h2 { margin: 0; }
/* 調度清單（2026-09-09 深夜改頁籤）：一次只看一個區塊，卡片在寬螢幕排兩欄 */
.board { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1rem; align-items: start; }
.board .panel { display: block; }
/* 外務清單固定在右側供派遣參考（2026-09-09 深夜使用者指定），跟著捲動 */
.board-side { position: sticky; top: .5rem; max-height: calc(100vh - 1rem); overflow: auto; padding: .6rem .8rem; border: 1px solid #e4e4e4; border-radius: 10px; background: #fff; }
.board-side h3 { display: flex; align-items: center; gap: .4rem; font-size: 1rem; margin: 0 0 .3rem; }
.board-side h3 .cnt { background: var(--red); color: #fff; border-radius: 999px; font-size: .75rem; padding: 0 .5em; min-width: 1.6em; text-align: center; }
.board-side h3 small { font-weight: 400; font-size: .8rem; }
.board-side table.counts { font-size: .88rem; }
@media (max-width: 1000px) { .board { grid-template-columns: 1fr; } .board-side { position: static; max-height: none; } }
.board .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: .8rem; align-items: start; }
.board .cards > h4 { grid-column: 1 / -1; }
.board .cards > .card { margin-bottom: 0; }
@media (max-width: 700px) { .board .cards { grid-template-columns: 1fr; } }
.board-tabs { margin-bottom: .9rem; }
.board-tabs .tab { flex: 0 1 auto; padding: .5rem 1.1rem; }
.couriers-panel table.counts { max-width: 100%; }
.col h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.col h4 { font-size: .9rem; margin: .75rem 0 .35rem; }
.card { border: 1px solid var(--pico-muted-border-color); border-radius: 8px; padding: .6rem .8rem; margin-bottom: .6rem; background: var(--pico-card-background-color); }
.card.special { border-color: #d84315; box-shadow: inset 4px 0 0 #d84315; }
.card.failed { border-color: #c62828; box-shadow: inset 4px 0 0 #c62828; }
.card .row { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.card .line { font-size: .9rem; margin-top: .2rem; }
.card .line small { color: var(--pico-muted-color); margin-right: .3rem; }
.card form { display: flex; gap: .4rem; margin: .5rem 0 0; }
.card form select, .card form button { margin: 0; padding: .3rem .5rem; font-size: .85rem; }
.card form select { flex: 1 1 auto; min-width: 0; width: auto; }
.card form button { flex: 0 0 auto; width: auto; }
a.card-link { text-decoration: none; color: inherit; display: block; }
.big-btn { font-size: 1.3rem; padding: 1rem; margin-bottom: .75rem; width: 100%; }
.big-btn.deliver { background: #2e7d32; border-color: #2e7d32; }
.big-btn.pickup { background: #6a1b9a; border-color: #6a1b9a; }
.big-btn.fail { background: #c62828; border-color: #c62828; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 700px) { .info-grid { grid-template-columns: 1fr; } }
.info-grid article { margin: 0; padding: .9rem 1rem; }
.info-grid article header { padding: 0 0 .4rem; margin-bottom: .4rem; }
.kv dt { font-weight: 600; font-size: .78rem; color: var(--pico-muted-color); margin-top: .5rem; }
.kv dd { margin: 0; }
fieldset.group { border: 1px solid var(--pico-muted-border-color); border-radius: 8px; padding: 1rem 1rem .25rem; margin-bottom: 1rem; }
fieldset.group legend { font-weight: 700; padding: 0 .4rem; }
.notice { background: #fff8f7; border: 1px solid #f6d3d0; padding: .8rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.notice p, .notice ol { margin-bottom: .4rem; }
/* 取件 / 送件卡片的電話、導航：一列兩顆（2026-09-09 深夜美化；原本 Pico .grid 在手機會疊成兩行大按鈕） */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .5rem; }
.contact a[role=button] { margin: 0; padding: .7rem; font-size: 1.05rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* 風格同「送出失敗回報」：實心、無漸層無陰影（2026-09-09 深夜使用者指定） */
.contact a[role=button]:not(.secondary) { background: #c62828; border-color: #c62828; color: #fff; }
.contact a[role=button].secondary { background: #1565c0; border-color: #1565c0; color: #fff; }
/* 主要動作：直接取件 / 掃碼取件（或送件）並排，大小、圓角、平面實心都跟「送出退件 / 回報」「送出失敗回報」一致 */
.act-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .3rem 0 .6rem; }
.act-row form { margin: 0; }
.act-row .big-btn { margin: 0; height: 100%; font-size: 1.05rem; padding: .7rem .4rem; display: flex; align-items: center; justify-content: center; gap: .35rem; color: #fff; }
.act-row .big-btn .ic { display: inline; }
.act-row .big-btn.pickup { background: #6a1b9a; border-color: #6a1b9a; }
.act-row .big-btn.deliver { background: #2e7d32; border-color: #2e7d32; }
.act-row a.big-btn.scan { background: #37474f; border-color: #37474f; color: #fff; }
.timeline { list-style: none; padding-left: 0; }
.timeline li { padding: .3rem 0; border-bottom: 1px dashed var(--pico-muted-border-color); }
.order-no { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 2rem; letter-spacing: .05em; }
details summary { cursor: pointer; }
.st-unassigned { background: #e65100; }
.leg { display: inline-block; font-size: .72rem; padding: 0 .35rem; border-radius: 4px; border: 1px solid currentColor; margin-right: .25rem; vertical-align: middle; }
.bulk { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: 0 0 .6rem; padding: .5rem .6rem; border: 1px dashed var(--pico-muted-border-color); border-radius: 8px; }
.bulk select, .bulk button { margin: 0; padding: .3rem .5rem; font-size: .85rem; }
.bulk select { flex: 1 1 0; min-width: 0; width: auto; }
.bulk .chk { flex: 0 0 auto; }
.bulk button { flex: 0 0 auto; width: auto; }
.chk { display: inline-flex; align-items: center; gap: .3rem; margin: 0 .3rem 0 0; font-size: .85rem; }
.chk input[type=checkbox] { margin: 0; }
.card form { flex-wrap: wrap; }
.issue-line { color: #b71c1c; font-weight: 600; background: #fdecea; border-radius: 4px; padding: .1rem .4rem; margin-top: .25rem; }
.flash.issue form input { margin: 0; }
.time-row { grid-template-columns: 1fr 1fr; gap: .4rem; }
.time-row input[readonly] { background: var(--pico-form-element-disabled-background-color, #f3f4f6); }
/* 外務頁四清單 */
.tabs { display: flex; gap: .35rem; margin: 0 0 .75rem; position: sticky; top: 0; z-index: 5; background: var(--pico-background-color); padding: .35rem 0; }
.tabs .tab { flex: 1 1 0; margin: 0; padding: .55rem .15rem; font-size: .95rem; background: transparent; color: var(--pico-primary); border: 1px solid var(--pico-primary); border-radius: 8px; white-space: nowrap; }
.tabs .tab.active { background: var(--pico-primary); color: #fff; }
.tabs .cnt { display: inline-block; min-width: 1.5em; margin-left: .3rem; padding: 0 .35em; border-radius: 999px; font-size: .78rem; font-weight: 700; background: rgba(0,0,0,.12); }
.tabs .tab.active .cnt { background: rgba(255,255,255,.3); }
.panel h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.panel[hidden] { display: none; }
details.cancelled { margin-top: 1rem; }
details.cancelled .card { opacity: .75; }
/* 小按鈕（列印託運單等） */
a[role=button].sm, button.sm { padding: .3rem .7rem; font-size: .85rem; margin: 0; width: auto; display: inline-block; }
/* 外務掃碼核對 */
#reader { max-width: 480px; margin: 0 auto .5rem; border-radius: 8px; overflow: hidden; background: #111; min-height: 160px; }
#reader video { width: 100%; display: block; }
.scan-form { display: flex; gap: .4rem; max-width: 480px; margin: 0 auto 1rem; }
.scan-form input { margin: 0; flex: 1 1 auto; text-transform: uppercase; }
.scan-form button { margin: 0; width: auto; flex: 0 0 auto; }
a.big-btn { display: block; text-align: center; }
.big-btn.scan { background: #37474f; border-color: #37474f; color: #fff; }
article.confirm { border: 2px solid #e65100; }
article.confirm header { background: #fff3e0; }
article.confirm a[role=button] { width: 100%; }
/* 站別 */
.st-station { background: #00695c; }
.station-pick { display: flex; align-items: center; gap: .6rem; margin: 0; }
.station-pick select { margin: 0; width: auto; padding: .3rem 2rem .3rem .6rem; font-size: .9rem; }
details.idle summary { font-size: .9rem; color: var(--muted-ink); }
details.idle table { max-height: 60vh; display: block; overflow-y: auto; }
#scan-status { text-align: center; }
.scan-form + p.muted { text-align: center; max-width: 480px; margin: 0 auto; }
/* 單據表格：窄螢幕改成橫向捲動，不要每個字都折行（客服 / 調度以電腦為主，手機只求看得到） */
@media (max-width: 1100px) { .table-card table.compact { min-width: 1080px; } }
table.compact td, table.compact th { white-space: normal; }
/* ===== 2026-09-09 晚：分帳 / 紙本託運單 / 外務代號輸入 / 分群 / 問題處理 ===== */
/* 叫件頁：鎖定今日 + 醒目提示 */
input.locked[readonly] { background: #f3f4f6; font-weight: 600; max-width: 22rem; }
.warn-lines { background: #fff3cd; border: 2px solid #e6a100; color: #7a3e00; border-radius: 8px; padding: .7rem 1rem; margin: .25rem 0 1rem; font-weight: 700; font-size: 1rem; line-height: 1.5; }
.warn-lines p { margin: 0 0 .25rem; }
.warn-lines p:last-child { margin-bottom: 0; }
/* 調度：外務代號直接輸入（datalist 提示） */
input.courier-in { margin: 0; padding: .3rem .5rem; font-size: .9rem; width: 9.5rem; max-width: 100%; flex: 0 1 9.5rem; font-family: 'Roboto', ui-monospace, Menlo, monospace; }
.card form input.courier-in, .bulk input.courier-in { flex: 1 1 7rem; min-width: 6rem; width: auto; }
.grid input.courier-in { width: 100%; padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); font-size: 1rem; }
/* 調度板分群標題 */
.col h4.grp { display: flex; align-items: center; gap: .4rem; margin: .8rem 0 .4rem; padding-bottom: .2rem; border-bottom: 2px solid var(--red); color: var(--red); font-size: .95rem; }
.col h4.grp .cnt { background: var(--red); color: #fff; border-radius: 999px; font-size: .75rem; padding: 0 .5em; min-width: 1.6em; text-align: center; }
.col h4 a { text-decoration: none; color: inherit; border-bottom: 1px dotted currentColor; }
/* 外務件數表 */
table.counts td.num { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
table.counts td.done { color: #2e7d32; }
table.counts td.warn { color: #c62828; }
table.counts th { text-align: center; }
table.counts th:first-child { text-align: left; }
/* 單據列表：列上取消 */
td.act { white-space: nowrap; }
td.act details.row-cancel summary { list-style: none; }
td.act details.row-cancel summary::-webkit-details-marker { display: none; }
td.act details.row-cancel form { display: flex; gap: .3rem; margin-top: .3rem; min-width: 16rem; }
td.act details.row-cancel form input { margin: 0; padding: .25rem .5rem; font-size: .85rem; }
/* 導覽列的問題數 */
.nav-cnt { display: inline-block; background: var(--red); color: #fff; border-radius: 999px; font-size: .72rem; padding: 0 .45em; margin-left: .25rem; vertical-align: middle; font-weight: 700; }
/* 問題處理頁 */
/* 問題處理清單（2026-09-09 深夜美化）：列與列拉開、來源色條、問題文字框、資料區、動作區分開 */
article.issue-card { padding: 0; margin: 0 0 1.4rem; border: 1px solid #ddd; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
article.issue-card > header { padding: .7rem 1rem; margin: 0; display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; align-items: baseline; background: #f7f7f7; border-bottom: 1px solid #e6e6e6; }
article.issue-card.from-courier { border-left: 6px solid #c62828; }
article.issue-card.from-cs { border-left: 6px solid #1565c0; }
article.issue-card .badge.src { font-size: .8rem; }
article.issue-card .issue-text { font-weight: 700; color: #b71c1c; font-size: 1.1rem; margin: .8rem 1rem .6rem; padding: .6rem .8rem; background: #fdecea; border-radius: 8px; }
article.issue-card .issue-body { padding: 0 1rem .7rem; }
article.issue-card .issue-body .line { margin-top: .3rem; }
article.issue-card .issue-body .line small { display: inline-block; min-width: 2.4em; color: var(--pico-muted-color); margin-right: .3rem; }
article.issue-card > footer { padding: .7rem 1rem; margin: 0; background: #fafafa; border-top: 1px solid #e6e6e6; }
article.issue-card footer form { display: flex; gap: .4rem; margin: 0; }
article.issue-card footer form input { margin: 0; }
article.issue-card footer form button { width: auto; white-space: nowrap; }
article.issue-card .line { font-size: .9rem; margin-top: .15rem; }
article.issue-card .line small { color: var(--pico-muted-color); margin-right: .3rem; }
/* 外務頁：會員編號框、問題分頁、退件表單 */
.member-box { display: flex; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; background: var(--paper); border: 1px solid #ececec; border-left: 5px solid var(--red); border-radius: 8px; padding: .6rem .9rem; margin-bottom: .9rem; box-shadow: var(--pico-card-box-shadow); }
.member-box small { color: var(--pico-muted-color); margin-right: .35rem; font-size: .78rem; }
.member-box strong.big { font-size: 1.35rem; letter-spacing: .04em; font-family: 'Roboto', ui-monospace, Menlo, monospace; }
.tabs .tab.tab-issue { color: #c62828; border-color: #c62828; }
.tabs .tab.tab-issue.active { background: #c62828; color: #fff; }
details.report { margin-bottom: .6rem; }
fieldset.kinds { border: 0; padding: 0; margin: .3rem 0 .4rem; }
fieldset.kinds label { display: block; margin-bottom: .2rem; }
.big-btn.issue { background: #e65100; border-color: #e65100; font-size: 1.05rem; }
td.act details.row-cancel summary::after { display: none; }
td.act details.row-cancel form button { white-space: nowrap; }
/* ===== 美化第 2 輪（2026-09-09 晚） ===== */
/* 單據列表的列上取消：小一點、淡一點，展開時原因欄與按鈕排一列 */
td.act details.row-cancel summary[role=button] { padding: .2rem .6rem; font-size: .8rem; line-height: 1.4; border-color: #cfcfcf; color: var(--ink-2); background: #fff; }
td.act details.row-cancel[open] summary[role=button] { color: var(--red); border-color: var(--red); }
td.act details.row-cancel form { flex-direction: column; min-width: 13rem; }
td.act details.row-cancel form button { width: 100%; padding: .3rem .5rem; }
/* 外務明細：退件 / 失敗 的摺疊列做成一條淡框，手機上好點 */
/* 兩個回報區塊（2026-09-09 深夜美化）：標題＋灰色副標、選項做成兩欄 chip、按鈕短字、說明放按鈕下方 */
.courier-actions { display: grid; gap: .6rem; margin-top: .9rem; }
.courier-actions details { border: 1px solid #e4e4e4; border-radius: 10px; background: #fff; padding: .15rem .9rem; margin: 0; }
.courier-actions details[open] { padding-bottom: .85rem; border-color: #d9d9d9; }
.courier-actions details summary { display: flex; align-items: baseline; gap: .5rem; padding: .65rem 0; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.courier-actions details summary strong { font-size: 1rem; }
.courier-actions details summary small { font-weight: 400; font-size: .8rem; color: var(--pico-muted-color); }
.courier-actions .rp-return summary strong { color: #b71c1c; }
.courier-actions .rp-fail summary strong { color: #d84315; }
.courier-actions details[open] summary { border-bottom: 1px solid #eee; margin-bottom: .7rem; }
.courier-actions details form { margin: 0; }
.courier-actions details form input { margin-bottom: .6rem; }
.courier-actions details form .big-btn { font-size: 1.05rem; padding: .7rem; margin: 0; }
.courier-actions .hint { margin: .45rem 0 0; font-size: .82rem; color: var(--pico-muted-color); line-height: 1.4; }
fieldset.kinds.chips { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin: 0 0 .6rem; }
fieldset.kinds.chips label { display: flex; align-items: center; gap: .45rem; margin: 0; padding: .55rem .7rem; border: 1px solid #ddd; border-radius: 8px; background: #fafafa; font-size: .95rem; cursor: pointer; }
fieldset.kinds.chips label input { margin: 0; flex: 0 0 auto; }
fieldset.kinds.chips label:has(input:checked) { border-color: #b71c1c; background: #fdecea; color: #b71c1c; font-weight: 600; }
/* 只能查看的提示 */
.flash.view-only { border-color: #a5d6a7; }
/* 調度板群組標題與上一群的間距 */
.col h4.grp:first-of-type { margin-top: .4rem; }
/* ===== 拍照留存 / 拍照辨識（2026-09-09 晚） ===== */
.scan-photo { max-width: 480px; margin: 0 auto .8rem; text-align: center; }
.scan-photo label[role=button] { width: 100%; margin-bottom: .3rem; }
.scan-photo p.muted { margin: 0; font-size: .82rem; }
.reader-file { position: absolute; left: -9999px; top: 0; width: 1600px; height: 1600px; overflow: hidden; }
.photo-box { background: var(--paper); border: 1px solid #ececec; border-radius: 8px; padding: .7rem .9rem; margin-bottom: 1rem; box-shadow: var(--pico-card-box-shadow); }
.photo-box.need { border: 2px solid #e65100; background: #fff8f2; }
.photo-box .row { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.photo-box .cnt { display: inline-block; min-width: 1.5em; margin-left: .3rem; padding: 0 .35em; border-radius: 999px; font-size: .78rem; font-weight: 700; background: rgba(0,0,0,.08); text-align: center; }
.big-btn.photo { display: block; text-align: center; background: #e65100; border-color: #e65100; color: #fff; margin-bottom: .4rem; font-size: 1.05rem; padding: .7rem; border-radius: 10px; }   /* 大小同「送出退件 / 回報」按鈕（2026-09-09 深夜） */
.photo-box #photo-status:empty { display: none; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; margin-top: .5rem; }
.photo-grid a { display: block; position: relative; border-radius: 6px; overflow: hidden; background: #eee; }
.photo-grid img { width: 100%; height: 110px; object-fit: cover; display: block; }
.photo-grid a > span { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.55); color: #fff; font-size: .72rem; padding: .1rem .35rem; }
.photo-grid.staff { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.photo-grid.staff figure { margin: 0; }
.photo-grid.staff img { height: 160px; }
.photo-grid.staff figcaption { font-size: .78rem; color: var(--pico-muted-color); margin-top: .25rem; }
.photo-grid.staff details.del summary { display: inline; font-size: .78rem; color: #b71c1c; }
.photo-grid.staff details.del summary::after { display: none; }
.photo-grid.staff details.del form { margin: .25rem 0 0; }

/* 單據列表分頁（2026-09-09 深夜：每頁 20 筆） */
.pager { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: .35rem; margin: .75rem 0 1rem; }   /* Pico 的 nav 預設 space-between，這裡靠左排 */
.pager a, .pager span { display: inline-block; min-width: 2.2rem; padding: .3rem .6rem; text-align: center; border: 1px solid var(--pico-muted-border-color, #ddd); border-radius: 6px; text-decoration: none; font-size: .9rem; line-height: 1.2; }
.pager a:hover { border-color: var(--brand, #cc110b); color: var(--brand, #cc110b); }
.pager .cur { background: var(--brand, #cc110b); color: #fff; border-color: var(--brand, #cc110b); font-weight: 600; }
.pager .dis { color: #aaa; border-color: #eee; }
.pager small { margin-left: .5rem; border: 0; padding: 0; min-width: 0; }

/* 外務未取 / 未送清單：客服回報小提醒，點了展開細項（2026-09-09 深夜） */
.issue-hint { display: inline-block; font-size: .75rem; font-weight: 700; color: #b71c1c; background: #fdecea; border: 1px solid #f5c6cb; border-radius: 999px; padding: .05rem .55rem; margin-left: .2rem; cursor: pointer; vertical-align: middle; white-space: nowrap; line-height: 1.5; }
.issue-hint.open, .issue-hint:hover, .issue-hint:focus-visible { background: #b71c1c; color: #fff; border-color: #b71c1c; outline: none; }
.issue-pop { margin: .4rem 0 .2rem; padding: .5rem .7rem; border: 1px solid #f5c6cb; border-left: 4px solid #b71c1c; border-radius: 6px; background: #fff5f5; color: #7f1d1d; font-size: .9rem; cursor: default; }
.issue-pop .who { font-size: .8rem; color: #b71c1c; font-weight: 600; margin-bottom: .2rem; }
.issue-pop .pre { white-space: pre-wrap; font-weight: 600; }
.issue-pop small { display: block; margin-top: .3rem; font-weight: 400; }

/* 外務頁首：⚠ 問題 按鈕（取代原本的問題分頁）＋ 刷新（2026-09-09 深夜） */
.courier-top .title { display: flex; align-items: center; gap: .5rem; }
.courier-top .title h2 { margin: 0; }
.courier-top .refresh-btn { padding: .1rem .5rem; font-size: 1.05rem; line-height: 1.2; min-width: 2rem; }
.courier-top .tools { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.courier-top .tools a, .courier-top .tools button { margin: 0; white-space: nowrap; }
.issue-btn { background: #fff; color: #c62828; border: 1px solid #c62828; font-weight: 700; }
.issue-btn.active { background: #c62828; color: #fff; }
.issue-btn .cnt { display: inline-block; min-width: 1.5em; margin-left: .25rem; padding: 0 .35em; border-radius: 999px; font-size: .78rem; background: rgba(198,40,40,.12); }
.issue-btn { padding-left: .55rem; padding-right: .55rem; }
.issue-btn.active .cnt { background: rgba(255,255,255,.3); }
#refresh-btn.htmx-request { opacity: .5; pointer-events: none; }
.issue-panel h3 { color: #c62828; }
.issue-panel h3 small { display: block; font-size: .8rem; font-weight: 400; }

/* 外務單據明細：「回上頁」放在狀態 / 服務標籤旁（2026-09-09 深夜） */
.toolbar .badges { display: flex; flex: 1 1 auto; align-items: center; gap: .3rem; flex-wrap: wrap; }
.toolbar .badges .badge { font-size: .7rem; padding: .05rem .45rem; }   /* 單號後面的標籤小一點 */
.toolbar .badges .back-btn { margin-left: auto; font-size: .95rem; line-height: 1.2; padding: .1rem .3rem; white-space: nowrap; }   /* 「← 返回」一般連結（有底線，同掃碼找件頁的「← 回我的單」），固定靠右（2026-09-09 深夜使用者指定） */

/* 導覽列「⚠ N」問題清單（外務，2026-09-09 深夜）；問題清單頁右上「← 返回」 */
.nav a.nav-issue { color: #b0b0b0; font-weight: 700; display: inline-flex; align-items: center; gap: .15rem; }
.nav a.nav-issue .tri { font-size: 1.3rem; line-height: 1; }   /* 只放大三角形，數字圈圈維持原大小（之前整個連結縮 line-height 會把圈圈壓扁） */
.nav a.nav-issue .nav-cnt { line-height: 1.5; margin-left: 0; }
.nav a.nav-issue.has { color: #c62828; }
.nav a.nav-issue.active { color: #c62828; border-bottom-color: #c62828; }
.nav a.nav-issue .nav-cnt { background: #c62828; }
.courier-top > .back-btn { margin-left: auto; font-size: .95rem; white-space: nowrap; }

/* 內勤單據內容頁（2026-09-09 深夜美化）：標題區、四張資料卡（取件藍、送件綠）、各區塊卡片化 */
.od-head { margin-bottom: 1rem; }
.od-head .od-title { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.od-head h2 { margin: 0; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.od-head .od-back { white-space: nowrap; font-size: .95rem; }
.od-head .od-meta { margin: .4rem 0 0; color: var(--pico-muted-color); font-size: .88rem; }
.od-grid article { padding: 0; border: 1px solid #e4e4e4; border-radius: 10px; overflow: hidden; box-shadow: none; background: #fff; }
.od-grid article > header { padding: .55rem 1rem; margin: 0; background: #f5f5f5; border-bottom: 1px solid #e6e6e6; }
.od-grid article.pick > header { background: #e8f1fb; color: #0d47a1; }
.od-grid article.drop > header { background: #e9f5ea; color: #1b5e20; }
.od-grid article .kv { margin: 0; padding: .3rem 1rem .85rem; }
.od-grid .kv dt { margin-top: .55rem; }
.od-grid .kv dd { line-height: 1.5; }
.od-note { margin-top: 1rem; padding: .6rem .9rem; background: #fff8e1; border: 1px solid #ffe082; border-radius: 8px; }
.od-section { margin: 1rem 0 0; padding: .85rem 1rem 1rem; border: 1px solid #e4e4e4; border-radius: 10px; background: #fff; }
.od-section > h3 { font-size: 1.02rem; margin: 0 0 .7rem; padding-bottom: .45rem; border-bottom: 1px solid #eee; }
.od-section > h3 small { font-weight: 400; margin-left: .4rem; }
.od-section table.compact { margin-bottom: 0; }
.od-section table.compact tbody tr:nth-child(even) td { background: #fafafa; }
.od-section .grid { margin-bottom: 0; }

/* 內勤單據內容頁 第 1 輪：標題區、欄位左標籤、區塊圖示、照片格 */
.od-head { padding: .2rem 0 .9rem; border-bottom: 1px solid #e6e6e6; }
.od-head h2 { font-size: 1.55rem; padding-left: .65rem; border-left: 5px solid var(--red); line-height: 1.25; }
.od-head .od-back { margin: 0; }
.od-head .od-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: .55rem; font-size: .86rem; }
.od-head .od-meta b { font-weight: 600; color: var(--ink); }
.od-grid .kv { display: grid; grid-template-columns: 6.5em 1fr; column-gap: .7rem; row-gap: .35rem; align-items: baseline; padding: .7rem 1rem .85rem; }
.od-grid .kv dt { margin: 0; font-size: .8rem; }
.od-grid .kv dd { margin: 0; }
.od-grid .kv dd small { display: block; margin-top: .1rem; }
.od-section > h3 .ic { display: inline-block; margin-right: .4rem; font-size: .95em; opacity: .85; }
.photo-grid.staff figure { margin: 0; }
.photo-grid.staff img { border-radius: 8px; border: 1px solid #e4e4e4; }

/* 內勤單據內容頁 第 2 輪：問題回報卡片、操作區欄位標籤與按鈕列 */
.od-issue { margin: 0 0 .9rem; padding: .7rem .9rem .8rem; border: 1px solid #f5c6cb; border-left: 5px solid #c62828; border-radius: 8px; background: #fff7f7; }
.od-issue.from-cs { border-left-color: #1565c0; }
.od-issue-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.od-issue-head strong { color: #b71c1c; }
.od-issue-text { font-weight: 700; font-size: 1.05rem; color: #b71c1c; margin: .45rem 0 .3rem; }
.od-issue-hint { font-size: .85rem; margin: 0 0 .4rem; }
.od-inline { display: flex; gap: .5rem; margin: 0; }
.od-inline input { margin: 0; flex: 1 1 auto; }
.od-inline button { margin: 0; width: auto; white-space: nowrap; }
.od-assign { display: flex; gap: .7rem; align-items: flex-end; flex-wrap: wrap; margin: 0 0 .8rem; padding: .7rem .9rem; background: #f7f7f7; border-radius: 8px; }
.od-assign label { flex: 1 1 12rem; margin: 0; }
.od-assign label > span { display: block; font-size: .78rem; color: var(--pico-muted-color); margin-bottom: .2rem; }
.od-assign input.courier-in { margin: 0; width: 100%; }
.od-assign button { margin: 0; width: auto; white-space: nowrap; flex: 0 0 auto; }
.od-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-start; }
.od-actions a[role=button], .od-actions summary[role=button] { margin: 0; width: auto; }
.od-actions details.od-cancel { margin: 0; flex: 0 1 16rem; }
.od-actions details.od-cancel[open] { flex-basis: 100%; }
.od-actions details.od-cancel form { margin-top: .5rem; }
[role=button].danger, button.danger { color: #c62828; border-color: #c62828; background: #fff; }
button.danger { background: #c62828; color: #fff; }

/* 內勤單據內容頁 第 3 輪：事件紀錄標籤化、間距、手機版 */
.od-events td.t { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--pico-muted-color); font-size: .86rem; }
.od-events td.who { white-space: nowrap; color: #555; }
.od-events .ev { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: #eee; color: #444; white-space: nowrap; }
.od-events .ev-created { background: #e8eaf6; color: #283593; }
.od-events .ev-assigned, .od-events .ev-assigned_delivery, .od-events .ev-reassigned, .od-events .ev-accepted { background: #e3f2fd; color: #0d47a1; }
.od-events .ev-picked_up { background: #f3e5f5; color: #6a1b9a; }
.od-events .ev-delivered, .od-events .ev-issue_resolved { background: #e8f5e9; color: #1b5e20; }
.od-events .ev-failed, .od-events .ev-cancelled { background: #fdecea; color: #b71c1c; }
.od-events .ev-issue { background: #fff3e0; color: #e65100; }
.od-events .ev-scanned, .od-events .ev-photo, .od-events .ev-photo_deleted, .od-events .ev-edited { background: #eceff1; color: #37474f; }
.od-events tbody tr:hover td { background: #fff8e1; }
.od-head h2 .badge { font-size: .82rem; }
.od-section { margin-top: 1.1rem; }
.photo-grid.staff figcaption { font-size: .8rem; line-height: 1.4; }
@media (max-width: 700px) {
  .od-grid .kv { grid-template-columns: 5.5em 1fr; }
  .od-head h2 { font-size: 1.3rem; }
  .od-assign { flex-direction: column; align-items: stretch; }
  .od-assign button { width: 100%; }
}

/* 單據列表 第 1 輪：篩選卡片、摘要列 */
.ol-filters { display: grid; grid-template-columns: minmax(16rem, 2.2fr) 1.3fr .9fr .9fr auto; gap: .5rem; align-items: center; margin: 0 0 .6rem; padding: .6rem .7rem; background: #f6f6f6; border: 1px solid #e6e6e6; border-radius: 10px; }
.ol-filters input, .ol-filters select { margin: 0; font-size: .92rem; padding: .45rem .7rem; }
.ol-filters select { padding-right: 2rem; }
.ol-filters button { margin: 0; width: auto; padding: .45rem 1.3rem; white-space: nowrap; }
@media (max-width: 900px) { .ol-filters { grid-template-columns: 1fr 1fr; } .ol-filters .ol-q { grid-column: 1 / -1; } }
.ol-summary { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 .6rem; font-size: .88rem; color: var(--pico-muted-color); }
.ol-summary .cnt b { color: var(--ink); font-size: 1rem; }
.ol-summary .links { display: flex; gap: .35rem; flex-wrap: wrap; }
.ol-summary .links a { display: inline-block; padding: .15rem .65rem; border: 1px solid #d9d9d9; border-radius: 999px; background: #fff; color: var(--ink-2); text-decoration: none; font-size: .82rem; }
.ol-summary .links a:hover { border-color: var(--red); color: var(--red); }
.ol-summary .links a.on { background: var(--red); border-color: var(--red); color: #fff; }

/* 單據列表 第 2 輪：表格 */
.table-card { border: 1px solid #e6e6e6; box-shadow: none; padding: 0; border-radius: 10px; }
.ol-table { margin: 0; }
.ol-table thead th { position: sticky; top: 0; z-index: 2; background: #f3f3f3; font-size: .8rem; letter-spacing: .02em; color: #555; border-bottom: 2px solid #e0e0e0; padding: .55rem .6rem; }
.ol-table td { padding: .55rem .6rem; font-size: .88rem; line-height: 1.45; border-bottom: 1px solid #efefef; }
.ol-table tbody tr:nth-child(even) td { background: #fafafa; }
.ol-table tbody tr:hover td { background: #fff8e1; }
.ol-table td:first-child { white-space: nowrap; }
.ol-table td:first-child a { font-weight: 700; }
.ol-table tr[data-flags~="issue"] td:first-child { box-shadow: inset 4px 0 0 #c62828; }
.ol-table tr[data-flags~="cancelled"] td { color: #999; }
.ol-table tr[data-flags~="cancelled"] td:first-child a { color: #999; font-weight: 500; }
.ol-table .badge.mini { font-size: .68rem; padding: 0 .4rem; vertical-align: 1px; }
.ol-table .addr { display: block; max-width: 17rem; line-height: 1.35; margin-top: .1rem; }
.ol-table td.two { white-space: nowrap; }
.ol-table .lb { display: inline-block; width: 1.5em; text-align: center; font-size: .72rem; line-height: 1.5; background: #ececec; color: #555; border-radius: 4px; margin-right: .35rem; }
/* 單據列表 第 3 輪：來源標籤、時間等寬、空狀態、取消鈕 */
.ol-table td.t { white-space: nowrap; font-variant-numeric: tabular-nums; color: #555; }
.ol-table .src { display: inline-block; font-size: .74rem; padding: .05rem .45rem; border-radius: 4px; background: #eceff1; color: #37474f; white-space: nowrap; }
.ol-table td.empty { text-align: center; padding: 2.2rem 1rem; color: var(--pico-muted-color); font-size: 1rem; background: #fff; }
.ol-table td.empty small { display: block; margin-top: .3rem; font-size: .82rem; }
.ol-table td.act details.row-cancel summary[role=button] { padding: .15rem .55rem; font-size: .76rem; border-radius: 6px; }

/* 問題處理串（2026-09-09 深夜使用者：問題處理會多次來回，只有「標記已處理」不夠）：客服「加入處理紀錄」/ 外務「補充回報」都留在同一條串，結案才消失 */
.ithread { list-style: none; margin: .6rem 1rem .4rem; padding: 0; }
.ithread .it { padding: .45rem .7rem; border-left: 3px solid #bbb; margin-bottom: .35rem; background: #fafafa; border-radius: 0 6px 6px 0; }
.ithread .it-cs { border-left-color: #1565c0; }
.ithread .it-courier { border-left-color: #c62828; }
.ithread .it-done { border-left-color: #2e7d32; }
.ithread .it.latest { background: #fff; border: 1px solid #e0e0e0; border-left-width: 4px; }
.ithread .it.latest.it-cs { border-left-color: #1565c0; }
.ithread .it.latest.it-courier { border-left-color: #c62828; }
.ithread .it.latest.it-done { border-left-color: #2e7d32; }
.ithread .it.latest .it-text { font-weight: 700; font-size: 1.05rem; }
.ithread .it-courier.latest .it-text { color: #b71c1c; }
.ithread .it-cs.latest .it-text { color: #0d47a1; }
.ithread .it-done.latest .it-text { color: #1b5e20; }
.ithread .it-head { display: flex; gap: .5rem; align-items: baseline; font-size: .82rem; color: var(--pico-muted-color); flex-wrap: wrap; }
.ithread .it-head b { color: #333; }
.ithread .it-tag { font-weight: 700; padding: 0 .45rem; border-radius: 999px; background: #eee; color: #444; font-size: .75rem; }
.ithread .it-cs .it-tag { background: #e3f2fd; color: #0d47a1; }
.ithread .it-courier .it-tag { background: #fdecea; color: #b71c1c; }
.ithread .it-done .it-tag { background: #e8f5e9; color: #1b5e20; }
.ithread .it-text { white-space: pre-wrap; margin-top: .1rem; }
article.issue-card footer form.ithread-form { flex-wrap: wrap; }
article.issue-card footer form.ithread-form input { flex: 1 1 16rem; }
article.issue-card.done { border-left: 6px solid #2e7d32; margin-bottom: .8rem; }
article.issue-card.done .ithread { margin-top: .3rem; }
details.resolved-today { margin-top: 1.6rem; }
details.resolved-today > summary { font-weight: 700; font-size: 1.05rem; padding: .4rem 0; }
details.resolved-today > summary small { font-weight: 400; margin-left: .5rem; }
details.thread { margin: .3rem 0 0; }
details.thread summary { font-size: .88rem; color: var(--pico-muted-color); }
.od-issue .ithread { margin-left: 0; margin-right: 0; }
.od-issue form.od-inline.ithread-form { flex-wrap: wrap; }
.od-issue form.od-inline.ithread-form input { flex: 1 1 16rem; }
.od-events .ev-issue_note { background: #fff8e1; color: #8d6e00; }
/* 外務端：卡片提醒展開時看得到客服回覆；單裡有問題開著就顯示整串＋補充回報 */
.issue-pop .reply { margin-top: .35rem; padding-top: .3rem; border-top: 1px dashed #f5c6cb; font-weight: 400; color: #333; }
.issue-pop .reply b { color: #0d47a1; }
.issue-pop .reply b.courier { color: #b71c1c; }
.issue-pop .reply .pre { display: inline; font-weight: 400; }
.flash.issue-box .ithread { margin: .5rem 0 0; }
.flash.issue-box .ithread .it { background: #fff; }
.flash.issue-box .ithread .it.latest .it-text { font-size: 1rem; }
.flash.issue-box form.note { display: flex; gap: .4rem; margin: .5rem 0 0; }
.flash.issue-box form.note input { margin: 0; }
.flash.issue-box form.note button { width: auto; white-space: nowrap; margin: 0; }
.flash.issue-box form.withdraw { margin: .4rem 0 0; }
.flash.issue-box form.withdraw button { width: auto; margin: 0; }

/* 客戶叫件頁：次日切換提示（2026-09-10 16:30 起） */
dialog.nd-notice article { border: 2px solid #cc110b; border-radius: 12px; max-width: 30rem; margin: auto; padding: 1.2rem 1.4rem 1rem; }
dialog.nd-notice h3 { margin: 0 0 .6rem; color: #b71c1c; font-size: 1.2rem; }
dialog.nd-notice p { font-size: 1.05rem; line-height: 1.7; margin-bottom: .9rem; }
dialog.nd-notice footer { background: none; border: 0; padding: 0; margin: 0; text-align: right; }
dialog.nd-notice footer form { margin: 0; }
dialog.nd-notice button { width: auto; margin: 0; }