@media (max-width: 576px) {
  .calendar-table thead th { font-size: 10px; padding-top: 4px; padding-bottom: 4px; }
  .calendar-table { table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 0; }
  .calendar-table th, .calendar-table td { width: 14.2857%; padding: 4px; box-sizing: border-box; }
  .calendar-container .table-responsive { overflow-x: hidden; }
  .calendar-cell { vertical-align: top; padding: 4px !important; }

  .calendar-date {
    min-height: 78px;
    height: 78px;
    width: 100%;
    padding: 3px 4px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
  }

  .calendar-date .date-number {
    flex: 0 0 auto;
    font-size: 10px;
    margin-bottom: 3px;
    padding: 2px 5px;
    line-height: 1.05;
  }

  .calendar-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-right: 2px;
  }
  .calendar-events::-webkit-scrollbar { width: 6px; height: 6px; }
  .calendar-events::-webkit-scrollbar-thumb { background: #a7f3d0; border-radius: 6px; }
  .calendar-events::-webkit-scrollbar-track { background: transparent; }

  .calendar-events .calendar-event-item { overflow: hidden; flex: 0 0 auto; }
  .calendar-event-item .event-pill {
    display: flex; width: 100%; align-items: center;
    gap: 2px;
    padding: 2px 4px;
    border-radius: 3px;
    border-left-width: 1px;
    max-width: 100%;
    line-height: 1.0;
    overflow: hidden;
  }
  .calendar-event-item .event-time { font-size: 4px; min-width: 16px; }
  .calendar-event-item .event-name { font-size: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .calendar-events { gap: 2px; }
}