.summaryPanel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); } .summaryScrollArea { min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; } .summaryContent { display: grid; width: 100%; min-width: max-content; grid-template-columns: auto auto max-content; align-items: center; gap: var(--space-5); } .summaryHeader { display: flex; min-width: 0; align-items: center; } .summaryActions { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: var(--space-2); align-self: stretch; padding-left: var(--space-3); border-left: 1px solid var(--border); background: var(--bg-card); white-space: nowrap; } .summaryItems { display: flex; min-width: 0; align-items: center; gap: var(--space-5); } .summaryItem { display: inline-flex; min-width: 0; align-items: center; gap: var(--space-2); } .summaryLabel { flex: 0 0 auto; overflow: hidden; color: var(--text-tertiary); font-size: var(--admin-font-size); font-weight: 650; line-height: var(--admin-line-height); text-overflow: ellipsis; white-space: nowrap; } .summaryValue { display: inline-flex; min-width: 0; align-items: center; overflow: hidden; color: var(--text-primary); font-weight: 700; line-height: var(--admin-line-height); text-overflow: ellipsis; white-space: nowrap; } .rewardPreview { display: grid; min-width: 0; grid-template-columns: repeat(7, 124px); gap: var(--space-2); } .rewardPill { display: grid; min-width: 0; gap: 2px; padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-muted); } .rewardPill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rewardPill span:first-child { color: var(--text-tertiary); font-size: var(--admin-font-size); font-weight: 650; } .rewardPill span:last-child { color: var(--text-primary); font-weight: 700; } .rewardEditor { display: grid; gap: var(--space-3); } .rewardEditorRow { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: var(--space-3); } .dayLabel { color: var(--text-secondary); font-weight: 700; white-space: nowrap; } .identity { display: flex; min-width: 0; align-items: center; gap: var(--space-3); } .stack { display: grid; min-width: 0; gap: 2px; } .title, .name { overflow: hidden; color: var(--text-primary); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } .meta { overflow: hidden; color: var(--text-tertiary); font-size: var(--admin-font-size); text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 900px) { .summaryPanel { grid-template-columns: minmax(0, 1fr); align-items: stretch; } .summaryActions { justify-content: flex-start; padding-top: var(--space-3); padding-left: 0; border-top: 1px solid var(--border); border-left: 0; } .summaryContent { gap: var(--space-4); } }