xiaoshu-app/projects/xiaoshu-admin/src/app/pages/operations-user-detail.component.scss

@use '../components/member-controls' as member;
:host { display:block; color:#263733; font-size:14px; line-height:1.5; }
@include member.controls;
.page-header { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:16px; }
.page-header > button { flex-shrink:0; white-space:nowrap; }
.page-header a { display:inline-flex; align-items:center; gap:6px; color:#526e63; font-size:13px; text-decoration:none; }
.page-header a:hover { text-decoration:underline; }
.profile-summary { display:flex; align-items:center; flex-wrap:wrap; gap:18px; padding:24px; border-radius:14px; color:#fff; background:linear-gradient(120deg,#163b58,#176953); }
.avatar { display:grid; flex:none; place-items:center; width:50px; height:50px; border-radius:12px; background:#ffffff24; }
.profile-identity { flex:1 1 320px; min-width:0; }
.profile-title { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:5px; }
.profile-title h1 { margin:0; font-size:26px; line-height:1.4; overflow-wrap:anywhere; }
.profile-summary p { margin:0; color:#d3e5de; font-size:13px; overflow-wrap:anywhere; }
.profile-facts { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.profile-facts span { padding:4px 9px; border:1px solid #ffffff40; border-radius:999px; color:#e0eee8; font-size:12px; }
.quick-actions { display:flex; flex-wrap:wrap; gap:10px; margin-left:auto; }
.quick-actions > * { white-space:nowrap; }
.status,.learning-status { display:inline-flex; padding:5px 10px; border-radius:999px; color:#17654e; background:#e6f5ee; font-size:12px; font-weight:600; white-space:nowrap; }
.status.disabled { color:#923b44; background:#ffe7e9; }
.notice { margin:14px 0; padding:12px 16px; border-radius:9px; color:#216b51; background:#e9f7f1; }
.notice.error,.state.error { color:#a53e47; background:#fff0f1; }
.tabs { display:flex; gap:4px; overflow:auto; margin:18px 0; padding:5px; border:1px solid #dfe7e4; border-radius:12px; background:#fff; }
.tabs button { flex:1; min-width:max-content; border:0; color:#5c7067; }
.tabs button.active { color:#fff; background:#19765c; }
.section-loading,.state { display:grid; place-items:center; gap:8px; min-height:80px; color:#637b6f; }
.state { min-height:320px; }
.detail-grid,.audit-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); align-items:start; gap:18px; }
.panel { min-width:0; padding:20px; border:1px solid #dfe7e4; border-radius:14px; background:#fff; }
.panel>header { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:20px; }
.panel h2 { margin:0; font-size:18px; line-height:1.4; }
.panel header span { display:block; margin-top:5px; color:#697b74; font-size:13px; }
.panel header .learning-status { margin:0; color:#17654e; font-size:12px; }
.profile-editor { grid-row:span 2; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.mobile-control { display:flex; gap:8px; min-width:0; }
.mobile-control button { white-space:nowrap; }
.account-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:24px 0 0; }
.account-facts div { padding:12px; border-radius:9px; background:#f4f8f6; }
.account-facts dt { color:#687b72; font-size:12px; }
.account-facts dd { margin:5px 0 0; font-size:13px; overflow-wrap:anywhere; }
.metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.metric-grid article { display:grid; gap:5px; padding:14px; border-radius:10px; background:#f4f8f6; }
.metric-grid strong { font-size:26px; line-height:1.2; font-variant-numeric:tabular-nums; }
.metric-grid span { color:#647a6e; font-size:12px; }
.risk-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.risk-list span { padding:4px 8px; border-radius:8px; color:#a54b13; background:#fff0e6; font-size:12px; }
.risk-list small,.muted { color:#687b72; }
.option-list { display:flex; flex-wrap:wrap; gap:8px; max-height:180px; overflow:auto; margin-top:12px; }
.option-list button { display:grid; justify-items:start; gap:3px; padding:9px 12px; }
.option-list button span { color:#687b72; font-size:12px; font-weight:400; }
.option-list button.selected { border-color:#1f8063; color:#176c50; background:#e8f6f1; }
.risk-panel { grid-column:2; }
.security-actions { display:flex; flex-wrap:wrap; align-items:end; gap:12px; }
.security-actions label { flex:1 1 180px; }
.record-table { overflow:auto; margin-top:16px; border:1px solid #e4ebe8; border-radius:10px; }
.record-table table { width:100%; min-width:720px; border-collapse:collapse; }
.record-table th,.record-table td { padding:13px 14px; border-bottom:1px solid #e8efeb; text-align:left; font-size:14px; line-height:1.6; }
.record-table th { color:#52695d; background:#f4f8f6; font-weight:600; white-space:nowrap; }
.record-table td { color:#374b45; }
.record-table tbody tr:last-child td { border-bottom:0; }
.record-table td[colspan] { height:100px; text-align:center; color:#6a7d72; }
.record-table .compact { min-height:34px; padding:6px 10px; }
.lessons-table td:nth-child(1) { min-width:180px; }
.lessons-table td:nth-child(2),.lessons-table td:nth-child(3),.lessons-table td:nth-child(4),.lessons-table td:nth-child(5) { white-space:nowrap; }
.lessons-table td:last-child { min-width:260px; overflow-wrap:anywhere; }
.record-heading { margin:24px 0 0; font-size:16px; }
.course-reason { margin-top:20px; max-width:600px; }
.audit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.panel textarea { min-height:100px; resize:vertical; }
.audit-grid .panel>.primary { margin-top:12px; }
.timeline { display:grid; gap:12px; margin-top:20px; }
.timeline article { padding:14px; border-left:3px solid #4b9b80; border-radius:0 9px 9px 0; background:#f5f8f7; }
.timeline strong { font-size:14px; }
.timeline time { display:block; margin-top:4px; color:#697c72; font-size:12px; }
.timeline p { margin:8px 0 0; color:#53645f; font-size:14px; line-height:1.7; overflow-wrap:anywhere; }
.reason-bar { display:flex; flex-wrap:wrap; align-items:end; gap:12px; margin-bottom:18px; padding:14px 16px; border:1px solid #dce6e0; border-radius:10px; background:#f3f8f5; }
.reason-bar label { flex:1 1 320px; }
.reason-bar small { padding-bottom:10px; color:#63786b; }
.reason-bar b { color:#a33f48; }
.pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:end; gap:12px; margin:16px 0; color:#60756a; font-size:13px; }
.pagination>span { margin-right:auto; }
.pagination strong { color:#314d3f; font-size:14px; font-variant-numeric:tabular-nums; }
.date-filters { display:grid; grid-template-columns:minmax(150px,220px) minmax(150px,220px) auto auto; justify-content:start; align-items:end; gap:12px; }
.spin { animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@media(max-width:1100px) { .detail-grid,.audit-grid{grid-template-columns:1fr}.profile-editor{grid-row:auto}.risk-panel{grid-column:auto} }
@media(max-width:650px) { .profile-summary{padding:18px;gap:14px}.avatar{display:none}.profile-identity{flex-basis:100%}.profile-title h1{font-size:24px}.quick-actions{width:100%;margin-left:0}.tabs button{flex:0 0 auto}.form-grid,.account-facts{grid-template-columns:1fr}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.panel{padding:16px}.panel>header{flex-wrap:wrap}.date-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.quick-actions>*{flex:1 1 auto}.pagination{gap:8px} }

.page-header.detail-actions { justify-content: flex-end; }