/* SchoolDay v267.8: Manage Users, Manage Classes and the Meal Plans editors.

   Layout only. Every colour here is taken from the variables styles.css
   already defines, so a school that has changed its header colour does not end
   up with three new panels that ignore it. */

/* ---- Classes this user can access, grouped by Key Stage --------------- */

.ks-class-groups-v2678 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: .6rem;
}

/* A fieldset, so the Key Stage name is a real legend rather than a bold line
   that happens to sit above the right boxes. */
.ks-class-group-v2678 {
  margin: 0;
  border: 1px solid var(--line, #dbe3ef);
  border-radius: .7rem;
  padding: .45rem .6rem .6rem;
  background: #fbfdff;
  min-width: 0;
}
.ks-class-group-v2678 > legend {
  padding: 0 .35rem;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--blue-2, #0c3f78);
}
.ks-class-group-v2678 .checkbox-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .3rem;
}

/* ---- The Staff Role classes picker ----------------------------------- */

.staff-role-classes-v2678 {
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px solid var(--line, #dbe3ef);
}
.staff-role-classes-label-v2678 {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  max-width: 24rem;
  font-weight: 600;
}
.staff-role-class-chips-v2678,
.class-staff-chips-v2678 {
  list-style: none;
  margin: .45rem 0 .25rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.staff-role-class-chips-v2678 > li,
.class-staff-chips-v2678 > li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .25rem .2rem .55rem;
  border: 1px solid #c7d7e6;
  border-radius: 999px;
  background: var(--blue-soft, #eef6ff);
  font-size: .86rem;
}
/* The remove button is small, but never below the 24px a finger needs. */
.staff-role-class-chips-v2678 button,
.class-staff-chips-v2678 button {
  min-width: 0;
  min-height: 1.6rem;
  padding: .1rem .5rem;
  font-size: .76rem;
  border-radius: 999px;
}
.staff-role-classes-empty-v2678 { margin: .4rem 0 0; }

/* ---- Manage Users: the internal name on a summary row ---------------- */

/* Its own line under the public name. The button is a grid of two lines
   already, so a third needs to be told where to sit or it lands beside the
   name and reads as part of it. */
.user-summary-internal-v2678 {
  display: block;
  font-size: .8rem;
  color: var(--muted, #61708a);
  font-style: italic;
}

/* ---- Manage Existing Classes: the staff panel ------------------------ */

.class-staff-panel-v2678 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: .55rem;
  margin-top: .55rem;
  padding-top: .55rem;
  border-top: 1px dashed var(--line, #dbe3ef);
}
.class-staff-field-v2678 { min-width: 0; }
.class-staff-field-v2678 > strong {
  display: block;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--muted, #61708a);
  margin-bottom: .25rem;
}
.class-staff-field-v2678 select { width: 100%; }
.class-staff-field-v2678 .small-help { margin: .3rem 0 0; }
.class-staff-unavailable-v2678 { border-top-style: solid; }

/* ---- The Class Structure map ----------------------------------------- */

.class-structure-v2678 .heading-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.class-structure-v2678 [data-structure-view-v2678].active {
  background: var(--yellow, #f5c542) !important;
  color: var(--ink, #17324d) !important;
  border-color: var(--yellow-2, #d9a800) !important;
}

.cs-school-v2678 {
  border: 2px solid var(--blue, #1765a8);
  border-radius: .9rem;
  padding: .7rem .8rem .8rem;
  background: #fff;
}
.cs-school-v2678 > h3 { margin: 0 0 .5rem; font-size: 1.1rem; }

.cs-school-staff-v2678 {
  border: 1px solid #c7d7e6;
  border-radius: .6rem;
  padding: .45rem .6rem;
  background: var(--blue-soft, #f4f9ff);
  margin-bottom: .6rem;
}
.cs-school-staff-v2678 h4 { margin: 0 0 .3rem; font-size: .9rem; }

/* auto-fit with a minmax(0, …) floor: auto tracks ask for the width they want
   and a long class name would then push the row wider than the panel. */
.cs-ks-grid-v2678,
.cs-class-grid-v2678,
.cs-club-grid-v2678 {
  display: grid;
  gap: .5rem;
}
.cs-ks-grid-v2678 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.cs-class-grid-v2678 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.cs-club-grid-v2678 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.cs-ks-v2678 {
  border: 1px solid #9fc0dd;
  border-radius: .7rem;
  padding: .5rem .6rem .6rem;
  background: #fbfdff;
  min-width: 0;
}
.cs-ks-v2678 > h4 { margin: 0 0 .45rem; font-size: .95rem; color: var(--blue-2, #0c3f78); }

.cs-class-v2678 {
  border: 1px solid var(--line, #dbe3ef);
  border-radius: .55rem;
  padding: .4rem .5rem .45rem;
  background: #fff;
  min-width: 0;
}
.cs-class-v2678 > h5 { margin: 0 0 .3rem; font-size: .88rem; }
.cs-class-group-v2678 > h6 {
  margin: .35rem 0 .1rem;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted, #61708a);
}
.cs-person-v2678 { display: block; line-height: 1.35; }
.cs-person-name-v2678 { font-weight: 600; font-size: .84rem; }
.cs-person-roles-v2678 {
  display: block;
  font-size: .72rem;
  color: var(--muted, #61708a);
}

.cs-clubs-v2678 {
  margin-top: .6rem;
  border: 1px solid #c9b6e8;
  border-radius: .7rem;
  padding: .5rem .6rem .6rem;
  background: #faf7ff;
}
.cs-clubs-v2678 > h4 { margin: 0 0 .45rem; font-size: .95rem; }
.cs-club-v2678 {
  border: 1px solid #d9cdf0;
  border-radius: .55rem;
  padding: .4rem .5rem;
  background: #fff;
  min-width: 0;
}
.cs-club-v2678 > h5 { margin: 0 0 .25rem; font-size: .88rem; }
.cs-club-edit-v2678 { margin-top: .35rem; }
.cs-club-edit-v2678 select { width: 100%; }

.cs-list-v2678 h4 {
  margin: .9rem 0 .2rem;
  padding-bottom: .2rem;
  border-bottom: 1px solid var(--line, #dbe3ef);
}
.cs-list-v2678 h5 { margin: .5rem 0 .15rem; font-size: .92rem; }
.cs-list-v2678 ul { margin: .1rem 0 .4rem 1.2rem; }

/* ---- Meal Plans: the rich text editors ------------------------------- */

/* The textarea stays in the form and stays the thing the save reads. It is
   hidden with a class that sets display, and the `hidden` attribute is not
   involved -- a class that sets display beats that attribute, and the two
   fighting is a bug nobody can see. */
.meal-rich-source-v2678 { display: none !important; }

.meal-rich-wrap-v2678 {
  border: 1px solid var(--line, #dbe3ef);
  border-radius: .5rem;
  background: #fff;
  overflow: hidden;
}
.meal-rich-toolbar-v2678 {
  display: flex;
  gap: .2rem;
  padding: .2rem .25rem;
  background: var(--blue-soft, #eef6ff);
  border-bottom: 1px solid var(--line, #dbe3ef);
}
.meal-rich-toolbar-v2678 button {
  min-width: 1.9rem;
  min-height: 1.9rem;
  padding: .1rem .35rem;
  font-size: .82rem;
  line-height: 1;
  border-radius: .35rem;
}
.meal-rich-editor-v2678 {
  min-height: 3.2rem;
  max-height: 11rem;
  overflow-y: auto;
  padding: .35rem .45rem;
  font-size: .9rem;
  line-height: 1.45;
}
.meal-rich-editor-v2678:focus-visible { outline: 2px solid var(--blue, #1765a8); outline-offset: -2px; }
.meal-rich-editor-v2678 p { margin: 0 0 .3rem; }
.meal-rich-editor-v2678 p:last-child { margin-bottom: 0; }
.meal-rich-editor-v2678 ul { margin: .2rem 0 .2rem 1.1rem; padding: 0; }
/* An empty editor says what it is for. :empty only matches with no child at
   all, which is exactly the state a cleared contenteditable is left in. */
.meal-rich-editor-v2678:empty::before {
  content: attr(data-placeholder-v2678);
  color: var(--muted, #61708a);
  font-style: italic;
}

@media (max-width: 720px) {
  .ks-class-groups-v2678 { grid-template-columns: 1fr; }
  .class-staff-panel-v2678 { grid-template-columns: 1fr; }
}