/* SchoolDay v224: Register check out and the attendance window. */

/* A fourth status button. The row was set to three columns in v211, and the
   mobile breakpoints repeat that count, so all three places need widening or
   Check out wraps onto its own line. */
.register-pupil-row-v210 {
  grid-template-columns: minmax(0, 1fr) repeat(4, minmax(84px, auto)) !important;
}
@media (min-width: 901px) and (max-width: 1260px) {
  .register-pupil-row-v210 { grid-template-columns: minmax(0, 1fr) repeat(4, minmax(76px, auto)) !important; }
}
@media (max-width: 900px) {
  .register-pupil-row-v210 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .register-pupil-row-v210 > div { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .register-pupil-row-v210 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .register-pupil-row-v210 button { padding: .45rem .3rem !important; font-size: .72rem; }
}

.register-mark-v210[data-status="checked_out"].active {
  background: #0f5c8c !important;
  border-color: #0b466a !important;
  color: #fff !important;
}
.register-check-out-v224 { white-space: nowrap; }

/* Checked out is a fifth colour on the class overview dots. Blue reads as
   "was here and has gone", clearly apart from the present green and the two
   absence colours. */
.register-overview-dot-v211[data-status="checked_out"] { border-color: #0b466a; background: #3d90c4; }
.register-history-status-v2113[data-status="checked_out"],
[data-status="checked_out"].register-history-status-v2113 { color: #0b466a; }

/* The attendance window. Small, quiet, and only shown for a pupil who was
   actually in school. */
.register-window-v224 {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .3rem;
}
.register-window-field-v224 {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  color: #475569;
}
.register-window-input-v224 {
  padding: .18rem .3rem;
  font-size: .74rem;
  line-height: 1.2;
  border: 1px solid #cbd5e1;
  border-radius: .35rem;
  background: #fff;
  color: #0f172a;
}
.register-window-input-v224:disabled { opacity: .55; }
.register-window-input-v224:focus-visible { outline: 2px solid #0f5c8c; outline-offset: 1px; }