/* 總部頁「會員登錄統計」卡(public/claim-stats.js;伺服器 server/routes/claim-stats.js)
 * 獨立成檔,只用 .cs- 開頭的 class,不動 app.css。商米舊 WebView 的守則同 app.css:
 * 橫排用 margin 隔開、不靠 flex gap;不用 grid、:has()、:is()、min()、clamp()。 */
.cs-card { padding: 0; }
.cs-card[hidden] { display: none; }
.cs-card.open { padding-bottom: 4px; }

/* 收起來時只有一行摘要;點整列展開 */
.cs-toggle { display: flex; flex-wrap: wrap; align-items: center; width: 100%; min-height: 54px; padding: 10px 16px; margin: 0; border: 0; border-radius: var(--radius);
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cs-toggle .ic { flex: 0 0 auto; width: 1.25em; height: 1.25em; margin-right: 8px; color: #2b8a3e; }
.cs-title { flex: 0 0 auto; margin: 2px 12px 2px 0; font-size: 18px; font-weight: 800; color: #2b8a3e; }
.cs-sum { flex: 1 1 220px; min-width: 0; margin: 2px 8px 2px 0; font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.cs-sum b { font-weight: 800; color: #2b8a3e; }
.cs-chev { flex: 0 0 auto; margin-left: auto; font-size: 13.5px; font-weight: 700; color: #14539a; white-space: nowrap; }
.cs-body { padding: 0 16px 14px; border-top: 1px solid var(--line); }
.cs-body[hidden] { display: none; }
.cs-note { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.cs-warn { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; border: 1px solid #ffc9c9; background: #fff5f5; color: #c92a2a; font-size: 13.5px; line-height: 1.5; }
.cs-info { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; border: 1px solid #ffe066; background: #fff9db; color: #7c5b00; font-size: 13.5px; line-height: 1.5; }
.cs-empty { margin: 14px 0 4px; padding: 18px 10px; text-align: center; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.cs-red, .cs-body b.red { color: #c92a2a; }

/* 上面:期間 */
.cs-ctl { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #f8f9fb; }
.cs-row { display: flex; flex-wrap: wrap; align-items: center; margin: 0; }
.cs-lbl { flex: 0 0 auto; margin: 0 10px 4px 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.cs-seg { display: flex; flex-wrap: wrap; margin: 0 10px 4px 0; }
.cs-seg > button { min-height: 40px; margin: 0 6px 4px 0; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 14px; }
.cs-seg > button.on { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }
.cs-seg.cs-seg-s > button { min-height: 34px; padding: 4px 12px; font-size: 13px; }
.cs-custom { display: flex; flex-wrap: wrap; align-items: center; }
.cs-ctl input[type="date"] { min-height: 40px; margin: 0 6px 4px 0; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); font-size: 15px; background: #fff; max-width: 100%; }
.cs-ctl button.sm { margin: 0 6px 4px 0; }

/* 數字總覽 */
.cs-kpis { display: flex; flex-wrap: wrap; margin: 12px -4px 0; }
.cs-kpi { flex: 1 1 150px; min-width: 130px; margin: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fbfcfd; }
.cs-kpi-l { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.cs-kpi-v { margin-top: 2px; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cs-kpi-s { margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
/* 可點的數字卡(點了看是哪幾張單):整張卡是按鈕,右下角寫「看是哪幾張單 ›」 */
.cs-kpi-go { cursor: pointer; -webkit-tap-highlight-color: rgba(232, 89, 12, .15); }
.cs-kpi-go:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(0, 0, 0, .1); }
.cs-kpi-go:active { background: #fff3e8; }
.cs-kpi-go:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.cs-kpi-h { margin-top: 6px; text-align: right; font-size: 12px; font-weight: 700; color: var(--accent); line-height: 1.3; }
.cs-kpi.green .cs-kpi-v { color: #2b8a3e; }
.cs-kpi.amber .cs-kpi-v { color: #d9480f; }
.cs-kpi.red .cs-kpi-v { color: #c92a2a; }

/* 中間:各店表(寬螢幕一列到底;窄螢幕每店一張卡) */
.cs-rows { margin-top: 14px; }
.cs-hdr, .cs-store { display: flex; flex-wrap: wrap; align-items: center; }
.cs-hdr { padding: 0 10px 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); border-bottom: 2px solid var(--ink); }
.cs-store { margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: #fbfcfd; }
.cs-store.total { background: #ebfbee; border-color: #b2f2bb; font-weight: 800; }
.cs-store.cs-blank { background: #f8f9fa; }   /* 不叫 .empty:app.css 有全站通用的 .empty(置中、上下留白 36px) */
.cs-name { flex: 1 1 150px; min-width: 0; font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.cs-name .cs-sub { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.cs-num { flex: 0 0 70px; margin-left: 6px; text-align: right; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cs-num.cs-wide { flex-basis: 96px; }
.cs-num.cs-strong { color: #2b8a3e; font-size: 18px; }
.cs-num.cs-none { color: var(--muted); font-weight: 400; }
.cs-hdr .cs-num { font-size: 12.5px; font-weight: 700; }
.cs-empty-line { flex: 1 1 260px; min-width: 0; margin-left: 10px; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.cs-btns { flex: 0 0 250px; display: flex; flex-wrap: wrap; justify-content: flex-end; margin-left: 10px; }
.cs-btns > button { margin: 2px 0 2px 6px; white-space: nowrap; }
.cs-chip { display: inline-block; margin: 0 0 0 6px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; vertical-align: 1px; white-space: nowrap; }
.cs-chip.on { background: #ebfbee; color: #2b8a3e; }
.cs-chip.off { background: #fff4e6; color: #d9480f; }
.cs-chip.check { background: #fff4e6; color: #d9480f; }
.cs-chip.new { background: #e7f5ff; color: #1864ab; }
.cs-chip.st-claimed { background: #ebfbee; color: #2b8a3e; }
.cs-chip.st-open { background: #fff9db; color: #7c5b00; }
.cs-chip.st-expired { background: #ffe3e3; color: #c92a2a; }
.cs-chip.st-unsure { background: #e7f0ff; color: #1c5bb8; }

/* 每家店展開:傳給店長的說明 + 逐張單 */
.cs-detail { flex: 1 1 100%; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-weight: 400; }
.cs-detail[hidden] { display: none; }
.cs-msg { padding: 10px 12px; border: 1px solid #b2f2bb; border-radius: 10px; background: #f4fcf6; font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.cs-dh { margin: 12px 0 4px; font-size: 13.5px; font-weight: 800; color: #14539a; }
.cs-drow { display: flex; flex-wrap: wrap; align-items: center; margin: 6px 0 0; padding: 8px 10px; border-left: 4px solid #ced4da; border-radius: 6px; background: #fff; border-top: 1px solid #eef1f5; border-right: 1px solid #eef1f5; border-bottom: 1px solid #eef1f5; }
.cs-drow.claimed { border-left-color: #2f9e44; }
.cs-drow.open { border-left-color: #f08c00; }
.cs-drow.expired { border-left-color: #e03131; }
.cs-drow.unsure { border-left-color: #4c8dff; }
.cs-d-when { flex: 0 0 auto; margin-right: 12px; font-size: 14px; font-weight: 800; white-space: nowrap; }
.cs-d-main { flex: 1 1 200px; min-width: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.cs-d-main .cs-sub, .cs-d-main .cs-d-who { display: block; font-size: 12.5px; color: var(--muted); }
.cs-d-main .cs-d-who { color: var(--ink); font-size: 13.5px; }
.cs-d-state { flex: 0 0 auto; margin-left: auto; padding-left: 8px; white-space: nowrap; }
.cs-d-flag { flex: 1 1 100%; margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: #7c5b00; }
.cs-d-flag.check { color: #c2410c; font-weight: 700; }
.cs-more { margin-top: 8px; }

/* 區塊:趨勢、各會員、參考、匯出 */
.cs-sec { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--line); }
.cs-sec > summary { padding: 6px 0; font-size: 15px; font-weight: 800; color: #14539a; cursor: pointer; }
.cs-sec > h4 { margin: 0 0 6px; font-size: 15px; font-weight: 800; color: #14539a; }
.cs-trow { display: flex; align-items: center; margin: 3px 0; font-size: 13px; }
.cs-trow.none { color: var(--muted); }
.cs-t-d { flex: 0 0 44px; font-variant-numeric: tabular-nums; }
.cs-t-bar { position: relative; flex: 1 1 auto; min-width: 40px; height: 14px; margin: 0 8px; border-radius: 4px; background: #f1f3f5; overflow: hidden; }
.cs-t-all { position: absolute; left: 0; top: 0; bottom: 0; background: #ced4da; }
.cs-t-got { position: absolute; left: 0; top: 0; bottom: 0; background: #2f9e44; }
.cs-t-n { flex: 0 0 112px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-mctl { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.cs-msearch { flex: 1 1 180px; min-width: 0; min-height: 40px; margin: 0 0 4px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; background: #fff; }
.cs-mem { margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.cs-mem.open { border-color: #a5d8ff; }
.cs-mem-h { display: flex; flex-wrap: wrap; align-items: center; width: 100%; min-height: 48px; margin: 0; padding: 8px 10px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cs-m-name { flex: 1 1 140px; min-width: 0; font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.cs-m-name .cs-sub { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; color: var(--muted); }
.cs-m-n { flex: 0 0 74px; margin-left: 6px; text-align: right; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.cs-m-n.cs-m-amt { flex-basis: 92px; font-weight: 800; }
.cs-m-n.cs-m-last { flex-basis: 92px; color: var(--muted); font-size: 13px; }
.cs-m-chev { flex: 0 0 22px; margin-left: 6px; text-align: center; color: #14539a; }
.cs-mem-d { padding: 4px 10px 8px; border-top: 1px dashed var(--line); }
.cs-mo { display: flex; flex-wrap: wrap; align-items: baseline; padding: 4px 0; font-size: 13.5px; border-bottom: 1px dashed #edf0f4; }
.cs-mo:last-child { border-bottom: 0; }
.cs-mo-d { flex: 0 0 44px; font-weight: 700; }
.cs-mo-s { flex: 1 1 70px; min-width: 0; overflow-wrap: anywhere; }
.cs-mo-n { flex: 0 0 64px; color: var(--muted); }
.cs-mo-a { flex: 0 0 64px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.cs-mo-t { flex: 0 0 auto; margin-left: 10px; font-size: 12px; color: var(--muted); }
.cs-ref { margin-top: 14px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; background: #f8f9fa; font-size: 13.5px; line-height: 1.7; color: #495057; overflow-wrap: anywhere; }
.cs-out { display: flex; flex-wrap: wrap; margin-top: 4px; }
.cs-out > button { margin: 0 8px 6px 0; }

@media (max-width: 1100px) {
  .cs-hdr { display: none; }
  .cs-name { flex: 1 1 100%; margin-bottom: 2px; }
  .cs-num, .cs-num.cs-wide { flex: 1 1 28%; min-width: 72px; margin: 6px 6px 0 0; text-align: left; }
  .cs-num::before { content: attr(data-l); display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); }
  .cs-empty-line { margin: 4px 0 0; }
  .cs-btns { flex: 1 1 100%; margin: 8px 0 0; justify-content: flex-start; }
  .cs-btns > button { flex: 1 1 auto; margin: 4px 6px 0 0; }
  .cs-body { padding-left: 12px; padding-right: 12px; }
  .cs-d-state { flex: 1 1 100%; margin-left: 0; padding-left: 0; margin-top: 2px; }
  .cs-m-n { flex: 1 1 28%; margin: 4px 6px 0 0; text-align: left; }
  .cs-m-n::before { content: attr(data-l); display: block; font-size: 11px; font-weight: 600; color: var(--muted); }
  .cs-m-chev { flex: 0 0 22px; margin-left: auto; }
}
@media (max-width: 480px) {
  .cs-title { font-size: 16.5px; }
  .cs-kpi { flex-basis: 44%; min-width: 120px; }
  .cs-kpi-v { font-size: 19px; }
  .cs-t-n { flex-basis: 96px; font-size: 12px; }
  .cs-mo-t { flex: 1 1 100%; margin-left: 0; }
}