/* calendar.css */
.fc .fc-toolbar-title {
    font-size: 2vw;
    margin: 0px;
}

.fc .fc-event {
  background: #4a90d9;
  margin-top: 8px;
}

.fc .fc-today {
  background: #f0f7ff;
}

.fc-h-event .fc-event-main {
  color: black;
}

.fc-h-event .fc-event-main-frame {
  display: inline-block;
}

.calendar-popover {
  background: white;
  border: 1px solid #ccc;
  padding: 10px 14px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  pointer-events: none;
  max-width: 250px;
  font-size: 14px;
}
.calendar-popover h4 {
  margin: 0 0 5px 0;
  font-size: 15px;
  color: #333;
}
.calendar-popover p {
  margin: 0;
  color: #666;
}

.popover-time {
  font-size: 12px;
  color: #555;
  margin-bottom: 6px;
  font-weight: bold;
  white-space: pre-line; /* Erlaubt Zeilenumbrüche im Text per \n */
}

/* Stellt sicher, dass Event-Farben im Kalender erhalten bleiben */
.fc-event,
.fc-event-dot,
.fc-daygrid-event {
  background-color: var(--event-bg-color) !important;
  border-color: var(--event-border-color, transparent) !important;
}

/* Aktiver Zustand (z. B. bei "Jahr" / "Monat") */
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background-color: #0f172a !important;
  border-color: #0f172a !important;
}
/* Nur die tatsächlichen Steuerungs-Buttons anpassen */
.fc .fc-toolbar .fc-button-primary,
.fc .fc-button-group > .fc-button {
  background-color: #2c3e50 !important;
  border-color: #2c3e50 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

.fc .fc-toolbar .fc-button-primary:hover {
  background-color: #1a252f !important;
  border-color: #1a252f !important;
}

.fc .fc-toolbar .fc-button-primary:disabled {
  background-color: #cbd5e1 !important;
  border-color: #cbd5e1 !important;
}

.fc table {
  border-collapse: collapse;
  border-spacing: 0px;
  font-size: 1em;
  max-height: 0px;
  min-height: 0px;
}


.fc .fc-toolbar.fc-header-toolbar {
  margin-bottom: 0.5em;
}

/* Strikte 4-Spalten-Aufteilung für die Jahresansicht */
.fc .fc-multimonth {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 15px !important;
}

.fc .fc-multimonth-title {
  font-size: 1vw;
  font-weight: 700;
  padding: 3px;
  text-align: center;
}

multimonth-daygrid-table, .fc .fc-multimonth-compact .fc-multimonth-header-table {
  font-size: 0.9em;
}

.fc .fc-multimonth-compact .fc-multimonth-daygrid-table, .fc .fc-multimonth-compact .fc-multimonth-header-table {
  font-size: 0.9em;
}

/* 1. Das Tages-Datum absolut positionieren (über die Events legen) */
.fc .fc-daygrid-day-top {
  position: absolute;
  right: 1px;
  z-index: 5; /* Zwingt die Nummer über die Events */
  pointer-events: none; /* Wichtig: Klicks gehen durch die Nummer hindurch */
  flex-direction: row;
}

/* 2. Optional: Ein leichter Textschatten oder Hintergrund, damit man die Nummer über den Events gut lesen kann */
.fc .fc-daygrid-day-number {
  font-size: 0.6vw;
  padding: 1px 1px;
}

/* 3. Den Event-Bereich nach oben rücken, da der Platzhalter oben wegfällt */
.fc .fc-daygrid-day-events {
  z-index: 4;
  mix-blend-mode: darken;
}

.fc .fc-day-today{
  mix-blend-mode: multiply;
}

.fc .fc-daygrid-day.fc-day-today {
  background-color: #793001;
}

.fc .fc-daygrid-day-frame {
  background-color: rgba(255, 255, 255, 0.8);
}

/* Verhindert, dass die Tabelle in eine feste Höhe gezwungen wird */
.fc .fc-dayGridMonth-view .fc-scroller {
  overflow-y: auto;
}

.fc .fc-daygrid-week-number {
  background-color: aliceblue;
  color: #1a252f;
  min-width: 1.5em;
  position: absolute;
  text-align: center;
  top: 0px;
  left: -12px;
  font-size: 0.5rem;
  z-index: 10;
}

/* Erlaubt den Zellen in der Jahresansicht, über ihre Grenzen hinauszuwachsen, statt Events zu verstecken */
.fc-multimonth-daygrid-cell,
.fc-multimonth-daygrid-day,
.fc-multimonth-day-cushion {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Verleiht den Tageszellen in der Jahresansicht eine dynamische Mindesthöhe */
.fc-multimonth .fc-daygrid-day-frame {
  min-height: 2em;
  position: relative;
}

.fc-multimonth,
.fc-multimonth-month,
.fc-daygrid-body,
.fc-multimonth-daygrid {
    overflow: visible !important;
}

/* Speziell für die erste Spalte: Verhindert, dass der äußere Rahmen die verschobene Wochennummer abschneidet */
.fc-multimonth-month:first-child,
.fc-col-header-cell:first-child,
.fc-daygrid-day:first-child {
    overflow: visible !important;
}

/* Sichert ab, dass der Container mitscrollen kann, wenn es zu viele Events werden */
.fc-multimonth-nyear,
.fc-multimonth-doc {
    overflow-y: auto !important;
}

.fc-h-event .fc-event-title {
    display: block;
    font-size: 1em;
    overflow: visible;
}

.fc-direction-ltr .fc-daygrid-event:not(.fc-event-start) .fc-event-title,
.fc-direction-rtl .fc-daygrid-event:not(.fc-event-end) .fc-event-title {
    margin-left: 3px !important;
}

.fc-multimonth-month {
    width: 96% !important;
}