/* Shared "Sign Out" control. One look everywhere.
   =========================================================================
   Companion to css/return-button.css and css/page-title.css, and written
   for the same reason: this rule was copy-pasted byte-for-byte into three
   pages (admin-reports, monthly-summary, teacher-reports) and existed
   nowhere else, while eighteen other signed-in pages had no sign-out in
   their header at all — or one styled as a page-body button, as
   student-profile.html did.

   It lives in its own small file rather than in css/styles.css because most
   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
   the two files named above.

   Markup is always:
     <button class="signout-btn" onclick="signOut()"><i class="fas fa-sign-out-alt"></i> Sign Out</button>

   If you add a signed-in page, link this file and use exactly that — do not
   restyle it locally. A page-local .signout-btn rule declared after this
   file's <link> silently wins the cascade and puts the drift straight back.

   WHY IT IS NOT THE SATURATED BLUE IT USED TO BE.
   The three-page version was a solid #0078d4 fill. On three report pages
   that was harmless; applied across the whole app it would make "Sign Out"
   the loudest control on every screen — a destructive, rarely-wanted action
   drawn as the primary one, sitting opposite a deliberately neutral
   .return-btn. So it borrows the return button's language (neutral surface,
   hairline border, restrained radius) and separates itself by COLOUR OF
   INTENT instead: muted red text, strengthening on hover. Quiet at rest,
   unmistakable when you look for it, and the header row reads as one
   coherent set rather than a button competing with a heading. */
.signout-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  color: #b42318;
  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;
}

.signout-btn:hover {
  background: #fef3f2;
  border-color: #fda29b;
  color: #912018;
  text-decoration: none;
}

/* Keyboard users get the same affordance as the hover state, plus a real
   focus ring. Red rather than the return button's blue, so the focused
   control still says which of the two it is. */
.signout-btn:focus-visible {
  outline: 2px solid #b42318;
  outline-offset: 2px;
}

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

/* Groups this control with the Return button beside it.
   =========================================================================
   NOT cosmetic — it exists to keep an existing page's layout unchanged when
   the sign-out control is added to it.

   Several headers centre their title with `.header-center { position:
   absolute; left: 50% }` and lay the rest out with `justify-content:
   space-between`. The absolutely-positioned title is out of flow, so those
   rows had exactly TWO flow children — logo and return — and space-between
   put the return button on the right. Dropping a third child in made
   space-between distribute three items instead, moving the return button to
   the centre, directly underneath the absolutely-centred title. On
   student/courses.html the two overlapped at x=464 and x=470.

   Wrapping the two controls restores the original child count, so the row
   lays out exactly as it did before and the new button simply appears next
   to the old one.

   It lives in this file rather than css/page-header.css — where it
   otherwise belongs — because this is the file guaranteed to be linked
   wherever the control appears. page-header.css cannot safely be added to
   those pages: their own <style> block precedes their <link> tags, so a
   linked .header rule would win the cascade and silently restyle a header
   that was already correct.

   NAMED page-header-actions, NOT header-actions, and that matters.
   create-class.html, edit-class.html and teacher-students.html already
   define their own .header-actions — and teacher-students uses that name
   TWICE, the second time for a centred, wrapping button row inside the
   page body. Since this file is linked after those pages' <style> blocks,
   a rule named .header-actions here would win the cascade and silently
   restyle both, including a row that has nothing to do with the header.
   Those three pages already had a working wrapper of their own and keep
   it; this class is only for the pages that needed one adding. */
.page-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Narrow widths: stop centring the title on top of the controls.
   =========================================================================
   Several of these headers centre their title with `.header-center {
   position: absolute; left: 50% }` and declare no flex-wrap, so nothing in
   the row can give. Below roughly 870px the centred title already reached
   the controls and drew over them — a bug that predates these controls
   moving, since the group on the trailing edge was wide enough to collide
   long before Return joined the leading one.

   Taking the title out of absolute positioning at narrow widths lets the
   row lay out normally and wrap, which is what class-review.html and
   admin-dashboard.html already do with a crowded header. The title stops
   being perfectly centred below 900px; it stops being unreadable, which is
   the better trade.

   These rules live here, in the file guaranteed to be linked wherever the
   header controls appear, for the same cascade reason as
   .page-header-actions above — and they only take effect where a page
   actually centres its title this way. */
@media (max-width: 900px) {
  .header {
    flex-wrap: wrap;
  }

  .header-center {
    position: static;
    left: auto;
    transform: none;
  }
}

/* Chrome-scale inside the classroom topbar, matching the same override in
   css/return-button.css. Present so the two controls stay the same size if
   a sign-out is ever added there — the classroom deliberately has none
   today, since a misclick beside the video controls would drop someone out
   of a live lesson. */
.topbar .signout-btn {
  padding: 4px 10px;
  font-size: 12px;
  gap: 6px;
}

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