/**
 * mod_icskalender: Darstellung, angelehnt an YOOtheme/UIkit.
 * Die Akzentfarbe kommt aus den Moduleinstellungen (--icsk-farbe).
 */
.mod-icskalender {
  --icsk-farbe: #1e87f0;
  --icsk-rahmen: #e5e5e5;
}

.mod-icskalender .fc {
  --fc-border-color: var(--icsk-rahmen);
  --fc-button-text-color: #fff;
  --fc-button-bg-color: var(--icsk-farbe);
  --fc-button-border-color: var(--icsk-farbe);
  --fc-button-hover-bg-color: color-mix(in srgb, var(--icsk-farbe) 85%, #000);
  --fc-button-hover-border-color: color-mix(in srgb, var(--icsk-farbe) 85%, #000);
  --fc-button-active-bg-color: color-mix(in srgb, var(--icsk-farbe) 70%, #000);
  --fc-button-active-border-color: color-mix(in srgb, var(--icsk-farbe) 70%, #000);
  --fc-today-bg-color: color-mix(in srgb, var(--icsk-farbe) 8%, transparent);
  --fc-now-indicator-color: #d7263d;
  --fc-list-event-hover-bg-color: color-mix(in srgb, var(--icsk-farbe) 8%, transparent);
  font-size: 0.95rem;
  color: var(--icsk-schrift, inherit);
}

/* Schriftfarbe auch gegen Vorgaben des Templates (z. B. Überschriften, Tabellen) durchsetzen */
.mod-icskalender .fc .fc-toolbar-title,
.mod-icskalender .fc th,
.mod-icskalender .fc td,
.mod-icskalender .fc .fc-list-day-cushion,
.mod-icskalender .fc .fc-list-event td,
.mod-icskalender .fc .fc-daygrid-dot-event,
.mod-icskalender .icskalender-dialog,
.mod-icskalender .icskalender-dialog-titel {
  color: var(--icsk-schrift, inherit);
}

/* Schaltflächen */
.mod-icskalender .fc .fc-button {
  font-size: 0.875rem;
  line-height: 1.4;
  padding: 0.45em 0.9em;
  border-radius: 3px;
  text-transform: none;
  box-shadow: none;
}

.mod-icskalender .fc .fc-button:focus-visible {
  outline: 2px solid var(--icsk-farbe);
  outline-offset: 2px;
}

.mod-icskalender .fc .fc-button-primary:disabled {
  opacity: 0.45;
}

/* Kopfzeile */
.mod-icskalender .fc .fc-toolbar {
  flex-wrap: wrap;
  gap: 0.75rem;
}

.mod-icskalender .fc .fc-toolbar-title {
  font-size: 1.35rem;
  font-weight: 500;
  margin: 0;
}

/* Links im Kalender nicht in der Linkfarbe des Templates einfärben */
.mod-icskalender .fc a,
.mod-icskalender .fc a:hover {
  color: inherit;
  text-decoration: none;
}

.mod-icskalender .fc .fc-col-header-cell-cushion,
.mod-icskalender .fc .fc-daygrid-day-number {
  padding: 4px 6px;
}

.mod-icskalender .fc a.fc-col-header-cell-cushion:hover,
.mod-icskalender .fc a.fc-daygrid-day-number:hover,
.mod-icskalender .fc a.fc-list-day-text:hover,
.mod-icskalender .fc a.fc-list-day-side-text:hover {
  text-decoration: underline;
}

/* Termine */
.mod-icskalender .fc .fc-event {
  cursor: pointer;
}

.mod-icskalender .fc .fc-timegrid-event .fc-event-main {
  padding: 2px 4px;
}

.mod-icskalender .fc .fc-daygrid-event {
  white-space: normal;
}

.mod-icskalender .fc .fc-daygrid-dot-event {
  align-items: baseline;
}

.mod-icskalender .fc .fc-daygrid-dot-event .fc-event-time {
  flex-shrink: 0;
}

.mod-icskalender .fc .fc-daygrid-dot-event .fc-event-title {
  font-weight: 600;
  text-align: left;
}

/* Beschriftung der Ganztagszeile in Wochen- und Tagesansicht */
.mod-icskalender .fc .fc-timegrid-axis-cushion {
  font-size: 0.75rem;
  max-width: none;
  white-space: normal;
  text-align: center;
  padding: 2px;
}

.mod-icskalender .fc .fc-list-event-dot {
  border-color: var(--icsk-farbe);
}

/* Termine hell: getönter Hintergrund, farbiger Rand links, dunkle Schrift */
.mod-icskalender.icsk-termine-light .fc {
  --fc-event-bg-color: color-mix(in srgb, var(--icsk-farbe) 14%, #fff);
  --fc-event-border-color: var(--icsk-farbe);
  --fc-event-text-color: var(--icsk-schrift, #000);
}

.mod-icskalender.icsk-termine-light .fc .fc-timegrid-event,
.mod-icskalender.icsk-termine-light .fc .fc-daygrid-block-event {
  border-width: 0 0 0 4px;
  border-radius: 2px;
}

.mod-icskalender.icsk-termine-light .fc .fc-timegrid-event .fc-event-main,
.mod-icskalender.icsk-termine-light .fc .fc-daygrid-block-event .fc-event-main {
  color: var(--icsk-schrift, #000);
}

.mod-icskalender.icsk-termine-light .fc .fc-timegrid-event:hover,
.mod-icskalender.icsk-termine-light .fc .fc-daygrid-block-event:hover {
  background-color: color-mix(in srgb, var(--icsk-farbe) 24%, #fff);
}

.mod-icskalender.icsk-termine-light .fc .fc-timegrid-event-harness-inset .fc-timegrid-event {
  box-shadow: 0 0 0 1px #fff;
}

.mod-icskalender.icsk-termine-light .fc .fc-event-time {
  font-weight: 600;
}

/* Zeilenhöhe in Wochen- und Tagesansicht (eine Zeile = 30 Minuten) */
.mod-icskalender.icsk-zeilen-gross .fc .fc-timegrid-slot {
  height: 2.4em;
}

.mod-icskalender.icsk-zeilen-sehrgross .fc .fc-timegrid-slot {
  height: 3.4em;
}

/* Termine in Wochen- und Tagesansicht: Text darf umbrechen, lange Wörter werden getrennt */
.mod-icskalender .fc .fc-timegrid-event .fc-event-main {
  font-size: 0.8rem;
  line-height: 1.25;
}

.mod-icskalender .fc .fc-timegrid-event .fc-event-title {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Sehr schmale Termine (mehrere gleichzeitig): Uhrzeit ausblenden, damit Platz für den Titel bleibt */
.mod-icskalender .fc .fc-timegrid-event .fc-event-main {
  container-type: inline-size;
}

@container (max-width: 70px) {
  .mod-icskalender .fc .fc-timegrid-event .fc-event-time {
    display: none;
  }

  .mod-icskalender .fc .fc-timegrid-event .fc-event-title {
    font-size: 0.7rem;
  }
}

.mod-icskalender .fc .fc-timegrid-event .fc-event-time {
  white-space: normal;
  font-size: 0.7rem;
}

/* Lesbarkeit: Templates mit sehr dünner Grundschrift ausgleichen */
.mod-icskalender .fc .fc-event-title,
.mod-icskalender .fc .fc-list-event-title,
.mod-icskalender .fc .fc-timegrid-slot-label-cushion,
.mod-icskalender .fc .fc-timegrid-axis-cushion,
.mod-icskalender .fc .fc-list-event-time {
  font-weight: 400;
}

/* Listenansicht: lange Wörter umbrechen statt abschneiden (Reflow bei 320 px) */
.mod-icskalender .fc .fc-list-table {
  table-layout: auto;
  width: 100%;
}

.mod-icskalender .fc .fc-list-event-title {
  overflow-wrap: anywhere;
  hyphens: auto;
}

.mod-icskalender .fc .fc-list-day-cushion {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 0.75rem;
}

.mod-icskalender .fc .fc-list-day-cushion::after {
  display: none;
}

/* Nur für Screenreader sichtbar */
.mod-icskalender .icskalender-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Smartphones */
@media (max-width: 639px) {
  .mod-icskalender .fc .fc-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .mod-icskalender .fc .fc-toolbar-chunk {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }

  .mod-icskalender .fc .fc-toolbar-chunk:nth-child(2) {
    order: -1;
  }

  .mod-icskalender .fc .fc-toolbar-title {
    font-size: 1.15rem;
    text-align: center;
  }

  .mod-icskalender .fc .fc-button {
    padding: 0.45em 0.7em;
    min-height: 44px;
    min-width: 44px;
  }

  .mod-icskalender .fc .fc-list-event-time {
    white-space: normal;
    width: 4.5em;
  }

  .mod-icskalender .fc .fc-list-event-graphic {
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* Detailfenster */
.mod-icskalender .icskalender-dialog {
  border: 0;
  border-radius: 6px;
  padding: 0;
  width: min(32rem, calc(100vw - 2rem));
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25);
}

.mod-icskalender .icskalender-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.mod-icskalender .icskalender-dialog-inhalt {
  padding: 1.5rem;
  border-top: 4px solid var(--icsk-farbe);
}

.mod-icskalender .icskalender-dialog-titel {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

.mod-icskalender .icskalender-dialog-zeit,
.mod-icskalender .icskalender-dialog-ort {
  margin: 0 0 0.5rem;
}

.mod-icskalender .icskalender-dialog-label {
  font-weight: 600;
}

.mod-icskalender .icskalender-dialog-beschreibung {
  white-space: pre-line;
  margin: 0.75rem 0 0;
  max-height: 40vh;
  overflow: auto;
}

.mod-icskalender .icskalender-dialog-aktionen {
  margin: 1.25rem 0 0;
  text-align: right;
}

.mod-icskalender .icskalender-dialog-schliessen {
  background: var(--icsk-farbe);
  color: #fff;
  border: 0;
  border-radius: 3px;
  padding: 0.5em 1.2em;
  font: inherit;
  cursor: pointer;
}

.mod-icskalender [hidden] {
  display: none !important;
}