/* =============================
   STUDENT PORTAL — Premium Dark Mode (Stitch Blueprint)
   ============================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --sp-primary: #4F46E5;
  /* Indigo */
  --sp-primary-d: #4338ca;
  --sp-secondary: #14B8A6;
  /* Teal */
  --sp-accent: #F59E0B;
  /* Amber */
  --sp-danger: #EF4444;
  /* Danger */
  --sp-success: #10B981;
  /* Success */
  --sp-bg: #0F172A;
  /* Dark BG */
  --sp-card: #111827;
  /* Card BG */
  --sp-text: #F8FAFC;
  --sp-muted: #94A3B8;
  --sp-border: #1E293B;
  /* Subtle dark border */
  --sp-nav-h: 72px;
  --sp-radius: 18px;
  --sp-radius-sm: 14px;
}

/* ── Voice to Text Animations ── */
@keyframes sp-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-pulse {
  animation: sp-pulse 1.5s infinite ease-in-out;
  display: inline-block;
}

.icon-btn.recording {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
}

.icon-btn.recording i {
  color: #ef4444 !important;
}

html,
body {
  height: 100%;
  font-family: 'Poppins', 'Inter', sans-serif;
  background: var(--sp-bg);
  color: var(--sp-text);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

/* ── Shell (sidebar + topbar + main), one DOM for all widths ── */
.sp-shell {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
}

.sp-shell-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.sp-sidebar {
  width: 264px;
  flex-shrink: 0;
  background: var(--sp-card);
  border-right: 1px solid var(--sp-border);
  height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 300;
  transition: transform 0.25s ease;
}

.sp-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  border-bottom: 1px solid var(--sp-border);
  margin-bottom: 16px;
  flex-shrink: 0;
}

/* ── Sidebar nav scroll area — scrollbar hidden, up/down arrows instead
   (matches the admin dashboard's sidebar-scroll convention) ── */
.sp-sidebar-nav-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.sp-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 24px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sp-sidebar-nav::-webkit-scrollbar {
  display: none;
}

.sp-nav-scroll-arrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  background: var(--sp-card);
  border: 1px solid var(--sp-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  color: var(--sp-primary);
  z-index: 10;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.sp-nav-scroll-arrow.sp-nav-scroll-up {
  top: 4px;
}

.sp-nav-scroll-arrow.sp-nav-scroll-down {
  bottom: 4px;
}

.sp-sidebar-brand i {
  font-size: 1.6rem;
  color: var(--sp-primary);
}

.sp-sidebar-group {
  margin-bottom: 18px;
  padding: 0 12px;
}

.sp-sidebar-group-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sp-muted);
  padding: 0 12px 8px;
  font-family: 'Inter', sans-serif;
}

.sp-sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--sp-muted);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  transition: all .15s;
  margin-bottom: 2px;
}

.sp-sidebar-link i {
  font-size: 1.05rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.sp-sidebar-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.sp-sidebar-link.active {
  background: rgba(79, 70, 229, 0.15);
  color: #fff;
}

.sp-sidebar-link.active i {
  color: var(--sp-primary);
}

.sp-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 290;
}

/* ── Topbar (Glassmorphism) ── */
.sp-topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  height: 64px;
  background: rgba(17, 24, 39, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sp-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 20px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.sp-hamburger {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--sp-border);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  flex-shrink: 0;
}

.sp-topbar-search {
  flex: 1;
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--sp-border);
  border-radius: 12px;
  padding: 9px 14px;
  color: var(--sp-muted);
}

.sp-topbar-search input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 0.88rem;
  width: 100%;
  font-family: 'Inter', sans-serif;
}

.sp-topbar-search input::placeholder {
  color: var(--sp-muted);
}

.sp-topbar-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.sp-topbar .sp-logo {
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.02em;
}

.sp-topbar .sp-logo i {
  font-size: 1.5rem;
  color: var(--sp-primary);
}

.sp-topbar .sp-user-name {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--sp-muted);
}

.sp-bell {
  position: relative;
  color: var(--sp-muted);
  font-size: 1.3rem;
  line-height: 1;
  text-decoration: none;
}

.sp-badge-dot {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--sp-danger);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  line-height: 1;
}

/* ── Main content ── */
.sp-main {
  padding: 24px 24px 40px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* ── Dashboard two-column layout (home.php only) ── */
.sp-dashboard-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.sp-dashboard-content {
  flex: 1;
  min-width: 0;
}

.sp-right-panel {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sp-panel-title {
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}

/* ── Stat tiles (right-panel Quick Stats) ── */
.sp-stat-tile {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--sp-border);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sp-stat-tile .sp-stat-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(79, 70, 229, 0.15);
  color: var(--sp-primary);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.sp-stat-tile .sp-stat-value {
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  line-height: 1.3;
}

.sp-stat-tile .sp-stat-label {
  font-size: 0.72rem;
  color: var(--sp-muted);
  font-family: 'Inter', sans-serif;
}

/* ── Progress ring (pure CSS conic-gradient, no chart lib) ── */
.sp-progress-ring {
  --ring-pct: 0;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: conic-gradient(var(--sp-primary) calc(var(--ring-pct) * 1%), var(--sp-border) 0);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.sp-progress-ring-inner {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--sp-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sp-progress-ring-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
}

.sp-progress-ring-label {
  font-size: 0.68rem;
  color: var(--sp-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: 'Inter', sans-serif;
}

.sp-progress-substats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.sp-progress-substat {
  text-align: center;
}

.sp-progress-substat .val {
  font-weight: 700;
  color: #fff;
  font-size: 0.95rem;
}

.sp-progress-substat .lbl {
  font-size: 0.7rem;
  color: var(--sp-muted);
  font-family: 'Inter', sans-serif;
}

/* ── Course progress bar ── */
.sp-progress-bar-track {
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-top: 8px;
}

.sp-progress-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--sp-primary), var(--sp-secondary));
}

/* ── Timeline rows (Upcoming Schedule / Recent Activity) ── */
.sp-timeline-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--sp-border);
}

.sp-timeline-item:last-child {
  border-bottom: none;
}

.sp-timeline-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  background: rgba(79, 70, 229, 0.12);
  color: var(--sp-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.sp-timeline-text {
  font-size: 0.85rem;
  color: #e2e8f0;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
}

.sp-timeline-time {
  font-size: 0.72rem;
  color: var(--sp-muted);
  margin-top: 2px;
  font-family: 'Inter', sans-serif;
}

/* ── Quick-actions grid ── */
.sp-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.sp-quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 6px;
  border-radius: 16px;
  background: var(--sp-card);
  border: 1px solid var(--sp-border);
  text-decoration: none;
  color: #e2e8f0;
  text-align: center;
  transition: all .15s;
}

.sp-quick-item:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
}

.sp-quick-item .sp-quick-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  background: rgba(79, 70, 229, 0.15);
  color: var(--sp-primary);
}

.sp-quick-item span {
  font-size: 0.72rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
}

/* ── Bottom-nav center FAB (raised, Home shortcut) ── */
.sp-nav-fab {
  position: relative;
  top: -18px;
}

.sp-nav-fab .sp-nav-fab-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sp-primary), var(--sp-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.5);
  border: 4px solid var(--sp-bg);
  margin-bottom: 2px;
}

/* ── Responsive breakpoints: sidebar <-> bottom-nav swap at 900px,
   matching the admin dashboard's existing sidebar-collapse convention ── */
/* ── Generic 2-column grid (mobile stat tiles / task tiles) ── */
.sp-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* ── Mobile/desktop visibility toggles (Teacher Module dashboard widgets that
   only make sense at one width, as opposed to .sp-right-panel's hide-only use) ── */
.sp-mobile-only {
  display: none;
}

.sp-desktop-only {
  display: block;
}

@media (max-width: 900px) {
  .sp-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100vh;
    transform: translateX(-100%);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  }

  .sp-sidebar.sp-open {
    transform: translateX(0);
  }

  .sp-sidebar-backdrop.sp-open {
    display: block;
  }

  .sp-hamburger {
    display: flex;
  }

  .sp-topbar-search {
    display: none;
  }

  .sp-right-panel {
    display: none;
  }

  .sp-dashboard-layout {
    display: block;
  }

  .sp-main {
    padding: 16px 16px calc(var(--sp-nav-h) + 24px);
    max-width: 768px;
  }

  .sp-mobile-only {
    display: block;
  }

  .sp-desktop-only {
    display: none;
  }
}

@media (max-width: 600px) {
  .sp-quick-grid {
    gap: 10px;
  }

  .sp-sidebar {
    width: 84%;
    max-width: 300px;
  }
}

/* ── Typography ── */
.sp-section-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: #fff;
  letter-spacing: -0.01em;
}

.sp-section-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--sp-muted);
  margin-bottom: 24px;
}

/* ── Cards ── */
.sp-card {
  background: var(--sp-card);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  margin-bottom: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sp-card:active {
  transform: scale(0.98);
}

.sp-card-body {
  padding: 20px;
}

.sp-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 150px;
  max-height: 280px;
  object-fit: cover;
  background: linear-gradient(135deg, var(--sp-primary) 0%, var(--sp-secondary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 3.5rem;
  position: relative;
}

/* The ratio already gives a taller banner where the card is wider; the cap is
   what it grows to. */

.sp-card-img::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, var(--sp-card), transparent);
}

.sp-card-title {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 6px;
  color: #fff;
}

.sp-card-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--sp-muted);
}

/* ── Badges / Chips ── */
.sp-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.sp-badge-primary {
  background: rgba(79, 70, 229, 0.2);
  color: #818cf8;
  border: 1px solid rgba(79, 70, 229, 0.3);
}

.sp-badge-success {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.sp-badge-warn {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.sp-badge-danger {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ── Buttons ── */
.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--sp-radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}

.sp-btn-primary {
  background: linear-gradient(135deg, var(--sp-primary) 0%, #6366f1 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4);
}

.sp-btn-primary:hover {
  background: linear-gradient(135deg, var(--sp-primary-d) 0%, var(--sp-primary) 100%);
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.6);
  transform: translateY(-1px);
}

.sp-btn-outline {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border: 1px solid var(--sp-border);
}

.sp-btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--sp-muted);
}

.sp-btn-sm {
  padding: 15px 16px;
  font-size: 0.85rem;
  border-radius: 12px;
}

.sp-btn-full {
  width: 100%;
}

/* ── Bottom Nav (Glassmorphism) ── */
.sp-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: var(--sp-nav-h);
  background: rgba(17, 24, 39, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--sp-border);
  display: flex;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Sidebar takes over at 901px+ - must come after the base rule above so it
   actually wins the cascade instead of being silently overridden by it. */
@media (min-width: 901px) {
  .sp-bottom-nav {
    display: none;
  }
}

.sp-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--sp-muted);
  font-size: 0.7rem;
  font-weight: 500;
  padding: 8px 0;
  gap: 4px;
  transition: all .2s;
  font-family: 'Inter', sans-serif;
}

.sp-nav-item i {
  font-size: 1.4rem;
  transition: transform 0.2s;
}

.sp-nav-item:hover {
  color: #fff;
}

.sp-nav-item.active {
  color: var(--sp-primary);
}

.sp-nav-item.active i {
  text-shadow: 0 0 16px rgba(79, 70, 229, 0.5);
  transform: translateY(-2px);
}

/* ── Video player card ── */
.sp-video-wrap {
  position: relative;
  margin-bottom: 16px;
}

.sp-video-embed {
  position: relative;
  padding-top: 56.25%;
  /* 16:9 */
  background: #000;
  border-radius: var(--sp-radius);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
  border: 1px solid var(--sp-border);
}

.sp-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Fullscreen button overlay */
.sp-fullscreen-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s, transform 0.15s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.sp-fullscreen-btn:hover {
  background: var(--sp-primary);
  transform: scale(1.1);
}

.sp-fullscreen-btn:active {
  transform: scale(0.95);
}

/* Fullscreen state */
.sp-video-wrap.sp-fs-active .sp-video-embed {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  padding-top: 0;
  border-radius: 0;
  z-index: 9999;
  border: none;
}

.sp-video-wrap.sp-fs-active .sp-fullscreen-btn {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.7);
}

/* On mobile stretch video edge-to-edge within its card */
@media (max-width: 600px) {
  .sp-video-embed {
    border-radius: 10px;
  }
}

/* ── Video protection overlays ── */

/* Suppress iOS Safari long-press callout on the entire video area */
.sp-video-wrap {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  /* iOS: disables long-press "Save / Copy / Open" popup */
}

/* Top shield — covers Vimeo top bar / YouTube share button row */
.sp-video-shield {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  z-index: 4;
  background: transparent;
  pointer-events: all;
  cursor: default;
  -webkit-touch-callout: none;
  touch-action: none;
}

/* Right-edge blocker for YouTube share/watch-later icons */
.sp-video-embed::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;
  height: 100%;
  z-index: 4;
  pointer-events: all;
  touch-action: none;
}

/*
 * Full-cover mobile shield — transparent overlay over the entire iframe.
 * On mobile: intercepts long-press → no browser context menu.
 * On desktop: pointer-events:none so clicks pass through to the player.
 * Controlled via JS: desktop gets class 'sp-desktop' on the wrap.
 */
.sp-video-cover {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: transparent;
  /* Mobile default — block all touch events */
  pointer-events: all;
  touch-action: none;
  -webkit-touch-callout: none;
  cursor: default;
}

/* On larger screens let clicks reach the player */
@media (hover: hover) and (pointer: fine) {
  .sp-video-cover {
    pointer-events: none;
    /* desktop/mouse: pass through */
  }

  /* Still block the top bar and right edge on desktop */
  .sp-video-shield,
  .sp-video-embed::after {
    pointer-events: all;
  }
}

/* ── Material row ── */
.sp-mat-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--sp-border);
  transition: background 0.2s;
}

.sp-mat-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.sp-mat-row:last-child {
  border-bottom: none;
}

.sp-mat-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  flex-shrink: 0;
  background: rgba(79, 70, 229, 0.15);
  color: var(--sp-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  border: 1px solid rgba(79, 70, 229, 0.2);
}

.sp-mat-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
}

.sp-mat-meta {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: var(--sp-muted);
  margin-top: 2px;
}

/* ── MCQ Test ── */
.sp-question-card {
  background: var(--sp-card);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.sp-question-text {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 20px;
  line-height: 1.5;
  color: #fff;
}

.sp-option {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  padding: 14px 18px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all .2s;
  font-family: 'Inter', sans-serif;
  color: #e2e8f0;
}

.sp-option:hover {
  background: rgba(255, 255, 255, 0.06);
}

.sp-option:has(input:checked) {
  border-color: var(--sp-primary);
  background: rgba(79, 70, 229, 0.1);
  color: #fff;
}

.sp-option input {
  margin-right: 14px;
  accent-color: var(--sp-primary);
  width: 18px;
  height: 18px;
}

/* ── Result ── */
.sp-result-header {
  background: linear-gradient(135deg, var(--sp-primary) 0%, var(--sp-secondary) 100%);
  color: #fff;
  border-radius: var(--sp-radius);
  padding: 32px 20px;
  text-align: center;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(79, 70, 229, 0.3);
}

.sp-result-score {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 8px;
}

.sp-result-label {
  font-size: 1rem;
  opacity: .9;
  font-family: 'Inter', sans-serif;
}

.sp-answer-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  border: 1px solid var(--sp-border);
}

.sp-answer-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.sp-answer-icon.correct {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.sp-answer-icon.wrong {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

/* ── Chat ── */
.sp-chat-messages {
  height: 100%;
  overflow-y: auto;
  padding: 16px 0;
  scrollbar-width: none;
}

.sp-chat-messages::-webkit-scrollbar {
  display: none;
}

.sp-chat-bubble {
  display: flex;
  margin-bottom: 16px;
}

.sp-chat-bubble.me {
  justify-content: flex-end;
}

.sp-bubble-inner {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.92rem;
  line-height: 1.45;
  font-family: 'Inter', sans-serif;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  word-break: break-word;
  overflow-wrap: break-word;
}

.sp-bubble-inner.them {
  background: #ffffff;
  color: #1e293b;
  border-top-left-radius: 0;
  margin-left: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  border: 1px solid rgba(0,0,0,0.06);
}

.sp-bubble-inner.me {
  background: #1865ff;
  color: #e9edef;
  border-top-right-radius: 0;
  margin-right: 8px;
}

/* Tails */
.sp-bubble-inner.them::before {
  content: "";
  position: absolute;
  top: 0;
  left: -8px;
  width: 0;
  height: 0;
  border-top: 0px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 10px solid #ffffff;
}

.sp-bubble-inner.me::before {
  content: "";
  position: absolute;
  top: 0;
  right: -8px;
  width: 0;
  height: 0;
  border-top: 0px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 10px solid #1865ff;
}

.sp-bubble-name {
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 2px;
  color: #1d6fa4;
}

.sp-bubble-inner.me .sp-bubble-name {
  color: rgba(255,255,255,0.85);
}

.sp-bubble-time {
  font-size: 0.65rem;
  margin-top: 4px;
  opacity: .6;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

/* Replied message inside bubble */
.sp-replied-box {
  background: rgba(0, 0, 0, 0.2);
  border-left: 4px solid var(--sp-primary);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 6px;
  font-size: 0.82rem;
  cursor: pointer;
}

.sp-replied-box .replied-user {
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--sp-primary);
  margin-bottom: 2px;
}

.sp-replied-box .replied-text {
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Reply Preview above input */
.sp-reply-preview {
  background: rgba(32, 44, 51, 0.95);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: none;
  align-items: center;
  gap: 12px;
}

.sp-reply-preview .preview-content {
  flex: 1;
  border-left: 4px solid var(--sp-primary);
  padding-left: 10px;
  overflow: hidden;
}

.sp-reply-preview .preview-user {
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--sp-primary);
}

.sp-reply-preview .preview-text {
  font-size: 0.85rem;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Highlight animation */
@keyframes messageHighlight {
  0% {
    background: rgba(79, 70, 229, 0.4);
  }

  100% {
    background: transparent;
  }
}

.highlight-msg {
  animation: messageHighlight 2s ease-out;
}

/* Typing animation */
.typing-indicator-text {
  font-size: 0.8rem;
  color: var(--sp-secondary);
  margin-bottom: 8px;
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sp-pinned-bar {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 0.85rem;
  margin-bottom: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  color: #fbbf24;
}

.sp-chat-input-bar {
  position: fixed;
  bottom: var(--sp-nav-h);
  left: 0;
  right: 0;
  background: rgba(17, 24, 39, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--sp-border);
  padding: 12px 16px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.chat-input-wrapper {
  display: flex;
  align-items: flex-end;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--sp-border);
  border-radius: 24px;
  padding: 8px 10px;
  width: 100%;
  gap: 8px;
}

.chat-input-wrapper .icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--sp-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: 0.2s;
}

.chat-input-wrapper .icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.chat-input-wrapper .send-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--sp-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: 0.2s;
}

.chat-input-wrapper .send-btn:hover {
  background: var(--sp-primary-d);
}

.auto-resize-textarea {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  padding: 10px 4px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.4;
  min-height: 24px;
  max-height: 120px;
  overflow-y: hidden;
  color: #fff;
  margin: 0;
}

.auto-resize-textarea::placeholder {
  color: var(--sp-muted);
}

.auto-resize-textarea::-webkit-scrollbar {
  width: 4px;
}

.auto-resize-textarea::-webkit-scrollbar-thumb {
  background: var(--sp-border);
  border-radius: 4px;
}

.sp-chat-input {
  flex: 1;
  border: 1px solid var(--sp-border);
  border-radius: 99px;
  padding: 12px 20px;
  font-size: 0.95rem;
  outline: none;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-family: 'Inter', sans-serif;
  transition: .2s;
}

.sp-chat-input:focus {
  border-color: var(--sp-primary);
  background: rgba(255, 255, 255, 0.08);
}

.sp-chat-input::placeholder {
  color: var(--sp-muted);
}

.sp-chat-send {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sp-primary);
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}

.sp-chat-send:active {
  transform: scale(0.95);
}

/* ── Login page ── */
.sp-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top right, rgba(79, 70, 229, 0.2), transparent 40%),
    radial-gradient(circle at bottom left, rgba(20, 184, 166, 0.15), transparent 40%),
    var(--sp-bg);
  padding: 24px;
}

.sp-login-card {
  background: rgba(17, 24, 39, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  padding: 40px 32px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.sp-login-logo {
  text-align: center;
  margin-bottom: 32px;
}

.sp-login-logo i {
  font-size: 3rem;
  color: var(--sp-primary);
  background: rgba(79, 70, 229, 0.15);
  width: 80px;
  height: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  margin-bottom: 16px;
}

.sp-login-brand {
  display: inline-grid;
  place-items: center;
  width: 80px;
  height: 80px;
  padding: 10px;
  margin-bottom: 16px;
  border-radius: 24px;
  background: #fff;
}

.sp-login-brand img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.sp-login-logo h1 {
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}

.sp-login-logo p {
  font-size: 0.9rem;
  color: var(--sp-muted);
  margin-top: 4px;
  font-family: 'Inter', sans-serif;
}

.sp-form-group {
  margin-bottom: 20px;
}

.sp-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #e2e8f0;
}

.sp-input {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  outline: none;
  transition: .2s;
}

.sp-input:focus {
  border-color: var(--sp-primary);
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15);
}

.sp-input::placeholder {
  color: #64748b;
}

/* ── File inputs ──────────────────────────────────────────────────────────────
   Left alone, a file input renders the browser's own grey "Choose file" button —
   light chrome on a dark field, and the one control on the page that looks like it
   belongs to a different application. The button is styleable; the surrounding text
   is not, so the field carries the colour instead. */

.sp-input[type="file"] {
  padding: 9px 12px;
  line-height: 1.6;
  cursor: pointer;
  color: var(--sp-muted);
}

.sp-input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--sp-primary);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .15s;
}

.sp-input[type="file"]::file-selector-button:hover {
  background: #4338ca;
}

.sp-input[type="file"]::file-selector-button:active {
  transform: translateY(1px);
}

/* Safari and older Chrome, which never learned the standard pseudo-element. */
.sp-input[type="file"]::-webkit-file-upload-button {
  margin-right: 12px;
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--sp-primary);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
}

.sp-input[type="file"]:focus {
  border-color: var(--sp-primary);
}

.sp-input.error {
  border-color: var(--sp-danger);
}

/* (video embed styles consolidated above) */

.sp-err {
  font-size: 0.8rem;
  color: #f87171;
  margin-top: 6px;
}

/* ── Profile ── */
.sp-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sp-primary), var(--sp-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 auto 16px;
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.4);
  border: 4px solid var(--sp-card);
}

.sp-profile-name {
  text-align: center;
  font-weight: 700;
  font-size: 1.4rem;
  color: #fff;
}

.sp-profile-sub {
  text-align: center;
  color: var(--sp-secondary);
  font-size: 0.9rem;
  margin-bottom: 24px;
  font-family: 'Inter', sans-serif;
}

.sp-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--sp-border);
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
}

.sp-info-row:last-child {
  border-bottom: none;
}

.sp-info-label {
  color: var(--sp-muted);
  font-weight: 500;
}

.sp-info-value {
  color: #fff;
  font-weight: 600;
}

/* --- Custom Date Picker (Flatpickr) --- */
.flatpickr-calendar {
  background: var(--sp-card) !important;
  border: 1px solid var(--sp-border) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6) !important;
  border-radius: 24px !important;
  font-family: 'Poppins', sans-serif !important;
  padding: 16px 12px !important;
  width: 335px !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  color: var(--sp-text) !important;
  box-sizing: border-box !important;
}

.flatpickr-innerContainer {
  width: 100% !important;
}

.flatpickr-days {
  width: 100% !important;
}

.dayContainer {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}


.flatpickr-day {
  border-radius: 14px !important;
  color: var(--sp-text) !important;
  transition: all 0.2s ease;
  height: 40px !important;
  line-height: 40px !important;
  font-weight: 500;
  margin: 2px 0 !important;
}

/* Fade colors for dates other than current month */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--sp-muted) !important;
  opacity: 0.4;
}

.flatpickr-day:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--sp-primary) !important;
  transform: translateY(-1px);
}

.flatpickr-day.today {
  border-color: var(--sp-primary) !important;
  color: var(--sp-primary) !important;
  background: rgba(79, 70, 229, 0.1) !important;
}

.flatpickr-day.selected {
  background: var(--sp-primary) !important;
  color: #fff !important;
  border-color: var(--sp-primary) !important;
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.5) !important;
}

.flatpickr-months {
  padding: 0 8px 12px 8px !important;
}

.flatpickr-months .flatpickr-month {
  color: var(--sp-text) !important;
  fill: var(--sp-text) !important;
  height: 48px !important;
}

.flatpickr-current-month {
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 10px !important;
}

.flatpickr-weekday {
  color: var(--sp-muted) !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding-bottom: 8px !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: all 0.2s ease !important;
}

.flatpickr-months .flatpickr-prev-month {
  left: 12px !important;
}

.flatpickr-months .flatpickr-next-month {
  right: 12px !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  background: var(--sp-primary) !important;
}

.flatpickr-time {
  border-top: 1px solid var(--sp-border) !important;
}

.flatpickr-time input {
  color: var(--sp-text) !important;
}

.flatpickr-am-pm {
  color: var(--sp-text) !important;
}

/* Input styles for date picker icon on the left */
.flatpickr-custom-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%234F46E5' class='bi bi-calendar3' viewBox='0 0 16 16'%3E%3Cpath d='M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z'/%3E%3Cpath d='M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left 1rem center !important;
  background-size: 1.1rem !important;
  padding-left: 3rem !important;
  cursor: pointer !important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  display: none !important;
}

/* ═══════════════════════════════════════════════
   In-App PDF Viewer Modal
   ═══════════════════════════════════════════════ */

/* Backdrop */
.sp-pdf-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
}

/* Modal container */
.sp-pdf-modal {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  background: #0a0f1e;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Header bar */
.sp-pdf-header {
  height: 52px;
  flex-shrink: 0;
  background: rgba(17, 24, 39, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sp-border, #1E293B);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 5;
}

.sp-pdf-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  padding-right: 16px;
}

.sp-pdf-close {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}

.sp-pdf-close:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

/* The actual PDF iframe */
.sp-pdf-frame {
  flex: 1;
  width: 100%;
  border: none;
  background: #525659;
  /* matches PDF.js default bg */
  display: block;
}

/* Shield: covers browser PDF toolbar at TOP (download/print buttons) */
.sp-pdf-shield-top {
  position: absolute;
  top: 52px;
  /* below our header */
  left: 0;
  right: 0;
  height: 40px;
  /* browser PDF toolbar height */
  z-index: 4;
  background: transparent;
  /* transparent — just blocks pointer events */
  pointer-events: all;
}

/* Shield: covers browser PDF toolbar at BOTTOM (page counter etc.) */
.sp-pdf-shield-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 36px;
  z-index: 4;
  background: transparent;
  /* transparent — just blocks pointer events */
  pointer-events: all;
}

/* Intercepts right-click on PDF; scrollbar left exposed on desktop; touch passthrough on mobile */
.sp-pdf-cover {
  position: absolute;
  top: 52px;
  bottom: 0;
  left: 0;
  right: 18px;
  /* expose PDF's own scrollbar so user can scroll */
  z-index: 3;
  pointer-events: all;
  /* desktop: blocks right-click */
  background: transparent;
  -webkit-touch-callout: none;
  cursor: default;
}

/* Mobile / touch devices: let touch scroll pass through to iframe */
@media (hover: none),
(pointer: coarse) {
  .sp-pdf-cover {
    pointer-events: none;
    /* touch scroll works via iframe directly */
    right: 0;
  }
}

/* Prevent iOS long-press save/share on the iframe itself */
.sp-pdf-frame {
  -webkit-touch-callout: none;
}
/* ── Portal footer (copyright + vendor mark), sits above the mobile bottom nav ── */
.sp-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 24px calc(16px + env(safe-area-inset-bottom));
  margin-top: auto;
  border-top: 1px solid var(--sp-border);
  font-family: 'Inter', sans-serif;
  font-size: 0.76rem;
  color: var(--sp-muted);
}

.sp-footer strong { color: #cbd5e1; font-weight: 600; }

@media (max-width: 900px) {
  .sp-footer {
    justify-content: center;
    text-align: center;
    padding-bottom: calc(var(--sp-nav-h) + 20px);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Teacher dashboard
   ──────────────────────────────────────────────────────────────────────────
   One spacing scale and one card shape, so things line up because they share a
   system rather than because each block happened to be given the same padding.

       --td-gap      between blocks
       --td-pad      inside a card
       --td-radius   every corner

   The old dashboard was assembled from inline styles, four separate shortcut
   grids (two desktop, two mobile, Messages in both) and a mixture of centred
   and left-aligned cards. Every rule below is shared by the block that needs
   it, which is what keeps the columns honest.
   ════════════════════════════════════════════════════════════════════════════ */

.sp-main {
  --td-gap: 22px;
  --td-pad: 20px;
  --td-radius: 16px;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.td-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: var(--td-pad) 24px;
  margin-bottom: var(--td-gap);
  border: 1px solid rgba(79, 70, 229, .25);
  border-radius: 20px;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(79, 70, 229, .22) 0%, transparent 60%),
    radial-gradient(120% 160% at 100% 100%, rgba(20, 184, 166, .16) 0%, transparent 60%),
    var(--sp-card);
}

.td-hero-greet {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  color: var(--sp-muted);
}

.td-hero-name {
  margin: 2px 0 0;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  line-height: 1.2;
}

.td-hero-date {
  margin: 6px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: .84rem;
  color: var(--sp-muted);
  display: flex;
  align-items: center;
  gap: 7px;
}

.td-hero-clock {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.td-clock-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.td-clock-select { width: auto; min-width: 150px; padding: 9px 14px; font-size: .85rem; }

.td-clock-state { display: flex; align-items: center; gap: 10px; }
.td-clock-label { font-family: 'Inter', sans-serif; font-size: .78rem; color: var(--sp-muted); }
.td-clock-value { font-weight: 700; color: #fff; font-size: .92rem; }

.td-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--sp-muted); }
.td-dot-live { background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .18); }

/* ── The session on now ───────────────────────────────────────────────────── */

.td-now {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px var(--td-pad);
  margin-bottom: var(--td-gap);
  border: 1px solid var(--sp-border);
  border-left: 4px solid var(--sp-muted);
  border-radius: var(--td-radius);
  background: var(--sp-card);
}

.td-now-live {
  border-left-color: #34d399;
  background: linear-gradient(90deg, rgba(52, 211, 153, .08), transparent 45%), var(--sp-card);
}

.td-now-mark {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--sp-muted);
  white-space: nowrap;
}

.td-now-live .td-now-mark { color: #34d399; }

.td-now-title { margin: 0; font-size: 1.15rem; font-weight: 700; color: #fff; line-height: 1.3; }
.td-now-meta { margin: 4px 0 0; font-family: 'Inter', sans-serif; font-size: .84rem; color: var(--sp-muted); }
.td-now-action { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── Blocks ───────────────────────────────────────────────────────────────── */

.td-block { margin-bottom: var(--td-gap); }

.td-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.td-block-head h2 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
}

.td-count {
  font-family: 'Inter', sans-serif;
  font-size: .76rem;
  font-weight: 700;
  color: var(--sp-muted);
  background: rgba(148, 163, 184, .12);
  border-radius: 999px;
  padding: 3px 10px;
}

.td-link {
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  color: var(--sp-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.td-link:hover { text-decoration: underline; }

.td-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: .74rem;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
}

.td-chip-done { background: rgba(52, 211, 153, .14); color: #34d399; }

.td-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 34px 20px;
  border: 1px dashed var(--sp-border);
  border-radius: var(--td-radius);
  color: var(--sp-muted);
  text-align: center;
}

.td-empty i { font-size: 1.6rem; opacity: .55; }
.td-empty p { margin: 0; font-family: 'Inter', sans-serif; font-size: .86rem; }

/* ── Waiting on you ───────────────────────────────────────────────────────── */

.td-needs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

/* A fixed row layout, so the four numbers sit on one line however long the
   labels wrap — the old tiles let the number drift down beside a two-line label. */
.td-need {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--sp-border);
  border-radius: var(--td-radius);
  background: var(--sp-card);
  text-decoration: none;
  transition: transform .15s, border-color .15s;
}

.td-need:hover { transform: translateY(-2px); border-color: rgba(79, 70, 229, .5); }

.td-need-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: .95rem;
  background: rgba(148, 163, 184, .12);
  color: var(--sp-muted);
}

.td-need-n { font-size: 1.4rem; font-weight: 800; color: #fff; line-height: 1; }

.td-need-label {
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  color: var(--sp-muted);
  line-height: 1.3;
}

.td-need-warn .td-need-icon { background: rgba(245, 158, 11, .16); color: #fbbf24; }
.td-need-warn .td-need-n { color: #fbbf24; }
.td-need-info .td-need-icon { background: rgba(79, 70, 229, .18); color: #a5b4fc; }

/* Nothing outstanding should recede, not shout. */
.td-need-zero { opacity: .55; }
.td-need-zero .td-need-n { color: var(--sp-muted); }

/* ── Workspace shortcuts ──────────────────────────────────────────────────── */

.td-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 12px;
}

.td-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  /* Equal height whatever the label length, so the icons form a true grid. */
  min-height: 96px;
  padding: 14px 10px;
  border: 1px solid var(--sp-border);
  border-radius: var(--td-radius);
  background: var(--sp-card);
  text-decoration: none;
  text-align: center;
  transition: transform .15s, border-color .15s, background .15s;
}

.td-action:hover {
  transform: translateY(-2px);
  border-color: rgba(79, 70, 229, .55);
  background: rgba(79, 70, 229, .07);
}

.td-action-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 1.1rem;
  color: #a5b4fc;
  background: rgba(79, 70, 229, .14);
}

.td-action-label {
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  color: #e2e8f0;
  line-height: 1.25;
}

/* ── Today's sessions ─────────────────────────────────────────────────────── */

.td-sessions { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

/* The time column is a fixed width, which is what makes the titles align down
   the list instead of stepping in and out with the length of each time. */
.td-session {
  display: grid;
  grid-template-columns: 74px 3px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border: 1px solid var(--sp-border);
  border-radius: var(--td-radius);
  background: var(--sp-card);
}

.td-session-time { display: flex; flex-direction: column; line-height: 1.3; }
.td-session-time strong { font-size: .84rem; font-weight: 700; color: #fff; }
.td-session-time em { font-style: normal; font-size: .72rem; color: var(--sp-muted); }

.td-session-rule { width: 3px; height: 34px; border-radius: 2px; background: var(--sp-primary); }
.td-session-done .td-session-rule { background: #34d399; }

.td-session-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.td-session-title {
  font-size: .92rem;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.td-session-meta { font-family: 'Inter', sans-serif; font-size: .76rem; color: var(--sp-muted); }

/* ── Batches ──────────────────────────────────────────────────────────────── */

.td-batches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

/* A column, so every card's footer sits on the same line regardless of how far
   a batch title wraps. */
.td-batch {
  display: flex;
  flex-direction: column;
  padding: var(--td-pad);
  border: 1px solid var(--sp-border);
  border-radius: var(--td-radius);
  background: var(--sp-card);
}

.td-batch-head { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 14px; }
.td-batch-swatch { width: 10px; height: 10px; border-radius: 3px; margin-top: 5px; flex: none; }
.td-batch-title { margin: 0; font-size: .95rem; font-weight: 700; color: #fff; line-height: 1.35; }

.td-batch-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
.td-batch-figures dt {
  font-family: 'Inter', sans-serif;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--sp-muted);
  font-weight: 700;
}
.td-batch-figures dd { margin: 3px 0 0; font-size: 1.02rem; font-weight: 700; color: #fff; }

.td-batch-bar { height: 5px; border-radius: 3px; background: rgba(148, 163, 184, .15); overflow: hidden; }
.td-batch-bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--sp-primary), #34d399);
}

.td-batch-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* Pushes the footer down so the row of cards ends level. */
  margin-top: auto;
  padding-top: 14px;
}

/* ── Activity feed ────────────────────────────────────────────────────────── */

.td-feed {
  list-style: none;
  margin: 0;
  padding: var(--td-pad);
  border: 1px solid var(--sp-border);
  border-radius: var(--td-radius);
  background: var(--sp-card);
  display: grid;
  gap: 2px;
}

.td-feed li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 9px 0; }
.td-feed li + li { border-top: 1px solid var(--sp-border); }

.td-feed-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: .88rem;
  background: rgba(79, 70, 229, .14);
  color: #a5b4fc;
}

.td-feed-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.td-feed-text { font-size: .86rem; color: #e2e8f0; line-height: 1.4; }
.td-feed-time { font-family: 'Inter', sans-serif; font-size: .72rem; color: var(--sp-muted); }

/* ── Right rail ───────────────────────────────────────────────────────────── */

.td-panel {
  padding: var(--td-pad);
  border: 1px solid var(--sp-border);
  border-radius: var(--td-radius);
  background: var(--sp-card);
}

.td-panel-title {
  margin: 0 0 14px;
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
}

.td-panel-empty { margin: 0; font-family: 'Inter', sans-serif; font-size: .84rem; color: var(--sp-muted); }

.td-donut {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
}

.td-donut-hole {
  width: 106px;
  height: 106px;
  border-radius: 50%;
  background: var(--sp-card);
  display: grid;
  place-items: center;
  align-content: center;
}

.td-donut-value { font-size: 1.7rem; font-weight: 800; color: #fff; line-height: 1; }
.td-donut-label { font-family: 'Inter', sans-serif; font-size: .72rem; color: var(--sp-muted); margin-top: 3px; }

.td-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.td-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.td-legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.td-legend-name {
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  color: #e2e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-legend-n { font-family: 'Inter', sans-serif; font-size: .82rem; font-weight: 600; color: var(--sp-muted); }

.td-metrics { margin: 0; display: grid; gap: 2px; }
.td-metrics > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}
.td-metrics > div + div { border-top: 1px solid var(--sp-border); }
.td-metrics dt {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  color: var(--sp-muted);
}
.td-metrics dt i { color: #a5b4fc; }
.td-metrics dd { margin: 0; font-size: .95rem; font-weight: 700; color: #fff; }

.td-top { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.td-top li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
}
.td-top li + li { border-top: 1px solid var(--sp-border); }
.td-top-rank {
  font-size: .88rem;
  font-weight: 800;
  text-align: center;
  color: var(--sp-muted);
}
.td-top-medal { color: #fbbf24; }
.td-top-name {
  font-size: .86rem;
  font-weight: 600;
  color: #e2e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-top-score { font-size: .88rem; font-weight: 700; color: #34d399; }

/* ── Narrow ───────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .sp-main { --td-gap: 18px; --td-pad: 16px; }

  .td-hero { padding: 18px; }
  .td-hero-clock { width: 100%; }
  .td-clock-form { width: 100%; }
  .td-clock-select { flex: 1; min-width: 0; }

  /* Stack rather than squeeze: the action stays full width and thumb-sized. */
  .td-now { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .td-now-action { width: 100%; }
  .td-now-action .sp-btn { flex: 1; justify-content: center; }

  .td-needs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .td-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .td-action { min-height: 86px; padding: 12px 6px; }
  .td-action-label { font-size: .7rem; }

  .td-session { grid-template-columns: 64px 3px minmax(0, 1fr); row-gap: 10px; }
  .td-session-action { grid-column: 1 / -1; }
  .td-session-action .sp-btn { width: 100%; justify-content: center; }
}

@media (max-width: 560px) {
  .td-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .td-batches { grid-template-columns: minmax(0, 1fr); }
}

/* A register that was never taken. Amber, not green — it is the one state on this
   strip that is asking for something rather than reporting it. */
.td-now-missed {
  border-left-color: #f59e0b;
  background: linear-gradient(90deg, rgba(245, 158, 11, .09), transparent 45%), var(--sp-card);
}

.td-now-missed .td-now-mark { color: #fbbf24; }

/* ════════════════════════════════════════════════════════════════════════════
   Teacher portal — the shared furniture
   ──────────────────────────────────────────────────────────────────────────
   Every screen in the portal used to build its own page header, its own batch
   switcher, its own empty state and its own list row, each out of inline
   styles. Nothing lined up with anything else because nothing shared anything:
   two screens showing the same figures put them at different widths, and the
   same "no rows yet" card had three different paddings.

   These are those pieces, once. The dashboard's --td-* scale is what they
   measure by, so a list on one screen sits on the same rhythm as a card on
   another.

   The alignment rule worth knowing: .tp-fig has a min-width, which is what
   makes a column of numbers line up down a list however long each label is.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Page header ──────────────────────────────────────────────────────────── */

.tp-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: var(--td-gap, 22px);
}

.tp-head-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-family: 'Inter', sans-serif;
  font-size: .84rem;
  font-weight: 600;
  color: var(--sp-primary);
  text-decoration: none;
}

.tp-head-back:hover { text-decoration: underline; }

.tp-head-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  line-height: 1.2;
}

.tp-head-sub {
  margin: 6px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: .86rem;
  color: var(--sp-muted);
  line-height: 1.45;
}

.tp-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── Batch / period switcher ──────────────────────────────────────────────── */

.tp-switch {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--td-gap, 22px);
}

.tp-switch-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border: 1px solid var(--sp-border);
  border-radius: 999px;
  background: var(--sp-card);
  color: var(--sp-muted);
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}

.tp-switch-chip:hover { border-color: rgba(79, 70, 229, .5); color: #e2e8f0; }

.tp-switch-chip.is-on {
  background: rgba(79, 70, 229, .16);
  border-color: rgba(79, 70, 229, .55);
  color: #c7d2fe;
}

/* ── Toolbar (filters above a list) ───────────────────────────────────────── */

.tp-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  margin-bottom: var(--td-gap, 22px);
  border: 1px solid var(--sp-border);
  border-radius: var(--td-radius, 16px);
  background: var(--sp-card);
}

.tp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.tp-field label {
  font-family: 'Inter', sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--sp-muted);
}

.tp-field .sp-input { padding: 10px 14px; font-size: .88rem; }

/* ── Lists ────────────────────────────────────────────────────────────────── */

.tp-list { display: grid; gap: 10px; margin: 0 0 var(--td-gap, 22px); padding: 0; list-style: none; }

.tp-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid var(--sp-border);
  border-radius: var(--td-radius, 16px);
  background: var(--sp-card);
  text-decoration: none;
  color: inherit;
}

a.tp-row { transition: border-color .15s, transform .15s; }
a.tp-row:hover { border-color: rgba(79, 70, 229, .5); transform: translateY(-1px); }

/* An unread or attention-seeking row, marked on the edge rather than by
   recolouring the whole card. */
.tp-row-flag { border-left: 3px solid var(--sp-primary); }

.tp-row-main { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 3px; }

.tp-row-title {
  font-size: .93rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.tp-row-sub {
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  color: var(--sp-muted);
  line-height: 1.45;
}

.tp-row-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* ── Figures ──────────────────────────────────────────────────────────────── */
/* The min-width is the whole trick: it reserves the same column on every row,
   so a list of numbers reads down the page instead of stepping about. */

.tp-figs { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin: 0; }

.tp-fig { min-width: 78px; text-align: right; }

.tp-fig dt {
  font-family: 'Inter', sans-serif;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sp-muted);
  white-space: nowrap;
}

.tp-fig dd { margin: 3px 0 0; font-size: .97rem; font-weight: 700; color: #fff; }
.tp-fig-good dd { color: #34d399; }
.tp-fig-warn dd { color: #fbbf24; }

/* ── Avatars and icon tiles ───────────────────────────────────────────────── */

.tp-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: none;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--sp-primary), var(--sp-secondary));
}

.tp-avatar img { width: 100%; height: 100%; object-fit: cover; }

.tp-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  background: rgba(79, 70, 229, .15);
  color: #a5b4fc;
}

.tp-icon-muted { background: rgba(148, 163, 184, .12); color: var(--sp-muted); }
.tp-icon-good { background: rgba(52, 211, 153, .14); color: #34d399; }
.tp-icon-warn { background: rgba(245, 158, 11, .16); color: #fbbf24; }
.tp-icon-live { background: #e11d48; color: #fff; }

/* ── Card grids ───────────────────────────────────────────────────────────── */

.tp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
  margin-bottom: var(--td-gap, 22px);
}

/* A column with the footer pushed down, so a row of cards ends level however
   far one title wraps. */
.tp-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sp-border);
  border-radius: var(--td-radius, 16px);
  background: var(--sp-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s;
}

a.tp-card:hover { border-color: rgba(79, 70, 229, .5); transform: translateY(-2px); }

/* A ratio, not a height.
   The grid is `auto-fill, minmax(250px, 1fr)`, so a card is ~280px wide on a
   desktop and the full column — near 500px — on a phone. A fixed 118px meant the
   same photograph rendered at 2.4:1 on one and 4.2:1 on the other: a letterbox
   slot with a player's head cropped out of it. Scaling with the card keeps the
   crop the same everywhere, and the cap stops a single wide card turning its
   cover into a billboard. */
.tp-card-cover {
  position: relative;
  aspect-ratio: 16 / 10;
  min-height: 132px;
  max-height: 250px;
  display: grid;
  place-items: center;
  font-size: 2.4rem;
  color: rgba(255, 255, 255, .9);
  background: linear-gradient(135deg, var(--sp-primary), var(--sp-secondary));
}

.tp-card-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.tp-card-body { padding: var(--td-pad, 20px); display: flex; flex-direction: column; flex: 1; }
.tp-card-title { margin: 0; font-size: .98rem; font-weight: 700; color: #fff; line-height: 1.35; }
.tp-card-sub { margin: 5px 0 0; font-family: 'Inter', sans-serif; font-size: .8rem; color: var(--sp-muted); }
.tp-card-foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ── Stat strip ───────────────────────────────────────────────────────────── */

.tp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: var(--td-gap, 22px);
}

.tp-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid var(--sp-border);
  border-radius: var(--td-radius, 16px);
  background: var(--sp-card);
}

.tp-stat-body { min-width: 0; }
.tp-stat-value { font-size: 1.3rem; font-weight: 800; color: #fff; line-height: 1.1; }
.tp-stat-label { font-family: 'Inter', sans-serif; font-size: .75rem; color: var(--sp-muted); margin-top: 3px; }

/* ── Panels ───────────────────────────────────────────────────────────────── */

.tp-panel {
  padding: var(--td-pad, 20px);
  margin-bottom: var(--td-gap, 22px);
  border: 1px solid var(--sp-border);
  border-radius: var(--td-radius, 16px);
  background: var(--sp-card);
}

.tp-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.tp-panel-head h2, .tp-panel-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

.tp-note {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: .84rem;
  color: var(--sp-muted);
  line-height: 1.55;
}

/* ── Badges, reusing the dashboard's chip ─────────────────────────────────── */

.tp-chip { /* see .td-chip — same shape, portal-wide name */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: .74rem;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
  background: rgba(148, 163, 184, .12);
  color: var(--sp-muted);
}

.tp-chip-good { background: rgba(52, 211, 153, .14); color: #34d399; }
.tp-chip-warn { background: rgba(245, 158, 11, .16); color: #fbbf24; }
.tp-chip-bad { background: rgba(239, 68, 68, .14); color: #f87171; }
.tp-chip-info { background: rgba(79, 70, 229, .18); color: #a5b4fc; }

/* ── Empty state — shared with the dashboard ──────────────────────────────── */

.tp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 44px 20px;
  margin-bottom: var(--td-gap, 22px);
  border: 1px dashed var(--sp-border);
  border-radius: var(--td-radius, 16px);
  color: var(--sp-muted);
  text-align: center;
}

.tp-empty i { font-size: 1.9rem; opacity: .5; }
.tp-empty p { margin: 0; font-family: 'Inter', sans-serif; font-size: .88rem; max-width: 42ch; line-height: 1.55; }

/* ── Narrow ───────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .tp-head { align-items: flex-start; }
  .tp-head-title { font-size: 1.25rem; }
  .tp-head-actions { width: 100%; }

  /* The figures move to their own full-width line rather than squeezing the
     name into nothing. */
  .tp-row-main { flex-basis: 100%; }
  .tp-figs { width: 100%; justify-content: flex-start; }
  .tp-fig { text-align: left; min-width: 88px; }
  .tp-row-actions { width: 100%; }
  .tp-row-actions .sp-btn { flex: 1; justify-content: center; }

  .tp-toolbar { padding: 12px; }
  .tp-field { flex: 1; min-width: 140px; }
}

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

/* A form laid out on a grid rather than as a stack of flex rows, so the labels
   and fields line up in columns whatever mix of widths a screen needs. */
.tp-plan-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  align-items: end;
}

.tp-plan-wide { grid-column: 1 / -1; }
.tp-plan-actions { grid-column: 1 / -1; display: flex; gap: 10px; }

.tp-plan-form textarea.sp-input { min-height: 84px; resize: vertical; }

/* A destructive action inside an outline button, without a whole variant. */
.tp-danger { color: #f87171 !important; border-color: rgba(248, 113, 113, .35) !important; }
.tp-danger:hover { background: rgba(248, 113, 113, .1) !important; }

/* ── Payslip ──────────────────────────────────────────────────────────────── */

.tp-payslip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--sp-border);
}

.tp-payslip-net { font-size: 1.8rem; font-weight: 800; color: #34d399; line-height: 1.1; margin-top: 4px; }

/* Label left, figure right, on a line each — the shape of every statement
   anybody has ever read. */
.tp-lines { margin: 0; display: grid; }
.tp-lines > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
}
.tp-lines > div + div { border-top: 1px solid var(--sp-border); }
.tp-lines dt { font-family: 'Inter', sans-serif; font-size: .84rem; color: var(--sp-muted); }
.tp-lines dd { margin: 0; font-size: .92rem; font-weight: 600; color: #fff; text-align: right; }

/* ── Grading row ──────────────────────────────────────────────────────────── */

.tp-grade { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.tp-grade-mark { width: 120px; }
.tp-grade-feedback { flex: 1; min-width: 180px; }

@media (max-width: 560px) {
  .tp-grade-mark, .tp-grade-feedback { width: 100%; flex-basis: 100%; }
  .tp-grade .sp-btn { width: 100%; justify-content: center; }
}

/* ── QR check-in ──────────────────────────────────────────────────────────── */

.tp-qr { max-width: 460px; text-align: center; display: grid; justify-items: center; gap: 16px; }
.tp-qr-code { padding: 14px; background: #fff; border-radius: 14px; line-height: 0; }
.tp-qr-url {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  color: var(--sp-muted);
  word-break: break-all;
}

/* ── Who a screen is about ────────────────────────────────────────────────── */
/* Used where a page concerns one person — an assessment, a chat. Face, name and
   standing on one line, so the eye finds the same three things in the same place
   on every such screen. */

.tp-subject {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  margin-bottom: var(--td-gap, 22px);
  border: 1px solid var(--sp-border);
  border-radius: var(--td-radius, 16px);
  background: var(--sp-card);
}

.tp-subject-face {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex: none;
  object-fit: cover;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--sp-primary), var(--sp-secondary));
}

.tp-subject-body { flex: 1; min-width: 0; }
.tp-subject-name { font-size: 1.05rem; font-weight: 700; color: #fff; line-height: 1.3; }
.tp-subject-meta { font-family: 'Inter', sans-serif; font-size: .82rem; color: var(--sp-muted); margin-top: 2px; }

/* ── Pager ────────────────────────────────────────────────────────────────────
   The same control as the admin panel, in the portal's palette. */

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  margin-bottom: var(--td-gap, 22px);
  border: 1px solid var(--sp-border);
  border-radius: var(--td-radius, 16px);
  background: var(--sp-card);
}

.pager-summary { margin: 0; font-family: 'Inter', sans-serif; font-size: .82rem; color: var(--sp-muted); }

.pager-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.pager-page,
.pager-step {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--sp-border);
  border-radius: 9px;
  background: rgba(255, 255, 255, .03);
  color: #e2e8f0;
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}

.pager-page:hover,
.pager-step:hover { border-color: rgba(79, 70, 229, .55); background: rgba(79, 70, 229, .1); }

.pager-page.is-on {
  background: var(--sp-primary);
  border-color: var(--sp-primary);
  color: #fff;
  cursor: default;
}

.pager-step.is-off { opacity: .38; pointer-events: none; }
.pager-gap { padding: 0 4px; color: var(--sp-muted); }

@media (max-width: 560px) {
  .pager { justify-content: center; }
  .pager-summary { width: 100%; text-align: center; }
}

/* ── Institute switcher (topbar) ──────────────────────────────────────────── */
/* Only rendered for a session with more than one institute — a visiting coach.
   Students and guardians never see this: they belong to exactly one institute. */

.sp-institute-switcher { position: relative; }

.sp-institute-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--sp-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  color: #e2e8f0;
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  max-width: 200px;
}

.sp-institute-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-institute-btn:hover { border-color: rgba(79, 70, 229, .5); }

.sp-institute-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  padding: 8px;
  border: 1px solid var(--sp-border);
  border-radius: 12px;
  background: var(--sp-card);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
  z-index: 60;
}

.sp-institute-menu.show { display: block; }

.sp-institute-menu-head {
  padding: 6px 10px;
  font-family: 'Inter', sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--sp-muted);
}

.sp-institute-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #e2e8f0;
  font-family: 'Inter', sans-serif;
  font-size: .86rem;
  text-align: left;
  cursor: pointer;
}

.sp-institute-item:hover { background: rgba(79, 70, 229, .12); }
.sp-institute-item i { opacity: .5; }
.sp-institute-item.is-active { font-weight: 700; color: #fff; }
.sp-institute-item.is-active i { opacity: 1; color: var(--sp-primary); }

@media (max-width: 640px) {
  .sp-institute-btn span { max-width: 90px; }
}