/* ==========================================================
   Calendar Styles – Energietempel / Lomisieren
   ==========================================================

   Diese CSS-Datei enthält alle visuellen Anpassungen für den
   FullCalendar im Energietempel-System.

   Zweck:
   - Anpassung an das Energietempel-Farbschema (Gold / Warmtöne)
   - Vereinheitlichung der Event-Darstellung
   - Formatierung von Zeitachsen und Kalender-Header
   - Darstellung von Verfügbarkeits-Slots (slot_verfuegbar)
   - Layout-Anpassungen für bessere Lesbarkeit
   - Mobile Optimierung

   Wichtige Besonderheiten:
   - Einige Regeln überschreiben FullCalendar-Standardstyles
     und verwenden daher !important.
   - Verfügbarkeits-Slots (.slot-verfuegbar) werden optisch
     als seitlicher Marker dargestellt.
   - Events besitzen bewusst eine Mindesthöhe, um auch bei
     kurzen Terminen gut sichtbar zu bleiben.

   Hinweis für Entwickler:
   Diese Styles gehören ausschließlich zum Kalender und sollen
   nicht in die allgemeine lomisieren.css übernommen werden.

   Autor: Jörg Sarodnick
   Projekt: Energietempel – Lomisieren
   ========================================================== */

.selected-slott {
  border: solid 4px !important;
  color: #000 !important;
}

.kalender-wrapper {
  max-width: 1400px;
  margin: 40px auto;
  background-color: #fff;
  padding: 10px 30px 20px 30px;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

#calendar {
  border-radius: 0px;
  overflow: hidden;
  max-width: 900px;
  margin: 0 auto;

  --fc-button-hover-bg-color: #ad7900;
  --fc-button-hover-border-color: #ad7900;
  --fc-button-bg-color: #caa26b;
  --fc-button-border-color: #caa26b;
  --fc-button-active-bg-color: #ad7738;
  --fc-button-active-border-color: #ad7900;

  --fc-list-event-hover-bg-color: #caa26b;
  --fc-list-event-bg-color: #caa26b;
  --fc-event-border-color: #caa26b;
}

/* --------------------------------
   Events
-------------------------------- */
.fc .fc-scrollgrid {
  border-bottom-width: 0px;
  border-collapse: separate;
  border-right-width: 0px;
  background-color: #fff;
}

.fc-v-event,
.fc-daygrid-event {
  border-radius: 5px;
  background-color: var(--fc-list-event-hover-bg-color);
}

.fc-event {
  min-height: 40px;
  padding: 5px 0px 5px 12px;
  border: none !important;
  color: #473102 !important;
  font-weight: 500;
  pointer-events: none;
}

.fc-timegrid-event:hover,
.fc-daygrid-event:hover {
  background: var(--fc-button-bg-color) !important;
}

.fc-list-event {
  color: #ad7900 !important;
  background-color: rgb(255, 255, 255) !important;
}

.fc-list-day-text,
.fc-list-day-side-text {
  color: #ad7900 !important;
}

/* --------------------------------
   Toolbar
-------------------------------- */

.fc .fc-toolbar.fc-header-toolbar {
  margin-bottom: 10px;
}

.fc .fc-toolbar-title {
  font-size: 16px;
  color: #b28c4c;
  /* Energietempel Gold */
  letter-spacing: 0.5px;
}

/* --------------------------------
   Buttons
-------------------------------- */

.fc .fc-button {
  display: inline-block;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.2;
  padding: 6px 8px !important;
  text-align: center;
  user-select: none;
  vertical-align: middle;
  border-radius: 8px;
}

.fc .fc-button .fc-icon {
  font-size: 16px;
  vertical-align: middle;
}

/* --------------------------------
   Header & Zeitachsen
-------------------------------- */

.fc .fc-col-header-cell-cushion {
  font-size: 14px;
  color: #b28c4c;
}

.fc .fc-timegrid-axis-cushion {
  font-size: 14px;
  color: #b28c4c;
}

.fc .fc-timegrid-slot-label-cushion {
  font-size: 14px;
  color: #b28c4c;
}

/* --------------------------------
   Verfügbarkeits-Slots
-------------------------------- */

.fc-verfuegbar-event {
  max-width: 80px !important;
  width: 80px !important;
  pointer-events: none;
  opacity: 0.7;
}

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

.fc-timegrid-event.slot-verfuegbar {
  border-left: 6px solid #d9dfe2;
  width: 80px;
  border-radius: 8px !important;
  opacity: 0.7;

}

.locked-slot {
  opacity: 0.5;
  cursor: not-allowed;
}

.fc-event-title,
.fc-event-time {
  color: #ffffff;
  font-weight: bold;
}

/* --------------------------------
   Layout
-------------------------------- */

.fc-timegrid-col-events {
  padding-left: 90px;
}

.fc-daygrid-event.fc-daygrid-dot-event {
  flex-direction: column !important;
  align-items: flex-start;
}

.fc-highlight {
  background: rgba(178, 140, 76, 1);
}

/* --------------------------------
   Mobile
-------------------------------- */

@media (max-width: 600px) {
  .kalender-wrapper {
    padding: 15px;
  }
}

.fc-daygrid-event {
  white-space: normal !important;
}

/* Month View */
.fc-daygrid-event {
  white-space: normal !important;
  pointer-events: auto !important;
}

.fc-event-main {
  white-space: pre-line;
}

.fc-timegrid-event-harness {
  pointer-events: none;
}

.fc-timegrid-event-harness .fc-event {
  pointer-events: auto;
}

.fc-list-event {
  pointer-events: auto !important;
  cursor: pointer;
}