/* Student Outcome Profile page (pages/tab-student-profile.js). */
.sp-search { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sp-search .form-control { width: min(320px, 100%); font-variant-numeric: tabular-nums; }

.sp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sp-stat { border: 1px solid var(--border-color, #e5e7eb); border-radius: 12px; padding: 12px 16px; background: #fafbfc; }
.sp-stat-v { font-size: 1.6rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sp-stat-l { font-size: 12px; color: #6b7280; text-transform: uppercase; letter-spacing: .03em; }
.sp-stat-alert .sp-stat-v { color: var(--primary, #ac1f25); }

.sp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-bottom: 20px; }
.sp-chart { position: relative; height: 340px; }
.sp-chart-line { height: 300px; }

.sp-heat-table { border-collapse: separate; border-spacing: 3px; width: 100%; font-variant-numeric: tabular-nums; font-size: 13px; }
.sp-heat-table th { font-size: 12px; font-weight: 600; color: #4b5563; padding: 3px 6px; white-space: nowrap; }
.sp-heat { text-align: center; border-radius: 5px; padding: 6px 2px; min-width: 38px; font-weight: 600; }
.sp-heat-empty { color: #9ca3af; font-weight: 400; }
.sp-heat-total th { color: var(--primary, #ac1f25); }
.sp-heat-total .sp-heat { box-shadow: inset 0 0 0 2px var(--primary, #ac1f25); }
.sp-scale { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; margin-top: 8px; font-size: 11.5px; color: #6b7280; }
.sp-scale span { display: inline-block; width: 20px; height: 9px; border-radius: 2px; }

@media (max-width: 991px) {
  .sp-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575px) {
  .sp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}