/* ==========================================================================
   Calendar (Visual Styles Only)
   --------------------------------------------------------------------------
   PURPOSE
   - Keep typography, colors, borders, spacing for calendar UI and event cards.
   - Do NOT define layout (no display:flex/grid, no overflow, no widths).
   - Week/Month/Day layouts are controlled by week_final_override.css + JS.
   ========================================================================== */

/* ---- Calendar Search and Filter Styles ---- */
.cal-toolbar__search {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.cls-input {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-grey, #636882);
  border-radius: 0.375rem;
  background: #fff;
  color: var(--grigio-blu, #636882);
  flex: 1;
  min-width: 280px;
  max-width: 400px;
  font-size: 0.9rem;
}

.cls-input:focus {
  outline: none;
  border-color: var(--bs-primary, #0066cc);
  box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, 0.25);
}

.cls-input::placeholder {
  color: rgba(99, 104, 130, 0.6);
}

.cal-filter-chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.chip {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border-light-grey, rgba(99, 104, 130, 0.3));
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.chip:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

.chip.active {
  background: var(--bs-primary, #0066cc);
  border-color: var(--bs-primary, #0066cc);
  color: white;
}

.chip-dropdown {
  background: var(--bs-body-bg, #1a1a1a);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  color: #fff;
}

.chip-dropdown div {
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.chip-dropdown div:last-child {
  border-bottom: none;
}

.chip-dropdown div:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* ---- Week View Improvements ---- */
.calendar-week .day-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 0.5rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 0.5rem;
}

.calendar-week .day-name {
  font-size: 0.75rem;
  opacity: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.calendar-week .day-number {
  font-size: 0.9rem;
  font-weight: 400;
  margin: 0.1rem 0;
}

.calendar-week .day-month {
  font-size: 0.7rem;
  opacity: 1;
}

.session-summary {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 0.25rem;
  justify-content: center;
}

.session-count {
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
}

.session-text {
  font-size: 0.8rem;
  opacity: 0.8;
}

.no-sessions {
  text-align: center;
  padding: 1rem;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  font-size: 0.85rem;
}

.week-session {
  padding: 0.6rem;
  margin-bottom: 0.25rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.week-session:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.session-time {
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.9;
  margin-bottom: 0.2rem;
}

.session-name {
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
  line-height: 1.2;
}

.session-teacher {
  font-size: 0.7rem;
  opacity: 0.8;
}

/* Removed - now handled by unified enrollment styling above */

.week-more-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  cursor: pointer;
  width: 100%;
  margin-top: 0.25rem;
  transition: all 0.15s ease;
}

.week-more-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ---- Shared day-of-week header tokens ---- */
.cal-dow-head {
  font-weight: 400;
  text-align: center;
  padding: .4rem;
  border-right: 1px solid rgba(99, 104, 130, 0.15);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
}
.cal-dow-head:last-child {
  border-right: none;
}

/* ---- Generic text helpers for calendar blocks ---- */
.calendar-title,
.week.calendar-week .day-header,
.month.calendar-month .day-header,
.day.calendar-day .day-header {
  font-weight: 400;
  margin-bottom: 0.35rem;
  text-align: center;
  font-size: 0.9rem;
  color: #fff;
}

/* ---- Day container visual treatment (no layout) ---- */
.week.calendar-week .day-col,
.month.calendar-month .day-col,
.day.calendar-day .day-col {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: .8rem;
  padding: .6rem;
  background: rgba(255, 255, 255, 0.03);
  /* no layout props here */
}

/* ---- Event cards (shared across views) ---- */
/* Pastel teacher color system: light background with dark accent */
/* SOLID WHITE BASE: Prevents grid lines from bleeding through */
.calendar-card,
.week.calendar-week .card,
.month.calendar-month .card,
.day.calendar-day .card,
.cal-pill,
.cal-session,
.cal-session--week,
.week-session,
.fc-event {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  position: relative;
  border-radius: 0.4rem;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.6rem;
  text-decoration: none;
  color: var(--teacher-color, var(--pill, #5B8CFF)) !important;
  transition: background 0.2s ease;
  border: none !important;
  background-color: #fff !important;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Solid white base to block grid lines */
  box-shadow: 0 0 0 2px #fff;
  isolation: isolate;
}

/* SOLID WHITE UNDERLAY: Blocks grid lines completely */
.calendar-card::after,
.week.calendar-week .card::after,
.month.calendar-month .card::after,
.day.calendar-day .card::after,
.cal-pill::after,
.cal-session::after,
.cal-session--week::after,
.week-session::after,
.fc-event::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: #fff;
  border-radius: 0.4rem;
  pointer-events: none;
  z-index: -1;
}

/* Pastel overlay: teacher color at 15% opacity */
.calendar-card::before,
.week.calendar-week .card::before,
.month.calendar-month .card::before,
.day.calendar-day .card::before,
.cal-pill::before,
.cal-session::before,
.cal-session--week::before,
.week-session::before,
.fc-event::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--teacher-color, var(--pill, #5B8CFF));
  opacity: 0.15;
  border-radius: 0.4rem;
  pointer-events: none;
  z-index: 0;
}

/* Ensure content is above overlay */
.calendar-card > *,
.week.calendar-week .card > *,
.month.calendar-month .card > *,
.day.calendar-day .card > *,
.cal-pill > *,
.cal-session > *,
.cal-session--week > *,
.week-session > *,
.fc-event > * {
  position: relative;
  z-index: 1;
}

.calendar-card:hover::before,
.week.calendar-week .card:hover::before,
.month.calendar-month .card:hover::before,
.day.calendar-day .card:hover::before,
.cal-pill:hover::before,
.cal-session:hover::before,
.cal-session--week:hover::before,
.week-session:hover::before,
.fc-event:hover::before {
  opacity: 0.25;
}

/* FullCalendar event text colors using teacher color */
.fc-event .fc-event-title,
.fc-event .fc-event-time,
.fc-event .fc-event-main {
  color: var(--teacher-color, var(--pill, #5B8CFF)) !important;
}

/* Month view allows wrapping and shows all content */
.fc-daygrid-event .fc-event-main {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow: visible !important;
  text-align: left !important;
}

.fc-daygrid-event .fc-event-main > *,
.fc-daygrid-event .month-event,
.fc-daygrid-event .month-event > * {
  text-align: left !important;
}

/* Week/Day view allows content to show fully */
.fc-timegrid-event .fc-event-main {
  overflow: visible !important;
  white-space: normal !important;
}

/* Variants by teacher/color (optional hook; color set inline or by class elsewhere) */
.calendar-card.is-teacher-a,
.week.calendar-week .card.is-teacher-a { border-left-color: var(--teacher-a, #6f42c1); }
.calendar-card.is-teacher-b,
.week.calendar-week .card.is-teacher-b { border-left-color: var(--teacher-b, #20c997); }
.calendar-card.is-teacher-c,
.week.calendar-week .card.is-teacher-c { border-left-color: var(--teacher-c, #fd7e14); }

/* ---- Card text blocks ---- */
/* Day view - standard text */
.calendar-card .card-title,
.day.calendar-day .card .card-title {
  font-size: 0.95rem;
  font-weight: normal;
  color: var(--teacher-color, var(--pill, #5B8CFF)) !important;
}

/* Month view - smaller text */
.month.calendar-month .card .card-title,
.cal-pill .title {
  font-size: 0.75rem;
  font-weight: normal;
  color: var(--teacher-color, var(--pill, #5B8CFF)) !important;
}

/* Week view - smaller text */
.week.calendar-week .card .card-title,
.calw-title {
  font-size: 0.80rem;
  font-weight: normal;
  color: var(--teacher-color, var(--pill, #5B8CFF)) !important;
}

.calendar-card .card-subtitle,
.week.calendar-week .card .card-subtitle,
.month.calendar-month .card .card-subtitle,
.day.calendar-day .card .card-subtitle {
  font-size: 0.8rem;
  opacity: 0.9;
}

/* Day view - standard meta text */
.calendar-card .card-meta,
.day.calendar-day .card .card-meta {
  font-size: 0.75rem;
  opacity: 0.75;
  font-weight: normal;
  color: var(--teacher-color, var(--pill, #5B8CFF)) !important;
}

/* Month view - smaller meta text */
.month.calendar-month .card .card-meta,
.cal-pill .meta {
  font-size: 0.65rem;
  opacity: 0.9;
  font-weight: normal;
  color: var(--teacher-color, var(--pill, #5B8CFF)) !important;
}

/* Week view - smaller meta text */
.week.calendar-week .card .card-meta,
.calw-time,
.calw-teacher,
.calw-students {
  font-size: 0.70rem;
  opacity: 0.75;
  font-weight: normal;
  color: var(--teacher-color, var(--pill, #5B8CFF)) !important;
}

/* ---- ENROLLMENT NUMBERS - Consistent positioning across all views ---- */
.session-count-small,
.enrollment-count {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  background: #C3497E !important; /* MALVA magenta circle */
  color: #fff !important; /* White text */
  border-radius: 50%;
  width: 1.2rem;
  height: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: normal !important;
  font-size: 0.65rem !important;
  line-height: 1;
}

/* Week view additional enrollment text (not circular) */
.session-students,
.calw-students,
.cal-pill .student-count {
  color: #C3497E !important;
  font-weight: normal !important;
  font-size: 0.70rem !important;
}

/* ---- Day Numbers - Unified positioning with CSS variables ---- */
:root {
  --daynum-x: 0.2rem;
  --daynum-y: 0.2rem;
  --daynum-reserved: 1.6rem;
  --daynum-pad-inline: 0.4rem;
}

/* Week view day numbers */
.week-day-number {
  position: absolute;
  top: var(--daynum-y);
  left: var(--daynum-x);
  font-weight: 400;
  font-size: 0.9rem;
  color: #000;
  line-height: 1;
  z-index: 2;
}

/* Week view container - normalize padding */
.calendar-week .day-inner {
  padding: var(--daynum-reserved) var(--daynum-pad-inline) 0.35rem;
}

/* Month view container - normalize padding */
.month-cell {
  padding-inline: var(--daynum-pad-inline);
}

.month-cell .cell-date {
  position: relative;
  min-height: var(--daynum-reserved);
}

/* Month view day numbers */
.month-cell .cell-date .day-num {
  position: absolute;
  top: var(--daynum-y);
  left: var(--daynum-x);
  font-weight: 400;
  font-size: 0.9rem;
  color: #000;
  line-height: 1;
  z-index: 2;
}

.month-cell .cell-date .day-num.is-today {
  background: #C3497E !important;
  color: #fff !important;
  outline: none;
  font-weight: 400;
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Chips / badges ---- */
.calendar-chip,
.week.calendar-week .chip,
.month.calendar-month .chip,
.day.calendar-day .chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .1rem .5rem;
  border-radius: .5rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  font-size: .75rem;
  color: #fff;
}

/* ---- Session/time pill styling ---- */
.calendar-time,
.week.calendar-week .time-pill,
.month.calendar-month .time-pill,
.day.calendar-day .time-pill {
  display: inline-block;
  padding: .15rem .45rem;
  border-radius: .35rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  font-size: .75rem;
  color: #fff;
}

/* ---- Capacity/enrolment badges ---- */
.capacity-badge,
.week.calendar-week .capacity-badge,
.month.calendar-month .capacity-badge,
.day.calendar-day .capacity-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .15rem .5rem;
  border-radius: .5rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  font-size: .75rem;
  color: #fff;
}

.capacity-badge--ok    { background: rgba(32, 201, 151, .15); border-color: rgba(32, 201, 151, .5); }
.capacity-badge--warn  { background: rgba(253, 126, 20, .15); border-color: rgba(253, 126, 20, .5); }
.capacity-badge--full  { background: rgba(220, 53, 69, .15);  border-color: rgba(220, 53, 69, .5);  }

/* ---- Location/teacher tag visuals ---- */
.tag,
.week.calendar-week .tag,
.month.calendar-month .tag,
.day.calendar-day .tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .1rem .45rem;
  border-radius: .4rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  font-size: .75rem;
  color: #fff;
}

/* ---- Headers for sections inside day columns ---- */
.section-title,
.week.calendar-week .section-title,
.month.calendar-month .section-title,
.day.calendar-day .section-title {
  font-weight: 600;
  font-size: .85rem;
  opacity: .85;
  margin: .35rem 0 .25rem 0;
}

/* ---- Links inside cards ---- */
.calendar-card a,
.week.calendar-week .card a,
.month.calendar-month .card a,
.day.calendar-day .card a {
  color: inherit;
  text-decoration: none;
}

.calendar-card a:hover,
.week.calendar-week .card a:hover,
.month.calendar-month .card a:hover,
.day.calendar-day .card a:hover {
  text-decoration: underline;
}

/* ---- Minor spacing utilities (visual only) ---- */
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: .75rem; }

/* ===================================================================
   REVOLUTIONARY SINGLE CSS GRID - Perfect Time Alignment System
   Eliminates time drift by using one unified grid coordinate system
   =================================================================== */

/* Main grid container with subtle 15-minute grid lines */
.day-grid-container {
  display: grid;
  grid-template-columns: 60px repeat(var(--location-count, 4), 1fr);
  grid-template-rows: auto repeat(96, 28px); /* Row 1: headers, 96 time slots */
  gap: 0;
  height: calc(28px * 96 + 40px); /* 96 slots + header height */
  overflow: auto;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  
  /* Light grey horizontal grid lines for 15-minute increments */
  background-image: 
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 27px, /* 28px row height - 1px for line */
      rgba(255, 255, 255, 0.05) 27px,
      rgba(255, 255, 255, 0.05) 28px
    );
  background-position: 0 40px; /* Start after header row */
}

/* Grid headers (sticky at top) */
.grid-header {
  position: sticky;
  top: 0;
  grid-row: 1;
  background: rgba(99, 104, 130, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0.5rem 0.75rem;
  font-weight: 500;
  font-size: 0.9rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.time-header {
  grid-column: 1;
  justify-content: center;
  background: #ffffff;
  color: #1a1a1a;
  font-weight: 600;
  border-right: 1px solid rgba(0, 0, 0, 0.15);
}

/* Location headers in day view - ZUCCHERO background like month/week view */
.location-header,
.grid-header.location-header {
  background: #ABAEBB !important;
  color: #fff !important;
  font-weight: 400 !important;
  font-size: 0.9rem !important;
  text-align: center;
  padding: 0.4rem;
  border-right: 1px solid rgba(99, 104, 130, 0.15);
  border-bottom: 1px solid rgba(99, 104, 130, 0.15);
}

/* Day-of-week button for day view (positioned on right side of search bar) */
.day-of-week-button {
  background: var(--malva, #C3497E);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  margin-left: 1rem;
  flex-shrink: 0;
}

/* Search bar layout to accommodate day button */
.cal-toolbar__search {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cal-toolbar__search #cal-search {
  flex: 1;
}

/* Time labels (sticky column, white background with black text) */
.time-label-grid {
  position: sticky;
  left: 0;
  background: #ffffff;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

/* Hour labels (on the hour) - matching week view styling */
.time-label-grid.hour-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1a1a1a;
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Quarter labels (15/30/45 mins) - matching week view secondary text */
.time-label-grid.quarter-label {
  font-size: 0.75rem;
  font-weight: 400;
  color: #666666;
  background: #ffffff;
}

/* Session cards (grid items using exact row/column coordinates) */
.session-card-grid {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: relative;
  border-radius: 0.4rem;
  padding: 0.4rem 0.6rem;
  text-decoration: none;
  color: var(--teacher-color, #5B8CFF);
  transition: all 0.2s ease;
  box-sizing: border-box;
  margin: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  background-color: white;
}

.session-card-grid::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--teacher-color, #5B8CFF);
  opacity: 0.15;
  border-radius: 0.4rem;
  pointer-events: none;
  z-index: 0;
}

.session-card-grid > * {
  position: relative;
  z-index: 1;
}

.session-card-grid:hover::before {
  opacity: 0.25;
}

.session-card-grid.conflict {
  /* Conflict styling handled by background color */
}

/* ---- Session content styling ---- */
.sess .s-time {
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.9;
}

.sess .s-line {
  font-size: 0.7rem;
  opacity: 0.8;
}

.sess .s-name {
  font-size: 0.85rem;
  font-weight: 600;
}

.sess .s-teacher {
  font-size: 0.75rem;
  opacity: 0.9;
}

/* ---- Conflict notification badges ---- */
.conflict-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #dc3545;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border: 2px solid #1a1a1a;
}

/* ==========================================================================
   NOTE: No layout rules here. Week/Day/Month sizing, grid/scroll behavior,
   widths, and overflow are handled by week_final_override.css and JS.
   ========================================================================== */