/* CareCommunity Event Studio — FullCalendar auf den Haus-Tokens.
 *
 * Vorher standen hier durchgehend feste Hex-Werte (Schiefer + Indigo) und !important.
 * Der Kalender nahm damit am Token-System nicht teil: er blieb eine fremdfarbige Insel
 * mitten in der Oberflaeche und ignorierte jede Theme-Aenderung. Panel-Regel ist
 * ausschliesslich --cc-*.
 *
 * Der Weg dorthin fuehrt ueber FullCalendars eigene Variablen: werden die einmal auf
 * unsere Tokens gelegt, faellt der grosse Rest der Ueberschreibungen weg. Was danach
 * noch !important braucht, sind nur die Stellen, an denen das Vendor-CSS selbst mit
 * hoher Spezifitaet arbeitet. */

.event-studio-calendar-container {
  --fc-border-color: var(--cc-border-soft);
  --fc-page-bg-color: var(--cc-bg-elev);
  --fc-neutral-bg-color: var(--cc-bg-card);
  --fc-neutral-text-color: var(--cc-fg-muted);
  --fc-small-font-size: var(--cc-fs-xs);

  --fc-today-bg-color: color-mix(in oklch, var(--cc-accent) 10%, transparent);
  --fc-highlight-color: color-mix(in oklch, var(--cc-accent) 16%, transparent);
  --fc-now-indicator-color: var(--cc-accent);

  --fc-event-bg-color: color-mix(in oklch, var(--cc-accent) 22%, var(--cc-bg-card));
  --fc-event-border-color: color-mix(in oklch, var(--cc-accent) 45%, var(--cc-border));
  --fc-event-text-color: var(--cc-fg);
  --fc-list-event-hover-bg-color: var(--cc-bg-hover);

  --fc-more-link-bg-color: transparent;
  --fc-more-link-text-color: var(--cc-fg-muted);
  --fc-non-business-color: color-mix(in oklch, var(--cc-fg-dim) 8%, transparent);

  --fc-daygrid-event-dot-width: 8px;

  /* Groesse der Tagesfelder — an einer Stelle, damit der Dichte-Umschalter greift. */
  --cc-fc-day-min: 8.5rem;

  width: 100%;
  height: 100%;
  min-height: 650px;
  padding: var(--cc-s-3);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cc-border-soft);
  border-radius: var(--cc-r-lg);
  background: var(--cc-bg-elev);
  color: var(--cc-fg);
}

.event-studio-calendar-container .fc,
.event-studio-calendar-container .fc-view-harness,
.event-studio-calendar-container .fc-view {
  min-width: 0;
  width: 100%;
}

.event-studio-calendar-container .fc-view {
  overflow: hidden;
}

/* Kompakte Dichte: dasselbe Raster, engere Zeilen. */
[data-density="compact"] .event-studio-calendar-container {
  --cc-fc-day-min: 6rem;
}

/* ── Raster und Kopfzeile ─────────────────────────────────────────────────── */

.fc-theme-standard td,
.fc-theme-standard th,
.fc-theme-standard .fc-scrollgrid {
  border-color: var(--cc-border-soft) !important;
}

.fc-col-header-cell {
  padding: var(--cc-s-2) 0;
  background: var(--cc-bg-card);
}

.fc-col-header-cell-cushion {
  color: var(--cc-fg-muted);
  font-size: var(--cc-fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none !important;
}

/* Wochenenden bekommen einen ruhigen Ton — die Arbeitswoche hebt sich dadurch ab,
   ohne dass eine zusaetzliche Farbe ins Spiel kommt. */
.fc-day-sat,
.fc-day-sun {
  background: color-mix(in oklch, var(--cc-fg-dim) 6%, transparent);
}

/* Kalenderwoche: da, aber leise. */
.fc-daygrid-week-number {
  background: transparent !important;
  color: var(--cc-fg-dim) !important;
  font-size: var(--cc-fs-xs);
  font-weight: 600;
  text-decoration: none !important;
}

/* ── Monatsraster: Platz und Lesbarkeit ───────────────────────────────────────
   Ohne Mindesthoehe fallen die Zeilen auf die Hoehe ihres Inhalts zusammen —
   Tage ohne Termin wurden zu Strichen, Tage mit Terminen sprangen auf. */
.fc-dayGridMonth-view .fc-daygrid-day-frame {
  min-height: var(--cc-fc-day-min);
  padding: 2px;
  overflow: hidden;
}

.fc-daygrid-day {
  transition: background var(--cc-dur-fast) var(--cc-ease);
}

.fc-dayGridMonth-view .fc-daygrid-day:hover {
  background: color-mix(in oklch, var(--cc-accent) 5%, transparent);
}

/* Die Datumszahl war eine kleine graue Ziffer in der Ecke. Sie ist der Anker des
   Tages und darf entsprechend gross sein — heute zusaetzlich als Akzentmarke. */
.fc-dayGridMonth-view .fc-daygrid-day-number {
  padding: var(--cc-s-1) var(--cc-s-2) !important;
  color: var(--cc-fg-muted);
  font-size: var(--cc-fs-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none !important;
}

.fc-dayGridMonth-view .fc-day-other .fc-daygrid-day-number {
  color: var(--cc-fg-dim);
  font-weight: 500;
}

.fc-dayGridMonth-view .fc-day-today .fc-daygrid-day-number {
  min-width: 1.85rem;
  margin: 2px;
  padding: var(--cc-s-1) !important;
  border-radius: 999px;
  background: var(--cc-accent);
  color: var(--cc-accent-fg);
  font-weight: 700;
  text-align: center;
}

/* ── Termine im Raster ────────────────────────────────────────────────────────
   Ein Termin ist eine Zeile mit Punkt, Uhrzeit und Titel — kein Farbblock. Bei
   mehreren Terminen am selben Tag war die Zelle sonst eine Farbwand. */
.fc-event {
  cursor: pointer;
  border-radius: var(--cc-r-sm);
  font-size: var(--cc-fs-xs);
  min-width: 0;
  max-width: 100%;
}

.fc-event-main {
  min-width: 0;
  max-width: 100%;
}

.fc-daygrid-event.fc-daygrid-dot-event {
  display: flex;
  padding: 2px var(--cc-s-1);
  align-items: center;
  gap: var(--cc-s-1);
  background: transparent !important;
  border: 0 !important;
  color: var(--cc-fg);
  transition: background var(--cc-dur-fast) var(--cc-ease);
}

.fc-daygrid-event-dot {
  flex: 0 0 auto;
  width: var(--fc-daygrid-event-dot-width);
  height: var(--fc-daygrid-event-dot-width);
  border: calc(var(--fc-daygrid-event-dot-width) / 2) solid var(--fc-event-border-color);
  border-radius: 999px;
}

.fc-daygrid-event.fc-daygrid-dot-event:hover {
  background: var(--cc-bg-hover) !important;
}

.fc-daygrid-event:focus-visible {
  outline: 2px solid var(--cc-border-focus);
  outline-offset: 1px;
}

/* Der Titel muss enden, wo die Zelle endet — sonst schiebt er die Nachbarspalte weg. */
.fc-daygrid-event .fc-event-title,
.fc-daygrid-event .fc-event-time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc-daygrid-event .fc-event-time {
  color: var(--cc-fg-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Der Punkt traegt die Kategorie, der Rahmen den Bearbeitungsstand. So sind beide
   Informationen gleichzeitig ablesbar, ohne dass eine die andere ueberdeckt.
   Schluessel stammen aus public.entry_categories (Unterstriche), die Farbtokens
   aus tokens.css (Bindestriche) — die beiden Schreibweisen sind nicht identisch. */
.fc-daygrid-event.fc-event-cat-feste_maerkte       .fc-daygrid-event-dot { border-color: var(--cc-cat-feste-maerkte); }
.fc-daygrid-event.fc-event-cat-kultur_buehne       .fc-daygrid-event-dot { border-color: var(--cc-cat-kultur-buehne); }
.fc-daygrid-event.fc-event-cat-natur_draussen      .fc-daygrid-event-dot { border-color: var(--cc-cat-natur-draussen); }
.fc-daygrid-event.fc-event-cat-bewegung_sport      .fc-daygrid-event-dot { border-color: var(--cc-cat-bewegung-sport); }
.fc-daygrid-event.fc-event-cat-bildung_workshops   .fc-daygrid-event-dot { border-color: var(--cc-cat-bildung-workshops); }
.fc-daygrid-event.fc-event-cat-treffen_austausch   .fc-daygrid-event-dot { border-color: var(--cc-cat-treffen-austausch); }
.fc-daygrid-event.fc-event-cat-essen_genuss        .fc-daygrid-event-dot { border-color: var(--cc-cat-essen-genuss); }
.fc-daygrid-event.fc-event-cat-nachbarschaftshilfe .fc-daygrid-event-dot { border-color: var(--cc-cat-nachbarschaftshilfe); }
.fc-daygrid-event.fc-event-cat-organisation        .fc-daygrid-event-dot { border-color: var(--cc-cat-organisation); }

/* Bearbeitungsstand als schmale linke Kante — Form statt zweiter Farbfamilie
   (UI-Contract §4.5). In Zeitraster-Ansichten traegt sie zusaetzlich die Flaeche. */
.fc-event-published { border-left: 3px solid var(--cc-state-published); }
.fc-event-draft     { border-left: 3px solid var(--cc-state-draft); }
.fc-event-review    { border-left: 3px solid var(--cc-state-review); }

.fc-timegrid-event.fc-event-published { background: color-mix(in oklch, var(--cc-state-published) 24%, var(--cc-bg-card)) !important; }
.fc-timegrid-event.fc-event-draft     { background: color-mix(in oklch, var(--cc-state-draft) 24%, var(--cc-bg-card)) !important; }
.fc-timegrid-event.fc-event-review    { background: color-mix(in oklch, var(--cc-state-review) 24%, var(--cc-bg-card)) !important; }

/* Veroeffentlichte Termine sind gesperrt: der Cursor sagt es, bevor jemand zieht. */
.fc-event-locked { cursor: default; }

/* „+N weitere" und das zugehoerige Popover. */
.fc-daygrid-more-link {
  padding: 0 var(--cc-s-1);
  color: var(--cc-fg-muted) !important;
  font-size: var(--cc-fs-xs);
  font-weight: 600;
}

.fc-daygrid-more-link:hover {
  color: var(--cc-accent) !important;
}

.fc-popover {
  z-index: 30;
  border: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-r-lg) !important;
  background: var(--cc-bg-card) !important;
  box-shadow: var(--cc-shadow-lg, 0 18px 40px -12px rgb(0 0 0 / .6)) !important;
}

.fc-popover-header {
  padding: var(--cc-s-2) var(--cc-s-3) !important;
  background: transparent !important;
  color: var(--cc-fg) !important;
  font-size: var(--cc-fs-sm);
  font-weight: 600;
}

/* ── Zeitraster (Woche/Tag) ───────────────────────────────────────────────── */

.fc-timegrid-slot-label-cushion,
.fc-timegrid-axis-cushion {
  color: var(--cc-fg-dim);
  font-size: var(--cc-fs-xs);
  font-variant-numeric: tabular-nums;
}

.fc-timegrid-event {
  overflow: hidden;
  padding: 2px var(--cc-s-1);
}

.fc-timegrid-event .fc-event-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}

.fc-timegrid-event .fc-event-time,
.fc-timegrid-event .fc-event-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc-bg-event {
  overflow: hidden;
  pointer-events: none;
}

/* ── Feiertage und Ferien (BW-Layer) ──────────────────────────────────────────
   Hintergrund-Ereignisse rendern ihren Titel ungebremst ueber die Zellgrenze
   hinaus. Im Jahresraster lief er quer durch die Nachbartage und legte sich
   ueber die Datumszahlen. Er bekommt jetzt eine feste Grenze — und in der
   Jahresansicht, wo ohnehin kein Platz ist, nur noch die Faerbung plus
   Tooltip (in eventDidMount als title gesetzt). */
.cc-bw-calendar-layer .fc-event-title {
  display: block;
  overflow: hidden;
  padding: 1px var(--cc-s-1);
  color: var(--cc-fg-muted);
  font-size: var(--cc-fs-xs);
  font-weight: 600;
  letter-spacing: .01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-bw-calendar-layer--public-holiday {
  background-color: color-mix(in oklch, var(--cc-danger) 14%, transparent) !important;
}

.cc-bw-calendar-layer--school-holiday {
  background-color: color-mix(in oklch, var(--cc-success) 12%, transparent) !important;
}

.fc-multiMonthYear-view .cc-bw-calendar-layer .fc-event-title {
  display: none;
}

/* ── Jahresansicht: Uebersicht, keine Textwand ────────────────────────────── */

.fc-multiMonth-title {
  color: var(--cc-fg) !important;
  font-size: var(--cc-fs-sm) !important;
  font-weight: 700 !important;
}

.fc-multiMonthYear-view .fc-daygrid-day-frame {
  min-height: 0;
}

.fc-multiMonthYear-view .fc-daygrid-event .fc-event-title {
  font-size: var(--cc-fs-xs);
}

/* ── Bewegung ─────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .fc-daygrid-day,
  .fc-daygrid-event.fc-daygrid-dot-event {
    transition-duration: 1ms;
  }
}