/*
 * student-links.css — Clickable student name styles
 * Works in light mode, dark mode, and high-contrast contexts.
 * Version: 2026.3.1
 */

/* ── Base link style ──────────────────────────────────────────────────────── */
a.student-link,
[role="link"].student-link {
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  border-radius: 3px;
  transition: color 0.15s ease;
  text-underline-offset: 2px;
}

a.student-link:hover,
[role="link"].student-link:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

/* Focus ring — keyboard accessible, non-intrusive for mouse */
a.student-link:focus-visible,
[role="link"].student-link:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 3px;
}

/* Remove default outline for non-keyboard interaction */
a.student-link:focus:not(:focus-visible),
[role="link"].student-link:focus:not(:focus-visible) {
  outline: none;
}

/* ── Dark mode ────────────────────────────────────────────────────────────── */
[data-theme="dark"] a.student-link,
[data-theme="dark"] [role="link"].student-link {
  color: #60a5fa;
}

[data-theme="dark"] a.student-link:hover,
[data-theme="dark"] [role="link"].student-link:hover {
  color: #93c5fd;
  text-decoration: underline;
}

[data-theme="dark"] a.student-link:focus-visible,
[data-theme="dark"] [role="link"].student-link:focus-visible {
  outline-color: #60a5fa;
}

/* ── Table context: don't overflow cell ──────────────────────────────────── */
td a.student-link,
td [role="link"].student-link {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* ── Notification bell context ───────────────────────────────────────────── */
.notification-student a.student-link,
.notification-student [role="link"].student-link {
  font-weight: 600;
  font-size: 0.9375rem;
  color: inherit; /* inherit card text colour */
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

.notification-student a.student-link:hover,
.notification-student [role="link"].student-link:hover {
  color: #2563eb;
  text-decoration: underline;
}

[data-theme="dark"] .notification-student a.student-link:hover,
[data-theme="dark"] .notification-student [role="link"].student-link:hover {
  color: #93c5fd;
}