/* SchoolDay v220 additions. Loaded last so these rules win over v207-v219. */

/* --- Admin banner: school-year "Change" control -----------------------
   The badge (#adminBannerSchoolYear) inherited position:absolute + a
   top/left/transform centering hack plus pointer-events:none from the
   original styles.css rule. Later files only ever overrode "position",
   never cleared the rest, so the badge kept escaping normal flex flow
   (causing the wide-window overlap with the header) and stayed
   unclickable everywhere (causing the "looks like a button, does
   nothing" report on narrow windows). This resets it to a normal,
   clickable, in-flow element at every width. */
.admin-school-year-control-v209 .admin-banner-year {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  pointer-events: auto;
  cursor: pointer;
}

/* --- Phonics Game Settings: square colour swatches + split preview ---- */
.phonics-game-settings-grid-wrap-v220 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  margin-top: .75rem;
}
.phonics-game-settings-forms-v220 { display: grid; gap: 1.25rem; min-width: 0; }
.phonics-game-settings-preview-wrap-v220 {
  border: 1px solid rgba(20, 79, 140, .18);
  border-radius: 18px;
  background: #f8fbff;
  padding: 1rem;
}
.phonics-game-settings-preview-wrap-v220 h4 { margin: 0 0 .6rem; }
.phonics-game-preview-mobile-v220 {
  max-width: 360px;
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  min-height: 0 !important;
}
@media (min-width: 980px) {
  .phonics-game-settings-grid-wrap-v220 {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  }
  .phonics-game-settings-preview-wrap-v220 { position: sticky; top: 1rem; }
}

/* --- Group Identical Phonics --------------------------------------- */
.phonics-group-builder-v220 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-top: .75rem;
}
@media (min-width: 860px) {
  .phonics-group-builder-v220 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.phonics-group-source-pane-v220,
.phonics-group-target-pane-v220 {
  border: 1px solid #c8dceb;
  border-radius: .7rem;
  background: #fff;
  padding: .75rem;
  min-width: 0;
  max-height: 480px;
  overflow: auto;
}
.phonics-group-source-pane-v220 h4, .phonics-group-target-pane-v220 h4 { margin: 0 0 .5rem; }
.phonics-group-source-phase-v220 { margin-bottom: .75rem; }
.phonics-group-source-phase-v220 h5 { margin: 0 0 .35rem; font-size: .85rem; color: #4a5c6b; }
.phonics-group-chip-row-v220 {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  min-height: 2.4rem;
  padding: .35rem;
  border-radius: .5rem;
  background: #f4f8fb;
}
.phonics-group-dropzone-v220 { border: 1px dashed #aebfcb; background: #fbfdff; }
.phonics-group-chip-v220 {
  border: 1px solid #144f8c;
  background: #eaf3fc;
  color: #144f8c;
  border-radius: 999px;
  padding: .3rem .75rem;
  font-weight: 700;
  cursor: grab;
}
.phonics-group-chip-v220:active { cursor: grabbing; }
.phonics-group-target-card-v220 {
  border: 1px solid #c8dceb;
  border-radius: .6rem;
  padding: .6rem;
  margin-bottom: .75rem;
  background: #f8fbff;
}
.phonics-group-target-card-v220 .section-heading { margin-bottom: .4rem; }
.phonics-group-target-card-v220 .section-heading h5 { margin: 0; }

/* --- View Floorplan: floating windows, fullscreen, pupil dot stacking */
.school-plan-viewer-v214 { position: relative; }
.school-plan-float-window-v220 {
  position: absolute;
  top: .75rem;
  z-index: 500;
  width: min(260px, 80vw);
  background: #fff;
  border: 1px solid #c8dceb;
  border-radius: .7rem;
  box-shadow: 0 10px 26px rgba(20, 40, 60, .22);
}
.school-plan-search-window-v220 { left: .75rem; }
.school-plan-date-window-v220 { left: calc(.75rem + min(260px, 80vw) + .75rem); }
.school-plan-float-window-handle-v220 {
  cursor: grab;
  padding: .4rem .6rem;
  font-weight: 700;
  font-size: .85rem;
  background: #eaf3fc;
  border-bottom: 1px solid #c8dceb;
  border-radius: .7rem .7rem 0 0;
  user-select: none;
  touch-action: none;
}
.school-plan-float-window-handle-v220:active { cursor: grabbing; }
.school-plan-float-window-body-v220 { padding: .6rem; display: grid; gap: .5rem; }
@media (max-width: 900px) {
  .school-plan-float-window-v220 { position: static; width: auto; margin-bottom: .5rem; box-shadow: none; }
  .school-plan-date-window-v220 { left: auto; }
}

.school-plan-viewer-v214:fullscreen { display: flex; flex-direction: column; }
.school-plan-viewer-v214:fullscreen .school-plan-viewport-v214 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  touch-action: none;
}
.school-plan-viewer-v214:fullscreen .school-plan-canvas-v214 {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.school-plan-reset-zoom-v220 { position: absolute; right: .75rem; bottom: .75rem; z-index: 500; box-shadow: 0 10px 26px rgba(20, 40, 60, .22); }

/* Pupil dots must always be visible above room/classroom shapes, whatever
   z-index an admin has set on a room in Manage Floorplan. */
.school-plan-dot-v214,
.floorplan-out-dot-v217 { z-index: 100000 !important; }
.school-plan-dot-v214.focus { z-index: 100001 !important; }