/* =========================================================
   Schedule calendar readability pass
   - Keeps weather beside the date number
   - Places plans/events underneath the header
   - Makes mobile event titles readable instead of tiny cut-off pills
   ========================================================= */

#scheduleTab .big-calendar-day-header {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  min-width: 0 !important;
}

#scheduleTab .big-calendar-day-header .calendar-weather-chip {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 38px) !important;
  margin: 0 !important;
}

#scheduleTab .big-calendar-add-dot {
  margin-left: auto !important;
  flex: 0 0 auto !important;
}

#scheduleTab .big-calendar-events {
  width: 100% !important;
  min-width: 0 !important;
  align-content: start !important;
  justify-items: stretch !important;
}

#scheduleTab .big-calendar-event.calendar-color-purple { --calendar-event-accent: #6d4df6; }
#scheduleTab .big-calendar-event.calendar-color-blue { --calendar-event-accent: #2f80ed; }
#scheduleTab .big-calendar-event.calendar-color-green { --calendar-event-accent: #21b45b; }
#scheduleTab .big-calendar-event.calendar-color-pink { --calendar-event-accent: #ff4d8d; }
#scheduleTab .big-calendar-event.calendar-color-orange { --calendar-event-accent: #f59e0b; }
#scheduleTab .big-calendar-event.calendar-color-slate { --calendar-event-accent: #66708f; }
#scheduleTab .big-calendar-event.calendar-color-red { --calendar-event-accent: #ef4444; }
#scheduleTab .big-calendar-event.calendar-color-teal { --calendar-event-accent: #14b8a6; }

@media (max-width: 820px) {
  #scheduleTab .big-calendar-day {
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: clamp(2px, 0.8vw, 4px) !important;
  }

  #scheduleTab .big-calendar-day-header {
    min-height: clamp(18px, 5.4vw, 24px) !important;
    gap: clamp(2px, 0.8vw, 4px) !important;
  }

  #scheduleTab .big-calendar-date-number {
    flex: 0 0 auto !important;
    width: clamp(18px, 5.8vw, 24px) !important;
    height: clamp(18px, 5.8vw, 24px) !important;
    font-size: clamp(9px, 3vw, 12px) !important;
  }

  #scheduleTab .big-calendar-day-header .calendar-weather-chip {
    max-width: calc(100% - clamp(20px, 6vw, 26px)) !important;
    min-height: 0 !important;
    height: auto !important;
    gap: 1px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    line-height: 1 !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }

  #scheduleTab .calendar-weather-icon {
    width: clamp(9px, 2.8vw, 12px) !important;
    min-width: clamp(9px, 2.8vw, 12px) !important;
    font-size: clamp(8px, 2.6vw, 11px) !important;
  }

  #scheduleTab .calendar-weather-temp {
    max-width: 2.2em !important;
    font-size: clamp(7px, 2.15vw, 9px) !important;
    font-weight: 850 !important;
    letter-spacing: -0.08em !important;
  }

  #scheduleTab .big-calendar-events {
    display: grid !important;
    grid-auto-rows: min-content !important;
    gap: 2px !important;
    margin-top: 1px !important;
    overflow: hidden !important;
  }

  #scheduleTab .big-calendar-event {
    width: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 5px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 3px !important;
    padding: 1px 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(24, 30, 48, 0.94) !important;
    box-shadow: none !important;
    text-align: left !important;
    overflow: hidden !important;
  }

  #scheduleTab .big-calendar-event::before {
    content: "";
    width: 5px;
    height: 5px;
    margin-top: 3px;
    border-radius: 999px;
    background: var(--calendar-event-accent, #6d4df6);
  }

  #scheduleTab .big-calendar-event strong {
    min-width: 0 !important;
    max-width: 100% !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    color: inherit !important;
    font-size: clamp(8px, 2.35vw, 10px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.035em !important;
    font-weight: 850 !important;
  }

  #scheduleTab .big-calendar-event span {
    display: none !important;
  }

  #scheduleTab .big-calendar-more {
    width: 100% !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #6d4df6 !important;
    font-size: clamp(7px, 2.1vw, 9px) !important;
    line-height: 1.05 !important;
    font-weight: 850 !important;
    text-align: left !important;
  }
}

@media (max-width: 380px) {
  #scheduleTab .big-calendar-event {
    grid-template-columns: 4px minmax(0, 1fr) !important;
    gap: 2px !important;
  }

  #scheduleTab .big-calendar-event::before {
    width: 4px;
    height: 4px;
  }

  #scheduleTab .big-calendar-event strong {
    font-size: clamp(7.5px, 2.35vw, 9px) !important;
  }
}

body.dark-theme #scheduleTab .big-calendar-event {
  color: rgba(245, 247, 255, 0.92) !important;
}


/* =========================================================
   Calendar weather containment fix
   Keeps the weather beside the date number without letting the
   emoji or temperature spill outside the day tile on mobile.
   ========================================================= */

#scheduleTab .big-calendar-day-header {
  overflow: hidden !important;
}

#scheduleTab .big-calendar-day-header .calendar-weather-chip {
  overflow: hidden !important;
  box-sizing: border-box !important;
}

@media (max-width: 820px) {
  #scheduleTab .big-calendar-day-header {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: stretch !important;
    column-gap: clamp(2px, 0.8vw, 4px) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #scheduleTab .big-calendar-day-header .calendar-weather-chip {
    grid-column: 2 !important;
    justify-self: start !important;
    align-self: center !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: inline-grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: start !important;
    column-gap: 1px !important;
    transform: translateX(0) !important;
  }

  #scheduleTab .calendar-weather-icon {
    width: clamp(8px, 2.4vw, 11px) !important;
    min-width: clamp(8px, 2.4vw, 11px) !important;
    max-width: clamp(8px, 2.4vw, 11px) !important;
    height: clamp(8px, 2.4vw, 11px) !important;
    min-height: clamp(8px, 2.4vw, 11px) !important;
    max-height: clamp(8px, 2.4vw, 11px) !important;
    display: inline-grid !important;
    place-items: center !important;
    overflow: hidden !important;
    font-size: clamp(8px, 2.35vw, 10px) !important;
    line-height: 1 !important;
    transform: none !important;
  }

  #scheduleTab .calendar-weather-temp {
    min-width: 0 !important;
    max-width: 2.2em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 360px) {
  #scheduleTab .calendar-weather-temp {
    max-width: 1.75em !important;
  }
}