/* Scheduling Calendar Module - Isolated Styles
 * This file contains all styles specific to the scheduling calendar
 * IMPORTANT: This is an exact copy of the original calendar-modal.css styles
 * to prevent any visual changes while isolating the calendar
 */

/* Hide complete past weeks */
#clientSchedulingCalendar .fc-past-week-hidden,
#clientSchedulingCalendar tr.fc-past-week-hidden {
  display: none !important;
  height: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
  line-height: 0 !important;
  font-size: 0 !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure past week cells are hidden */
#clientSchedulingCalendar .fc-past-week-hidden .fc-daygrid-day,
#clientSchedulingCalendar .fc-past-week-hidden td,
#clientSchedulingCalendar .fc-past-week-hidden th {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Use attribute selector as backup */
#clientSchedulingCalendar tr[style*="display: none"] {
  display: none !important;
  height: 0 !important;
}

/* Modal customization */
#schedulingModal .modal-dialog {
  max-width: 600px; /* Compact width */
  margin: 0.5rem auto; /* Reduced margin */
}

#schedulingModal .modal-content {
  background-color: rgb(12, 118, 0);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

#schedulingModal .modal-header {
  background-color: rgb(12, 118, 0);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 12px 12px 0 0;
  position: relative;
}

#schedulingModal .modal-header .modal-title {
  font-size: 1rem;
  color: #ffffff;
  font-weight: 600;
  flex: 1;
}

#schedulingModal .modal-header .btn-close {
  opacity: 0.8;
  filter: invert(1) brightness(2);
  position: absolute;
  top: 1rem;
  right: 1rem;
  margin: 0;
  padding: 0.25rem;
}

#schedulingModal .modal-header .btn-close:hover {
  opacity: 1;
}

#schedulingModal .modal-body {
  padding: 0.5rem;
  background-color: rgb(12, 118, 0);
  max-height: calc(85vh - 120px); /* Use max-height for safety */
  overflow-y: auto; /* Allow scrolling if needed */
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* FullCalendar Customization */
#clientSchedulingCalendar {
  background-color: rgba(0, 0, 0, 0.95);
  border-radius: 8px;
  padding: 0.5rem; /* Slightly more padding */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  overflow: visible; /* Allow content to be visible */
  min-height: 300px; /* Adjusted for 45px cells */
  outline: none; /* Remove focus outline */
}

/* Force smaller row heights */
#clientSchedulingCalendar .fc-daygrid-week,
#clientSchedulingCalendar .fc-daygrid-week-number {
  height: 45px !important;
  min-height: 45px !important;
}

#clientSchedulingCalendar .fc-scrollgrid-sync-table tbody tr {
  height: 45px !important;
}

/* Add focus indication for accessibility */
#clientSchedulingCalendar:focus {
  box-shadow: 0 0 0 2px rgba(0, 204, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Force calendar to be visible */
#clientSchedulingCalendar .fc {
  height: auto !important;
}

#clientSchedulingCalendar .fc-view {
  height: auto !important;
}

#clientSchedulingCalendar .fc-view-harness {
  height: auto !important;
}

#clientSchedulingCalendar .fc-view-harness-active {
  height: auto !important;
}

/* Remove empty space from calendar - improved approach */
#clientSchedulingCalendar .fc-scrollgrid {
  border-collapse: collapse !important;
}

#clientSchedulingCalendar .fc-scrollgrid-sync-table {
  border-collapse: collapse !important;
}

/* Hide past week rows without leaving space */
#clientSchedulingCalendar .fc-daygrid-week[style*="display: none"] {
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: collapse !important;
}

/* Ensure table rows collapse properly */
#clientSchedulingCalendar .fc-scrollgrid-section tbody tr[style*="display: none"] {
  height: 0 !important;
  line-height: 0 !important;
}

/* Remove spacing from hidden elements */
#clientSchedulingCalendar .fc-scrollgrid-section tbody tr[style*="display: none"] td {
  padding: 0 !important;
  border: none !important;
  height: 0 !important;
}

/* Force the calendar body to auto-adjust height */
#clientSchedulingCalendar .fc-daygrid-body {
  height: auto !important;
}

#clientSchedulingCalendar .fc-scrollgrid-section-body {
  height: auto !important;
}

/* Remove any minimum heights from the grid */
#clientSchedulingCalendar .fc-scrollgrid-section {
  min-height: 0 !important;
}

/* Ensure the table collapses hidden rows */
#clientSchedulingCalendar table {
  border-collapse: collapse !important;
}

/* Alternative approach using visibility collapse */
#clientSchedulingCalendar tr[style*="visibility: collapse"] {
  height: 0 !important;
  line-height: 0 !important;
}

/* Calendar header toolbar */
#clientSchedulingCalendar .fc-toolbar {
  margin-bottom: 0.5rem; /* Reduced margin */
  gap: 0.25rem;
}

#clientSchedulingCalendar .fc-toolbar-title {
  font-size: 1rem; /* Smaller title */
  font-weight: 600;
  color: rgb(255, 255, 255);
}

#clientSchedulingCalendar .fc-button-group {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  overflow: hidden;
}

#clientSchedulingCalendar .fc-button {
  background-color: rgb(12, 118, 0);
  border: 1px solid rgba(12, 118, 0, 0.8);
  color: white;
  font-size: 0.75rem; /* Smaller font */
  padding: 0.2rem 0.5rem; /* Reduced padding */
  font-weight: 500;
  transition: all 0.2s;
}

#clientSchedulingCalendar .fc-button:hover {
  background-color: rgb(15, 140, 0);
  border-color: rgb(15, 140, 0);
  color: white;
}

#clientSchedulingCalendar .fc-button-active {
    background-color: #616a67 !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

/* Calendar grid */
#clientSchedulingCalendar .fc-theme-standard td,
#clientSchedulingCalendar .fc-theme-standard th {
  border-color: rgba(12, 118, 0, 0.3);
}

#clientSchedulingCalendar .fc-col-header {
  background-color: rgb(12, 118, 0);
}

#clientSchedulingCalendar .fc-col-header-cell {
  background-color: rgb(12, 118, 0);
  padding: 0.25rem 0; /* Reduced padding */
  font-size: 0.7rem; /* Smaller font */
  font-weight: 600;
  color: white !important;
  text-transform: uppercase;
}

/* Override link styles for day names */
#clientSchedulingCalendar .fc-col-header-cell a,
#clientSchedulingCalendar .fc-col-header-cell-cushion,
#clientSchedulingCalendar .fc-col-header a,
#clientSchedulingCalendar .fc-col-header .fc-col-header-cell-cushion {
  color: white !important;
  text-decoration: none;
}

/* Ensure weekend column headers have same background as weekdays */
#clientSchedulingCalendar .fc-day-sat.fc-col-header-cell,
#clientSchedulingCalendar .fc-day-sun.fc-col-header-cell {
  background-color: rgb(12, 118, 0) !important;
}

/* Calendar days */
#clientSchedulingCalendar .fc-daygrid {
  background-color: #ffffff;
}

#clientSchedulingCalendar .fc-daygrid-day {
  border: 1px solid rgba(12, 118, 0, 0.2); /* Lighter border */
  background-color: #ffffff !important;
  position: relative;
  transition: all 0.2s;
  min-height: 45px !important; /* Reduced but still readable */
  height: 45px !important; /* Fixed height for consistency */
}

/* Override FullCalendar's default cell frame height */
#clientSchedulingCalendar .fc-daygrid-day-frame {
  min-height: 60px !important;
  height: 45px !important;
}

#clientSchedulingCalendar .fc-daygrid-day:hover:not(.fc-day-disabled):not(.fc-day-past) {
  background-color: #e6ffe6 !important;
  border-color: #66ff66;
  transform: scale(1.02);
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Day numbers */
#clientSchedulingCalendar .fc-daygrid-day-number {
  font-size: 0.85rem; /* Smaller font size */
  padding: 0.125rem; /* Reduced padding */
  color: rgb(12, 118, 0) !important;
  font-weight: 600;
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

/* Today's date */
#clientSchedulingCalendar .fc-day-today {
  background-color: #ffeb99 !important;
  border-color: #ffd700 !important;
}

#clientSchedulingCalendar .fc-day-today .fc-daygrid-day-number {
  background-color: #ff6b00;
  color: white !important;
  border-radius: 50%;
  min-width: 24px; /* Smaller size */
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem; /* Match other day numbers */
  padding: 0 6px;
  margin: 1px auto;
}

/* Weekend days - only apply to day cells, not headers */
#clientSchedulingCalendar .fc-daygrid-day.fc-day-sat:not(.fc-day-past):not(.fc-day-other),
#clientSchedulingCalendar .fc-daygrid-day.fc-day-sun:not(.fc-day-past):not(.fc-day-other) {
  background-color: #fafbfc !important;
}

#clientSchedulingCalendar .fc-day-sat:not(.fc-day-past):not(.fc-day-other) .fc-daygrid-day-number,
#clientSchedulingCalendar .fc-day-sun:not(.fc-day-past):not(.fc-day-other) .fc-daygrid-day-number {
  color: rgb(12, 118, 0) !important;
}

/* Past days in current week - visible but grayed out */
#clientSchedulingCalendar .fc-day-past {
  background-color: #f5f5f5 !important;
}

/* Allow clicks on past days that have availability */
#clientSchedulingCalendar .fc-day-past.has-availability {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Hide indicators on other month days */
#clientSchedulingCalendar .fc-day-other .availability-indicator,
#clientSchedulingCalendar .fc-day-disabled .availability-indicator {
  display: none !important;
}

/* Ensure other month days don't show as clickable */
#clientSchedulingCalendar .fc-day-other,
#clientSchedulingCalendar .fc-day-disabled {
  cursor: default !important;
  pointer-events: none !important;
}

#clientSchedulingCalendar .fc-day-past .fc-daygrid-day-number {
  color: #999999 !important;
  opacity: 0.6;
}

#clientSchedulingCalendar .fc-day-past .fc-daygrid-day-frame {
  opacity: 0.5 !important;
}

#clientSchedulingCalendar .fc-day-past .fc-event {
  opacity: 0.4 !important;
}

/* Other month days */
#clientSchedulingCalendar .fc-day-other {
  background-color: #f0f0f0 !important;
}

#clientSchedulingCalendar .fc-day-other .fc-daygrid-day-number {
  color: #999999 !important;
  font-weight: 400;
}

/* Disabled days */
#clientSchedulingCalendar .fc-day-disabled {
  background-color: #eeeeee !important;
  cursor: not-allowed;
}

#clientSchedulingCalendar .fc-day-disabled .fc-daygrid-day-number {
  color: #6c757d !important;
  font-weight: 400;
}

/* Days with availability - clickable */
#clientSchedulingCalendar .fc-daygrid-day.has-availability {
  cursor: pointer;
  position: relative;
}

#clientSchedulingCalendar .fc-daygrid-day.has-availability:hover:not(.fc-day-past) {
  background-color: #b3ffb3 !important;
  border-color: #00ff00 !important;
  transform: scale(1.02);
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Days with selected time slots */
#clientSchedulingCalendar .fc-daygrid-day.has-selected-slots {
  background-color: #66ff66 !important;
  border-color: #00cc00 !important;
}

#clientSchedulingCalendar .fc-daygrid-day.has-selected-slots .availability-indicator {
  background-color: transparent;
  padding: 0;
  box-shadow: none;
}

#clientSchedulingCalendar .fc-daygrid-day.has-selected-slots .availability-indicator .slot-count {
  color: white;
}

/* Selected times indicator */
#clientSchedulingCalendar .selected-times {
  font-size: 0.65rem !important;
  color: white !important;
  background: #00cc00 !important;
  padding: 2px 6px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  display: inline-block;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap; /* Prevent text from wrapping */
  overflow: hidden; /* Hide overflow */
  text-overflow: ellipsis; /* Show ellipsis if too long */
  max-width: 100%;
  cursor: pointer;
  transition: all 0.2s;
}

#clientSchedulingCalendar .selected-times:hover {
  background: #00ff00 !important;
  transform: scale(1.05);
}

/* Make selected days still show as clickable */
#clientSchedulingCalendar .fc-daygrid-day.has-selected-slots {
  cursor: pointer !important;
}

#clientSchedulingCalendar .fc-daygrid-day.has-selected-slots:hover:not(.fc-day-past) {
  background-color: #99ff99 !important;
  border-color: #00ff00 !important;
  transform: scale(1.02);
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Availability indicator - circular badge at bottom-left */
.availability-indicator {
  position: absolute;
  bottom: 3px;
  left: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background-color: #00cc00;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.availability-indicator .slot-count {
  font-size: 0.7rem;
  font-weight: 700;
  color: white;
  line-height: 1;
}

.availability-indicator .priority-icon {
  font-size: 0.5rem;
  color: #ffeb3b;
  margin-left: -2px;
}

/* Background events for available days */
#clientSchedulingCalendar .fc-bg-event {
  opacity: 0.3;
}

#clientSchedulingCalendar .fc-day-past .availability-indicator {
  opacity: 0.5;
}

/* Time slot selection modal styles - More compact design */
#timeSlotSelectionModal .modal-dialog {
  max-width: 600px; /* Reduced from 800px */
}

#timeSlotSelectionModal .modal-content {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background-color: rgb(12, 118, 0); /* Keep dark green background */
  border: 1px solid rgba(255, 255, 255, 0.2);
}

#timeSlotSelectionModal .modal-header {
  background-color: rgb(12, 118, 0);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 0.75rem 1rem; /* Reduced padding */
}

#timeSlotSelectionModal .modal-header .modal-title {
  color: white;
  font-size: 1rem; /* Smaller title */
}

#timeSlotSelectionModal .modal-header .btn-close {
  filter: invert(1) brightness(2);
  opacity: 0.8;
}

#timeSlotSelectionModal .modal-body {
  overflow-y: auto;
  flex: 1;
  background-color: rgb(12, 118, 0); /* Keep dark green background */
  color: #ffffff; /* Bright white text */
  padding: 1rem; /* Reduced padding */
}

#timeSlotSelectionModal .modal-body .text-muted {
  color: rgba(255, 255, 255, 0.9) !important; /* Bright white-ish for muted text */
}

#timeSlotSelectionModal .modal-footer {
  background-color: rgb(12, 118, 0); /* Keep dark green */
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.75rem 1rem; /* Reduced padding */
}

.time-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); /* Smaller minimum width */
  gap: 6px; /* Smaller gap */
  padding: 8px; /* Reduced padding */
  max-height: 350px; /* Reduced height */
  overflow-y: auto;
  background-color: rgba(255, 255, 255, 0.05); /* Very subtle white background */
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.time-slot-btn {
  padding: 6px 10px; /* Much smaller padding */
  font-size: 0.8rem; /* Smaller font */
  border-radius: 4px; /* Smaller radius */
  transition: all 0.2s;
  background-color: rgba(255, 255, 255, 0.1); /* Subtle white background */
  border: 1px solid rgba(255, 255, 255, 0.3); /* White border */
  color: #ffffff; /* White text */
  font-weight: 500;
}

.time-slot-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
  transform: translateY(-1px);
}

.time-slot-btn.btn-success {
  background-color: #00ff00;
  border-color: #00ff00;
  color: rgb(12, 118, 0); /* Dark green text on bright green background */
  font-weight: 600;
}

.time-slot-btn.btn-success:hover {
  background-color: #33ff33;
  border-color: #33ff33;
  color: rgb(12, 118, 0);
}

.time-slot-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
}

/* Disabled apply button styling */
#applyTimeSelection:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  background-color: #6c757d !important;
  border-color: #6c757d !important;
}

.time-slot-btn:not(:disabled):hover {
  transform: translateY(-1px); /* Subtle lift */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* Subtle shadow */
}

.selected-count-info {
  text-align: center;
  padding: 8px; /* Reduced padding */
  background-color: rgba(255, 255, 255, 0.1); /* Subtle white background */
  border-radius: 4px;
  color: #ffffff; /* White text */
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.85rem; /* Smaller font */
  margin-top: 8px; /* Reduced margin */
}

/* Apply Selection button in time slot modal */
#applyTimeSelection {
  background-color: #0082ff;
  border-color: #00ff00;
  color: rgb(255, 255, 255);
  font-weight: 600;
}

#applyTimeSelection:hover {
  background-color: #33ff33;
  border-color: #33ff33;
}

#applyTimeSelection:disabled {
  background-color: #666;
  border-color: #666;
  color: #ccc;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Compact month view */
.fc .fc-daygrid-body {
  min-height: unset !important;
}

.fc .fc-scrollgrid {
  min-height: unset !important;
  border-color: rgba(12, 118, 0, 0.2);
}

.fc-daygrid-week {
  min-height: unset !important;
}

/* Ensure calendar takes full height without scrolling */
#clientSchedulingCalendar .fc-view-harness {
  height: auto !important;
}

#clientSchedulingCalendar .fc-daygrid {
  height: auto !important;
}

#clientSchedulingCalendar .fc-scrollgrid-sync-table {
  height: auto !important;
}

/* Allow cells to expand to show all events */
#clientSchedulingCalendar .fc-daygrid-day-events {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 2px;
}

/* Ensure all events are visible */
#clientSchedulingCalendar .fc-daygrid-event-harness {
  margin-bottom: 0;
}

/* Allow day cells to grow with content */
#clientSchedulingCalendar .fc-daygrid-day-frame {
  min-height: auto;
  height: auto;
}

/* Prevent event wrapping - display inline */
#clientSchedulingCalendar .fc-daygrid-event {
  display: block;
  margin: 0 1px 1px 1px;
}

/* Ensure events don't have extra spacing */
#clientSchedulingCalendar .fc-event {
  margin-bottom: 1px !important;
}

/* Priority icon spacing */
#clientSchedulingCalendar .fc-event-time .bi-star-fill {
  margin-right: 1px;
}

.fc-daygrid-day-frame {
  background-color: transparent !important;
  min-height: 2rem; /* Reduced height */
  padding: 1px; /* Minimal padding */
}

.fc .fc-daygrid-day-top {
  display: flex;
  flex-direction: row;
  padding: 2px;
}

/* Selected sessions counter */
.selected-sessions-counter {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
}

/* Session counter in header */
#schedulingModal .modal-header .selected-sessions-counter {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.selected-sessions-counter .counter-text {
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 500;
  padding-right: 5px;
}

.selected-sessions-counter .counter-number {
  background-color: #ff6b00;
  color: white;
  padding: 0.125rem 0.5rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.8rem;
}

/* Selected dates list - Hidden to save space */
.selected-dates-list {
  display: none !important; /* Hide to maximize calendar space */
}

.selected-dates-list h6 {
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  color: #24292e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.selected-dates-list #datesList {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.selected-dates-list .date-item {
  background-color: white;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  padding: 0.375rem 0.5rem;
  margin-bottom: 0.375rem;
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #495057;
  transition: all 0.2s;
}

.selected-dates-list .date-item:hover {
  background-color: #f8f9fa;
  transform: translateX(2px);
}

.selected-dates-list .date-item button {
  background: none;
  border: none;
  color: #dc3545;
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0;
  margin-left: 0.5rem;
  transition: all 0.2s;
  opacity: 0.7;
}

.selected-dates-list .date-item button:hover {
  color: #c82333;
  opacity: 1;
  transform: scale(1.1);
}

/* Status messages */
.scheduling-status {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: white !important;
}

.scheduling-status i {
  font-size: 1rem;
  color: #ffeb99;
}

/* Selected sessions summary */
#schedulingModal .selected-sessions-summary {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  color: white;
  font-size: 0.875rem;
  width: 100%;
  order: 1; /* Show first */
}

.selected-slots-container {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

.selected-summary-header {
  display: flex;
    font-weight: 600;
    flex-wrap: nowrap;
    width: -webkit-fill-available;
}


.selected-summary-header i {
  color: #00ff00;
}

.selected-slots-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.selected-slot-item {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
    font-size: 0.8rem;
    gap: 0.5rem;
    flex-direction: row;
    width: max-content;
}

.btn-clear-slot {
  background: none;
  border: none;
  color: #ff6b6b;
  padding: 0;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
}

.btn-clear-slot:hover {
  color: #ff4444;
  transform: scale(1.1);
}

.btn-clear-slot i {
  pointer-events: none;
}

/* Modal footer */
#schedulingModal .modal-footer {
  padding: 0.75rem 1rem;
  background-color: rgb(12, 118, 0);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  justify-content: space-between;
}

/* Request custom time button */
#requestCustomTimeBtn {
  font-size: 0.875rem;
  padding: 0.375rem 1rem;
}

#schedulingModal .modal-footer #requestCustomTimeBtn {
    background-color: #525252;
    border-color: #ffffff;
    color: #ffffff;
    order: 2;
    margin-right: auto;
    margin-bottom: 0;
}

#schedulingModal .modal-footer #requestCustomTimeBtn:hover {
  background-color: #ff6b00;
  border-color: #ff6b00;
  color: white;
  transform: translateY(-1px);
}

/* Modal footer button container */
#schedulingModal .modal-footer .modal-footer-buttons {
  display: flex !important;
  justify-content: space-between !important;
  width: 100% !important;
  align-items: center !important;
  gap: 1rem;
  order: 2; /* Show after summary */
}

#schedulingModal .modal-footer #requestCustomTimeBtn {
  order: 1; /* Left side */
}

#schedulingModal .modal-footer #confirmSchedulingButton {
  order: 2; /* Right side */
  margin-left: auto !important;
}

/* Confirm scheduling button */
#confirmSchedulingButton {
  font-size: 0.875rem;
  padding: 0.375rem 1.5rem;
  background-color: #ffc400;
  border-color: #ffffff;
  color: rgb(0, 0, 0);
  font-weight: 600;
  order: 3;
  margin-left: auto;
}

#confirmSchedulingButton:hover {
  background-color: #33ff33;
  border-color: #33ff33;
}

#confirmSchedulingButton:disabled {
  background-color: #666;
  border-color: #666;
  color: #ccc;
  cursor: not-allowed;
  opacity: 0.7;
}

#confirmSchedulingButton.btn-success {
  background-color: #00ff00;
  border-color: #00ff00;
  animation: pulse 2s infinite;
}

/* Session requirement text */
#sessionRequirementText {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
}

/* Scrollbar styling */
#schedulingModal .modal-body::-webkit-scrollbar,
.selected-dates-list::-webkit-scrollbar {
  width: 6px;
}

#schedulingModal .modal-body::-webkit-scrollbar-track,
.selected-dates-list::-webkit-scrollbar-track {
  background: #f1f1f1;
}

#schedulingModal .modal-body::-webkit-scrollbar-thumb,
.selected-dates-list::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

#schedulingModal .modal-body::-webkit-scrollbar-thumb:hover,
.selected-dates-list::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Extra large screens (1400px+) */
@media (min-width: 1400px) {
  #schedulingModal .modal-dialog {
    max-width: 650px;
  }
  
  #schedulingModal .modal-body {
    max-height: calc(85vh - 120px);
  }
  
  #clientSchedulingCalendar .fc-daygrid-day {
    min-height: 45px;
  }
}

/* Large screens (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
  #schedulingModal .modal-dialog {
    max-width: 600px;
  }
  
  #schedulingModal .modal-body {
    max-height: calc(85vh - 120px);
  }
  
  #clientSchedulingCalendar .fc-daygrid-day {
    min-height: 40px;
  }
}

/* Medium screens (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  #schedulingModal .modal-dialog {
    max-width: 550px;
  }
  
  #schedulingModal .modal-body {
    max-height: calc(80vh - 120px);
  }
  
  #clientSchedulingCalendar .fc-daygrid-day {
    min-height: 40px;
  }
}

/* Small screens (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  #schedulingModal .modal-dialog {
    max-width: 500px;
  }
  
  #schedulingModal .modal-body {
    max-height: calc(75vh - 120px);
  }
  
  #clientSchedulingCalendar .fc-daygrid-day {
    min-height: 35px;
  }
  
  .time-slots-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }
}

/* Extra small screens (below 768px) */
@media (max-width: 767px) {
  #schedulingModal .modal-dialog {
    max-width: 95%;
    margin: 0.25rem auto;
  }
  
  #schedulingModal .modal-body {
    padding: 0.25rem;
    max-height: calc(70vh - 100px);
  }
  
  #clientSchedulingCalendar {
    padding: 0.25rem;
  }
  
  #clientSchedulingCalendar .fc-daygrid-day {
    min-height: 30px;
  }
  
  #clientSchedulingCalendar .fc-toolbar {
    margin-bottom: 0.25rem;
  }
  
  #clientSchedulingCalendar .fc-toolbar-title {
    font-size: 0.875rem;
  }
  
  #clientSchedulingCalendar .fc-button {
    font-size: 0.65rem;
    padding: 0.15rem 0.3rem;
  }
  
  #clientSchedulingCalendar .fc-daygrid-day-number {
    font-size: 0.75rem;
  }
  
  #clientSchedulingCalendar .fc-col-header-cell {
    font-size: 0.6rem;
    padding: 0.2rem 0;
  }
  
  .availability-indicator {
    width: 18px;
    height: 18px;
  }
  
  .availability-indicator .slot-count {
    font-size: 0.65rem;
  }
  
  .time-slots-grid {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 4px;
    max-height: 250px;
  }
  
  .time-slot-btn {
    font-size: 0.75rem;
    padding: 4px 8px;
  }
  
  /* Stack footer buttons on mobile */
  #schedulingModal .modal-footer {
    padding: 0.5rem;
  }
  
  #requestCustomTimeBtn,
  #confirmSchedulingButton {
    font-size: 0.8rem;
    padding: 0.3rem 0.8rem;
  }
  
  .selected-sessions-summary {
    font-size: 0.8rem;
    padding: 0.375rem 0.5rem;
  }
}

/* Mobile landscape (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  #schedulingModal .modal-dialog {
    max-width: 90%;
  }
  
  #clientSchedulingCalendar .fc-daygrid-day {
    min-height: 32px;
  }
  
  .time-slots-grid {
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
  }
}

/* Animations */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7);
  }
  
  70% {
    box-shadow: 0 0 0 10px rgba(0, 255, 0, 0);
  }
  
  100% {
    box-shadow: 0 0 0 0 rgba(0, 255, 0, 0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Smooth transitions */
#clientSchedulingCalendar,
#schedulingModal .modal-content,
.time-slot-btn,
.availability-indicator,
.selected-times {
  transition: all 0.3s ease;
}

/* Calendar help text */
.calendar-help-text {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  color: white;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.calendar-help-text i {
  color: #ffeb99;
  font-size: 1rem;
}

/* First time user guide */
.first-time-guide {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 1.5rem;
  border-radius: 8px;
  z-index: 1000;
  max-width: 300px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.first-time-guide h5 {
  color: #00ff00;
  margin-bottom: 0.75rem;
}

.first-time-guide p {
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.first-time-guide button {
  background-color: #00ff00;
  border: none;
  color: rgb(12, 118, 0);
  padding: 0.5rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.first-time-guide button:hover {
  background-color: #33ff33;
  transform: translateY(-1px);
}

/* Tooltips for calendar days */
[data-tooltip] {
  position: relative;
}

[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
  margin-bottom: 5px;
}

/* Removed tooltip arrow that was causing visual issue on hover */
/* [data-tooltip]:hover::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.9);
  z-index: 100;
  pointer-events: none;
} */

/* Help text pulsing animation */
.calendar-help-text i {
  animation: pulse-icon 2s infinite;
}

@keyframes pulse-icon {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Click animation for available days */
.fc-daygrid-day.has-availability:active {
  transform: scale(0.98);
}

/* ====================================== */
/* Calendar UX Improvements for Better User Understanding */
/* From calendar-modal-improvements.css */
/* ====================================== */

/* Help text at the top of calendar */
.calendar-help-text {
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid #00cc00;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
  text-align: center;
  color: #0c7600;
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.calendar-help-text i {
  color: #00cc00;
  font-size: 1.2rem;
  animation: pulse 2s ease-in-out infinite;
}

/* Override the default indicator from above */
.availability-indicator {
  position: absolute;
  bottom: 3px;
  left: 3px; /* Changed to left */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #00cc00;
  min-width: 20px; /* Changed to min-width to allow expansion */
  height: 20px;
  border-radius: 10px; /* Pill shape for longer text */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0 4px; /* Add horizontal padding */
}

/* When showing selected times, allow indicator to expand */
.fc-daygrid-day.has-selected-slots .availability-indicator {
  width: auto;
  max-width: calc(100% - 6px); /* Prevent overflow */
}

/* Show only the number */
.availability-indicator .slot-count {
  display: block; /* Show the number */
  font-size: 0.7rem;
  font-weight: 700;
  color: white;
  line-height: 1;
}

/* Remove the text */
.availability-indicator::after {
  display: none;
}

/* Pulsing animation for available days */
#clientSchedulingCalendar .fc-daygrid-day.has-availability:not(.has-selected-slots) {
  animation: subtle-pulse 3s ease-in-out infinite;
  background-color: #e6ffe6 !important;
  border: 2px solid #66ff66 !important;
}

@keyframes subtle-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(0, 255, 0, 0.2);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.4);
  }
}

/* Add click cursor icon */
#clientSchedulingCalendar .fc-daygrid-day.has-availability::before {
  content: "👆";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  opacity: 0.3;
  pointer-events: none;
  z-index: 1;
}

/* On hover, make the click icon more visible */
#clientSchedulingCalendar .fc-daygrid-day.has-availability:hover::before {
  opacity: 0.6;
  animation: bounce 1s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-5px);
  }
}

/* Tooltip for available days */
.fc-daygrid-day.has-availability[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 1000;
}

.fc-daygrid-day.has-availability:hover[data-tooltip]::after {
  opacity: 1;
}

/* First-time user spotlight */
.calendar-spotlight {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 999;
}

.spotlight-arrow {
  position: absolute;
  background-color: #ff6b00;
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: float 2s ease-in-out infinite;
}

.spotlight-arrow::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #ff6b00;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Mobile-friendly adjustments */
@media (max-width: 768px) {
  .availability-indicator::after {
    content: "Tap";
    font-size: 0.6rem;
  }
  
  .fc-daygrid-day.has-availability:hover .availability-indicator::after {
    content: attr(data-slots) " slots";
  }
  
  #clientSchedulingCalendar .fc-daygrid-day.has-availability::before {
    content: "👆";
    font-size: 1rem;
  }
  
  .calendar-help-text {
    font-size: 0.8rem;
    padding: 8px 12px;
  }
}

/* Ultra small screens */
@media (max-width: 400px) {
  .availability-indicator {
    padding: 2px 4px;
  }
  
  .availability-indicator::after {
    font-size: 0.5rem;
  }
}

/* Make selected days more obvious */
#clientSchedulingCalendar .fc-daygrid-day.has-selected-slots {
  background-color: #00ff00 !important;
  border: 2px solid #00cc00 !important;
  position: relative;
}

#clientSchedulingCalendar .fc-daygrid-day.has-selected-slots::after {
  content: "✓";
  position: absolute;
  top: 2px;
  right: 2px;
  background-color: #00cc00;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

/* Improve time slot selection modal appearance */
#timeSlotSelectionModal .time-slot-btn {
  position: relative;
}

#timeSlotSelectionModal .time-slot-btn.btn-warning {
  background-color: rgba(255, 193, 7, 0.2); /* Transparent yellow */
  border-color: #ffc107;
  color: #ffeb3b; /* Bright yellow text */
}

#timeSlotSelectionModal .time-slot-btn.btn-warning:hover {
  background-color: rgba(255, 193, 7, 0.3);
  border-color: #ffeb3b;
  color: #ffffff;
}

/* Add visual feedback for selected slots in modal */
#timeSlotSelectionModal .time-slot-btn.btn-success::after {
  content: "✓";
  position: absolute;
  top: -4px;
  right: -4px;
  background-color: #00cc00;
  color: white;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  border: 2px solid white;
}

/* Improvements from calendar-modal-improvements.css */
.availability-indicator[data-slots]::after {
  content: attr(data-slots);
  position: absolute;
  top: -2px;
  right: -2px;
  background-color: #ff6b00;
  color: white;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 8px;
  min-width: 14px;
  text-align: center;
}

/* Hide day cells that are both past and from other months */
#clientSchedulingCalendar .fc-day-past.fc-day-other {
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Ensure proper week hiding */
#clientSchedulingCalendar .fc-scrollgrid-section tbody tr:has(.fc-daygrid-week[style*="display: none"]) {
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Hide entire weeks that only contain past+other-month days */
#clientSchedulingCalendar .fc-daygrid-week:has(.fc-day:not(.fc-day-past)):has(.fc-day:not(.fc-day-other)) {
  display: table-row !important; /* Force visible if it has current month days */
}

/* Ensure smooth animations */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  #clientSchedulingCalendar .fc-daygrid-day {
    border-width: 2px;
  }
  
  .availability-indicator {
    border: 2px solid white;
  }
  
  .time-slot-btn {
    border-width: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}