/* These styles are generated from project.scss. */

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.training-banner {
  background: #7a1f1f;
  border-bottom: 3px solid #ffc107;
  color: #fff;
  font-size: .9rem;
  padding: .6rem 1rem;
  text-align: center;
}

.training-banner strong {
  letter-spacing: .08em;
  margin-right: .75rem;
}

/* Home page hero logo -- capped to its usual desktop height (~100px)
   without an explicit height="100" attribute, which doesn't shrink
   with its container and overflowed the viewport on narrow screens
   (the SVG's own width/height are percentages, so nothing but this
   constrains its rendered size). max-height + width/height:auto lets
   the browser shrink it to fit *either* limit while keeping its aspect
   ratio, instead of the distortion a plain fixed height would cause
   once max-width also has to kick in on mobile. */
.hero-logo {
  max-height: 100px;
  max-width: 100%;
  width: auto;
  height: auto;
}

/* Reserves space so a page's own bottom-right content (e.g. mass
   email's "Continue to Send" button) never renders underneath the
   collapsed open-requests floating widget (see base.html, position-
   fixed bottom-0 end-0, ~56px tall including its m-3 margin). Scoped
   to md+ only -- the widget itself is d-none below that breakpoint
   (at 320px wide, see .floating-widget below, it covers too much of
   a phone screen to be worth keeping there), so there's nothing to
   reserve space for below md either. */
@media (min-width: 768px) {
  .has-floating-widget {
    padding-bottom: 90px;
  }

  /* The widget's expanded/collapsed state persists across page loads
     (see open_requests_widget.js), so a page can load with it already
     expanded -- reserve extra space in that case too, capped to the
     widget body's own max-height below so the two stay in sync. */
  .has-floating-widget.floating-widget-expanded {
    padding-bottom: 410px;
  }
}

/* Caps how tall the expanded widget can grow (e.g. with many open
   requests) so it can't exceed the space .floating-widget-expanded
   reserves above -- content beyond this scrolls instead. */
.floating-widget-collapse {
  max-height: 320px;
  overflow-y: auto;
}

/* My Schedule's month calendar (substitutes/my_schedule.html): 7 equal
   columns is already tight on a phone-width viewport, and Bootstrap's
   badge padding/font-size (meant for normal paragraph text) eats most
   of that space before the abbreviated status label even renders.
   Shrink both below the sm breakpoint so "Conf."/"Done"/school-name
   have room to sit on one line instead of relying solely on the
   text-truncate ellipsis. */
.calendar-table {
  table-layout: fixed;
}

.calendar-table-cell {
  width: 14.28%;
  height: 6rem;
}

@media (max-width: 575.98px) {
  .calendar-table .badge {
    padding: .15em .35em;
    font-size: .65em;
  }
}

/* django-hijack's own "you are impersonating X" banner (auto-injected
   by HijackUserMiddleware right before </body>, styled by its bundled
   hijack.css) is fixed to the bottom of the viewport, centered, and
   nearly full-width on a phone screen. Its own stylesheet sets
   z-index: 300 -- far below the "My Offers"/"Open Requests" floating
   widget (base.html, position-fixed bottom-0 end-0, z-index: 1040),
   which then sits on top of it and hides the right-aligned "stop
   impersonating" button. #djhj (an ID selector) outranks hijack.css's
   own .djhj (a class selector) regardless of load order, so this wins
   the cascade even though hijack.css's <link> is injected later in the
   document than this file's. */
#djhj {
  z-index: 1041;
}

/* Substitute avatar (profile photo or initials-only placeholder), used
   identically on substitutes/substitute_detail.html, profile.html, and
   management/substitute_management_detail.html. Split in two since only
   the placeholder needs the initials' font-size. */
.avatar-circle {
  width: 120px;
  height: 120px;
}

.avatar-initials {
  font-size: 2.5rem;
}

.avatar-photo {
  object-fit: cover;
}

/* substitutes/substitute_detail.html's "Qualified" status text -- not a
   semantic Bootstrap color (danger/primary read differently), so its
   own small classes rather than repurposing those. */
.text-credential-issue {
  color: red;
}

.text-credential-ok {
  color: darkblue;
}

/* base.html's two bottom-right floating widgets (Open Requests / My
   Offers) share this exact size and stacking order. */
.floating-widget {
  z-index: 1040;
  width: 320px;
}