.material-receipt-page .groups-layout{display:grid;grid-template-columns:1fr;gap:24px}
.material-receipt-page .groups-card{width:100%;min-width:0}
.material-receipt-page .receipt-filter-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(140px,180px) minmax(140px,180px) auto;gap:12px;align-items:end}
.material-receipt-page .receipt-filter-row>div{min-width:0}
.material-receipt-page .receipt-filter-row label{display:block}
.material-receipt-page .receipt-filter-row button{width:auto;min-height:44px}
.material-receipt-page .groups-search-actions{margin-top:10px}
.material-receipt-page .receipt-customer-list{display:grid;gap:0;margin-top:0}
.material-receipt-page .receipt-customer-list:focus-visible{outline:3px solid color-mix(in srgb,var(--g-brand-light) 55%,transparent);outline-offset:4px}
/* UI-078：客戶清單由三行卡片改為緊湊單列（radio｜客戶名稱｜編號／類型｜負責擔當｜管轄區｜服務狀態），
   與 #customer-id-head 的裝飾表頭共用同一組 grid-template-columns 才能對齊。表頭以 aria-hidden 裝飾，
   每個 radio 自帶完整 aria-label，不倚賴視覺表頭傳遞資訊。 */
.material-receipt-page .receipt-customer-option.receipt-customer-row{display:grid;grid-template-columns:22px minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 96px;gap:10px;align-items:center;padding:9px 12px;border-radius:0;cursor:pointer}
.material-receipt-page .receipt-customer-option.receipt-customer-row+.receipt-customer-option.receipt-customer-row{border-top:1px solid var(--g-border)}
.material-receipt-page .receipt-customer-option.receipt-customer-row:first-child{border-radius:12px 12px 0 0}
.material-receipt-page .receipt-customer-option.receipt-customer-row:last-child{border-radius:0 0 12px 12px}
.material-receipt-page .receipt-customer-option.receipt-customer-row:only-child{border-radius:12px}
.material-receipt-page .receipt-customer-row-copy{display:contents}
.material-receipt-page .receipt-customer-option:hover{border-color:var(--g-accent);background:var(--g-surface)}
.material-receipt-page .receipt-customer-option:has(input:checked){border-color:var(--g-accent);background:var(--g-surface);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--g-accent) 18%,transparent)}
.material-receipt-page .receipt-customer-option input{appearance:auto;flex:0 0 auto;width:18px;height:18px;margin:0}
.material-receipt-page .receipt-customer-option strong,.material-receipt-page .receipt-customer-option small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.material-receipt-page .receipt-customer-option strong{font-size:.92rem}
.material-receipt-page .receipt-customer-option small{margin-top:0;font-size:.8rem;color:var(--g-muted)}
.material-receipt-page .receipt-customer-option .service-status-badge{margin-top:0;justify-self:start}
/* 欄位表頭：置於 radiogroup 之外，aria-hidden 裝飾用，grid 必須與資料列一致。 */
.material-receipt-page .receipt-customer-head{display:grid;grid-template-columns:22px minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 96px;gap:10px;align-items:center;padding:7px 12px;margin-top:10px;border:1px solid var(--g-border);border-bottom:0;border-radius:12px 12px 0 0;background:var(--g-surface);font-size:.76rem;font-weight:800;color:var(--g-muted)}
.material-receipt-page .receipt-customer-head+.receipt-customer-list .receipt-customer-option.receipt-customer-row:first-child{border-radius:0}
.material-receipt-page .receipt-contract-list{display:grid;gap:10px;margin-top:10px;max-height:420px;overflow:auto}
.material-receipt-page .receipt-contract-option{display:flex;align-items:flex-start;gap:12px;padding:15px;border:1px solid var(--g-border);border-radius:12px;background:#fff;cursor:pointer}
.material-receipt-page .receipt-contract-option:hover,.material-receipt-page .receipt-contract-option:has(input:checked){border-color:var(--g-accent);background:var(--g-surface);box-shadow:0 0 0 2px color-mix(in srgb,var(--g-accent) 18%,transparent)}
.material-receipt-page .receipt-contract-option input{appearance:auto;flex:0 0 auto;width:18px;height:18px;margin:2px 0 0}
.material-receipt-page .receipt-contract-option strong,.material-receipt-page .receipt-contract-option small{display:block}
.material-receipt-page .receipt-contract-option small{margin-top:4px;color:var(--g-muted)}
.material-receipt-page .receipt-context{margin:18px 0 22px;padding:16px 18px;border:1px solid var(--g-border);border-radius:14px;background:var(--g-surface)}
.material-receipt-page .receipt-context h3{margin:0 0 12px}
.material-receipt-page .receipt-context dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.material-receipt-page .receipt-context dl>div{min-width:0;padding:12px;border-radius:10px;background:#fff}
.material-receipt-page .receipt-context dt{font-size:.9rem;color:var(--g-muted);font-weight:700}
.material-receipt-page .receipt-context dd{margin:4px 0 0;font-weight:800;overflow-wrap:anywhere}
.material-receipt-page .service-status-badge{display:inline-flex;align-items:center;width:max-content;margin-top:7px;padding:3px 8px;border-radius:999px;font-size:.85rem;font-weight:700}
.material-receipt-page .service-status-badge.is-contracting{color:#166534;background:#dcfce7}
.material-receipt-page .service-status-badge.is-paused{color:#92400e;background:#fef3c7}
.material-receipt-page .service-status-badge.is-terminated{color:#991b1b;background:#fee2e2}
.material-receipt-page .service-status-badge.is-unset{color:var(--g-muted);background:var(--g-surface)}
.material-receipt-page #receipt-form{max-width:none}
.material-receipt-page #receipt-submit-hint{margin:8px 0 0}.material-receipt-page #receipt-submit-hint[data-tone="warning"]{color:#9a670e}.material-receipt-page #receipt-submit-hint[data-tone="success"]{color:#16734d;font-weight:700}.material-receipt-page .receipt-selection-link{display:inline-block;margin-top:6px;color:#176c8b;font-weight:800}.material-receipt-page .receipt-selection-link:focus-visible{outline:3px solid var(--g-brand-light);outline-offset:3px;border-radius:4px}
@media (max-width:800px){
  .material-receipt-page .receipt-filter-row{grid-template-columns:minmax(0,1fr) auto;}
  .material-receipt-page .receipt-filter-row button{width:100%}
  .material-receipt-page .receipt-context dl{grid-template-columns:1fr}
  /* UI-078：768px 起收窄客戶清單欄位，避免橫向溢位；資訊仍完整保留於每個 radio 的 aria-label。 */
  .material-receipt-page .receipt-customer-option.receipt-customer-row,.material-receipt-page .receipt-customer-head{grid-template-columns:22px minmax(0,1fr) 96px}
  .material-receipt-page .receipt-customer-option.receipt-customer-row small[data-col],.material-receipt-page .receipt-customer-head span[data-col]{display:none}
}
@media (max-width:500px){
  .material-receipt-page .receipt-filter-row{grid-template-columns:1fr}
  .material-receipt-page .receipt-filter-row button{width:100%}
}