@charset "UTF-8";
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *

 */
/* line 4, app/assets/stylesheets/components/_calendar.scss */
.time-grid {
  display: grid;
  position: relative;
}

/* line 10, app/assets/stylesheets/components/_calendar.scss */
.time-grid__header {
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  font-size: 0.8rem;
  font-weight: 500;
  background: var(--tblr-bg-surface);
  border-bottom: 1px solid var(--tblr-border-color);
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 4;
}

/* line 27, app/assets/stylesheets/components/_calendar.scss */
.time-grid__header:first-child {
  position: sticky;
  left: 0;
  z-index: 5;
}

/* line 35, app/assets/stylesheets/components/_calendar.scss */
.time-grid__header--right {
  grid-column: -2;
  position: sticky;
  right: 0;
  z-index: 5;
}

/* line 43, app/assets/stylesheets/components/_calendar.scss */
.time-grid__col-line {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  grid-row: 2 / -1;
  pointer-events: none;
  z-index: 2;
}

/* line 52, app/assets/stylesheets/components/_calendar.scss */
.time-grid__row-zebra {
  grid-column: 1 / -1;
  background: #fafafa;
}

/* line 58, app/assets/stylesheets/components/_calendar.scss */
.time-grid__row-line {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  grid-column: 1 / -1;
}

/* line 63, app/assets/stylesheets/components/_calendar.scss */
.time-grid__row-line--hour {
  border-top-color: rgba(0, 0, 0, 0.12);
}

/* line 68, app/assets/stylesheets/components/_calendar.scss */
.time-grid__time {
  grid-column: 1;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 2px 6px 0 4px;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--tblr-secondary);
  position: sticky;
  left: 0;
  z-index: 4;
  background: white;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
}

/* line 85, app/assets/stylesheets/components/_calendar.scss */
.time-grid__time--right {
  grid-column: -2;
  position: sticky;
  left: auto;
  right: 0;
  justify-content: flex-start;
  padding: 2px 4px 0 6px;
  box-shadow: -2px 0 4px rgba(0, 0, 0, 0.06);
  z-index: 4;
}

/* line 96, app/assets/stylesheets/components/_calendar.scss */
.time-grid__time--zebra {
  background: #fafafa;
}

/* line 100, app/assets/stylesheets/components/_calendar.scss */
.time-grid__time--hour {
  font-weight: 500;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/* line 106, app/assets/stylesheets/components/_calendar.scss */
.time-grid__event {
  border-radius: var(--tblr-border-radius);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 0.75rem;
  line-height: 1.2;
  overflow: hidden;
  margin: 4px;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

/* line 119, app/assets/stylesheets/components/_calendar.scss */
.time-grid__event.bg-success-lt {
  background-color: #e8f5e9 !important;
  border: 1px solid #c8e6c9 !important;
  border-left-width: 2px !important;
}

/* line 120, app/assets/stylesheets/components/_calendar.scss */
.time-grid__event.bg-primary-lt {
  background-color: #e3f2fd !important;
  border: 1px solid #bbdefb !important;
  border-left-width: 2px !important;
}

/* line 121, app/assets/stylesheets/components/_calendar.scss */
.time-grid__event.bg-purple-lt {
  background-color: #f3e5f5 !important;
  border: 1px solid #e1bee7 !important;
  border-left-width: 2px !important;
}

/* line 122, app/assets/stylesheets/components/_calendar.scss */
.time-grid__event.bg-danger-lt {
  background-color: #fce4ec !important;
  border: 1px solid #f8bbd0 !important;
  border-left-width: 2px !important;
}

/* line 126, app/assets/stylesheets/components/_calendar.scss */
.time-grid__event-time {
  margin-top: auto;
  font-size: 0.65rem;
  opacity: 0.7;
}

/* line 133, app/assets/stylesheets/components/_calendar.scss */
.time-grid__event--active,
.calendar-slot--active {
  outline: 2px solid #206bc4;
  outline-offset: -2px;
  box-shadow: 0 0 0 3px rgba(32, 107, 196, 0.25);
  z-index: 3;
}

/* line 149, app/assets/stylesheets/components/_calendar.scss */
.calendar-month {
  table-layout: fixed;
}

/* line 152, app/assets/stylesheets/components/_calendar.scss */
.calendar-month td {
  height: 7.5rem;
  overflow: hidden;
  vertical-align: top;
}

/* line 159, app/assets/stylesheets/components/_calendar.scss */
.calendar-month [data-calendar-month-target="chip"] {
  line-height: 1.4;
  cursor: inherit;
}

/* line 167, app/assets/stylesheets/components/_calendar.scss */
.calendar-month__format {
  font-size: 0.65em;
  opacity: 0.85;
}

/* line 7, app/assets/stylesheets/components/_auth.scss */
.auth-page {
  background-image: url(/images/background.jpg);
  background-position: bottom center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: var(--tblr-body-bg);
  min-height: 100vh;
}

/* line 18, app/assets/stylesheets/components/_auth.scss */
.auth-page .card {
  background-color: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 1rem 2rem rgba(24, 36, 51, 0.12);
}

/* line 25, app/assets/stylesheets/components/_auth.scss */
.auth-page .alert {
  box-shadow: 0 0.5rem 1rem rgba(24, 36, 51, 0.1);
}

/* line 30, app/assets/stylesheets/components/_auth.scss */
.auth-page .auth-footer-links a {
  text-decoration: none;
}

/* line 33, app/assets/stylesheets/components/_auth.scss */
.auth-page .auth-footer-links a:hover {
  text-decoration: underline;
}

/* line 41, app/assets/stylesheets/components/_auth.scss */
.auth-logo {
  max-width: 200px;
  height: auto;
}

@media (max-width: 576px) {
  /* line 49, app/assets/stylesheets/components/_auth.scss */
  .auth-page {
    background-attachment: scroll;
    background-position: center;
  }
  /* line 54, app/assets/stylesheets/components/_auth.scss */
  .auth-logo {
    max-width: 165px;
  }
}

/* line 19, app/assets/stylesheets/application.scss */
.flatpickr-calendar.inline {
  box-shadow: none;
  border: 1px solid #ccc;
}

/* line 24, app/assets/stylesheets/application.scss */
[data-section-schedule-target="calendarWrapper"] > input.flatpickr-input {
  display: none;
}

/*
 * Tom Select → Tabler variable bridge.
 *
 * Tom Select's Bootstrap 5 theme is written against Bootstrap's `--bs-*` custom
 * properties. Tabler renames every one of them to `--tblr-*` and defines no
 * `--bs-*` at all, so those references resolve to nothing and the widget renders
 * with a transparent dropdown and no borders. Mapping them once here fixes the
 * whole widget and keeps it tracking Tabler's theme, dark mode included.
 *
 * This is a compatibility shim, not styling — keep it a plain alias list.
 */
/* line 39, app/assets/stylesheets/application.scss */
:root {
  --bs-body-bg: var(--tblr-body-bg);
  --bs-body-color: var(--tblr-body-color);
  --bs-border-color: var(--tblr-border-color);
  --bs-border-color-translucent: var(--tblr-border-color-translucent);
  --bs-border-radius: var(--tblr-border-radius);
  --bs-border-radius-lg: var(--tblr-border-radius-lg);
  --bs-border-radius-sm: var(--tblr-border-radius-sm);
  --bs-border-width: var(--tblr-border-width);
  --bs-box-shadow-inset: var(--tblr-box-shadow-inset);
  --bs-form-invalid-color: var(--tblr-form-invalid-color);
  --bs-form-valid-color: var(--tblr-form-valid-color);
  --bs-secondary-bg: var(--tblr-secondary-bg);
  --bs-secondary-color: var(--tblr-secondary-color);
  --bs-tertiary-bg: var(--tblr-tertiary-bg);
}

/*
 * Neither Tom Select theme hides the current selection once the admin starts
 * typing, so a search reads as "Jackson Price ja". The `is-searching` class is
 * toggled by the search-select controller for exactly as long as there is query
 * text — keying off `.input-active` instead would hide the selection whenever
 * the control has focus, including right after picking someone, which reads as
 * "my choice didn't take".
 */
/* line 64, app/assets/stylesheets/application.scss */
.ts-wrapper.single.is-searching .ts-control > .item {
  display: none;
}

/*
 * Progress Timeline — vertical journey stepper on the admin student show page.
 * Mirrors the "Your Progress" timeline in the student app (40px nodes, 2px
 * connector line). Node/label colors are applied via Tabler utility classes
 * in the partial; only fixed geometry lives here.
 */
/* line 75, app/assets/stylesheets/application.scss */
.progress-timeline .timeline-item {
  display: flex;
  position: relative;
  min-height: 72px;
}

/* line 80, app/assets/stylesheets/application.scss */
.progress-timeline .timeline-item:last-child .timeline-content {
  padding-bottom: 0;
}

/* line 86, app/assets/stylesheets/application.scss */
.progress-timeline .timeline-line {
  position: absolute;
  left: 19px;
  top: 40px;
  bottom: -8px;
  width: 2px;
  background-color: var(--tblr-border-color);
}

/* line 94, app/assets/stylesheets/application.scss */
.progress-timeline .timeline-line.is-completed {
  background-color: var(--tblr-success);
}

/* line 99, app/assets/stylesheets/application.scss */
.progress-timeline .timeline-node {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  font-weight: 600;
  background-color: var(--tblr-body-bg);
  border: 2px solid var(--tblr-border-color);
  color: var(--tblr-secondary);
  z-index: 1;
}

/* line 114, app/assets/stylesheets/application.scss */
.progress-timeline .timeline-node.is-completed {
  background-color: var(--tblr-success);
  border-color: var(--tblr-success);
  color: #fff;
}

/* line 120, app/assets/stylesheets/application.scss */
.progress-timeline .timeline-node.is-current {
  background-color: var(--tblr-body-bg);
  border: 3px solid var(--tblr-primary);
  color: var(--tblr-primary);
}

/* line 127, app/assets/stylesheets/application.scss */
.progress-timeline .timeline-content {
  flex: 1 1 auto;
  padding-bottom: 1.5rem;
}