.amount { display: inline-flex; align-items: center; color: var(--success); font-size: calc(var(--admin-font-size) + 2px); font-weight: 760; line-height: 1; white-space: nowrap; } .amountIncome { color: var(--success); } .amountExpense { color: var(--danger); } .adjustmentAmount { font-size: calc(var(--admin-font-size) + 4px); } .clickableRow:hover { background: var(--primary-hover); } .clickableRow:focus-visible { outline: none; background: var(--primary-hover); box-shadow: inset 0 0 0 2px var(--primary-border-strong); } .identity { display: flex; min-width: 0; align-items: center; gap: var(--space-3); } .avatar, .detailAvatar { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-card-strong); color: var(--text-secondary); } .avatar { width: 36px; height: 36px; } .avatar img, .detailAvatar img { width: 100%; height: 100%; object-fit: cover; } .identityText, .detailHeroText { display: grid; min-width: 0; gap: var(--space-1); } .primaryText { overflow: hidden; color: var(--text-primary); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .meta, .detailMeta { min-width: 0; overflow-wrap: anywhere; color: var(--text-tertiary); font-size: 12px; } .detailHero { display: flex; min-width: 0; align-items: center; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); } .detailAvatar { width: 64px; height: 64px; } .detailTitleRow { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: var(--space-2); } .detailTitleRow h3 { min-width: 0; overflow: hidden; margin: 0; color: var(--text-primary); font-size: 18px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; } .detailSection { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-card-strong); } .detailSectionTitle { margin: 0; color: var(--text-primary); font-size: var(--admin-font-size); font-weight: 800; } .detailGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } .detailItem { display: grid; min-width: 0; gap: 4px; } .detailLabel { color: var(--text-tertiary); font-size: 12px; } .detailValue { min-width: 0; overflow-wrap: anywhere; color: var(--text-primary); font-size: var(--admin-font-size); font-weight: 650; } .detailCode { max-height: 180px; margin: 0; overflow: auto; white-space: pre-wrap; word-break: break-word; } .lookupRow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-3); } .targetPreview { display: flex; min-width: 0; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-soft); border-radius: var(--radius-control); background: var(--bg-card-strong); } .reportTargetType { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-primary); font-weight: 700; white-space: nowrap; } .reportReason { display: -webkit-box; overflow: hidden; color: var(--text-primary); line-height: 1.55; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .reportImages { display: flex; min-width: 0; align-items: center; gap: var(--space-2); } .reportImage, .reportImageCount { display: inline-flex; flex: 0 0 auto; width: 44px; height: 44px; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--bg-card-strong); color: var(--text-secondary); font-size: 12px; font-weight: 700; text-decoration: none; } .reportImage img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 640px) { .detailGrid { grid-template-columns: 1fr; } .lookupRow { grid-template-columns: 1fr; } }