/* Student profile (Figma section "Student profile" 22316:131082) — js/student/profile.js. Prefix sp-. Chips reuse .m-chip. */

.screen.sp { display: flex; flex-direction: column; overflow: hidden; background: var(--goku); }
.sp-top { flex: none; height: var(--sb-dash); background: var(--goku); }
.sp-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding-bottom: 32px; }
.sp-scroll::-webkit-scrollbar { display: none; }

/* Header: back / call / chat + identity card (22316:131086) */
.sp-head { display: flex; flex-direction: column; gap: 24px; padding: 8px 20px; }
.sp-actions { display: flex; align-items: center; justify-content: space-between; height: 42px; }
.sp-back { width: 31.69px; height: 31.69px; display: grid; place-items: center; border-radius: 6px; }
.sp-back img { transform: rotate(180deg); }
.sp-icons { display: flex; gap: 8px; }
.sp-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; }
.sp-back:hover, .sp-icon:hover { background: var(--heles); }
.sp-id { display: flex; align-items: flex-end; gap: 8px; height: 90px; padding: 8px 20px; border-radius: 12px; background: var(--gohan); }
.sp-id-text { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.sp-name { font: 700 24px/32px var(--font); color: var(--bulma); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-role { font: 400 14px/24px var(--font); color: var(--trunks); }
.sp-photo {
  flex: none; margin: 2px; padding: 2px; border-radius: 9999px; background: var(--gohan);
  filter: drop-shadow(0 6px 3px rgba(0, 0, 0, 0.16)) drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.4));
}
.sp-photo img { display: block; width: 90px; height: 90px; border-radius: 50%; object-fit: cover; }

/* Pill tabs (Switcher) — sticky while the page scrolls */
.sp-tabs {
  position: sticky; top: 0; z-index: 2; display: flex; gap: 8px; padding: 12px 20px; background: var(--goku);
  overflow-x: auto; scrollbar-width: none;
}
.sp-tabs::-webkit-scrollbar { display: none; }
.sp-tab { flex: none; height: 40px; padding: 0 12px; border-radius: 8px; font: 700 14px/24px var(--font); color: var(--trunks); white-space: nowrap; }
.sp-tab:hover { color: var(--bulma); }
.sp-tab.is-on { background: var(--gohan); color: var(--bulma); }

/* Sections + label/value cards */
.sp-sec { display: flex; flex-direction: column; gap: 4px; padding: 12px 20px; }
.sp-fam + .sp-fam { margin-top: 12px; }
.sp-sec-title { padding: 0 16px; font: 700 10px/16px var(--font); letter-spacing: 0.5px; text-transform: uppercase; color: var(--zeno); }
.sp-card { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; }
.sp-row { position: relative; display: flex; align-items: center; gap: 24px; padding: 8px 16px; background: var(--gohan); font: 400 16px/24px var(--font); }
.sp-row + .sp-row::before { content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 1px; background: var(--beerus); }
.sp-label { flex: 1; min-width: 0; color: var(--trunks); }
.sp-val { flex: none; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bulma); }

/* Filter chips (Chip container 22316:131956) */
.sp-chips { display: flex; gap: 4px; padding: 8px 20px; }
.sp-chips .m-chip { border-color: transparent; }
.sp-chips .m-chip.is-on, .sp-chips .m-chip.is-open, .sp-chips .m-chip[aria-expanded="true"] { border-color: var(--piccolo); }

/* Chart card (22316:131962 / 22316:131714) */
.sp-chart-card { display: flex; flex-direction: column; gap: 16px; padding: 16px; border-radius: 16px; background: var(--gohan); }
.sp-chart-card.tight { gap: 10px; }
.sp-chart { display: block; width: 100%; height: auto; overflow: visible; }
.sp-grid line { stroke: var(--beerus); stroke-width: 1; }
.sp-ax { font: 400 12px/16px var(--font); fill: var(--trunks); }
.sp-ax-sub { fill: var(--bulma); }
.sp-lines path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sp-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sp-legend.tight { gap: 4px 8px; }
.sp-bullet { display: flex; align-items: center; gap: 4px; font: 400 10px/16px var(--font); color: var(--trunks); white-space: nowrap; }
.sp-bullet i { flex: none; width: 6px; height: 6px; border-radius: 50%; }

/* Multi-select dropdown: check mark on selected items */
.m-menu.sp-multi .m-menu-item { display: flex; align-items: center; gap: 8px; }
.m-menu.sp-multi .m-menu-item::before {
  content: ''; flex: none; width: 16px; height: 16px; border: 1px solid var(--beerus); border-radius: 4px; background: var(--gohan);
}
.m-menu.sp-multi .m-menu-item.is-on { background: transparent; }
.m-menu.sp-multi .m-menu-item:hover { background: var(--heles); }
.m-menu.sp-multi .m-menu-item.is-on::before {
  border-color: var(--piccolo);
  background: var(--piccolo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* Reports tables (22316:132052 / 22316:131801) */
.sp-table { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--gohan); }
.sp-thead {
  display: flex; align-items: center; gap: 24px; padding: 4px 16px;
  background: linear-gradient(var(--jiren), var(--jiren)), var(--gohan); font: 400 14px/24px var(--font); color: var(--trunks);
}
.sp-thead.divided { border-bottom: 1px solid var(--beerus); }
.sp-trow { display: flex; align-items: center; gap: 24px; width: 100%; padding: 8px 16px; background: var(--gohan); text-align: left; font: 400 16px/24px var(--font); color: var(--trunks); }
.sp-trow:not(.static):hover { background: linear-gradient(var(--heles), var(--heles)), var(--gohan); }
.sp-trow img { flex: none; }
.sp-c-cls { flex: none; width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-c-flex { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-c-year { flex: none; width: 44px; }
.sp-c-grade { flex: none; width: 86px; text-align: center; white-space: nowrap; }
.sp-thead .sp-c-grade { text-align: right; }
.sp-c-date { flex: none; width: 116px; text-align: right; white-space: nowrap; }

/* Events accordion (22316:131869) */
.sp-events { display: flex; flex-direction: column; gap: 12px; padding: 12px 20px; }
.sp-ev-head { display: flex; align-items: center; gap: 24px; height: 32px; padding: 4px 16px; border-radius: 8px; background: var(--jiren); font: 400 14px/24px var(--font); color: var(--piccolo); }
.sp-ev-head i { flex: none; width: 24px; }
.sp-ev-list { display: flex; flex-direction: column; gap: 8px; }
.sp-ev { border-radius: 8px; background: var(--gohan); }
.sp-ev.is-open { border: 1px solid var(--beerus); background: var(--heles); }
.sp-ev-row { display: flex; align-items: center; gap: 24px; width: 100%; padding: 12px 16px; border-radius: 8px; text-align: left; font: 400 16px/24px var(--font); }
.sp-ev.is-open .sp-ev-row { padding: 11px 15px; }
.sp-ev-title { color: var(--bulma); }
.sp-ev-row .sp-c-date { color: var(--trunks); }
.sp-ev-chev { flex: none; display: grid; place-items: center; padding: 4px; border-radius: 4px; }
.sp-ev-row:hover .sp-ev-chev { background: var(--heles); }
.sp-ev-body { padding: 0 4px 4px; }
.sp-ev-body .sp-card { border-radius: 8px; }

/* Academic Reports sheet (22316:132270) */
.sp-rep { display: flex; flex-direction: column; gap: 24px; padding-top: 0; }
.sp-rep-head { display: flex; flex-direction: column; gap: 8px; }
.sp-rep-cls { font: 700 18px/24px var(--font); color: #0C1322; }
.sp-rep-teacher { font: 400 14px/20px var(--font); color: #5D626C; }
.sp-rep-list { display: flex; flex-direction: column; gap: 8px; }
.sp-term { display: flex; align-items: center; gap: 24px; padding: 11px 15px; border: 1px solid var(--beerus); border-radius: 8px; font: 400 16px/24px var(--font); color: var(--trunks); }
.sp-term span { flex: 1; min-width: 0; }
.sp-dl { flex: none; display: grid; place-items: center; padding: 4px; border-radius: var(--radius-i-sm); background: var(--piccolo); }
.sp-dl:hover { filter: brightness(1.08); }

/* Call parent sheet */
.sp-call { display: flex; flex-direction: column; gap: 24px; }
.sp-call .btn { text-decoration: none; }
.sp-call-card { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border: 1px solid var(--beerus); border-radius: 8px; }
.sp-call-who { flex: 1; min-width: 0; }
.sp-call-name { font: 700 16px/24px var(--font); color: var(--bulma); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-call-type { font: 400 14px/20px var(--font); color: var(--trunks); }
.sp-call-num { flex: none; font: 400 16px/24px var(--font); color: var(--bulma); }