/* Shared top bar layout. The row that holds return / title / sign out.
   =========================================================================
   Completes the set alongside css/return-button.css (the left control),
   css/page-title.css (the middle) and css/signout-button.css (the right).
   Those three already standardised what the CONTROLS look like; this
   standardises the row they sit in, which was still being redeclared page
   by page.

   Linking this file is optional and additive. Most pages still carry their
   own .header rule in a <style> block, and a page-local rule declared after
   this file's <link> silently wins the cascade — so linking it on a page
   that has its own changes nothing. It is here for pages that need a bar
   and don't have one yet, so the next such page inherits the row instead of
   inventing it. Adopted first by the three profile pages, which previously
   had no bar at all, and by the three reports pages this rule was lifted
   from verbatim.

   Markup is always:
     <div class="header">
       <a href="…" class="return-btn"><i class="fas fa-arrow-left"></i> Return to Dashboard</a>
       <h1 class="page-title-pill">Page Name</h1>
       <button class="signout-btn" onclick="signOut()"><i class="fas fa-sign-out-alt"></i> Sign Out</button>
     </div>

   A dashboard omits the return control — it IS the destination — and the
   remaining two still sit correctly, because space-between handles two
   children as happily as three. */
.header {
  background: #fff;
  padding: 18px 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Three items share this row (return, title, sign out) where most pages
     have two, so below ~480px there isn't room and the title — which is
     nowrap+ellipsis by design — collapsed to "Admin ...". Wrapping is what
     class-review.html and admin-dashboard.html already do with a crowded
     header. */
  flex-wrap: wrap;
  gap: 12px;
}

/* The title is .page-title-pill (css/page-title.css). This only strips the
   default <h1> margin so it sits on the row's centre line. */
.header h1 {
  margin: 0;
}