/* Schedule page specific styles, layered on top of styles.css */

/* Location filter */
#location-filter {
  font-family: 'Roboto', Arial, sans-serif;
}

#location-filter span {
  color: #2b0f54;
}

#location-filter select {
  font-family: 'Roboto', Arial, sans-serif;
}

#schedule-container {
  font-family: 'Roboto', Arial, sans-serif;
}

/* Tag styles */
span[style*='background: #e23d96'] {
  background: #e23d96 !important;
  color: #fff !important;
}
span[style*='background: #ffda45'] {
  background: #ffda45 !important;
  color: #2b0f54 !important;
}

/* Canceled event fallback */
#schedule-container > div > div[style*='opacity: 0.5'] {
  background: rgba(226,61,150,0.3) !important;
  color: #e23d96 !important;
}

/* --- MOBILE LAYOUT IMPROVEMENTS --- */
@media (max-width: 600px) {
  #schedule-container {
    padding: 0 0.2rem;
  }

  #schedule-container > div > div {
    padding: 0.7rem 0.7rem !important;
    margin-bottom: 0.7rem !important;
    padding-left: 64px !important;
  }

  .event-sidebar {
    width: 51px !important;
    min-width: 51px !important;
    max-width: 51px !important;
    padding-top: 8px !important;
  }

  .event-sidebar-label {
    font-size: 0.85rem !important;
    margin-top: 4px !important;
  }

  .event-sidebar-label > div {
    gap: 0.1rem !important;
  }

  .event-sidebar-label span:last-child {
    font-size: 0.75rem !important;
  }

  /* Title row: stack vertically */
  #schedule-container .event-title-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.2rem;
  }

  #schedule-container .event-time {
    font-size: 0.98rem !important;
    margin-bottom: 0.1rem !important;
    margin-right: 0 !important;
    display: block !important;
  }

  #schedule-container .event-name {
    font-size: 1rem !important;
    margin-bottom: 0.1rem !important;
    margin-right: 0 !important;
    display: block !important;
  }

  #schedule-container .event-badges {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-bottom: 0.1rem;
  }

  #schedule-container .event-triangle {
    font-size: 1.1rem !important;
    margin-right: 0.5rem !important;
  }

  #schedule-container .event-meta,
  #schedule-container .event-desc {
    font-size: 0.95rem !important;
  }
}