/* Shared "Return to Dashboard" control. One look everywhere.
   =========================================================================
   This used to be six different treatments across the app: .return-btn on
   the student pages, a solid blue .dashboard-btn on the three reports
   pages, a bare blue .back-link on two admin pages, .gen-back and .pt-back
   one-offs on the two teacher tools, and a round icon-only .back-btn in
   class review. Same job, six appearances.

   It lives in its own small file rather than in css/styles.css because most
   of the pages that need it never load styles.css — they are self-contained
   pages with their own <style> block. Same reasoning (and the same pattern)
   as css/page-title.css.

   Markup is always:
     <a href="…" class="return-btn"><i class="fas fa-arrow-left"></i> Return to Dashboard</a>

   If you add a page with a dashboard return, link this file and use exactly
   that — do not restyle it locally. A page-local .return-btn rule declared
   after this file's <link> silently wins the cascade and puts the drift
   straight back. */
.return-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  color: #666;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.return-btn:hover {
  background: #e9ecef;
  border-color: #ced4da;
  color: #333;
  text-decoration: none;
}

/* Keyboard users get the same affordance as the hover state, plus a real
   focus ring — the control is a link on most pages and a <button> on one,
   and default focus styling differs between them. */
.return-btn:focus-visible {
  outline: 2px solid #0078d4;
  outline-offset: 2px;
}

/* The icon should never be the thing that wraps or stretches. */
.return-btn i {
  flex-shrink: 0;
  font-size: 0.95em;
}

/* Inside the classroom's topbar the same control has to be chrome-scale:
   that bar is a fixed 28-32px tall at narrower widths, and the page-scale
   padding above would burst it. Identical treatment otherwise — same
   background, border, radius, icon and label — just smaller, which is what
   the pink .dashboard-btn it replaced was doing with its own breakpoints. */
.topbar .return-btn {
  padding: 4px 10px;
  font-size: 12px;
  gap: 6px;
}

@media (max-width: 1200px) {
  .topbar .return-btn {
    padding: 3px 8px;
    font-size: 11px;
    gap: 4px;
  }
}