/* SchoolDay v236.15: the public class chips, and today on Manage Calendars.

   Loaded last on both site/index.html and site/admin.html, because both things
   below have to beat rules that already carry !important. !important beats
   specificity outright, so being later in the cascade is not enough on its own
   -- these carry it too, and win the tie on source order. */

/* ---------------------------------------------------------------------------
   Public page: the class chips under each key stage.
   ---------------------------------------------------------------------------
   They were sized to their own text, so "Cedar" and "Willow" came out
   different widths, and the row was pinned left by

     .public-index .public-class-buttons { justify-content: flex-start !important }

   which is why the later "justify-content: center" written without !important
   never applied. Same width, centred label, centred row. */
.public-index .public-ks-group h3 {
  text-align: center !important;
}
.public-index .public-class-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: .45rem !important;
}
.public-index .filter-button[data-class-id] {
  flex: 0 0 auto !important;
  min-width: 8.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: normal !important;
}
/* A single group is already centred and stretched by the v149 rules; keep the
   chips inside it the same shape as everywhere else. */
.public-index .public-ks-groups.single-public-ks-group .public-class-buttons {
  justify-content: center !important;
}
@media (max-width: 520px) {
  .public-index .filter-button[data-class-id] {
    min-width: 6.5rem !important;
  }
}

/* ---------------------------------------------------------------------------
   Manage Calendars: today.
   ---------------------------------------------------------------------------
   Today was a yellow cell, and yellow is also what an inset day looks like, so
   the two read as the same thing. It is now uncoloured with a red ring round
   the date.

   THE v236.15 ATTEMPT LOST THE CASCADE, AND THIS IS WHY.

   It was written as

     #tab-master-calendar .day-cell.today-date            (1,2,0) !important

   against what looked like the competitor, styles.css's

     .day-cell.today-date                                 (0,2,0)

   but the rule that actually wins is styles.css:10524

     .admin-body #tab-master-calendar button.day-cell.today-date:not(.has-status):not(.selected)
                                                          (1,5,1) !important

   !important beats specificity -- but BETWEEN two !important rules specificity
   decides, and (1,5,1) beats (1,2,0). So the yellow stayed. The lesson is not
   "use !important"; it is that the competitor has to be the winning rule, not
   a rule picked by reading. The test now resolves the cascade over every
   stylesheet the page loads and asserts which rule wins.

   This selector is character-for-character the one above, so the two tie on
   specificity and source order decides -- and this file loads later. */
.admin-body #tab-master-calendar button.day-cell.today-date:not(.has-status):not(.selected) {
  background: #ffffff !important;
  color: var(--cell-ink, #15213a) !important;
  border-color: var(--admin-calendar-border, var(--line, #d8e2ef)) !important;
  font-weight: 900 !important;
}

/* The ring goes on EVERY today cell, including one that is also an inset or
   admin day -- those keep their colour, and the ring says "and it is today".
   A pseudo-element rather than a border, because the cell is a rounded
   rectangle sized by the grid and a circle has to be drawn inside it. This is
   the same idiom .year-month-table already uses for its own today marker. */
.admin-body #tab-master-calendar button.day-cell.today-date {
  position: relative !important;
}
.admin-body #tab-master-calendar button.day-cell.today-date::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.75rem;
  height: 1.75rem;
  transform: translate(-50%, -50%);
  border: 2px solid #d92d20;
  border-radius: 999px;
  pointer-events: none;
}

/* The key has to say the same thing, or the legend still shows a yellow
   square for Today next to a yellow square for Inset day. */
.admin-body #tab-master-calendar .calendar-key .key-swatch.today {
  background: #ffffff !important;
  border: 2px solid #d92d20 !important;
  border-radius: 999px !important;
}

/* The standalone year calendar draws its own ring over the date number, so
   there the cell only needs to stop being coloured. */
.year-month-table td.today-calendar-date {
  background: #ffffff !important;
}
.year-month-table td.today-calendar-date::after {
  border-color: #d92d20 !important;
}
.year-calendar-body .today-calendar-date strong {
  border-color: #d92d20 !important;
}