/* Base styles drawing inspiration from Apple's human interface guidelines */

/* Define Material UI color palette variables. These variables follow
   the default Material UI theme colours and can be referenced
   throughout the stylesheet to maintain a cohesive look and feel.
   Primary: blue; Secondary: purple; Success: green; Warning: yellow;
   Error: red; Background and surface colours to mimic MUI's light theme. */
:root {
  --mui-primary: #1976d2;
  --mui-secondary: #9c27b0;
  --mui-success: #2e7d32;
  --mui-warning: #ed6c02;
  --mui-error: #d32f2f;
  --mui-info: #0288d1;
  --mui-background: #f5f5f5;
  --mui-surface: #ffffff;
  --mui-border: #e0e0e0;

  /* Dark mode palette variables. These will be referenced when the
     document body has the 'dark' class applied. */
  --mui-dark-bg: #1c1c1e;
  --mui-dark-surface: #2c2c2e;
  --mui-dark-text: #e5e5ea;
  --mui-dark-border: #3a3a3c;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #f5f5f7;
  color: #1d1d1f;
  /* Flex layout ensures the footer stays at the bottom of the viewport
     without overlapping content. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.guest-hidden {
  display: none !important;
}

[data-role-blocked="true"] {
  display: none !important;
}

body.guest-mode .guest-only {
  display: block;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.guest-announcement-prompt {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: #6e6e73;
}

/* Generic card style for containers such as course info and dashboards */
.card {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 1rem;
  margin-bottom: 1rem;
}

header.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

header .brand {
  font-size: 1.25rem;
  font-weight: 600;
}

nav.nav-links button {
  background: none;
  border: none;
  font-size: 0.9rem;
  margin: 0 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

nav.nav-links button:hover,
nav.nav-links button.active {
  /* Lighten the primary colour for hover and active states */
  background-color: rgba(0, 0, 0, 0.08);
}

.user-info {
  font-size: 0.9rem;
  color: #6e6e73;
}

/* Layout for user info and notifications bell */
.header-right {
  display: flex;
  align-items: center;
  /* Add spacing between the notifications bell and user info for a more balanced header */
  gap: 1rem;
}

/* Improve spacing and alignment within the user info area in the header. By default,
   userInfo is just a container; here we ensure its contents are evenly spaced
   and vertically aligned so that the avatar, name, role label and logout
   link appear cohesive. */
#userInfo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#userInfo img {
  margin: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

/* Ensure the notifications bell icon aligns with the user avatar and text.
   Use flexbox to centre the icon within its bounding box and increase its
   font size slightly for visual balance. */
.notifications {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

/* Style recent discussion cards in the thread sidebar. Each recent
   discussion is displayed as its own card with a compact layout. */
/* Styling for recent discussion cards.  Use a clean white card with a
   coloured border on the left and minimal shadow. */
.recent-discussion-card {
  border-left: 4px solid var(--primary-colour, #007aff);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.6rem;
  background-color: #fdfdfd;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
/* Title within recent discussion cards */
.recent-discussion-card h5 {
  margin: 0 0 0.3rem 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary, #1d1d1f);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Meta row within recent discussions (author/date and tag).  Align items
   horizontally and allow wrapping on narrow screens. */
.recent-discussion-card .recent-meta-row {
  font-size: 0.75rem;
  color: #666666;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.15rem;
}

/* New layout for recent discussion meta row. When displaying author/date and
   a single tag on the same line, ensure they align neatly and wrap when
   necessary. */
.recent-discussion-card .recent-meta-row {
  font-size: 0.75rem;
  color: #666666;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.15rem;
}

/* Theme toggle button styling. Ensure the icon is visible on light and dark
   backgrounds and provide adequate size and cursor feedback. */
/*
 * Theme toggle button styling. Use a fixed floating position so the
 * button is always visible on the page, regardless of scroll. The
 * button is circular with a contrasting colour in both light and
 * dark modes, making it easy to locate. The larger size and drop
 * shadow also help draw the user's eye to the toggle. The icon
 * itself is controlled via JavaScript (sun/moon characters).
 */
#themeToggle {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1000;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  border-radius: 50%;
  border: none;
  /* Use primary colour as background in light mode */
  background-color: var(--mui-primary);
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
body.dark #themeToggle {
  /* In dark mode, use the dark surface with a lighter icon */
  background-color: var(--mui-dark-surface);
  color: var(--mui-dark-text);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
}

/* Style the notifications bell to ensure it is visible on the coloured
   navigation bar. The icon inherits the primary colour of the nav bar,
   so we override it to white. The count badge uses the error colour
   from the Material palette. */
#notificationsBell .fa-bell {
  /* Use a dark colour for the bell icon in light mode so it is visible against
     the light navbar background. In dark mode this will be overridden below. */
  color: #1d1d1f;
}

/* In dark mode the navbar is dark, so the bell icon should be white. */
body.dark #notificationsBell .fa-bell {
  color: #ffffff;
}
#notificationCount {
  background-color: var(--mui-error);
  color: #ffffff;
  padding: 0 4px;
  font-size: 0.65rem;
  border-radius: 999px;
  position: absolute;
  top: -4px;
  right: -4px;
}

/* Notification panel overlay */
.notification-panel {
  position: absolute;
  right: 1rem;
  top: 3rem;
  width: 300px;
  max-height: 400px;
  overflow-y: auto;
  background-color: #ffffff;
  border: 1px solid #e5e5ea;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
  z-index: 300;
}

/* Footer styling: align text centrally and provide subtle colour. The footer
   appears at the bottom of the page and shows copyright information,
   a Powered by Cortal link and the visitor count. */
/* Footer component styled like a card and pinned to the bottom of the page. The
   background and subtle shadow match other cards. The sticky positioning
   ensures it stays near the bottom of the viewport as the content grows. */
/*
 * Footer positioned at the bottom of the viewport. It uses a simple white
 * background and a subtle top border instead of a thick card, making the
 * height minimal. The fixed positioning ensures it remains at the bottom
 * even when the page content is short. To prevent content from being
 * overlapped, the body has extra bottom padding defined below.
 */
/* Footer now sits at the bottom of the flex container. It uses margin-top:auto to push
   itself to the bottom without overlapping the main content. */
.footer {
  margin-top: auto;
  width: 100%;
  background-color: #ffffff;
  border-top: 1px solid #e5e5ea;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  color: #6e6e73;
  text-align: center;
}

/* Floating language toggle button */
.lang-toggle {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid rgba(173, 216, 255, 0.35);
  border-radius: 999px;
  padding: 0.45rem 0.95rem 0.45rem 0.6rem;
  background: linear-gradient(135deg, rgba(64, 156, 255, 0.85), rgba(32, 78, 255, 0.78));
  color: #f7fbff;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 18px 42px rgba(39, 87, 255, 0.32);
  backdrop-filter: blur(18px);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.lang-toggle .lang-toggle-icon {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  color: #1e4fff;
  font-size: 1rem;
  transition: background 0.3s ease, transform 0.3s ease, color 0.3s ease;
}

.lang-toggle .lang-toggle-label {
  font-size: 0.9rem;
}

.lang-toggle:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 58px rgba(39, 87, 255, 0.38);
  border-color: rgba(173, 216, 255, 0.55);
  background: linear-gradient(135deg, rgba(96, 178, 255, 0.92), rgba(48, 112, 255, 0.86));
}

.lang-toggle:hover .lang-toggle-icon {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(1.05);
}

.lang-toggle:active {
  transform: translateY(0);
  box-shadow: 0 14px 34px rgba(32, 78, 255, 0.32);
}

@media (max-width: 768px) {
  .lang-toggle {
    right: 1rem;
    bottom: 1rem;
    padding: 0.38rem 0.75rem 0.38rem 0.5rem;
    gap: 0.5rem;
  }

  .lang-toggle .lang-toggle-icon {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.9rem;
  }

  .lang-toggle .lang-toggle-label {
    font-size: 0.8rem;
  }
}

/* =========================
   Page and PDF Loading Bars
   A slim cyan bar appears at the very top of the viewport while
   content is loading. The bar's width is animated via JS to give
   visual feedback that the application is busy. A separate bar is
   used for PDF previews and appears within the modal. Both bars
   share the same colour and height.  
========================= */
#pdfProgressBar {
  /* Indeterminate progress bar for PDF loading: fixed at top of the page,
     animated gradient that slides horizontally. */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #ff9500 0%, #ffcc66 50%, #ff9500 100%);
  background-size: 200% 100%;
  animation: pdfProgressAnimation 1s linear infinite;
  z-index: 2000;
}

@keyframes pdfProgressAnimation {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Customise NProgress bar to match the portal theme and hide spinner */
#nprogress {
  /* Ensure the progress bar does not block pointer events */
  pointer-events: none;
}
#nprogress .bar {
  /* Use a cyan colour matching the portal theme */
  background: #00bcd4;
  /* Increase the height slightly for better visibility */
  height: 3px;
  /* Fix the bar at the very top of the viewport so it appears above the navigation */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Raise z-index above the nav bar */
  z-index: 2000;
}
#nprogress .peg {
  box-shadow: 0 0 10px #00bcd4, 0 0 5px #00bcd4;
}
#nprogress .spinner {
  display: none;
}

/* Responsive layout tweaks for small screens */
@media (max-width: 600px) {
  nav.nav-links {
    flex-wrap: wrap;
  }
  nav.nav-links button {
    margin: 0.25rem 0.5rem;
    flex: 1 1 auto;
  }
  .card {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding: 0.75rem;
  }
  .comment-form-card,
  .assignment-list .card,
  .discussion-thread-card {
    padding: 0.75rem;
    margin: 0.5rem 0;
  }

  /* Keep the navigation bar at the top on small screens.  We remove the
     bottom positioning and padding adjustments used previously for a fixed
     bottom nav. The nav remains part of the normal document flow and the
     page content flows underneath it. */
}
.notification-item {
  padding: 0.5rem;
  border-bottom: 1px solid #e5e5ea;
  cursor: pointer;
}
.notification-item:last-child {
  border-bottom: none;
}

/* ------------------------------------------------------------------------- */
/* Dark mode styling
   When the <body> element has the class 'dark', override colours for
   backgrounds, text and surfaces. We reuse custom variables defined at the
   beginning of this file for consistency. */
body.dark {
  background-color: var(--mui-dark-bg);
  color: var(--mui-dark-text);
}
body.dark header.navbar {
  background-color: rgba(28, 28, 30, 0.9);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
body.dark nav.nav-links button {
  color: var(--mui-dark-text);
}
body.dark nav.nav-links button:hover,
body.dark nav.nav-links button.active {
  background-color: rgba(255, 255, 255, 0.1);
}
body.dark .card {
  background-color: var(--mui-dark-surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  color: var(--mui-dark-text);
}
body.dark .list li {
  background-color: var(--mui-dark-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
body.dark .footer {
  background-color: var(--mui-dark-surface);
  border-top: 1px solid var(--mui-dark-border);
  color: var(--mui-dark-text);
}
body.dark input,
body.dark textarea,
body.dark select {
  background-color: var(--mui-dark-surface);
  color: var(--mui-dark-text);
  border-color: var(--mui-dark-border);
}
body.dark .search-input {
  background-color: var(--mui-dark-surface);
  color: var(--mui-dark-text);
  border-color: var(--mui-dark-border);
}

/* Progress bar used during file uploads */
.upload-progress-container {
  width: 100%;
  background-color: #e5e5ea;
  border-radius: 4px;
  overflow: hidden;
  height: 6px;
  margin-top: 0.5rem;
}

/*
 * Theme toggle button. Increase the icon size and ensure it is visible on both
 * light and dark backgrounds. The button itself has no background or border
 * because it inherits from the navbar. In dark mode the icon colour switches
 * to the dark theme text colour for contrast.
 */
/*
 * The .theme-toggle class is kept for backward compatibility but contains
 * no styling. All visual properties of the toggle are handled by the
 * #themeToggle selector defined above. Leaving this class empty ensures
 * that having both an id and class on the element will not result in
 * conflicting styles.
 */
.theme-toggle {
  color: inherit;
}
body.dark .theme-toggle {
  color: inherit;
}
.upload-progress-bar {
  height: 100%;
  background-color: var(--mui-primary);
  width: 0%;
  transition: width 0.1s linear;
}

section.page {
  /* Constrain the maximum width for readability while allowing the section
     to scale responsively. A width of 90% keeps the section centered on
     larger displays without leaving excessive blank margins. */
  /* Constrain the maximum width for readability while allowing the section
     to scale responsively. On larger screens the content is limited to
     1000px and centred; on smaller screens margins and padding shrink
     to reduce excessive whitespace. */
  max-width: 1000px;
  width: 90%;
  margin: 1.5rem auto;
  padding: 1.25rem;
  /* Allow page sections to grow and push the footer down. When hidden
     (display:none), they won't affect layout. */
  flex: 1 0 auto;
}

/* Override the constrained width for the grading page so that it can use
   the full viewport width and height. By default, sections are centered
   and limited to 1000px; the grading workspace needs more space for the
   PDF. Apply generous horizontal padding to maintain breathing room. */
#grade-submission-section {
  max-width: none;
  width: 100%;
  margin: 0;
  /* Use box-sizing border-box so horizontal padding doesn't cause overflow */
  box-sizing: border-box;
  /* Reduce horizontal padding to avoid spilling beyond viewport */
  padding: 1rem;
}

/* Increase the height of the three‑column layout to fill more of the
   available viewport. Subtract approx. 8rem (128px) to account for the
   back button and title area. Adjust this value if the header height
   changes. */
.grade-layout {
  height: calc(100vh - 8rem);
}

@media (max-width: 600px) {
  section.page {
    width: 95%;
    margin: 1rem auto;
    padding: 1rem;
  }
}

.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Form and controls */
.form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.form label {
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.form input,
.form textarea,
.form select {
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
  border: 1px solid #d1d1d6;
  border-radius: 8px;
  background-color: #fff;
  color: inherit;
  outline: none;
  transition: border-color 0.2s ease;
}

.form input:focus,
.form textarea:focus,
.form select:focus {
  border-color: #007aff;
}

.primary-btn {
  align-self: flex-start;
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 122, 255, 0.3);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.primary-btn:hover {
  background-color: #005ecb;
  box-shadow: 0 3px 6px rgba(0, 122, 255, 0.4);
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list li {
  padding: 0.75rem;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 0.5rem;
  position: relative;
}

.list li h4 {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
}

.list li p {
  margin: 0;
  font-size: 0.9rem;
  color: #424245;
}

/* Assignment card styles */
.assignment-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 1rem;
  margin-bottom: 1rem;
  /* Ensure assignment cards stack their content vertically so the details
     come first, followed by the action row. This override applies
     regardless of earlier definitions. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.assignment-card h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
}

.assignment-card .meta {
  font-size: 0.75rem;
  color: #6e6e73;
  margin-bottom: 0.5rem;
}

.assignment-card p.description {
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
  color: #3a3a3c;
}

.assignment-card .actions {
  /* The actions container holds the buttons. Place them in a horizontal
     row aligned to the right. Remove default vertical alignment. */
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.assignment-card .actions input[type="file"] {
  /* Hide the native file input to avoid double choose‑file buttons. The
     custom upload row renders its own label and file name. */
  display: none;
}

/* Download link for assignment PDF */
.assignment-card a.pdf-link {
  font-size: 0.9rem;
  color: #007aff;
  text-decoration: none;
  margin-bottom: 0.5rem;
  display: inline-block;
}

/* Admin invitation code setting styles */
#inviteCodeSetting form {
  margin-top: 0.5rem;
}

/* Modal styles for grading */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 200;
}

.modal-content {
  background-color: #fff;
  padding: 1rem;
  border-radius: 10px;
  /* Increase modal size for grading interface to give more breathing room */
  width: 95%;
  max-width: 1200px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.modal-header h3 {
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #6e6e73;
}

/* PDF preview and annotation */
.pdf-container {
  position: relative;
  width: 100%;
  height: 70vh;
  border: 1px solid #e5e5ea;
  border-radius: 8px;
  /* Allow the PDF preview area to scroll when the document exceeds the container
     height. Using auto displays scrollbars only when needed. */
  overflow: auto;
}

.pdf-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.pdf-annotation-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.grade-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.grade-form textarea {
  height: 80px;
}

.resource-list .resource-item,
.exam-list .exam-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 0.5rem;
}

.resource-item a {
  color: #007aff;
  text-decoration: none;
}

/* Resource cards: similar to assignment cards but simpler */
.resource-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 1rem;
  margin-bottom: 0.75rem;
}
.resource-card h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
}

/* Exam cards: present exam information in a standout calendar layout. */
.exam-card {
  display: flex;
  flex-wrap: wrap;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 0.75rem;
  overflow: hidden;
}

/* Left portion containing a mini calendar */
.exam-calendar {
  flex: 0 0 200px;
  background-color: #f5f5f7;
  border-right: 1px solid #e5e5ea;
  padding: 0.5rem;
}
.calendar-heading {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: #1c1c1e;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.2rem;
  font-size: 0.75rem;
  text-align: center;
  color: #6e6e73;
}
.calendar-cell {
  padding: 0.2rem 0;
  border-radius: 50%;
}
.calendar-cell-header {
  font-weight: 600;
  color: #8e8e93;
}
.exam-day {
  background-color: #ff3b30;
  color: #ffffff;
  border-radius: 50%;
}

/* Right portion containing details */
.exam-details {
  flex: 1;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.exam-details h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1c1c1e;
}
.exam-detail-row {
  font-size: 0.85rem;
  color: #1c1c1e;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.exam-detail-row i {
  color: #6e6e73;
}

.exam-item .meta {
  font-size: 0.8rem;
  color: #6e6e73;
}

/* Upload container for assignment submissions. Mimics Apple's file management aesthetic. */
.upload-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.upload-container input[type="file"] {
  display: none;
}
.upload-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  background-color: #f5f5f7;
  border: 1px solid #d1d1d6;
  border-radius: 8px;
  cursor: pointer;
  color: #007aff;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
}
.upload-label:hover {
  background-color: #e5e5ea;
}
.file-name {
  font-size: 0.85rem;
  color: #6e6e73;
}

/* Hide native file inputs inside assignment cards to prevent duplicate Choose File buttons. We rely on custom labels instead. */
.assignment-card input[type="file"] {
  display: none;
}

/* Detailed section styling for assignment pages and other detailed views */
.assignment-detail-section {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 1rem;
  margin-top: 1rem;
}

/* Controls for PDF viewer in grading interface */
.pdf-viewer-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.pdf-viewer-controls button {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  background-color: #e5e5ea;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  color: #1d1d1f;
  transition: background-color 0.2s ease;
}
.pdf-viewer-controls button:hover {
  background-color: #d1d1d6;
}
.pdf-viewer-controls .page-info {
  font-size: 0.8rem;
  color: #6e6e73;
  margin-left: 0.5rem;
}

/* Annotation toolbar for grading submissions.  Arrange items in a row and
   allow the text input to take up remaining space. Buttons use the same
   styling as other buttons. */
.annot-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.annot-toolbar button.active {
  opacity: 0.85;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15);
}
.annot-toolbar input[type="text"] {
  padding: 0.25rem 0.5rem;
  border: 1px solid #d1d1d6;
  border-radius: 4px;
  font-size: 0.8rem;
  flex: 1;
}

/* Captcha input area used for thread and comment submissions */
.captcha-container {
  display: flex;
  align-items: center;
  margin: 0.5rem 0;
  flex-wrap: wrap;
}
.captcha-container img {
  height: 40px;
  margin-right: 0.5rem;
  border: 1px solid #d1d1d6;
  border-radius: 4px;
}
.captcha-container input[type="text"] {
  padding: 0.25rem 0.5rem;
  border: 1px solid #d1d1d6;
  border-radius: 4px;
  font-size: 0.8rem;
  flex: 1;
  margin-right: 0.5rem;
}
.captcha-container .captcha-refresh {
  background: none;
  border: none;
  color: #007aff;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

/* Tag badges shown on discussion cards and thread pages */
.user-tag {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  margin-right: 0.35rem;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  border-radius: 4px;
  font-weight: 500;
}

/* Tag selection options in the new thread form */
.tag-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.25rem 0 0.75rem 0;
}
/* Base styling for individual tag tokens in forms and edit controls.  These
   tokens will be interactive when used for selecting categories.  The
   inactive state is grey; active colours are applied inline via JS. */
.tag-option,
.tag-toggle {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
}

/* Default inactive appearance: grey text on light background */
.tag-toggle.inactive,
.tag-option.inactive {
  color: #888888;
  background-color: #f2f2f7;
}

/* Remove default margin for obsolete checkbox inputs; checkboxes are no
   longer used for tag toggles. */
.tag-option input {
  display: none;
}

/* Container row for tags in thread cards and pages */
.tags-row {
  margin-top: 0.25rem;
}

/* Tag filter row displayed under the discussion search bar.  Each tag acts
   as a toggle filter; active tags will be styled inline via JavaScript. */
.tag-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}
.tag-filter {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  color: #888888;
  background-color: #f2f2f7;
}
/* Status messages for tag and category filters.  Use flex to align icons
   with text and add spacing below for breathing room. */
.tag-filter-status,
.category-filter-status {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: #666666;
  margin-bottom: 0.75rem;
}

/* Category filter row for resources: same layout as tag filter row */
.category-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}
.category-filter {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  color: #888888;
  background-color: #f2f2f7;
}

/* Status tags used for pinned and locked flags */
.status-tag {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  /* Reset default margins; margins will be applied inline where needed */
  margin: 0;
  font-size: 0.75rem;
  border-radius: 4px;
  font-weight: 500;
}

/* When multiple status tags appear sequentially, add spacing between them. This ensures
   tags like 'Pin' and 'Lock' do not run together. */
.status-tag + .status-tag {
  margin-left: 0.35rem;
}

/* Override default colours for pinned and locked tags used outside the dynamic
   JavaScript styling (e.g. thread list actions).  Align the colours with
   the primary and neutral colours used elsewhere. */
/* Colours for pinned and locked tags. Pinned uses orange; locked uses red. */
.pinned-tag {
  color: #ff9500;
  background-color: rgba(255, 149, 0, 0.15);
}

.locked-tag {
  color: #ff3b30;
  background-color: rgba(255, 59, 48, 0.15);
}

.inactive {
  opacity: 0.6;
}

/* Label to indicate TA/admin authors in discussions */
.author-label {
  font-size: 0.75rem;
  color: #ff3b30;
  background-color: #ffecec;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  margin-left: 0.35rem;
}

/* Discussion home panel styling */
.discussion-home-panel {
  margin-top: 2rem;
}
.discussion-home-panel .thread-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 1rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
}
.discussion-home-panel .thread-card h4 {
  margin: 0 0 0.25rem 0;
  /* Reduce the heading size in discussion cards to make content less
     visually heavy. A slightly smaller font results in a more compact
     discussion list without sacrificing readability. */
  font-size: 0.9rem;
}
.discussion-home-panel .thread-card .meta {
  /* Reduce metadata font size for discussion cards to maintain a clear
     visual hierarchy. */
  font-size: 0.75rem;
  color: #6e6e73;
}

/* Discussion list page: reuse the same card styling as the home discussion panel */
.discussion-list .thread-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 1rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
}
.discussion-list .thread-card h4 {
  margin: 0 0 0.25rem 0;
  font-size: 0.9rem;
}
.discussion-list .thread-card .meta {
  font-size: 0.75rem;
  color: #6e6e73;
}

/* Comment card styling in thread pages */
.comment-item {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  position: relative;

  /* Increase overall line spacing within comments to improve readability.
     Applying line-height on the card ensures that paragraphs rendered
     from Markdown/HTML have sufficient vertical spacing without affecting
     metadata or action rows (which set their own font-size/spacing). */
  line-height: 1.5;
}

/* Temporary highlight for a comment when navigated to via notification. This
   draws the user's attention to the comment. The highlight fades after a
   couple seconds via JavaScript removing the class. */
.comment-item.highlighted {
  background-color: rgba(255, 235, 59, 0.3);
  transition: background-color 0.5s ease;
}
.comment-item .comment-meta {
  font-size: 0.8rem;
  color: #6e6e73;
  margin-bottom: 0.25rem;
}
.comment-item .comment-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

/* Improve readability of thread content by increasing the default line
   spacing within thread bodies. This applies to all text rendered from
   Markdown or HTML when viewing a discussion thread. */
.thread-body {
  line-height: 1.5;
  /* Reduce the default font size for thread content to prevent text from
     appearing overly large relative to other page elements. The base
     document font is 1rem; set to 0.95rem here for slightly smaller
     content. */
  font-size: 0.95rem;
}

/*
 * Quill font classes
 *
 * To ensure that font selections from the editor's font dropdown are
 * rendered correctly, define font-family rules for each whitelisted font
 * identifier. These classes are applied by Quill to text runs when a
 * particular font is chosen. Without corresponding CSS, selecting a font
 * has no visible effect.
 */
.ql-font-sans-serif {
  font-family: sans-serif;
}
.ql-font-serif {
  font-family: serif;
}
.ql-font-monospace {
  font-family: monospace;
}
.ql-font-arial {
  font-family: Arial, Helvetica, sans-serif;
}
.ql-font-times-new-roman {
  font-family: "Times New Roman", Times, serif;
}

/* Late submission badge displayed on assignments and submission pages. The red
   background and white text emphasise the warning. Used when a student
   submits after the due date or the assignment itself is past due. */
.late-badge {
  display: flex;
  flex-direction: column;
  background-color: #ffecec;
  color: #c42828;
  padding: 0.5rem 0.75rem;
  border-left: 4px solid #ff3b30;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  gap: 0.1rem;
  margin-top: 0.5rem;
}

/* Penalty summary badge for late submissions. A blue background indicates
   informational content, highlighting the conversion from raw grade to final
   grade after applying the late penalty. */
.penalty-badge {
  display: flex;
  flex-direction: column;
  background-color: #eaf4ff;
  color: #004a96;
  padding: 0.5rem 0.75rem;
  border-left: 4px solid #007aff;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  gap: 0.1rem;
  margin-top: 0.5rem;
}

/*
 * Custom two‑line cards for the rich text editor. These cards mirror the
 * styling of the penalty badge but are coloured according to their
 * semantic meaning. Each card consists of two paragraphs: the first line
 * typically contains an icon and a title, and the second line contains
 * explanatory text. Users can edit both lines directly within the editor.
 */
.info-card {
  display: flex;
  flex-direction: column;
  background-color: #eaf4ff;
  color: #004a96;
  padding: 0.5rem 0.75rem;
  border-left: 4px solid #007aff;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  gap: 0.1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.warning-card {
  display: flex;
  flex-direction: column;
  background-color: #fff5f5;
  color: #c53030;
  padding: 0.5rem 0.75rem;
  border-left: 4px solid #ff3b30;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  gap: 0.1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Success card reuses the palette of the existing green card but provides
   a distinct class name for clarity when inserting from the editor. */
.success-card {
  display: flex;
  flex-direction: column;
  background-color: #eafbea;
  color: #1c5f23;
  padding: 0.5rem 0.75rem;
  border-left: 4px solid #34c759;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  gap: 0.1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.note-card {
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  color: #6e6e73;
  padding: 0.5rem 0.75rem;
  border-left: 4px solid #8e8e93;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  gap: 0.1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/*
 * When a notification card is inserted as a <blockquote> element (e.g. via
 * the editor's Insert Card button), remove the browser's default
 * margins on blockquotes. The class-specific styles defined above
 * provide the necessary spacing, so resetting the blockquote margins
 * prevents additional indentation or spacing.
 */
blockquote.info-card,
blockquote.warning-card,
blockquote.success-card,
blockquote.note-card {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Style for the profile bio edit button. Use an inline-flex layout so that
   the Font Awesome icon and text align nicely. The button looks like a
   lightweight link but has a subtle hover effect for better affordance. */
.edit-bio-btn {
  background-color: transparent;
  border: none;
  color: #007aff;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: background-color 0.2s;
  margin-top: 0.25rem;
}
.edit-bio-btn i {
  font-size: 0.9rem;
}
.edit-bio-btn:hover {
  background-color: rgba(0, 122, 255, 0.12);
}

/* Within each custom notification card (info, warning, success, note), style
   the first and second paragraphs separately. The first line contains the
   icon and title; it should be bold and vertically centred. The second
   line is the body text; use a smaller font size. Remove default
   margins on both paragraphs to eliminate extra spacing. */
.info-card p:first-child,
.warning-card p:first-child,
.success-card p:first-child,
.note-card p:first-child {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}
.info-card p:nth-child(2),
.warning-card p:nth-child(2),
.success-card p:nth-child(2),
.note-card p:nth-child(2) {
  font-size: 0.75rem;
  margin: 0;
}

/* Increase line height within the course information card to 1.5 for
   improved readability. The line-height applies to all descendants so that
   paragraphs and lists inside the card are spaced consistently. */
#courseInfo {
  line-height: 1.5;
}

/* Highlight matched text in search results. Wraps letters or substrings
   that match the search query in a red colour to draw attention. */
.search-highlight {
  color: #d91e18;
  font-weight: bold;
}

/* Generic green card for feedback/comments. Styled similarly to
   late/penalty badges but using the success palette. This class is used
   by createTwoLineCard() when rendering TA feedback or student comments. */
.green-card {
  display: flex;
  flex-direction: column;
  background-color: #eafbea;
  color: #1c5f23;
  padding: 0.5rem 0.75rem;
  border-left: 4px solid #34c759;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  gap: 0.1rem;
  margin-top: 0.5rem;
}

/* -------------------------------------------------------------------------
 * Profile page styling
 *
 * The profile page consists of a large outer container with its own
 * card-like appearance. Inside it sits a smaller information card that
 * resembles an identification/passport document. Role labels are styled
 * consistently with the rest of the site, using blue for students and red
 * for teaching assistants (TAs).
 */

/* Container for the profile page. Applies card styling and spacing. */
.profile-container {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 1rem;
  margin-bottom: 1rem;
}

/* Inner card for personal information. Light background and subtle border
   distinguish it from the outer container. */
/* Profile info card: display user details and avatar side by side. The card
   uses a light background and subtle border. The left column grows to
   occupy available space while the right column holds the avatar. */
.profile-info-card {
  /* Use a white background to match other cards rather than a grey tint */
  background-color: #ffffff;
  border: 1px solid #e5e5ea;
  border-radius: 8px;
  /* Provide more breathing room around the content */
  padding: 1rem;
  /* Use flexbox to lay out the avatar and details.  Align items to the
     start of the row and allow wrapping so that long lines don’t force
     the avatar outside the card.  Remove space-between so the avatar
     doesn’t get pushed outside the border on wide screens. */
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  /* Fill the available width of the profile container so it aligns with
     the posted threads below and remains left aligned. */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;
}
/* Left column inside profile info card */
.profile-info-card .info-details {
  /* Allow the details column to shrink to avoid pushing the avatar outside
     the card. Setting a min-width of 0 prevents overflow by enabling
     text to wrap when necessary. */
  flex: 1 1 auto;
  min-width: 0;
}
/* Style each detail line within the profile info card. Align icons and text
   nicely using flexbox and provide consistent spacing. */
.profile-info-card .info-details p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* Increase vertical spacing and decrease font size for better readability */
  margin: 0.4rem 0;
  line-height: 1.5;
  font-size: 0.9rem;
}
.profile-info-card .info-details p i {
  /* Prevent icons from shrinking when text is long */
  flex-shrink: 0;
}
/* Avatar container inside profile info card. Aligns avatar centrally in the
   available height. */
.profile-info-card .info-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 80px;
}
/* Avatar image styling */
.profile-info-card .profile-avatar-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}
/* Bio container styling; separate it from other paragraphs with margin */
.profile-info-card .bio-container {
  margin-top: 0.5rem;
  /* Match the font size of other details for consistency */
  /* Match the font size of the other details */
  font-size: 0.9rem;
}
/* Button styled as link for editing bio. Uses the primary colour and no
   background or border. */
.btn-link {
  background: none;
  border: none;
  color: var(--primary-colour, #007aff);
  cursor: pointer;
  font-size: 0.85rem;
  text-decoration: underline;
  padding: 0;
}
.btn-link:hover {
  color: #005ecb;
}

/* Role labels attached to user names throughout the site. Use color to
   differentiate students (blue) from TAs (red). */
/*
 * Role labels indicating whether a user is a Student or TA. These labels
 * borrow styling cues from the existing author/status tags so that they
 * integrate seamlessly with the rest of the UI. The font size and padding
 * match the `.author-label` and `.status-tag` classes.  Each role uses
 * a tinted background derived from its primary colour to ensure legibility
 * on light backgrounds.
 */
.role-label {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 4px;
  margin-left: 0.35rem;
  text-transform: uppercase;
  line-height: 1;
}
.role-label.student {
  /* Student role: blue text on a light blue tint */
  color: #007aff;
  background-color: #e6f0ff;
}
.role-label.ta {
  /* TA role: red text on a light red tint, consistent with author labels */
  color: #ff3b30;
  background-color: #ffecec;
}

/* Super administrator role: purple text on a light purple tint. This
   colour distinguishes the super admin from regular students and TAs.
   The background is lightened for readability on white backgrounds. */
.role-label.super {
  color: #8e44ad;
  background-color: #f5eaf7;
}

/* Actions on a profile (mute/ban). Space them evenly and align to the end. */
.profile-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* Thread list inside profile page uses the same styling as discussion list. */
.profile-thread-list .thread-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 1rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
}

/* Styling for metadata row within profile thread cards. The author/date/comment
   information uses a subdued colour and slightly smaller font to allow the
   thread title to stand out. Tags appended here retain their own colours. */
.profile-thread-list .thread-card .meta {
  color: #6e6e73;
  font-size: 0.85rem;
}

/* Informational card (blue) used for general info messages. */
.info-card {
  display: flex;
  flex-direction: column;
  background-color: #eaf4ff;
  color: #004a96;
  padding: 0.5rem 0.75rem;
  border-left: 4px solid #007aff;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  gap: 0.1rem;
  margin-top: 0.5rem;
}

/* Warning card (yellow) for cautionary messages. */
.warning-card {
  display: flex;
  flex-direction: column;
  background-color: #fff9e6;
  color: #856404;
  padding: 0.5rem 0.75rem;
  border-left: 4px solid #ffc107;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  gap: 0.1rem;
  margin-top: 0.5rem;
}

/* Styling for badge title and content. The title holds the icon and summary,
   while the content line provides details. Use smaller font for content. */
.badge-title {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.badge-content {
  font-size: 0.75rem;
}

/* Grade feedback card styles. Use similar styling to other cards but
   reduce the top margin of headings and ensure elements are spaced
   consistently. */
.grade-feedback-card h3,
.grade-submission-card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
}

/* Labels inside grade submission cards use icons and should be bold */
.grade-submission-card label {
  font-weight: 600;
  display: block;
}

/* Inputs within the grade submission card occupy full width and have subtle
   styling consistent with other text fields. */
.grade-submission-card input[type="number"],
.grade-submission-card textarea {
  width: 100%;
  border: 1px solid #e5e5ea;
  border-radius: 6px;
  padding: 0.5rem;
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

/* Buttons inside the grade submission card share available space evenly */
.grade-submission-card .btn-red,
.grade-submission-card .btn-blue {
  flex: 1;
}

.manual-grade-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.manual-input,
.manual-textarea {
  width: 100%;
  border: 1px solid #e5e5ea;
  border-radius: 6px;
  padding: 0.5rem;
  font-size: 0.9rem;
}

.manual-textarea {
  resize: vertical;
  min-height: 4.5rem;
}

.manual-placeholder {
  padding: 1rem;
  border-radius: 8px;
  background-color: #f5f5f7;
  color: #6e6e73;
  font-style: italic;
}

.pdf-error-msg {
  padding: 1rem;
  border-radius: 8px;
  background-color: #fff8e6;
  color: #8e6b00;
  line-height: 1.4;
}

.pdf-error-msg a {
  color: #007aff;
  font-weight: 600;
}

/* Card used for thread view body and forms to give consistent rounded box */
.thread-view-card,
.form-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 1rem;
  margin-bottom: 1rem;
}

/*
 * Custom styling for discussion comment forms.  While form-card provides a
 * generic white card with subtle shadow, the comment-form-card class
 * refines the appearance to make the comment composer feel more integrated
 * with the surrounding UI.  The background is light grey with a border,
 * shadows are removed and form fields are given gentle borders and rounded
 * corners.  This styling applies to all cards used for posting comments
 * within discussion threads and forum modals.
 */
/* Custom styling for discussion comment forms.  We align this card's appearance
   with the new thread form: a clean white background, subtle border and
   consistent padding. */
.comment-form-card {
  background-color: #ffffff;
  border: 1px solid #e5e5ea;
  border-radius: 10px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 1rem;
}
.comment-form-card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}
/* Style the reply indicator inside the comment form */
.comment-form-card #replyIndicator {
  color: #6e6e73;
  font-style: italic;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}
/* Textarea and file input styling for comment composer.  Use the same
   dimensions and focus behaviour as generic form controls. */
.comment-form-card textarea,
.comment-form-card input[type="file"] {
  padding: 0.6rem 0.85rem;
  font-size: 1rem;
  border: 1px solid #d1d1d6;
  border-radius: 10px;
  background-color: #ffffff;
  color: inherit;
  outline: none;
  width: 100%;
  transition: border-color 0.2s ease;
}
.comment-form-card textarea:focus,
.comment-form-card input[type="file"]:focus {
  border-color: #007aff;
}
.comment-form-card textarea {
  resize: vertical;
}
.comment-form-card label {
  display: block;
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
  font-weight: 500;
}
.comment-form-card .btn-blue {
  margin-top: 0.75rem;
  align-self: flex-start;
}

/* Small button style for actions inside comments */
.small-btn {
  background-color: #e5e5ea;
  color: #1d1d1f;
  border: none;
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.small-btn:hover {
  background-color: #d1d1d6;
}

/* Recent assignments panel */
.recent-assignments-panel {
  margin-top: 2rem;
}

/* Two-column layout for assignment cards */
.assignment-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 1rem;
  margin-bottom: 1rem;
  /* Stack details and actions vertically on small cards */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
.assignment-card .details {
  flex: 1;
}
.assignment-card .actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-left: 0;
  margin-top: 1rem;
  justify-content: flex-end;
}

/* ------------------------------------------------------------------ */
/* Student onboarding overlay */

body.onboarding-locked {
  overflow: hidden;
}

.onboarding-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 17, 0.65);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
}

.onboarding-card {
  width: min(960px, 95vw);
  max-height: 90vh;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
  display: flex;
  overflow: hidden;
}

.onboarding-progress {
  width: 260px;
  background: #f5f5f7;
  padding: 1.5rem;
  border-right: 1px solid #e5e5ea;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.onboarding-steps {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.onboarding-step {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 12px;
  border: 1px solid transparent;
  align-items: flex-start;
}

.onboarding-step .step-index {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e5e5ea;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #1d1d1f;
}

.onboarding-step.active {
  border-color: rgba(0, 122, 255, 0.4);
  background: rgba(0, 122, 255, 0.08);
}

.onboarding-step.complete {
  opacity: 0.6;
}

.onboarding-content {
  flex: 1;
  padding: 1.75rem;
  overflow-y: auto;
}

.onboarding-panel {
  display: none;
}

.onboarding-panel.active {
  display: block;
}

.onboarding-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.75rem;
}

.onboarding-form input[type="text"],
.onboarding-form input[type="email"],
.onboarding-form input[type="password"],
.onboarding-form input[type="file"] {
  padding: 0.6rem;
  border-radius: 10px;
  border: 1px solid #d1d1d6;
  font-size: 0.95rem;
}

.avatar-preview {
  min-height: 120px;
  border: 1px dashed #d1d1d6;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6e6e73;
  font-size: 0.9rem;
  background: #fafafc;
}

.avatar-preview img {
  max-width: 120px;
  max-height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

.onboarding-alert {
  min-height: 1.25rem;
  font-size: 0.9rem;
  color: #0a7b34;
}

.onboarding-alert.error {
  color: #c0392b;
}

@media (max-width: 900px) {
  .onboarding-card {
    flex-direction: column;
    max-height: 95vh;
  }
  .onboarding-progress {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #e5e5ea;
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  .student-tools-grid {
    grid-template-columns: 1fr;
  }
  .onboarding-overlay {
    padding: 1rem;
  }
  .onboarding-card {
    width: 100%;
    border-radius: 0;
    max-height: 100vh;
  }
}

/* Buttons with different colours */
/* MUI-inspired button styles */
.btn-blue {
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.95rem;
  box-shadow: 0 2px 4px rgba(0, 122, 255, 0.3);
}
.btn-blue:hover {
  background-color: #005ecb;
}
.btn-green {
  background-color: #34c759;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.95rem;
  box-shadow: 0 2px 4px rgba(52, 199, 89, 0.3);
}
.btn-green:hover {
  background-color: #28a745;
}
.btn-yellow {
  background-color: #ffcc00;
  color: #1d1d1f;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.95rem;
  box-shadow: 0 2px 4px rgba(255, 204, 0, 0.3);
}
.btn-yellow:hover {
  background-color: #e0b000;
}
.btn-red {
  background-color: #ff3b30;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.95rem;
  box-shadow: 0 2px 4px rgba(255, 59, 48, 0.3);
}
.btn-red:hover {
  background-color: #d93025;
}

/* Neutral grey button used for file chooser labels */
.btn-grey {
  background-color: #e5e5ea;
  color: #1d1d1f;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
}
.btn-grey:hover {
  background-color: #d1d1d6;
}

.btn-secondary {
  background-color: #f0f0f5;
  color: #1d1d1f;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.95rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.btn-secondary:hover {
  background-color: #e2e2eb;
}

.btn-outline {
  background-color: transparent;
  color: #007aff;
  border: 1px solid rgba(0, 122, 255, 0.5);
  border-radius: 8px;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-outline:hover {
  background-color: rgba(0, 122, 255, 0.08);
  border-color: #007aff;
  color: #005ecb;
}

.btn-outline:disabled,
.btn-secondary:disabled,
.btn-blue:disabled,
.btn-green:disabled,
.btn-red:disabled,
.btn-grey:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* ------------------------------------------------------------------ */
/* Exam grade manager layout */

.exam-grade-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.exam-grade-header-info h2 {
  margin: 0;
  font-size: 1.5rem;
}

.exam-grade-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.exam-grade-config {
  margin-bottom: 1.25rem;
}

.exam-grade-main {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.exam-grade-sidebar {
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 120px);
}

.exam-grade-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.exam-grade-student-count {
  font-size: 0.85rem;
  color: #6e6e73;
}

.exam-grade-search {
  display: flex;
  align-items: center;
  border: 1px solid var(--mui-border);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  background-color: var(--mui-surface);
  gap: 0.4rem;
}

.exam-grade-search i {
  color: #7d7d7f;
}

.exam-grade-search input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 0.95rem;
  background: transparent;
  color: inherit;
}

.exam-grade-student-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  gap: 0.65rem;
  padding: 0.25rem 0.2rem 1.25rem 0.2rem;
}

.exam-grade-student-empty {
  color: #6e6e73;
  font-size: 0.9rem;
  text-align: center;
  padding: 1rem;
}

.exam-grade-student-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  background-color: #f8f8fb;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.exam-grade-student-item .student-secondary.student-count {
  font-size: 0.75rem;
  color: #4a4a4f;
}

.exam-grade-student-item:hover {
  border-color: rgba(0, 122, 255, 0.3);
  background-color: #eef5ff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.exam-grade-student-item.active {
  border-color: #007aff;
  background-color: rgba(0, 122, 255, 0.12);
  box-shadow: 0 4px 10px rgba(0, 122, 255, 0.15);
}

.exam-grade-student-item .student-primary {
  font-weight: 600;
  font-size: 0.95rem;
  color: #1d1d1f;
}

.exam-grade-student-item .student-secondary {
  font-size: 0.8rem;
  color: #6e6e73;
}

.exam-grade-detail-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.exam-grade-entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.exam-grade-question-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.75rem;
}

.exam-grade-question-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.exam-grade-question-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #4a4a4f;
}

.exam-grade-question-field input {
  border: 1px solid #d1d1d6;
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  font-size: 0.9rem;
}

.exam-grade-question-empty {
  font-size: 0.9rem;
  color: #6e6e73;
  background-color: #f5f5f7;
  border-radius: 8px;
  padding: 0.75rem;
  text-align: center;
}

.exam-grade-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.exam-grade-table-header h3 {
  margin: 0;
}

#examGradeTableStats {
  font-size: 0.9rem;
  color: #4a4a4f;
}

.exam-grade-chart-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: #6e6e73;
  font-size: 0.95rem;
}

.exam-grade-chart canvas {
  width: 100% !important;
}

.exam-grade-student-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.exam-grade-student-email,
.exam-grade-student-id {
  font-size: 0.8rem;
  color: #6e6e73;
}

.exam-grade-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
}

.exam-grade-breakdown {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.35rem;
  font-size: 0.85rem;
}

.exam-grade-breakdown li {
  background-color: #f5f5f7;
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
}

.exam-grade-stats-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
}

.exam-grade-stats-card,
.exam-grade-chart-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.exam-grade-stats-card h3,
.exam-grade-chart-card h3 {
  margin: 0;
}

.exam-grade-stats-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
}

.exam-grade-stat-item {
  background-color: #f8f8fb;
  border-radius: 10px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.exam-grade-stat-item span:first-child {
  font-size: 0.8rem;
  color: #6e6e73;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------ */
/* Shared Apple-style form controls                                   */

.apple-input {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 0.55rem 0.85rem;
  font-size: 0.95rem;
  background: #f8fafc;
  color: #0f172a;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.apple-input::placeholder {
  color: #94a3b8;
}

.apple-input:focus {
  outline: none;
  border-color: rgba(99, 102, 241, 0.7);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
  background: #ffffff;
}

.apple-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
}

.apple-form-group label {
  font-weight: 600;
  color: #111827;
}

/* ------------------------------------------------------------------ */
/* Exam grading workspace refresh                                     */

.exam-grading-shell {
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  background: #f8f9ff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 25px 70px rgba(15, 23, 42, 0.12);
  min-height: calc(100vh - 60px);
  overflow: hidden;
  margin: 1.5rem auto 1.5rem auto;
  width: min(1200px, calc(100% - 2.5rem));
  padding-bottom: 0;
}

.exam-grading-topbar {
  padding: 1.75rem 2rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
}

.exam-grading-topbar-meta h3 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  color: #0f172a;
}

.exam-grading-tabs {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.85rem;
  flex-wrap: wrap;
}

.exam-grading-tab {
  border: none;
  border-radius: 999px;
  padding: 0.4rem 1.1rem;
  font-weight: 600;
  font-size: 0.9rem;
  background: transparent;
  color: #6e6e73;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.exam-grading-tab.active {
  background: rgba(99, 102, 241, 0.16);
  color: #4c1d95;
  transform: translateY(-1px);
}

.exam-grading-body {
  display: flex;
  gap: 1.75rem;
  padding: 1.75rem 2rem 2.5rem;
  background: linear-gradient(120deg, #f7f8fb, #f2f6ff);
  min-height: 550px;
  flex: 1 1 auto;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}

.exam-grading-sidebar {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  top: 90px;
  align-self: flex-start;
  max-height: calc(100vh - 100px);
  min-height: 0;
  z-index: 2;
}

.exam-grading-sidebar-card {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.exam-grading-search {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  background: #f3f5fb;
  border: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.exam-grading-search:focus-within {
  border-color: rgba(99, 102, 241, 0.35);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
}

.exam-grading-search i {
  color: #7d7d80;
}

.exam-grading-search input {
  border: none;
  outline: none;
  flex: 1;
  background: transparent;
  font-size: 0.95rem;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
}

.exam-grading-search input:focus {
  box-shadow: none;
}

.exam-grading-select {
  width: 100%;
  border-radius: 12px;
  border: 1px solid #e0e7ff;
  padding: 0.55rem 0.9rem;
  font-size: 0.9rem;
  color: #111827;
  background: #fff;
}

.exam-grading-student-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.35rem 0 3.75rem 0;
  scrollbar-gutter: stable both-edges;
  min-height: 0;
  scroll-padding-bottom: 3.75rem;
}

.exam-grading-student-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: #9ca3af;
  font-size: 0.9rem;
}

.exam-grading-student-list::-webkit-scrollbar {
  width: 12px;
}

.exam-grading-student-list::-webkit-scrollbar-track {
  background: transparent;
  margin: 12px 0;
}

.exam-grading-student-list::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.5);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

.exam-grading-student-list::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 114, 128, 0.65);
  border-color: transparent;
}

.exam-grading-student {
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 16px;
  background: #ffffff;
  padding: 0.45rem 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  box-shadow: none;
}

.exam-grading-student:hover {
  border-color: rgba(148, 163, 184, 0.8);
}

.exam-grading-student.is-active {
  border-color: rgba(96, 165, 250, 0.8);
  background: linear-gradient(90deg, rgba(219, 234, 254, 0.85), #ffffff 70%);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.18);
}

.exam-grading-student:focus {
  outline: none;
}

.exam-grading-student:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.65);
  outline-offset: 3px;
}

.exam-grading-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: #eef2ff;
  flex-shrink: 0;
}

.exam-grading-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.exam-grading-student-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.exam-grading-student-name {
  font-weight: 600;
  color: #0f172a;
  font-size: 1.06rem;
}

.exam-grading-student-meta {
  font-size: 0.78rem;
  color: #6b7280;
}

.exam-grading-score-pill {
  border-radius: 12px;
  padding: 0.25rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  min-width: 48px;
  text-align: center;
}

.exam-grading-score-pill.is-graded {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.exam-grading-score-pill.is-partial {
  background: rgba(249, 115, 22, 0.12);
  color: #c2410c;
}

.exam-grading-score-pill.is-empty {
  background: rgba(148, 163, 184, 0.25);
  color: #475569;
}

.exam-grading-main {
  flex: 1;
  background: #ffffff;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  min-height: 520px;
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

.exam-grading-empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.85rem;
  color: #98a2b3;
  padding: 2rem;
  text-align: center;
}

.exam-grading-empty-state i {
  font-size: 3rem;
  opacity: 0.35;
}

.exam-grading-header-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.6rem 2rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  z-index: 2;
}

.exam-grading-header-identity h2 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
  color: #0f172a;
}

.exam-grading-header-subtitle {
  margin: 0.2rem 0 0;
  color: #6b7280;
  font-size: 0.9rem;
}

.exam-grading-total-pill {
  border-radius: 18px;
  padding: 0.5rem 1.25rem;
  background: linear-gradient(135deg, #ede9fe, #eef2ff);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 0.35rem;
}

.exam-grading-total-pill span {
  font-size: 0.85rem;
  color: #6b21a8;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.exam-grading-total-number {
  font-size: 2.8rem;
  font-weight: 600;
  color: #5b21b6;
}

.exam-grading-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  overflow-y: auto;
  gap: 2rem;
}

.exam-grading-score-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.exam-grading-score-card {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  padding: 1rem 1.2rem;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.exam-grading-score-card--single {
  max-width: 320px;
}

.exam-grading-score-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.exam-grading-score-label {
  font-weight: 600;
  color: #111827;
}

.exam-grading-score-max {
  font-size: 0.85rem;
  color: #94a3b8;
}

.exam-grading-score-input {
  border-radius: 14px;
  border: 1px solid #d8e0f2;
  padding: 0.65rem 0.75rem;
  font-size: 1.05rem;
  font-weight: 600;
  background: #f8f9ff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.exam-grading-score-input:focus {
  outline: none;
  border-color: rgba(99, 102, 241, 0.75);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
}

.exam-grading-score-input[data-invalid] {
  border-color: rgba(249, 115, 22, 0.65);
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.25);
  color: #b45309;
}

.exam-grading-save-bar {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  padding: 1.25rem 0 0;
  margin-top: auto;
}

.exam-grading-save-bar .apple-btn {
  min-width: 200px;
  justify-content: center;
  border-radius: 999px;
}

.exam-publish-review {
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.4rem;
  border-radius: 16px;
  background: #f5f7fb;
  border: 1px solid rgba(226, 232, 240, 0.9);
}

.exam-publish-review h5 {
  margin: 0 0 0.85rem 0;
  font-size: 1rem;
  color: #0f172a;
}

.exam-publish-review-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.exam-publish-review-grid .apple-input {
  background: #ffffff;
  border-color: #dbeafe;
  flex: 1 1 240px;
  min-width: 0;
}

@media (max-width: 1200px) {
  .exam-grading-body {
    flex-direction: column;
  }
  .exam-grading-sidebar {
    width: 100%;
    position: static;
  }
  .exam-grading-main {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .exam-grading-header-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .exam-grading-total-pill {
    align-self: stretch;
    align-items: flex-start;
  }
  .exam-grading-score-grid {
    grid-template-columns: 1fr;
  }
}

.exam-grade-stat-item span:last-child {
  font-size: 1.4rem;
  font-weight: 600;
}

.exam-grade-stats-extremes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.exam-grade-extreme-badge {
  flex: 1 1 160px;
  background-color: rgba(0, 122, 255, 0.08);
  border-radius: 10px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.exam-grade-extreme-badge span:first-child {
  font-size: 0.8rem;
  color: #005ecb;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.exam-grade-extreme-badge span:last-child {
  font-size: 1.3rem;
  font-weight: 600;
  color: #003f8a;
}

/* Admin navigation */
.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  border-bottom: 1px solid #e5e5ea;
  padding-bottom: 0.5rem;
}
.admin-nav button {
  background: none;
  border: none;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 6px;
  color: #007aff;
}
.admin-nav button.active {
  background-color: #007aff;
  color: #fff;
}
.admin-subsection {
  margin-top: 1.5rem;
}

.exam-mail-hero {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  align-items: center;
  padding: 1.75rem 2rem;
  border-radius: 22px;
  background: linear-gradient(135deg, #eef2ff, #fdf2f8);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
}

.exam-mail-hero__badge {
  min-width: 240px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
  padding: 1.25rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);
  text-align: center;
}

.exam-mail-hero__badge span {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: #6366f1;
  text-transform: uppercase;
}

.exam-mail-hero__badge strong {
  display: block;
  font-size: 1rem;
  margin: 0.35rem 0;
  color: #0f172a;
}

.exam-mail-hero__badge p {
  margin: 0;
  font-size: 0.85rem;
  color: #6b7280;
}

.exam-mail-checklist {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0 0;
  display: grid;
  gap: 0.5rem;
}

.exam-mail-checklist li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #4b5563;
  font-size: 0.95rem;
}

.exam-mail-checklist i {
  color: #10b981;
}

.exam-mail-layout {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  gap: 1.5rem;
  align-items: start;
}

.exam-mail-panel {
  border-radius: 22px;
  padding: 1.75rem;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

.exam-mail-card {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.exam-mail-card .apple-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.exam-mail-card .apple-form-group--stack {
  gap: 0.5rem;
}

.exam-mail-card .apple-form-group label {
  font-weight: 600;
  color: #0f172a;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

.exam-mail-card .apple-input,
.exam-mail-card select,
.exam-mail-card textarea {
  border-radius: 12px;
  border: 1px solid #dbe1ff;
  background: linear-gradient(180deg, #fff, #f5f6ff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(79, 70, 229, 0.06);
  font-size: 0.9rem;
  padding: 0.55rem 0.85rem;
  line-height: 1.2;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.exam-mail-card .apple-input:focus,
.exam-mail-card select:focus,
.exam-mail-card textarea:focus {
  border-color: #6366f1;
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.exam-mail-card textarea {
  min-height: 90px;
}

.exam-mail-panel--preview {
  position: sticky;
  top: 84px;
}

.exam-mail-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.exam-mail-section__header {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.exam-mail-section__pill {
  padding: 0.2rem 0.8rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 0.8rem;
  font-weight: 600;
}

.exam-mail-section__header h4 {
  margin: 0;
  font-size: 1.05rem;
  color: #0f172a;
}

.exam-mail-section__header p {
  margin: 0.15rem 0 0 0;
  color: #6b7280;
  font-size: 0.9rem;
}

.exam-mail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.exam-mail-problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
}

.problem-max-wrapper label {
  font-size: 0.85rem;
  color: #6e6e73;
  display: block;
  margin-bottom: 0.35rem;
}

.exam-mail-dropzone {
  border: 2px dashed #d1d5db;
  border-radius: 20px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  background: #f9fafb;
}

.exam-mail-dropzone__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #eef2ff;
  display: grid;
  place-items: center;
}

.exam-mail-dropzone__icon i {
  font-size: 1.5rem;
  color: #4f46e5;
}

.exam-mail-dropzone p {
  margin: 0;
  font-weight: 600;
  color: #111827;
}

.exam-mail-dropzone small {
  color: #6b7280;
}

.exam-mail-dropzone:hover {
  border-color: #818cf8;
  background: #eef2ff;
}

.exam-mail-dropzone.has-file {
  border-color: #34d399;
  background: #ecfdf5;
}

.exam-mail-file-hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: #6b7280;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.2rem 0.8rem;
  background: #eef2ff;
  font-size: 0.8rem;
  color: #4338ca;
}

.pill--ghost {
  background: #f3f4f6;
  color: #4b5563;
}

.exam-mail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

.exam-mail-actions--spread {
  justify-content: space-between;
}

.apple-btn {
  border-radius: 999px;
  padding: 0.65rem 1.4rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  background: #fff;
  color: #111827;
}

.apple-btn i {
  font-size: 0.9rem;
}

.apple-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
}

.apple-btn:active {
  transform: translateY(0);
  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.1);
}

.apple-btn-primary {
  background: linear-gradient(120deg, #6366f1, #7c3aed);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.apple-btn-primary:hover {
  box-shadow: 0 18px 30px rgba(99, 102, 241, 0.35);
}

.apple-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.apple-btn.is-success {
  background: #34c759;
  color: #fff;
  border-color: rgba(52, 199, 89, 0.55);
  box-shadow: 0 12px 28px rgba(52, 199, 89, 0.35);
}

.exam-mail-preview {
  min-height: 360px;
}

.exam-mail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.exam-mail-meta strong {
  font-size: 1.1rem;
  color: #1d1d1f;
}

.exam-mail-meta span {
  font-size: 0.9rem;
  color: #6e6e73;
}

.exam-mail-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.exam-mail-stats-card {
  background: #f5f7fb;
  border-radius: 14px;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.exam-mail-stats-card__value {
  font-size: 1.4rem;
  font-weight: 600;
  color: #0a84ff;
}

.exam-mail-stats-card__label {
  font-size: 0.8rem;
  color: #6e6e73;
  letter-spacing: 0.02em;
}

.exam-mail-histogram {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 1rem 1.25rem;
  background: #f9fafb;
  margin-bottom: 1rem;
}

.exam-mail-histogram__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.75rem;
}

.exam-mail-histogram__header strong {
  font-size: 0.95rem;
  color: #111827;
}

.exam-mail-histogram__header span {
  font-size: 0.8rem;
  color: #6b7280;
}

.exam-mail-histogram__rows {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.exam-mail-histogram__row {
  display: grid;
  grid-template-columns: 120px 1fr 110px;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.85rem;
  color: #4b5563;
}

.exam-mail-histogram__row.is-peak .exam-mail-histogram__bar-fill {
  background: linear-gradient(90deg, #34d399, #10b981);
}

.exam-mail-histogram__label {
  font-weight: 600;
}

.exam-mail-histogram__bar {
  height: 10px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.exam-mail-histogram__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #c7d2fe, #6366f1);
  border-radius: inherit;
  transition: width 0.3s ease;
}

.exam-mail-histogram__value {
  text-align: right;
}

.exam-mail-warning {
  background: #fff5f5;
  border: 1px solid #ffd7d7;
  color: #b00020;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.exam-mail-table-wrapper {
  border: 1px solid #e7e7ec;
  border-radius: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.exam-mail-preview-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
}

.exam-mail-preview-table th,
.exam-mail-preview-table td {
  padding: 0.65rem;
  text-align: left;
  border-bottom: 1px solid #f1f1f4;
  font-size: 0.9rem;
}

.exam-mail-preview-table th {
  background: #f8f8fb;
  font-weight: 600;
  color: #4a4a4a;
}

.exam-mail-footnote {
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: #6e6e73;
  background: #fafafb;
}

.exam-mail-send-result {
  background: #ecfdf3;
  border: 1px solid #c7f2d3;
  color: #15803d;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  margin-bottom: 1rem;
  font-weight: 600;
}

.exam-mail-failures {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 12px;
  background: #fffaf0;
  border: 1px solid #ffe1b4;
}

.exam-mail-failures ul {
  padding-left: 1.2rem;
  margin: 0.5rem 0 0 0;
}

.exam-mail-failures li {
  font-size: 0.9rem;
  color: #7c5a0b;
}

.exam-mail-empty {
  border: 1px dashed #e5e7eb;
  border-radius: 18px;
  padding: 2rem 1.25rem;
  text-align: center;
  color: #6b7280;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}

.exam-mail-empty i {
  font-size: 1.8rem;
  color: #4338ca;
}

.exam-mail-empty p {
  margin: 0;
  font-weight: 600;
  color: #111827;
}

.exam-mail-empty small {
  font-size: 0.85rem;
}

@media (max-width: 1024px) {
  .exam-mail-layout {
    grid-template-columns: 1fr;
  }
  .exam-mail-panel--preview {
    position: static;
  }
}

@media (max-width: 640px) {
  .exam-mail-hero {
    flex-direction: column;
  }
  .exam-mail-histogram__row {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }
  .exam-mail-histogram__value {
    text-align: left;
  }
  .exam-mail-file-hint {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
}

/* Chat layout styles */
.chat-container {
  display: flex;
  height: 400px;
  border: 1px solid #e5e5ea;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 1rem;
}
.chat-sidebar {
  width: 30%;
  background-color: #f9f9fb;
  border-right: 1px solid #e5e5ea;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
}
.chat-sidebar #conversationList {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 1rem;
}
.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}
.chat-header {
  padding: 0.5rem;
  border-bottom: 1px solid #e5e5ea;
  font-weight: 600;
}
.chat-messages {
  flex: 1;
  padding: 0.5rem;
  overflow-y: auto;
  background-color: #f9f9fb;
}
.chat-message {
  max-width: 80%;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  word-wrap: break-word;
}
.chat-message.self {
  background-color: #007aff;
  color: #fff;
  margin-left: auto;
  text-align: right;
}
.chat-message.other {
  background-color: #e5e5ea;
  color: #1d1d1f;
}
.chat-input {
  padding: 0.5rem;
  border-top: 1px solid #e5e5ea;
  display: flex;
  gap: 0.5rem;
}
.chat-input textarea {
  flex: 1;
  resize: none;
  border: 1px solid #d1d1d6;
  border-radius: 8px;
  padding: 0.5rem;
  font-size: 0.9rem;
}
.chat-input button {
  align-self: flex-end;
}

/* Progress bars for grade statistics */
.progress-bar {
  width: 100%;
  height: 10px;
  background-color: #e5e5ea;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 0.25rem;
}
.progress {
  height: 100%;
  background-color: #34c759;
  text-align: right;
  padding-right: 0.25rem;
  color: #fff;
  font-size: 0.75rem;
  line-height: 10px;
}

/* Card styling for the scores dashboard */
.score-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 1rem;
  margin-bottom: 1rem;
}
.score-card .title {
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 0.25rem 0;
}
.score-card .meta {
  font-size: 0.8rem;
  color: #6e6e73;
  margin-bottom: 0.5rem;
}

/* Notification page list */
#notificationsList .notification-item {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
}
#notificationsList .notification-item.unread {
  font-weight: 600;
}

/* Scores section styles */
#scores-section .score-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
#scores-section .score-table th,
#scores-section .score-table td {
  padding: 0.5rem;
  text-align: left;
  border-bottom: 1px solid #e5e5ea;
}
#scores-section .score-table th {
  background-color: #f2f2f7;
  font-weight: 600;
}
#scores-section .score-table tr:hover {
  background-color: #f9f9fb;
}

/* Message list styles */
.message-list {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.message-item {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 0.75rem;
  cursor: pointer;
}
.message-item.unread {
  font-weight: 600;
}
.message-item .meta {
  font-size: 0.8rem;
  color: #6e6e73;
  margin-bottom: 0.25rem;
}

/* Conversation items in chat sidebar */
.chat-sidebar .message-item {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.message-compose {
  margin-top: 2rem;
}

/* Pending students and student management items */
.pending-student, .student-item {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
.pending-student button, .student-item button {
  margin-left: 0.5rem;
}

.student-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.25rem;
}

.student-tool-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.student-tool-card__header {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
}

.eyebrow {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: #8e8e93;
  margin: 0;
}

.admin-hint {
  font-size: 0.85rem;
  color: #6e6e73;
  margin: 0;
}

.admin-hint.warning {
  color: #b00020;
}

.admin-hint.success {
  color: #0a7b34;
}

.admin-hint.error {
  color: #c0392b;
}

.login-helper {
  font-size: 0.85rem;
  color: #6e6e73;
  margin: 0.4rem 0 0.8rem;
}

.student-import-form input[type="file"] {
  width: 100%;
  border: 1px dashed #d1d1d6;
  border-radius: 10px;
  padding: 0.75rem;
  background-color: #f8f8fb;
  font-size: 0.9rem;
  box-sizing: border-box;
}

.student-import-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.loading-indicator {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #d1d1d6;
  border-top-color: #007aff;
  animation: spin 0.75s linear infinite;
}

.student-import-summary {
  border: 1px solid #e5e5ea;
  border-radius: 10px;
  padding: 0.75rem;
  font-size: 0.9rem;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.75rem;
  background-color: #fff;
}

.student-import-summary ul {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}

.student-import-summary li {
  margin-bottom: 0.25rem;
}

.student-import-credentials textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #d1d1d6;
  padding: 0.5rem;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  font-size: 0.85rem;
  background: #fbfbff;
  box-sizing: border-box;
  display: block;
  max-width: 100%;
  resize: vertical;
}

.student-import-credentials {
  border: 1px solid #e5e5ea;
  border-radius: 10px;
  padding: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.75rem;
  background-color: #fff;
}

.student-import-credentials .credentials-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
}

.student-selection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.student-selection-summary {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.95rem;
  font-weight: 500;
}

.student-selection-summary strong {
  font-size: 1.35rem;
  color: #111;
}

.student-item.selected {
  border: 1px solid rgba(0, 122, 255, 0.3);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}

.student-item .student-select-cell {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.student-select-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.student-item .student-info {
  flex: 1;
}

.student-item .student-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.8rem;
}

.status-tag.role-student {
  color: #007aff;
  background-color: rgba(0, 122, 255, 0.12);
}

.status-tag.role-admin {
  color: #ff9500;
  background-color: rgba(255, 149, 0, 0.15);
}

.status-tag.role-super {
  color: #8e44ad;
  background-color: rgba(142, 68, 173, 0.15);
}

.status-tag.pending {
  color: #b95000;
  background-color: rgba(255, 149, 0, 0.2);
}

.status-tag.muted {
  color: #d35400;
  background-color: rgba(211, 84, 0, 0.2);
}

.status-tag.banned {
  color: #ff3b30;
  background-color: rgba(255, 59, 48, 0.18);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Responsive design */
@media (max-width: 600px) {
  /* Keep the navigation visible on small screens and allow horizontal scrolling */
  nav.nav-links {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 0.5rem;
    width: 100%;
  }
  /* Each nav button should maintain its size and not shrink */
  nav.nav-links button {
    flex: 0 0 auto;
    margin: 0 0.25rem;
  }
  header.navbar {
    /* Keep a horizontal layout on small screens and allow items to wrap if
       necessary. This prevents the navigation bar from collapsing into
       a column and keeps the brand and nav buttons aligned. */
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  .user-info {
    margin-left: auto;
    margin-top: 0;
  }
}

@media (max-width: 1100px) {
  .exam-grade-main {
    flex-direction: column;
  }

  .exam-grade-sidebar {
    position: static;
    width: 100%;
    max-height: none;
  }

  .exam-grade-detail-column {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .exam-grade-header {
    flex-direction: column;
    align-items: stretch;
  }

  .exam-grade-header-actions {
    justify-content: flex-start;
  }

  .exam-grade-stats-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .exam-grade-stats-overview {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

/* === Assignment card overrides ===
   Ensure assignment cards stack their content vertically, with the details section
   appearing first and the action buttons aligned to the bottom right. These rules
   override earlier definitions for a consistent layout. */
.assignment-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.assignment-card .details {
  flex: 1;
}
.assignment-card .actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

/* Admin Dashboard metrics styling */
.admin-dashboard-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}

.admin-dashboard-metric {
  flex: 1 1 120px;
  background-color: #f5f5f7;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.admin-dashboard-metric .icon {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
  color: #007aff;
}

.admin-dashboard-metric .value {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.admin-dashboard-metric .label {
  font-size: 0.85rem;
  color: #6e6e73;
}

/* Student Dashboard metrics styling */
.student-dashboard-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}

.student-dashboard-metric {
  flex: 1 1 120px;
  background-color: #f5f5f7;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.student-dashboard-metric .icon {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
  color: #007aff;
}

.student-dashboard-metric .value {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.student-dashboard-metric .label {
  font-size: 0.85rem;
  color: #6e6e73;
}

/* ------------------------------------------------------------------ */
/* Search bar styles with FontAwesome icons */
/* These rules style the search bars used across assignments, resources, */
/* discussions and exam sections. The bar is a flex container with an */
/* icon and an input. */
.search-bar {
  display: flex;
  align-items: center;
  background-color: var(--mui-surface);
  border: 1px solid var(--mui-border);
  border-radius: 6px;
  padding: 0 0.5rem;
  margin-bottom: 0.5rem;
  width: 100%;
  max-width: 400px;
}

.search-bar i {
  margin-right: 0.5rem;
  color: #7d7d7f;
}

.search-bar input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0.5rem 0;
  font-size: 1rem;
  background: transparent;
  color: inherit;
}

/* Dark mode variations for the search bar */
body.dark .search-bar {
  background-color: var(--mui-dark-surface);
  border-color: var(--mui-dark-border);
}

body.dark .search-bar i {
  color: var(--mui-dark-text);
}

/* Pagination controls for assignments and discussions */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  /* Add some breathing space above and below the pagination controls so they
     don't collide with adjacent sections (e.g. the New Thread card). */
  margin-top: 0.75rem;
  margin-bottom: 1rem;
}

.pagination button {
  padding: 0.35rem 0.65rem;
  border: none;
  border-radius: 4px;
  background-color: #f2f2f7;
  color: #007aff;
  font-size: 0.9rem;
  cursor: pointer;
}

.pagination button.active {
  background-color: #007aff;
  color: #ffffff;
  cursor: default;
}

.pagination button.disabled {
  opacity: 0.5;
  cursor: default;
}

/* Ensure meta lines in announcements and home cards are subdued */
#announcementsList .meta,
#homeThreadsList .meta,
#homeAssignmentsList .meta {
  font-size: 0.8rem;
  color: #6e6e73;
}

/* Student Overall Dashboard styles */
.dashboard-grid {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.dashboard-item {
  flex: 1;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.dashboard-item .gauge {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.dashboard-item .gauge::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background-color: #ffffff;
}
.dashboard-item .gauge-value {
  position: relative;
  font-size: 1.1rem;
  font-weight: 600;
  z-index: 1;
  text-align: center;
  line-height: 1.1;
}
.dashboard-item .gauge-label {
  font-size: 0.85rem;
  color: #6e6e73;
  text-align: center;
}

/* Stack the dashboard items vertically on small screens for better fit. */
@media (max-width: 600px) {
  .dashboard-grid {
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
  }
  .dashboard-item {
    /* Make each gauge card full width on mobile */
    flex: 1 1 auto;
    width: 100%;
    margin: 0;
  }
}

/* --------------------------------------------------------------------------
   Calendar view styles
   -------------------------------------------------------------------------- */

.calendar-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Style the calendar header bar within the mini calendar card */
#calendar-section .calendar-left .calendar-header {
  background-color: #ff3b30;
  color: #ffffff;
  padding: 0.5rem 0.5rem;
  margin: 0;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Style the month navigation buttons within the calendar header */
#calendar-section .calendar-left .calendar-header button {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 1rem;
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
}

/* Place the grid on a white background inside the card */
#calendar-section .calendar-left #calendarGrid {
  background-color: #ffffff;
  padding: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

/* Use ID selector for the main calendar grid to avoid clashing with exam mini calendars */
#calendarGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  /* Reduce the gap between date cells for a tighter calendar layout */
  gap: 0.25rem;
}

/* Style cells only within the main calendar grid */
/* Calendar cells for the standalone calendar page. Make them circular like the exam mini-calendar. */
#calendarGrid .calendar-cell {
  /* Neutral background for days without events */
  background-color: #f2f2f7;
  border-radius: 50%;
  /* Use equal width and height to ensure perfect circles. Reduce size to
     leave more breathing room around the mini calendar. */
  /* Increase the size slightly and ensure the cell remains a perfect circle */
  width: 48px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  margin: auto;
}

/* Day number styling */
#calendarGrid .calendar-cell > div:first-child {
  font-weight: 600;
  margin: 0;
}

/* Empty cells (outside current month) */
#calendarGrid .calendar-empty {
  background: none;
  box-shadow: none;
  cursor: default;
}

/* Past dates appear grey */
#calendarGrid .calendar-past {
  color: #b0b0b0;
  opacity: 0.5;
}

/* Highlight today's date */
#calendarGrid .calendar-today {
  /* Use a red ring around today's date */
  background-color: #ff30413c;
}

/* Selected day border highlight */
#calendarGrid .calendar-selected {
  /* Use a red ring for the selected date */
  box-shadow: 0 0 0 2px #ff3b30 inset;
}

/* Assignment/exam/both fill for calendar page */
#calendarGrid .assignment-day {
  /* Colour assignment dates using the same red hue as the selected date ring */
  color: #ff3b30;
  background-color: none;
  border: none;
}
#calendarGrid .exam-day {
  /* Colour exam dates by changing the number colour instead of filling the circle */
  color: #f58b02;
  background-color: none;
  border: none;
}
#calendarGrid .both-day {
  /* When both an assignment and an exam fall on the same date, use assignment (red) colour */
  color: #039bfa;
  background-color: none;
  border: none;
}

/* Fade fill for past event days */
#calendarGrid .calendar-past.assignment-day,
#calendarGrid .calendar-past.exam-day,
#calendarGrid .calendar-past.both-day {
  opacity: 0.5;
}

.calendar-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  position: absolute;
  bottom: 4px;
  left: 4px;
}

.assignment-dot {
  /* Red dot for assignment events */
  background-color: #ff3b30;
}

.exam-dot {
  /* Blue dot for exam events */
  background-color: #0a84ff;
}

.calendar-event-card {
  background-color: #ffffff;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  /* Increase font size and line height for better readability in the detail panel */
  font-size: 1rem;
  line-height: 1.5;
}

/* Header row within calendar event card */
.calendar-event-card-header {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 600;
  color: #1c1c1e;
}

.calendar-detail {
  max-height: 400px;
  overflow-y: auto;
}

/* Header cells for the mini calendar day names */
#calendarGrid .calendar-cell-header {
  /* Header cells should not be circular */
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  font-weight: 600;
  color: #6e6e73;
  background: none;
}

/* Layout for the calendar page: left panel for mini calendar and right panel for day details */
#calendar-section .calendar-container {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-start;
  position: relative;
}

#calendar-section .calendar-left {
  /* Increase width of the mini calendar so all dates are visible without clipping */
  /* Make the mini calendar wider to avoid crowding and ellipses */
  flex: 0 0 380px;
  /* mini calendar container uses card styling */
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

#calendar-section .calendar-right {
  flex: 1;
  min-width: 200px;
  position: relative;
}

/* The right-hand detail panel should scroll if content is long */
#calendar-section .calendar-detail {
  max-height: 60vh;
  overflow-y: auto;
}

/* Position export button at bottom right of calendar page */
/* Export button should stay at the bottom right of the page */
#exportCalendarBtn {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 999;
}

/* Event type badges for calendar detail cards */
.calendar-event-tag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  margin-left: 0.5rem;
}
.calendar-event-tag.assignment {
  color: #ff3b30;
  background-color: rgba(255, 59, 48, 0.15);
}
.calendar-event-tag.exam {
  color: #0a84ff;
  background-color: rgba(10, 132, 255, 0.15);
}

/* Tag for submitted assignments */
.calendar-event-tag.submitted {
  color: #0a84ff;
  background-color: rgba(10, 132, 255, 0.15);
}

/* Tag for assignments not yet submitted */
.calendar-event-tag.not-submitted {
  color: #ff3b30;
  background-color: rgba(255, 59, 48, 0.15);
}

/* Hide the exam search bar on the exams page per user request */
#examSearch {
  display: none !important;
}

/*
 * Rich text editor containers. These classes provide basic styling
 * consistent with the existing form controls. The Quill editor
 * generates its own content element (.ql-editor) inside these
 * containers. A minimum height ensures there is space to begin
 * typing and the border matches the existing input styling.
 */
.quill-editor,
.comment-editor {
  min-height: 150px;
  border: 1px solid #d1d1d6;
  border-radius: 10px;
  background-color: #ffffff;
  padding: 0.5rem;
}
/* Comment editor slightly shorter than thread editor */
.comment-editor {
  min-height: 120px;
}

/*
 * Layout for the thread detail page. The page is divided into two
 * columns: a larger left column for the thread content and comments,
 * and a right column for author and thread metadata. On narrow
 * screens the columns stack vertically. The widths are chosen to
 * provide a comfortable reading area for the thread while still
 * leaving room for supplementary information on the side.
 */
.thread-page-columns {
  display: flex;
  /* Increase gap to provide more breathing space between the main content and the sidebar. */
  gap: 2rem;
  align-items: flex-start;
}
.thread-page-columns .thread-left {
  flex: 2 1 65%;
}
.thread-page-columns .thread-right {
  flex: 1 1 35%;
}
@media (max-width: 900px) {
  .thread-page-columns {
    flex-direction: column;
  }
  .thread-page-columns .thread-left,
  .thread-page-columns .thread-right {
    flex: 1 1 100%;
  }
}

/*
 * Scale images within the thread left column to prevent overflow. When users
 * insert images (e.g., via the rich text editor), they may upload large
 * pictures. To ensure that these images do not exceed the available
 * width of the thread content area, constrain their maximum width to
 * 100% of the container. Preserve aspect ratio by setting height to auto.
 * The display property is set to block so that images start on a new line.
 */
.thread-page-columns .thread-left img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Ensure videos embedded in the thread content do not exceed the width of the
   content area. The max-width and height:auto settings maintain aspect
   ratio while fitting the container, and display:block ensures the video
   starts on a new line similar to images. */
.thread-page-columns .thread-left video {
  max-width: 100%;
  height: auto;
  display: block;
}

/*
 * Sidebar cards in the thread detail page. These cards use the same
 * visual style as other cards in the app (rounded corners, subtle
 * shadow and padding) but are scoped specifically to the thread
 * sidebar. Headings within these cards have reduced margin for a
 * tighter layout.
 */
.sidebar-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 1rem;
  /* Increase bottom margin to separate multiple sidebar cards more clearly. */
  margin-bottom: 1.25rem;
}
.sidebar-card h4 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  /* Reduce heading size in sidebar cards to minimise clutter */
  /* Further reduce heading size in sidebar cards */
  font-size: 0.9rem;
  font-weight: 600;
}

/* Increase line spacing and vertical rhythm within sidebar cards. Paragraphs
   inside these cards get extra margin to prevent crowding of information. */
.sidebar-card p {
  /* Reduce font size and increase vertical spacing inside sidebar cards */
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
  line-height: 1.5;
  font-size: 0.9rem;
}

/* -------------------------------------------------------------------------
 * Grading workspace styles
 *
 * The three–column grading layout consists of a student list on the left,
 * a PDF viewer with annotation tools in the middle, and a grading panel on
 * the right. The design adapts the existing Apple‑inspired aesthetic: light
 * backgrounds, subtle separators, rounded corners and consistent spacing.
 * A responsive flex layout ensures the columns fill the available width
 * while respecting minimum widths on small screens.
 */

/* Container for the grading page. Use full width and flex to arrange the
   three columns horizontally. A small gap provides separation between
   columns without adding explicit borders. */
.grade-layout {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: calc(100vh - 100px); /* leave room for header and nav */
  gap: 1rem;
  overflow: hidden;
}

/* Student list column. Fixed minimum width to ensure the list remains
   usable even when many students appear. The column scrolls when content
   overflows. A subtle right border delineates it from the PDF area. */
.grade-student-list {
  /* Narrower student list to free space for the PDF canvas. */
  /* Slightly narrower width so that the middle PDF area gains more space */
  flex: 0 0 210px;
  max-width: 230px;
  display: flex;
  flex-direction: column;
  background-color: #f9f9f9;
  border-right: 1px solid #e5e5ea;
  overflow-y: auto;
  padding: 0.75rem;
}

/* Control bar within the student list for search/filter/sort. Stack
   vertically with a small gap. Inputs span the full width of the column. */
.grade-list-controls {
  margin-bottom: 0.75rem;
}
.grade-search-input,
.grade-search-input,
.grade-filter-select,
.grade-sort-select {
  width: 100%;
  max-width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid #d1d1d6;
  border-radius: 6px;
  font-size: 0.9rem;
  background-color: #ffffff;
  color: #1d1d1f;
  box-sizing: border-box;
}
.grade-filter-select,
.grade-sort-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%236e6e73' d='M5 7l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 0.8rem;
  padding-right: 2rem;
}

/* Student items. Flex container so avatar, info and score align nicely.
   Highlight the active item with a blue tint. Hover feedback improves
   discoverability. */
.grade-student-item {
  display: flex;
  align-items: center;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s;
}
.grade-student-item:hover {
  background-color: #f2f2f7;
}
.grade-student-item.active {
  background-color: #d6eaff;
}
.student-avatar {
  font-size: 1.2rem;
  color: #8e8e93;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  background-color: #e5e5ea;
  border-radius: 50%;
}

/* Avatar images in the grading student list. Constrain size and make
   circular to match the design language. Use object-fit to crop long
   names gracefully. */
.student-avatar-img {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  object-fit: cover;
  background-color: #e5e5ea;
}
.pdf-container.pdf-offline {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 18rem;
  background: #f5f5f7;
  border: 1px dashed #d1d1d6;
  border-radius: 12px;
  padding: 1.5rem;
  box-sizing: border-box;
}
.offline-submission-msg {
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  color: #1d1d1f;
}
.offline-upload-actions {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.offline-upload-actions button {
  padding: 0.4rem 1rem;
  border: none;
  border-radius: 6px;
  background-color: #ff9f0a;
  color: #fff;
  cursor: pointer;
}
.offline-upload-actions button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.offline-upload-actions .upload-hint {
  font-size: 0.85rem;
  color: #6e6e73;
}
.manual-upload-row {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.manual-upload-row .upload-info {
  font-size: 0.85rem;
  color: #6e6e73;
}
.student-avatar-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.student-info span:first-child {
  color: #1d1d1f;
  font-size: 0.95rem;
  line-height: 1.2;
}
.student-info span:last-child {
  color: #6e6e73;
  font-size: 0.75rem;
  line-height: 1;
}
.student-score {
  font-weight: 600;
  font-size: 0.9rem;
}

/* Middle PDF area. Flex column with controls on top, annotation toolbar
   below, then the PDF container. Overflow hidden ensures the canvas
   doesn't create horizontal scrollbars. */
.grade-pdf-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Allow the PDF area to shrink for scroll containers within. Without
     min-height:0, overflowing content will cause the parent flex item
     to expand instead of enabling scrollbars. */
  min-height: 0;
}

/* Ensure the PDF container used within the grading interface is
   positioned relative so that absolutely positioned text inputs
   (for text annotations) appear in the correct location relative to
   the PDF page. */
.grade-pdf-area .pdf-container {
  position: relative;
}
.pdf-viewer-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #e5e5ea;
}
.pdf-viewer-controls button {
  background: none;
  border: none;
  font-size: 1rem;
  padding: 0.4rem;
  cursor: pointer;
  color: #007aff;
  border-radius: 6px;
  transition: background-color 0.15s;
}
.pdf-viewer-controls button:hover {
  background-color: #f2f2f7;
}
.pdf-viewer-controls .page-info {
  margin-left: auto;
  font-size: 0.85rem;
  color: #6e6e73;
}
.annot-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #e5e5ea;
}
.annot-toolbar button {
  padding: 0.4rem 0.6rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  background-color: #ffffff;
  color: #007aff;
  transition: background-color 0.15s, color 0.15s;
}
.annot-toolbar button.active {
  background-color: #007aff;
  color: #ffffff;
}
.annot-toolbar button:hover {
  background-color: #f2f2f7;
}
.annot-toolbar .btn-yellow {
  background-color: #ffe28a;
  color: #8e5400;
}
.annot-toolbar .btn-red {
  background-color: #ffcccc;
  color: #c42828;
}
.annot-toolbar select,
.annot-toolbar input[type="color"],
.annot-toolbar input[type="text"] {
  border: 1px solid #d1d1d6;
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
  background-color: #ffffff;
  color: #1d1d1f;
}
.pdf-container {
  flex: 1;
  overflow-y: auto;
  position: relative;
  background-color: #ffffff;
  /* Allow this flex item to shrink so that scrolling works properly. Without
     min-height:0, the element may stretch to accommodate its contents and
     prevent the scroll container from functioning as expected. */
  min-height: 0;
}
/* The PDF and annotation canvases now set their own dimensions via
   inline styles computed in JavaScript to support high DPI rendering
   and proper zooming. Remove the forced 100% width and auto height
   so the canvases can display at their native sizes. The display
   property remains block to avoid inline layout issues. */
.pdf-container canvas {
  display: block;
}
/* The annotation canvas is positioned absolutely over the PDF canvas and
   its size is controlled via inline styles set in JavaScript. Remove
   the fixed 100% width/height so that inline dimensions take effect. */
.pdf-annotation-canvas {
  position: absolute;
  top: 0;
  left: 0;
  /* pointer-events enabled so drawing interactions reach the canvas. */
  pointer-events: auto;
}

/* Text input overlay used for text annotations.  Positioned absolutely
   relative to the annotation canvas container.  Provide a subtle border
   and semi-transparent background so that the text is visible while
   typing.  Remove native resize handles to keep consistent sizing. */
.annotation-text-input {
  position: absolute;
  border: 1px dashed #888;
  background: rgba(255, 255, 255, 0.8);
  padding: 2px 4px;
  font-family: sans-serif;
  line-height: 1.2;
  resize: none;
  outline: none;
  z-index: 10;
  min-width: 4rem;
}

/* Right grading panel. Fixed width with scrolling for overflow. Use the same
   subtle left border as the student list. */
.grade-side-panel {
  /* Slightly narrower side panel for grading form and penalty cards */
  /* Narrow the grading panel slightly to prevent overflow on small desktops */
  flex: 0 0 240px;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #e5e5ea;
  padding: 0.75rem;
  overflow-y: auto;
  background-color: #f9f9f9;
}

/* Penalty and information cards in the grading panel. We reuse the
   existing badge classes but ensure they span the full width and align
   consistently. */
#gradePenaltyContainer .late-badge,
#gradePenaltyContainer .penalty-badge {
  margin-top: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Grade form container styling. Ensure labels and inputs line up and
   provide adequate spacing. */
#gradeFormContainer h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #1d1d1f;
}
#gradeFormContainer label {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #1d1d1f;
}
#gradeFormContainer input[type="number"],
#gradeFormContainer textarea {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid #d1d1d6;
  border-radius: 6px;
  font-size: 0.9rem;
  resize: vertical;
  background-color: #ffffff;
  color: #1d1d1f;
}
#gradeFormContainer textarea {
  min-height: 4rem;
}
#gradeFormContainer .btn-red,
#gradeFormContainer .btn-blue {
  flex: 1;
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
#gradeFormContainer .btn-red {
  background-color: #ff3b30;
  color: #ffffff;
}
#gradeFormContainer .btn-blue {
  background-color: #007aff;
  color: #ffffff;
}
#gradeFormContainer .btn-red:hover {
  background-color: #ff5e56;
}
#gradeFormContainer .btn-blue:hover {
  background-color: #1691ff;
}

/* Navigation buttons (Prev/Next) under the form. Use neutral secondary
   styling so they don't compete with primary actions. */
.grade-nav-row button {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  background-color: #e5e5ea;
  color: #1d1d1f;
  transition: background-color 0.15s;
}
.grade-nav-row button:hover {
  background-color: #d1d1d6;
}

.grade-submission-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.grade-submission-heading h2 {
  margin: 0;
}

.grade-submission-heading #gradeSubmissionActions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.grade-header-action {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* Two-factor authentication section styles */
#twoFactorSection {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}

#twoFactorSection input {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-align: center;
}

/* Sessions management styles */
.sessions-container {
  max-width: 800px;
  margin: 0 auto;
}

.sessions-list {
  margin-bottom: 1.5rem;
}

.session-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.5rem;
  background-color: white;
  transition: box-shadow 0.2s ease;
}

.session-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.session-card .device-info {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.session-card .time-info {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 0.5rem;
}

.session-card .time-info div {
  margin-bottom: 0.25rem;
}

/* Login history styles */
.history-list {
  margin-bottom: 1.5rem;
  max-height: 500px;
  overflow-y: auto;
}

.history-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.5rem;
  background-color: white;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  border-left: 4px solid transparent;
}

.history-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transform: translateY(-1px);
}

.history-card[data-active="true"] {
  border-left-color: #4CAF50;
  background-color: #f8fff8;
}

.history-card[data-active="false"] {
  border-left-color: #9E9E9E;
  background-color: #f9f9f9;
}

/* Button styles for sessions management */
.btn-red {
  background-color: #ff3b30;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-red:hover {
  background-color: #ff6b60;
}

.btn-green {
  background-color: #34c759;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-green:hover {
  background-color: #5dd779;
}

.btn-yellow {
  background-color: #ff9500;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-yellow:hover {
  background-color: #ffb340;
}

.btn-grey {
  background-color: #8e8e93;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-grey:hover {
  background-color: #a8a8b3;
}