.admin-not-authorized {
  max-width: 480px;
  background: var(--color-surface);
  border-radius: calc(20px * var(--squircle-scale));
  corner-shape: squircle;
  padding: 32px;
  box-shadow: var(--shadow-card);
  font-size: 17px;
  color: var(--color-text-primary);
}

.admin-calendar-layout {
  display: flex;
  align-items: stretch;
  gap: 32px;
}

.admin-calendar-layout .assessment-calendar-card {
  position: relative;
  height: 600px;
}

/* In the middle of the card while its dates load, over the empty grid. */
#admin-cal-loading {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Only here: the Add Missing Assessment calendar shares this class at 26px. */
.admin-calendar-layout .assessment-calendar-day-number--today {
  width: 30px;
  height: 30px;
}

/* Today in the accent blue here, in both themes, rather than the tabs'
   near-black (or white). A selected day keeps the card-colored circle it
   gets on the blue (see calendar.css). */
.admin-calendar-layout .assessment-calendar-day:not(.assessment-calendar-day--selected) .assessment-calendar-day-number--today,
:root[data-theme="dark"] .admin-calendar-layout .assessment-calendar-day:not(.assessment-calendar-day--selected) .assessment-calendar-day-number--today {
  background: var(--color-accent);
  color: #ffffff;
}

/* Height matches .assessment-calendar-card explicitly, not just via
   align-items: stretch, so a long entry list has a bound to scroll against
   instead of pushing the panel taller. */
.admin-day-panel {
  flex: 1;
  min-width: 320px;
  height: 600px;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: calc(20px * var(--squircle-scale));
  corner-shape: squircle;
  padding: 24px 32px 32px;
  box-shadow: var(--shadow-card);
}

.posts-admin-panel {
  flex: none;
  width: 100%;
  max-width: 500px;
}

.admin-day-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.admin-day-panel-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-schedule-open-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--color-gray-dark);
  cursor: pointer;
}

.admin-schedule-open-btn[hidden] {
  display: none;
}

.admin-schedule-open-btn:hover {
  background: var(--color-gray-lighter);
  color: var(--color-text-primary);
}

.admin-schedule-open-icon {
  width: 20px;
  height: 20px;
}

.admin-day-panel-title {
  margin: 0;
  font-size: 22px;
  font-weight: var(--fw-class-name);
  color: var(--color-text-primary);
}

.admin-day-entry-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar-thumb) transparent;
}

.admin-day-entry-list[hidden] {
  display: none;
}

.admin-day-entry-list::-webkit-scrollbar {
  width: 4px;
}

.admin-day-entry-list::-webkit-scrollbar-track {
  background: transparent;
}

.admin-day-entry-list::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
  border-radius: 4px;
}

.admin-day-entry-empty {
  font-size: 14px;
  color: var(--color-gray-dark);
}

.admin-day-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}

.admin-day-entry + .admin-day-entry {
  border-top: 1px solid var(--color-gray-lighter);
}

.admin-day-entry-name {
  flex: 1;
  font-size: 15px;
  color: var(--color-text-primary);
}

.admin-day-entry-delete {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--color-gray-dark);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.admin-day-entry-delete:hover {
  background: var(--color-gray-lighter);
  color: var(--color-text-primary);
}

.posts-input {
  font: inherit;
  font-size: 15px;
  color: var(--color-text-primary);
  background: var(--color-gray-lighter);
  border: none;
  border-radius: 10px;
  padding: 12px 14px;
  box-sizing: border-box;
  width: 100%;
}

.posts-input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.posts-textarea {
  min-height: 70px;
  resize: vertical;
}

.posts-empty {
  font-size: 14px;
  color: var(--color-gray-dark);
}

.posts-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
}

.posts-entry + .posts-entry {
  border-top: 1px solid var(--color-gray-lighter);
}

.posts-entry-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.posts-entry-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.posts-entry-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-gray-dark);
  white-space: pre-wrap;
}

.posts-entry-link {
  font-size: 13px;
  color: var(--color-accent);
  word-break: break-all;
}

.admin-add-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-gray-lighter);
}

.admin-add-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-add-field[hidden] {
  display: none;
}

.admin-add-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-gray-dark);
}

.admin-course-field {
  height: 50px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border: 1px solid var(--color-gray-light);
}

/* Matches the form's other controls' fixed height; display: flex so the bar
   stretches when the "Other" input needs room. Stretch, not center, so each
   option (and its hover pill) fills the bar's height like the sliding thumb
   does, instead of sitting shorter inside it. */
#admin-type-toggle {
  height: 50px;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
}

.admin-type-other-input {
  height: 100%;
  box-sizing: border-box;
  flex: 1;
  min-width: 0;
  padding: 0 12px;
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: 15px;
}

.admin-type-other-input:focus {
  outline: none;
}

.admin-add-submit-btn {
  height: 50px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: var(--color-accent);
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.admin-add-submit-btn:hover {
  opacity: 0.9;
}

.admin-schedule-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-schedule-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  background: var(--color-surface);
}

/* This date's event in the slot: dragged on its own, leaving the slot's times
   behind. */
.admin-schedule-event {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  border-radius: 10px;
  background: var(--color-surface);
}

/* Lifted over the events it passes while dragged. */
.admin-schedule-event--dragging {
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 6px var(--color-surface), 0 6px 18px 6px var(--color-shadow-popover);
}

.admin-schedule-row-label {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--color-text-primary);
  transition: color 0.15s ease;
}

/* The grip a row is dragged by. touch-action: none, or a touch drag would
   scroll the dialog instead. */
.admin-schedule-drag {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 32px;
  margin-left: -6px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--color-gray-dark);
  cursor: grab;
  touch-action: none;
}

.admin-schedule-drag:hover {
  background: var(--color-hover-overlay);
}

.admin-schedule-event--dragging .admin-schedule-drag {
  cursor: grabbing;
}

.admin-schedule-drag svg {
  width: 10px;
  height: 16px;
  fill: currentColor;
}

/* Skipped on this date (dragged below the line): kept with its slot, since
   the slot's times are shared with other days, just faded. */
.admin-schedule-row--off .admin-schedule-row-label {
  color: var(--color-gray-dark);
  text-decoration: line-through;
}

.admin-schedule-row--off .admin-schedule-time-input,
.admin-schedule-row--off .admin-schedule-row-sep {
  opacity: 0.45;
}

.admin-schedule-time-input,
.admin-schedule-row-sep {
  transition: opacity 0.15s ease;
}

/* Above the events the day skips: the Calendar's .upcoming-divider bar. */
.admin-schedule-divider {
  flex: none;
  height: 1.5px;
  margin: 2px 0;
  background: var(--color-gray-lighter);
}

/* Fills the space below the line while nothing's there, as tall as a row. */
.admin-schedule-empty {
  margin: 0;
  line-height: 36px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-gray-dark);
}

.admin-schedule-empty[hidden] {
  display: none;
}

/* Where a dragged event is about to be skipped or brought back. */
.admin-schedule-divider {
  transition: background-color 0.15s ease;
}

.admin-schedule-divider--target {
  background: var(--color-accent);
}

.admin-schedule-rows--dragging {
  cursor: grabbing;
}

/* The slot a period dragged up from below the line would take. */
.admin-schedule-row--swap-target .admin-schedule-event {
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
  box-shadow: 0 0 0 1.5px var(--color-accent);
}

/* No slot, so no times: just the event, its row as tall as the others. */
.admin-schedule-row--unplaced {
  min-height: 36px;
}

.admin-schedule-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-schedule-date {
  margin: 0;
  font-size: 15px;
  color: var(--color-gray-dark);
}

.admin-schedule-footer {
  display: flex;
  justify-content: flex-end;
  margin: -6px 0 -8px;
  min-height: 0;
}

.admin-schedule-reset-btn {
  padding: 4px 10px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--color-accent);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.admin-schedule-reset-btn:hover {
  background: var(--color-hover-overlay);
}

.admin-schedule-reset-btn[hidden] {
  display: none;
}

.admin-schedule-row-sep {
  color: var(--color-gray-dark);
}

.admin-schedule-time-input {
  /* Fixed width: a typed value's width shifts slightly ("AM" vs "PM"), which
     moved the "--" placeholder from box to box. */
  width: 110px;
  box-sizing: border-box;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: var(--color-gray-lighter);
  color: var(--color-text-primary);
  font: inherit;
  font-size: 14px;
}

/* Redundant next to .admin-schedule-open-icon; hidden in WebKit/Blink (Firefox
   never draws one). */
.admin-schedule-time-input::-webkit-calendar-picker-indicator {
  display: none;
}

.admin-schedule-time-input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.admin-schedule-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.admin-schedule-overlay--visible {
  opacity: 1;
}

.admin-schedule-dialog {
  position: relative;
  width: 100%;
  max-width: 540px;
  max-height: 80vh;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--color-surface);
  border-radius: calc(24px * var(--squircle-scale));
  corner-shape: squircle;
  padding: 32px;
  box-shadow: 0 8px 24px var(--color-shadow-popover);
  opacity: 0;
  transform: translateY(100vh);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.admin-schedule-dialog::-webkit-scrollbar {
  display: none;
}

.admin-schedule-dialog--visible {
  opacity: 1;
  transform: translateY(0);
}

/* The X a fifth bigger than its old 22px, and the same gray hovered or not.
   Tucked into the corner, 16px in from the top and right. */
.admin-schedule-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  /* The X centered in the button, not sat on a text baseline in it. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: var(--color-gray-dark);
  font-size: 26.4px;
  line-height: 1;
  cursor: pointer;
}

.admin-schedule-title {
  margin: 0;
  font-size: 22px;
  font-weight: var(--fw-class-name);
  color: var(--color-text-primary);
}

.admin-schedule-save-btn {
  height: 44px;
  width: 100%;
  margin-top: 8px;
  box-sizing: border-box;
  border: none;
  border-radius: 999px;
  background: var(--color-accent);
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.admin-schedule-save-btn:hover {
  opacity: 0.9;
}

/* The light fill of a filled Calendar pill, on the days testing blocks fall,
   joined down each Monday and Friday column into one strip: square corners
   between days, reaching the height of the grid's row gap below each day
   but the last. Drawn behind each day (a ::before) rather than as its own
   background, so a day keeps its usual rounded shape when it's selected or
   hovered, on top of the strip. */
#admin-cal-grid.admin-cal-grid--testing-block {
  --block-day-fill: oklch(from color-mix(in oklch, var(--color-dark-blue) 22%, var(--color-surface)) l calc(c * 1.8) h);
  /* Keeps the strips' z-index: -1 above the card's background. */
  isolation: isolate;
}

/* Hovered inside the strip, a day darkens the strip's own blue rather than
   turning the usual gray, which looked out of place on it. */
#admin-cal-grid.admin-cal-grid--testing-block .assessment-calendar-day--block-day:hover:not(.assessment-calendar-day--selected) {
  background: color-mix(in oklch, var(--block-day-fill), var(--color-dark-blue) 12%);
}

#admin-cal-grid.admin-cal-grid--testing-block .assessment-calendar-day--block-day::before {
  content: "";
  position: absolute;
  inset: 0 0 -6px;
  z-index: -1;
  background: var(--block-day-fill);
  pointer-events: none;
}

#admin-cal-grid.admin-cal-grid--testing-block .assessment-calendar-day--block-day-first::before {
  border-top-left-radius: calc(10px * var(--squircle-scale));
  border-top-right-radius: calc(10px * var(--squircle-scale));
  corner-shape: squircle;
}

#admin-cal-grid.admin-cal-grid--testing-block .assessment-calendar-day--block-day-last::before {
  bottom: 0;
  border-bottom-left-radius: calc(10px * var(--squircle-scale));
  border-bottom-right-radius: calc(10px * var(--squircle-scale));
  corner-shape: squircle;
}