/* SchoolDay v237: Add quick event. */

/* The button hovers over the calendar rather than sitting in it, because the
   calendar is a wide scrolling table and anything placed inside it scrolls
   away. z-index is below the modal but above the page: the policies iframe on
   this site already uses up to 2147483000, so nothing here goes near the top
   of that range -- it only has to clear the calendar. */
.quick-event-fab-v237 {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 900;
  padding: .8rem 1.15rem;
  border: 0;
  border-radius: 999px;
  background: #1765a8;
  color: #fff;
  font-weight: 750;
  font-size: 1rem;
  box-shadow: 0 6px 18px rgba(8, 25, 42, .28);
  cursor: pointer;
}
.quick-event-fab-v237:hover,
.quick-event-fab-v237:focus-visible {
  background: #0f4778;
  box-shadow: 0 8px 22px rgba(8, 25, 42, .34);
}
.quick-event-fab-v237.hidden { display: none; }

/* Everything else fades, as asked. */
.quick-event-modal-v237 {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(8, 25, 42, .72);
}
.quick-event-modal-v237.hidden { display: none; }
body.quick-event-open-v237 { overflow: hidden; }

.quick-event-card-v237 {
  display: flex;
  flex-direction: column;
  width: min(680px, 100%);
  max-height: 92vh;
  padding: 1.1rem 1.2rem 1.2rem;
  border-radius: 14px;
  background: #fff;
  color: #17324d;
  box-shadow: 0 18px 50px rgba(8, 25, 42, .4);
}
.quick-event-card-v237 > .section-heading { margin-bottom: .5rem; }
.quick-event-card-v237 h2 { margin: 0; }

/* Stated plainly and before the box, because it is the thing somebody needs
   to have read BEFORE they type, not after. */
.quick-event-warning-v237 {
  margin: 0 0 .5rem;
  padding: .6rem .75rem;
  border: 1px solid #e4d2ac;
  border-left: 4px solid #d09a00;
  border-radius: 8px;
  background: #fdfaf1;
  font-size: .9rem;
}
.quick-event-example-v237 {
  margin: 0 0 .7rem;
  font-size: .87rem;
  color: #61758a;
}

.quick-event-log-v237 {
  flex: 1 1 auto;
  min-height: 6rem;
  max-height: 42vh;
  overflow-y: auto;
  padding: .35rem;
  border: 1px solid #dde6ee;
  border-radius: 10px;
  background: #f8fbfd;
}
.quick-event-log-v237:empty { display: none; }
.quick-event-message-v237 { margin: .35rem .15rem; }
.quick-event-message-v237 p {
  margin: .1rem 0 0;
  padding: .5rem .65rem;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #dde6ee;
}
.quick-event-message-v237.is-user-v237 { text-align: right; }
.quick-event-message-v237.is-user-v237 p {
  display: inline-block;
  text-align: left;
  background: #eaf4fc;
  border-color: #b9d6ef;
}
.quick-event-who-v237 {
  font-size: .74rem;
  font-weight: 750;
  color: #61758a;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.quick-event-proposal-v237 {
  margin-top: .7rem;
  padding: .7rem .8rem;
  border: 1px solid #b6d8bd;
  border-radius: 10px;
  background: #f2faf4;
}
.quick-event-proposal-v237.hidden { display: none; }
.quick-event-proposal-v237 h3 { margin: 0 0 .4rem; font-size: 1rem; }
.quick-event-proposal-v237 h4 { margin: .7rem 0 .3rem; font-size: .92rem; }
.quick-event-list-v237 { margin: 0; padding-left: 1.15rem; }
.quick-event-list-v237 > li { margin: .35rem 0; }
.quick-event-proposal-v237 .form-actions { margin-top: .7rem; display: flex; gap: .5rem; flex-wrap: wrap; }

.quick-event-form-v237 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem;
  align-items: end;
  margin-top: .7rem;
}
.quick-event-form-v237 textarea {
  width: 100%;
  resize: vertical;
  min-height: 2.9rem;
}
.quick-event-form-v237 button { white-space: nowrap; }

/* Where the calendar scrolled to. It fades out on its own -- a highlight that
   stays looks like a selection somebody has to clear. */
.quick-event-landed-v237 > td,
.quick-event-landed-v237 > th {
  animation: quick-event-landed-v237 2.6s ease-out 1;
}
@keyframes quick-event-landed-v237 {
  0% { background-color: #d6ecfb; }
  100% { background-color: transparent; }
}

@media (max-width: 700px) {
  .quick-event-fab-v237 { right: .8rem; bottom: .8rem; padding: .7rem 1rem; font-size: .92rem; }
  .quick-event-card-v237 { max-height: 96vh; padding: .8rem .85rem 1rem; border-radius: 10px; }
  .quick-event-form-v237 { grid-template-columns: 1fr; }
  .quick-event-log-v237 { max-height: 34vh; }
}
@media (prefers-reduced-motion: reduce) {
  .quick-event-landed-v237 > td,
  .quick-event-landed-v237 > th { animation: none; background-color: #d6ecfb; }
}

/* --- v237.2: what you can do, and where you are up to ------------------- */

/* The options go above the box because "which classes can I use?" was the
   first thing anybody asked, and a list of what is possible is a better
   prompt than an empty text area. */
.quick-event-options-v2372 { margin: 0 0 .6rem; }
.quick-event-option-v2372 { margin: .2rem 0; font-size: .88rem; }
.quick-event-chip-v2372 {
  display: inline-block;
  margin: .12rem .22rem .12rem 0;
  padding: .12rem .45rem;
  border-radius: 999px;
  background: #eaf4fc;
  border: 1px solid #b9d6ef;
  font-weight: 650;
  font-size: .82rem;
}

/* Two counters, because they answer two different questions and running them
   through one status line is what made the old one unreadable: the title says
   how many more chats today, the line under Send says how far through this
   one you are. */
.quick-event-chats-left-v2372 {
  font-size: .8rem;
  font-weight: 650;
  color: #61758a;
  white-space: nowrap;
}
.quick-event-chats-left-v2372:empty { display: none; }
.quick-event-turns-v2372 { margin: .35rem 0 0; font-size: .82rem; color: #61758a; }

/* --- v237.2: the safeguarding banner moves off the button --------------- */
/* On mobile admin-shell-v207.css pins it to the BOTTOM of the viewport:
     @media (max-width: 900px) { … position: fixed; bottom: 0; z-index: 1200 }
   which is exactly where Add quick event sits, so the banner covered it.

   It goes to the top instead, directly under the mobile tab header and
   touching it. The selector is character-for-character the one in
   admin-shell-v207.css so the two tie on specificity -- both carry !important,
   and between two !important declarations specificity decides, not order --
   and this file loads later, so source order settles it. That is the v236.15
   lesson: match the winning rule, do not try to out-specify it by guesswork. */
@media (max-width: 900px) {
  .admin-shell-v206-ready #adminContentV206 #calendarSafetyWarning.global-safeguarding-warning:not(.hidden) {
    /* v238.1: PINNED, not merely moved. v237.2 put it under the header and
       let it scroll away with the page; it should stay there.

       The tab header above it is `position: sticky; top:
       var(--admin-banner-height-v2365)` with z-index 1400, so this sticks
       at that offset PLUS the header's own height, and below it in the
       stacking order. Both numbers are measured by
       admin-function-shell-v2365.js and written to the root, because the
       header is a grid whose height changes with the button text and the
       viewport -- a hard-coded offset is a gap on one phone and an overlap
       on the next. */
    position: sticky !important;
    top: calc(var(--admin-banner-height-v2365, 54px) + var(--admin-mobile-tab-header-v2381, 60px)) !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    /* Full-bleed the same way #mobileTabHeader does, so the two line up. */
    width: 100vw !important;
    max-width: 100vw !important;
    /* The negative top margin cancels the header's own .55rem bottom margin,
       which is what makes them touch rather than sit apart. */
    margin: -.55rem 0 .55rem calc(50% - 50vw) !important;
    border-radius: 0 !important;
    /* Under the tab header (1400), over the page. */
    z-index: 1300 !important;
    box-shadow: 0 2px 6px rgba(180, 35, 24, .16) !important;
  }
  /* And the button clears the bottom of the screen now that nothing is pinned
     there, but stays above the page. */
  .quick-event-fab-v237 { z-index: 1201; }
}