/* SchoolDay v247: the pupil record laid out the way it was always meant to be.

   WHAT WAS WRONG

   admin-shell-v214.css already asked for a vertical nav beside the content:

     .pupil-workspace-tabs-v213 { display: grid !important; grid-auto-flow: row !important; }

   It never took effect. admin-function-shell-v2365.css -- the cosmetic sweep,
   which loads last -- carries

     .admin-body #adminApp :is(.schoolday-function-tabs-v2162, ..., #subjectKeyStageTabsV214)
       { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; }

   and `:is()` takes the specificity of its MOST SPECIFIC argument. Two of
   those arguments are IDs, so the whole selector resolves at (2,2,0) and beats
   (0,1,0) even though both are !important. Eleven buttons were laid out in a
   nowrap row inside a grid column 165px wide, which is the sideways-scrolling
   stub in the screenshot.

   THE FIX IS NOT MORE SPECIFICITY

   The sweep's own comment says #tabNav is excluded because it is the page
   menu, not a strip of in-page tabs. This nav is the same kind of thing, so
   v247 takes .schoolday-function-tabs-v2162 off it in admin.html. Nothing here
   has to out-shout anything; the sweep simply no longer matches.

   This file therefore loads BEFORE the sweep, which must stay last. */

/* ---------------------------------------------------------- the nav column */

.admin-body .pupil-workspace-nav-v247 {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: minmax(0, 1fr);
  gap: .3rem;
  /* No overflow-x. The row that needed it is gone. */
  overflow-x: visible;
  overflow-y: auto;
  max-height: calc(100dvh - 9rem);
  padding: .5rem;
  border: 1px solid #bfd0de;
  border-radius: .85rem;
  background: #f4f8fb;
}

.admin-body .pupil-workspace-nav-v247 button {
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
  text-align: left;
  /* Wrapping is what makes a long label readable in a narrow column, and
     nowrap on eleven buttons is what produced the scrollbar. */
  white-space: normal;
  padding: .5rem .6rem;
  border-radius: .5rem;
  line-height: 1.25;
}

.admin-body .pupil-workspace-nav-v247 button.active {
  background: #144f8c;
  color: #fff;
}

/* The grid itself. admin-shell-v214.css names the areas; this widens the nav
   column so eleven labels fit without hyphenating. */
.admin-body .pupil-workspace-v210:not(.hidden) {
  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
  grid-template-areas: "heading heading" "nav panel";
}

/* --------------------------------------------------- the location, as a chip */

.admin-body .pupil-location-chip-v247 {
  /* Overrides the full-width bar this used to be: it is one control beside a
     name now, and it takes the width of its own text. */
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
  margin: .3rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  grid-area: auto;
}

.admin-body .pupil-location-button-v247 {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  max-width: 100%;
  padding: .2rem .55rem;
  font-size: .82rem;
  font-weight: 600;
  color: #123b5d;
  background: #eef6ff;
  border: 1px solid #b8d4ef;
  border-radius: 999px;
  cursor: pointer;
  min-height: 0;
}

.admin-body .pupil-location-button-v247 strong {
  font-weight: 600;
  /* One line, ellipsised. "No scheduled location" beside a name must not push
     the save buttons off the row. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.admin-body .pupil-location-button-v247[aria-expanded="true"] {
  background: #dceffc;
  border-color: #7fb0dd;
}

.admin-body .pupil-location-detail-v247 {
  display: grid;
  gap: .1rem;
  padding: .4rem .6rem;
  font-size: .8rem;
  color: #435a6f;
  background: #f8fbfd;
  border: 1px solid #d5e1eb;
  border-radius: .5rem;
}

.admin-body .pupil-location-detail-v247[hidden] { display: none; }

/* ------------------------------------------------- the bar on each function */

.admin-body .pupil-panel-bar-v247 {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .6rem;
  margin: 0 0 .9rem;
  padding: .6rem .75rem;
  border: 1px solid #cbd9e5;
  border-bottom-width: 2px;
  border-radius: .7rem;
  /* Opaque, or the content scrolls through it. */
  background: #f4f8fb;
}

.admin-body .pupil-panel-bar-v247 > h3 {
  margin: 0;
  flex: 0 0 auto;
  align-self: center;
}

.admin-body .pupil-panel-bar-v247 > p {
  margin: 0;
  flex: 1 1 16rem;
  min-width: 0;
  align-self: center;
  font-size: .85rem;
}

/* The timeline's bar IS its filter, so the nested form loses the frame it had
   when it sat on its own. */
.admin-body .pupil-panel-bar-v247 > .pupil-timeline-filter-v213 {
  flex: 1 1 100%;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
}

.admin-body .pupil-panel-v213 { padding-top: 0; }

/* ------------------------------------------------------------- narrow mode */

@media (max-width: 900px) {
  /* The nav becomes the layer directly under the heading, and the function's
     own bar the layer under that -- title, then change page, then the tools
     for the page you changed to. */
  .admin-body .pupil-workspace-v210:not(.hidden) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "heading" "nav" "panel";
  }

  /* v261: !important, AND THAT IS THE WHOLE FIX.

     These declarations were plain, and admin-shell-v216.css carries -- inside
     this same 900px breakpoint --

       .pupil-workspace-tabs-v213 {
         display: grid !important;
         grid-auto-flow: row !important;
         grid-template-columns: 1fr !important;
       }

     plus, at every width, `button { width: 100% !important }`. An !important
     declaration beats a plain one whatever the specificity, so the row-flow
     and the full-width buttons won and the eleven sections came out as a
     full-height stack that filled a phone screen before the record began.

     With both sides !important, specificity decides, and
     `.admin-body .pupil-workspace-nav-v247` (0,2,0) beats
     `.pupil-workspace-tabs-v213` (0,1,0). This is the same war v247 opened
     this file to settle; it just never finished it on a narrow screen.

     What it should look like is what Sean asked for: a compact strip under the
     heading, scrolling sideways, in the same idiom as the header row with
     Change page and Full screen. */
  .admin-body .pupil-workspace-nav-v247 {
    grid-auto-flow: column !important;
    grid-auto-columns: max-content !important;
    grid-template-columns: none !important;
    gap: .3rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: none !important;
    padding: .3rem !important;
    position: sticky;
    top: 0;
    z-index: 7;
    /* A strip, not a wall: it takes the height of one row of buttons. */
    align-items: center;
    scrollbar-width: thin;
  }

  .admin-body .pupil-workspace-nav-v247 button {
    width: auto !important;
    min-height: 2.2rem !important;
    padding: .35rem .6rem !important;
    font-size: .82rem !important;
    white-space: nowrap !important;
    /* Left-aligned text is for a column. In a strip it reads as a label. */
    justify-content: center !important;
    text-align: center !important;
  }

  /* Below the nav, not under it. */
  .admin-body .pupil-panel-bar-v247 {
    top: 3.4rem;
  }

  .admin-body .pupil-location-chip-v247 { margin-top: .2rem; }
}

/* ==========================================================================
   v267.14 -- three sticky layers, one stack

   THE BUG. This file sticks the section nav to top: 0. admin-pupils-v213.css
   sticks the pupil heading to top: 0, and each function's own bar (above) is
   stuck to top: 0 as well. Three layers at the same edge do not stack -- they
   pile up on the same forty pixels in z-index order, so the section title and
   its controls slid underneath the heading as soon as the page scrolled. In the
   801-900px band it is worse: v213 has not yet un-stuck the heading and this
   file has already stuck the nav, so the nav went behind it too.

   THE FIX IS A MEASUREMENT, NOT A GUESS. admin-pupils-v26714.js reads which of
   these layers is actually `position: sticky` at the current width and how tall
   it is, and writes the two offsets below onto the workspace element. A heading
   that wraps a long name onto two lines is a different height from one that does
   not, so no rem value in a media query could have been right for both.

   These rules are at the end of this file on purpose: (0,2,0) ties with the
   `top: 0` above and later wins, and beats (0,1,0) in admin-pupils-v213.css
   whatever the order.
   ========================================================================== */

.admin-body .pupil-workspace-nav-v247 {
  top: var(--pupil-sticky-nav-top-v26714, 0px);
}

.admin-body .pupil-panel-bar-v247 {
  top: var(--pupil-sticky-bar-top-v26714, 0px);
}

@media (max-width: 900px) {
  /* The narrow block above raises the nav with !important, so the offset has to
     be raised to match it. Same value, same variable. */
  .admin-body .pupil-workspace-nav-v247 {
    top: var(--pupil-sticky-nav-top-v26714, 0px) !important;
  }
}

/* ==========================================================================
   v267.14 -- the class, unlock then edit
   ========================================================================== */

.admin-body .pupil-profile-class-v217 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}

.admin-body .pupil-profile-class-v217 > span:first-child {
  font-size: .85rem;
  opacity: .8;
}

.admin-body .pupil-class-edit-v26714 { flex: 1 1 12rem; min-width: 0; }
.admin-body .pupil-class-edit-v26714 select { width: 100%; }
.admin-body .pupil-class-actions-v26714 { display: flex; gap: .4rem; flex-wrap: wrap; }
.admin-body .pupil-class-error-v26714 { flex: 1 1 100%; color: #b3261e; font-size: .85rem; }
.admin-body .pupil-profile-class-v217 > .muted { flex: 1 1 100%; font-size: .8rem; }

/* The year the date of birth implies, offered rather than imposed. */
.pupil-year-suggestion-v26714 {
  display: block;
  margin-top: .25rem;
  font-size: .82rem;
  color: #435a6f;
}
.pupil-year-suggestion-v26714[hidden] { display: none; }
.pupil-year-suggestion-v26714 button { font-size: .82rem; }

/* ==========================================================================
   v267.14 -- absence requests on the timeline

   Coloured down the left edge by status, because a parent's request that nobody
   has answered should not look the same as one that was approved a fortnight
   ago.
   ========================================================================== */

.pupil-absence-list-v26714 { display: grid; gap: .6rem; margin-bottom: 1rem; }
.pupil-absence-list-v26714 > h4 { margin: 0; font-size: .95rem; }
.pupil-absence-card-v26714 { border-left: .35rem solid #b8860b; }
.pupil-absence-card-v26714.is-approved { border-left-color: #2e7d5b; }
.pupil-absence-card-v26714.is-declined { border-left-color: #b3261e; }
.pupil-absence-card-v26714.is-withdrawn { border-left-color: #8595a5; }
.pupil-absence-history-v26714 {
  margin: .4rem 0 0;
  padding-left: 1.1rem;
  font-size: .82rem;
  color: #435a6f;
}