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

/* 收起來時只有一行摘要;點整列展開 */
.cu-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; }
.cu-toggle .ic { flex: 0 0 auto; width: 1.25em; height: 1.25em; margin-right: 8px; color: #b34700; }
.cu-title { flex: 0 0 auto; margin: 2px 12px 2px 0; font-size: 18px; font-weight: 800; color: #b34700; }
.cu-sum { flex: 1 1 220px; min-width: 0; margin: 2px 8px 2px 0; font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.cu-sum b { font-weight: 800; }
.cu-sum b.red, .cu-red { color: #c92a2a; }
.cu-sum b.green, .cu-green { color: #2b8a3e; }
.cu-sum b.amber, .cu-amber { color: #d9480f; }
.cu-chev { flex: 0 0 auto; margin-left: auto; font-size: 13.5px; font-weight: 700; color: #14539a; white-space: nowrap; }
.cu-body { padding: 0 16px 14px; border-top: 1px solid var(--line); }
.cu-body[hidden] { display: none; }
.cu-note { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.cu-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; }
.cu-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; }
.cu-empty { margin: 14px 0 4px; padding: 18px 10px; text-align: center; color: var(--muted); font-size: 14.5px; line-height: 1.6; }

/* 上面:期間與篩選 */
.cu-ctl { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #f8f9fb; }
.cu-row { display: flex; flex-wrap: wrap; align-items: center; margin: 0; }
.cu-row + .cu-row { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.cu-lbl { flex: 0 0 auto; margin: 0 10px 4px 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.cu-seg { display: flex; flex-wrap: wrap; margin: 0 10px 4px 0; }
.cu-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; }
.cu-seg > button.on { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }
.cu-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%; }
.cu-ctl button.sm { margin: 0 6px 4px 0; }
.cu-acts-list { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.cu-act { display: flex; align-items: center; margin: 0 8px 6px 0; padding: 6px 12px; min-height: 40px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 14px; cursor: pointer; max-width: 100%; }
.cu-act.on { border-color: #b2f2bb; background: #ebfbee; }
.cu-act input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0 8px 0 0; }
.cu-act .cu-act-t { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cu-act .cu-act-n { flex: 0 0 auto; margin-left: 6px; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.cu-act .cu-act-k { flex: 0 0 auto; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #eef1f5; color: #495057; font-size: 11.5px; white-space: nowrap; }

/* 中間:各店表(寬螢幕一列到底;窄螢幕每店一張卡) */
.cu-rows { margin-top: 14px; }
.cu-hdr, .cu-store { display: flex; flex-wrap: wrap; align-items: center; }
.cu-hdr { padding: 0 10px 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); border-bottom: 2px solid var(--ink); }
.cu-store { margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: #fbfcfd; }
.cu-store.total { background: #fff4e6; border-color: #ffd8a8; font-weight: 800; }
.cu-name { flex: 1 1 130px; min-width: 0; font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.cu-name .cu-sub { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.cu-num { flex: 0 0 86px; margin-left: 6px; text-align: right; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cu-num small { font-size: 12.5px; font-weight: 600; }
.cu-hdr .cu-num { font-size: 12.5px; font-weight: 700; }
.cu-owe { flex-basis: 112px; }
.cu-owe.red { color: #c92a2a; } .cu-owe.green { color: #2b8a3e; } .cu-owe.amber { color: #d9480f; } .cu-owe.none { color: var(--muted); font-weight: 400; }
.cu-btns { flex: 0 0 410px; display: flex; flex-wrap: wrap; justify-content: flex-end; margin-left: 10px; }
.cu-btns > button { margin: 2px 0 2px 6px; white-space: nowrap; }
.cu-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; }
.cu-chip.check { background: #fff4e6; color: #d9480f; }
.cu-chip.info { background: #e9ecef; color: #495057; }
.cu-chip.done { background: #ebfbee; color: #2b8a3e; }
.cu-chip.part { background: #fff4e6; color: #d9480f; }
.cu-chip.owed { background: #ffe3e3; color: #c92a2a; }

/* 每家店展開:傳給分店的說明 + 逐筆明細 */
.cu-detail { flex: 1 1 100%; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-weight: 400; }
.cu-detail[hidden] { display: none; }
.cu-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; }
.cu-dh { margin: 12px 0 2px; font-size: 13.5px; font-weight: 800; color: #14539a; }
.cu-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; }
.cu-drow.owed { border-left-color: #e03131; }
.cu-drow.part { border-left-color: #f08c00; }
.cu-drow.done { border-left-color: #2f9e44; }
.cu-d-when { flex: 0 0 auto; margin-right: 12px; font-size: 14.5px; font-weight: 800; white-space: nowrap; }
.cu-d-main { flex: 1 1 200px; min-width: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.cu-d-main .cu-sub { display: block; font-size: 12.5px; color: var(--muted); }
.cu-d-state { flex: 0 0 auto; margin-left: auto; padding-left: 8px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.cu-d-flag { flex: 1 1 100%; margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: #7c5b00; }
.cu-d-flag.check { color: #c2410c; font-weight: 700; }

/* 其他券使用(參考) */
.cu-sec { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--line); }
.cu-sec > summary { padding: 6px 0; font-size: 15px; font-weight: 800; color: #14539a; cursor: pointer; }
.cu-sec > h4 { margin: 0 0 6px; font-size: 15px; font-weight: 800; color: #14539a; }
.cu-orow { display: flex; flex-wrap: wrap; align-items: center; padding: 7px 0; border-bottom: 1px dashed #edf0f4; font-size: 14px; }
.cu-orow .cu-o-n { flex: 1 1 160px; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.cu-orow .cu-o-v { flex: 0 0 auto; margin-left: 12px; font-variant-numeric: tabular-nums; }
.cu-orow .cu-o-s { flex: 1 1 100%; font-size: 12.5px; color: var(--muted); }

/* 下面:補貨記錄 */
.cu-lrow { display: flex; flex-wrap: wrap; align-items: center; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.cu-lrow.void { background: #f8f9fa; color: #868e96; }
.cu-lrow.void .cu-l-main { text-decoration: line-through; }
.cu-lrow.old { background: #f8f9fa; color: #868e96; }
.cu-l-when { flex: 0 0 auto; margin-right: 10px; font-weight: 800; white-space: nowrap; }
.cu-l-main { flex: 1 1 200px; min-width: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.cu-l-main .cu-sub { display: block; font-size: 12.5px; color: var(--muted); text-decoration: none; }
.cu-lrow .cu-l-act { flex: 0 0 auto; margin-left: 8px; }
.cu-l-why { flex: 1 1 100%; margin-top: 4px; font-size: 12.5px; color: #868e96; }
.cu-out { display: flex; flex-wrap: wrap; margin-top: 12px; }
.cu-out > button, .cu-out > a { margin: 0 8px 6px 0; }
.cu-more { margin-top: 8px; }

@media (max-width: 1100px) {
  .cu-hdr { display: none; }
  .cu-name { flex: 1 1 100%; margin-bottom: 2px; }
  .cu-num { flex: 1 1 22%; min-width: 64px; margin: 6px 6px 0 0; text-align: left; }
  .cu-num::before { content: attr(data-l); display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); }
  .cu-owe { flex-basis: 30%; }
  .cu-btns { flex: 1 1 100%; margin: 8px 0 0; justify-content: flex-start; }
  .cu-btns:empty { display: none; }
  .cu-btns > button { flex: 1 1 auto; margin: 4px 6px 0 0; }
  .cu-body { padding-left: 12px; padding-right: 12px; }
  .cu-d-state { flex: 1 1 100%; margin-left: 0; padding-left: 0; margin-top: 2px; }
}
@media (max-width: 480px) {
  .cu-title { font-size: 16.5px; }
  .cu-num { font-size: 16px; }
}