:root {
  --calendar-border: #ccc;
  --calendar-bg: #fff;
  --calendar-day-bg: #f9fafb;
  --calendar-event-bg: var(--color-primary);
  --calendar-event-text: var(--color-dark);
}

/* Make calendar take up full height */
.calendar-container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: calc(100dvh - 2rem - var(--header-height, 10rem));

}

/* Header (month title, nav buttons) */
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

/* Grid */
.calendar-grid {
  padding: 7px 7px 7px 6px;
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  gap: 1px;
  background-color: var(--calendar-border);
  border: 1px solid var(--calendar-border);
}

.calendar-day {
  border: 1px solid #e5e7eb;
  background-color: var(--calendar-day-bg);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.calendar-day-number {
  font-weight: bold;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
  color: var(--color-dark);
}

.more-link {
  font-size: 0.75rem;
  float: right;
  color: #2563eb;
  cursor: pointer;
  margin-top: auto;
}

.calendar-event {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: var(--calendar-event-bg);
  color: var(--calendar-event-text);
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
  white-space: nowrap;
}

/* Wrap-friendly event */
.calendar-event-wrap {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}