/* dashboard.css — v4 School Management Dashboard 主视觉 */
.gate-mask { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: #F5F6FA; }
.gate-card { text-align: center; color: var(--text-2); }
.spinner { width: 34px; height: 34px; margin: 0 auto 12px; border: 3px solid #E8E6F2; border-top-color: var(--brand); border-radius: 50%; animation: spin .85s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display: none !important; }

.dash-wrap { width: 100%; max-width: 1480px; margin: 0 auto; padding: 24px 32px 42px; }
.dash-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 4px 0 22px; }
.dash-eyebrow, .panel-kicker { display: block; margin-bottom: 6px; color: var(--brand); font-size: 10px; font-weight: 800; letter-spacing: 1.4px; }
.dash-page-head h1 { margin: 0; color: var(--text); font-size: 28px; line-height: 1.2; }
.dash-page-head p { margin: 8px 0 0; color: var(--text-2); font-size: 13px; }
.dash-head-actions { display: flex; align-items: flex-end; gap: 10px; }
.history-badge { display: inline-flex; margin: 0 5px; padding: 2px 7px; color: #9B6212; background: #FFF4DE; border-radius: 999px; font-size: 11px; font-weight: 700; }
.month-control { display: flex; flex-direction: column; gap: 4px; color: var(--text-3); font-size: 10px; }
.month-control input { height: 38px; min-width: 142px; padding: 0 10px; color: var(--text); background: #FFF; border: 1px solid #E2E5EE; border-radius: 9px; font-family: inherit; font-size: 12px; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.student-metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-card { display: flex; align-items: center; min-width: 0; min-height: 126px; padding: 20px; background: #FFF; border: var(--card-border); border-radius: var(--r-card); box-shadow: var(--card-shadow); }
.metric-icon, .module-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--tone); background: var(--tone-bg); }
.metric-icon { width: 48px; height: 48px; margin-right: 16px; border-radius: 14px; }
.metric-icon svg { width: 23px; height: 23px; }
.metric-copy { display: flex; flex-direction: column; min-width: 0; }
.metric-copy > span { color: var(--text-2); font-size: 12px; }
.metric-copy strong { margin: 4px 0 2px; color: var(--text); font-size: 28px; line-height: 1.05; }
.metric-copy small { overflow: hidden; color: var(--text-3); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.tone-purple { --tone: #2F6FED; --tone-bg: #EAF1FF; }
.tone-blue { --tone: #4B7BEC; --tone-bg: #EAF1FF; }
.tone-green { --tone: #27AE79; --tone-bg: #E7F8F1; }
.tone-amber { --tone: #E5A02B; --tone-bg: #FFF4DE; }
.tone-rose { --tone: #D86683; --tone-bg: #FDECF1; }
.tone-cyan { --tone: #379FB0; --tone-bg: #E8F7F8; }

.student-report { margin-bottom: 18px; }
.renewal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.renewal-card { display: flex; min-width: 0; min-height: 105px; padding: 15px; flex-direction: column; background: #FFF; border: var(--card-border); border-top: 3px solid #2F6FED; border-radius: 12px; box-shadow: var(--card-shadow); }
.renewal-card > span { overflow: hidden; color: var(--text-2); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.renewal-card strong { margin: 7px 0 5px; color: var(--text); font-size: 25px; line-height: 1; }
.renewal-card small { overflow: hidden; color: var(--text-3); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.renewal-1, .renewal-2 { border-top-color: #27AE79; }
.renewal-3, .renewal-4, .renewal-5 { border-top-color: #E5A02B; }
.renewal-6 { border-top-color: #D86683; }

.student-visual-grid { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(340px, .78fr); gap: 18px; margin-bottom: 18px; }
.center-bar-list { display: flex; flex-direction: column; gap: 10px; }
.center-bar-row { display: grid; grid-template-columns: 86px minmax(0, 1fr) 38px; align-items: center; gap: 10px; font-size: 11px; }
.center-bar-row > span { overflow: hidden; color: var(--text-2); text-overflow: ellipsis; white-space: nowrap; }
.center-bar-row > b { color: var(--text); text-align: right; }
.center-bar-track { display: flex; height: 9px; overflow: hidden; background: #F0F2F7; border-radius: 999px; }
.center-bar-track i { display: block; height: 100%; }
.bar-formal { background: #2F6FED; }
.bar-prospective { background: #F39AB8; }
.student-progress-panel { display: flex; flex-direction: column; }
.student-progress-body { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 4px 0 18px; }
.student-donut { position: relative; display: flex; align-items: center; justify-content: center; width: 146px; height: 146px; flex: 0 0 auto; background: conic-gradient(#2F6FED 0 var(--formal-share), #F39AB8 var(--formal-share) 100%); border-radius: 50%; }
.student-donut::before { width: 94px; height: 94px; background: #FFF; border-radius: 50%; content: ""; }
.student-donut > div { position: absolute; display: flex; flex-direction: column; align-items: center; }
.student-donut strong { color: var(--text); font-size: 23px; }
.student-donut span { margin-top: 3px; color: var(--text-3); font-size: 10px; }
.student-legend { display: flex; flex-direction: column; gap: 13px; min-width: 120px; }
.student-legend span { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 7px; color: var(--text-2); font-size: 11px; }
.student-legend i { width: 9px; height: 9px; border-radius: 3px; }
.student-legend b { color: var(--text); }
.legend-formal { background: #2F6FED; }.legend-prospective { background: #F39AB8; }
.renewal-progress { padding-top: 14px; border-top: 1px solid #F0EFF5; }
.renewal-progress > div:not(.rate-track) { display: flex; align-items: center; justify-content: space-between; color: var(--text-2); font-size: 11px; }
.renewal-progress b { color: var(--text); }
.rate-track { height: 8px; margin: 7px 0 13px; overflow: hidden; background: #EEF1F6; border-radius: 999px; }
.rate-track i { display: block; height: 100%; background: #27AE79; border-radius: inherit; }
.rate-track.annual i { background: #E5A02B; }

.student-table-panel { margin-bottom: 18px; padding: 0; overflow: hidden; }
.student-table-panel > .panel-head { margin: 0; padding: 20px 20px 14px; }
.student-table-note { margin: 0 20px 14px; padding: 9px 11px; color: #766341; background: #FFF8E8; border: 1px solid #F5E3B9; border-radius: 8px; font-size: 11px; }
.student-table-wrap { width: 100%; overflow-x: auto; }
.student-report-table { width: 100%; min-width: 2100px; border-collapse: separate; border-spacing: 0; font-size: 11px; }
.student-report-table th { position: sticky; top: 0; padding: 11px 9px; color: #315FAF; background: #EAF1FF; border-right: 1px solid #DCE7FB; font-weight: 700; text-align: center; white-space: nowrap; }
.student-report-table td { padding: 10px 9px; color: var(--text-2); border-top: 1px solid #EEF0F5; text-align: center; vertical-align: middle; }
.student-report-table tbody tr:hover td { background: #FAFBFE; }
.student-report-table th:nth-child(-n+4), .student-report-table td:nth-child(-n+4) { position: sticky; }
.student-report-table th:nth-child(1), .student-report-table td:nth-child(1) { left: 0; width: 52px; min-width: 52px; max-width: 52px; }
.student-report-table th:nth-child(2), .student-report-table td:nth-child(2) { left: 52px; width: 112px; min-width: 112px; max-width: 112px; }
.student-report-table th:nth-child(3), .student-report-table td:nth-child(3) { left: 164px; width: 92px; min-width: 92px; max-width: 92px; }
.student-report-table th:nth-child(4), .student-report-table td:nth-child(4) { left: 256px; width: 92px; min-width: 92px; max-width: 92px; box-shadow: 5px 0 8px rgba(43, 64, 105, .08); }
.student-report-table th:nth-child(-n+4) { z-index: 5; background: #EAF1FF; }
.student-report-table tbody td:nth-child(-n+4) { z-index: 2; background: #FFF; }
.student-report-table tbody tr:hover td:nth-child(-n+4) { background: #FAFBFE; }
.student-report-table .branch-name { color: var(--text); font-weight: 700; white-space: nowrap; }
.student-report-table .strong-cell { color: var(--text); font-weight: 800; }
.student-report-table .name-list { min-width: 260px; max-width: 360px; color: #B24362; line-height: 1.65; text-align: left; }
.student-report-table tfoot td { color: #7A5700; background: #FFF2C8; border-top: 1px solid #E6CA75; font-weight: 800; }
.student-report-table tfoot td:nth-child(-n+4) { z-index: 3; background: #FFF2C8; }
/* 2026年初基准与发展目标区：用独立紫色底区分当前运营数据。 */
.student-report-table thead th:nth-child(n+3):nth-child(-n+8) { color: #6B2E8A; background: #EADCF4; border-top: 2px solid #C894D2; border-right-color: #DCC6E6; }
.student-report-table tbody td:nth-child(n+3):nth-child(-n+8) { background: #FBF7FD; }
.student-report-table tbody tr:hover td:nth-child(n+3):nth-child(-n+8) { background: #F6EDF9; }
.student-report-table tfoot td:nth-child(n+3):nth-child(-n+8) { color: #6B2E8A; background: #F3E7F7; border-top-color: #C894D2; border-bottom: 2px solid #C894D2; }
.student-report-table th:nth-child(3), .student-report-table td:nth-child(3) { border-left: 2px solid #C894D2; }
.student-report-table th:nth-child(8), .student-report-table td:nth-child(8) { border-right: 2px solid #C894D2; }
/* 综合续费区：较深橙色；年缴续费区：同一橙色根的浅色层级。 */
.student-report-table thead th:nth-child(n+13):nth-child(-n+15) { color: #7A4A00; background: #F4C66F; border-top: 2px solid #D99B2B; border-right-color: #E1AD48; }
.student-report-table tbody td:nth-child(n+13):nth-child(-n+15) { background: #FFF4DD; }
.student-report-table tbody tr:hover td:nth-child(n+13):nth-child(-n+15) { background: #FFEDC7; }
.student-report-table tfoot td:nth-child(n+13):nth-child(-n+15) { color: #7A4A00; background: #FFE0A3; border-top-color: #D99B2B; border-bottom: 2px solid #D99B2B; }
.student-report-table th:nth-child(13), .student-report-table td:nth-child(13) { border-left: 2px solid #D99B2B; }
.student-report-table th:nth-child(15), .student-report-table td:nth-child(15) { border-right: 2px solid #D99B2B; }
.student-report-table thead th:nth-child(n+16):nth-child(-n+18) { color: #8A5A12; background: #F8E5BF; border-top: 2px solid #E8C987; border-right-color: #EED9AC; }
.student-report-table tbody td:nth-child(n+16):nth-child(-n+18) { background: #FFFAF0; }
.student-report-table tbody tr:hover td:nth-child(n+16):nth-child(-n+18) { background: #FFF5E3; }
.student-report-table tfoot td:nth-child(n+16):nth-child(-n+18) { color: #8A5A12; background: #FFECC7; border-top-color: #E8C987; border-bottom: 2px solid #E8C987; }
.student-report-table th:nth-child(18), .student-report-table td:nth-child(18) { border-right: 2px solid #E8C987; }
.rate-pill { display: inline-flex; min-width: 47px; justify-content: center; padding: 3px 6px; color: #167554; background: #E7F8F1; border-radius: 999px; font-weight: 700; }
.target-rate { color: #7133A8; background: #F1E5F6; }
.annual-rate { color: #9B6212; background: #FFF4DE; }
.dash-load-error { max-width: 680px; margin: 40px auto; text-align: center; }
.dash-load-error h2 { color: var(--text); }.dash-load-error p { color: var(--text-2); }

.dash-split { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); gap: 18px; margin-bottom: 18px; }
.dash-panel { min-width: 0; padding: 20px; background: #FFF; border: var(--card-border); border-radius: var(--r-card); box-shadow: var(--card-shadow); }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.panel-head h2 { margin: 0; color: var(--text); font-size: 16px; }
.panel-head a { color: var(--brand); font-size: 12px; font-weight: 600; text-decoration: none; }
.panel-note { padding: 5px 9px; color: var(--brand); background: var(--brand-soft); border-radius: 999px; font-size: 11px; }
.activity-list { display: flex; flex-direction: column; gap: 14px; }
.activity-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; color: var(--text-2); font-size: 12px; }
.activity-meta span { display: flex; align-items: center; gap: 8px; }
.activity-meta b { color: var(--text); }
.activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.dot-1 { background: #4B7BEC; }.dot-2 { background: #27AE79; }.dot-3 { background: #E5A02B; }.dot-4 { background: #D86683; }.dot-5 { background: #379FB0; }
.activity-track { height: 7px; overflow: hidden; background: #F0EFF5; border-radius: 999px; }
.activity-track i { display: block; height: 100%; background: linear-gradient(90deg, #2F6FED, #6CA4F8); border-radius: inherit; }

.schedule-list { display: flex; flex-direction: column; }
.schedule-item { display: grid; grid-template-columns: 76px minmax(0, 1fr) 18px; align-items: center; gap: 12px; padding: 11px 0; color: inherit; border-bottom: 1px solid #F0EFF5; text-decoration: none; }
.schedule-item:last-child { border-bottom: none; }
.schedule-date { color: var(--brand); font-size: 12px; font-weight: 700; }
.schedule-copy { display: flex; flex-direction: column; min-width: 0; }
.schedule-copy b, .schedule-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-copy b { color: var(--text); font-size: 12.5px; }
.schedule-copy small { margin-top: 3px; color: var(--text-3); font-size: 11px; }
.schedule-arrow { color: var(--text-3); font-size: 20px; }
.schedule-toggle { align-self: center; min-width: 72px; margin: 12px auto 0; padding: 7px 14px; color: var(--brand); background: var(--brand-soft); border: 0; border-radius: 999px; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.schedule-toggle:hover { background: #DDE9FF; }
.schedule-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.dash-empty { padding: 28px 12px; color: var(--text-3); text-align: center; font-size: 12px; }

.module-panel { margin-bottom: 18px; }
.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.module-card { display: flex; align-items: center; width: 100%; min-width: 0; padding: 14px; color: inherit; background: #FBFBFD; border: 1px solid #EFEFF5; border-radius: 12px; font-family: inherit; text-align: left; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.module-card.online { cursor: pointer; }
.module-card.online:hover { transform: translateY(-2px); border-color: #DCD7F7; box-shadow: 0 8px 20px rgba(43, 36, 74, .08); }
.module-card.coming { cursor: pointer; opacity: .78; }
.module-icon { width: 40px; height: 40px; margin-right: 12px; border-radius: 11px; }
.module-icon svg { width: 20px; height: 20px; }
.module-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.module-copy b { color: var(--text); font-size: 13px; }
.module-copy small { overflow: hidden; margin-top: 4px; color: var(--text-3); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.module-status { margin-left: 8px; color: var(--tone); font-size: 11px; font-weight: 700; white-space: nowrap; }
.dash-foot { padding-top: 10px; color: var(--text-3); font-size: 11px; text-align: center; }

@media (max-width: 1120px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .student-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .renewal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .dash-wrap { padding: 20px 16px 36px; }
  .dash-page-head { align-items: flex-start; flex-direction: column; }
  .dash-split, .student-visual-grid { grid-template-columns: 1fr; }
  .renewal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-head-actions { width: 100%; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .metric-grid, .student-metric-grid, .module-grid { grid-template-columns: 1fr; }
  .dash-head-actions { width: 100%; }
  .dash-head-actions .btn { flex: 1 1 auto; }
  .month-control { width: 100%; }.month-control input { width: 100%; }
  .student-progress-body { align-items: flex-start; flex-direction: column; }
}