/* Working Hours Blocks Styling */

/* Base styling for working hours blocks - HÖCHSTE PRIORITÄT */
.e-schedule .e-appointment.working-hours-block,
.e-appointment.working-hours-block,
div.e-appointment.working-hours-block {
  background-color: #000000 !important;
  border: 1px solid #000000 !important;
  border-color: #000000 !important;
  color: transparent !important;
  font-size: 0px !important;
  opacity: 1 !important;
  pointer-events: none !important; /* Make blocks non-interactive */
  z-index: 1 !important; /* Behind regular appointments */
}

/* Specific styling for different types of working hours blocks */
.e-appointment.working-hours-block.non-working-hours {
  background-color: #000000 !important;
  border: 1px solid #000000 !important;
  color: transparent !important;
  font-style: normal !important;
}

.e-appointment.working-hours-block.unavailable-range {
  background-color: #000000 !important;
  border: 1px solid #000000 !important;
  color: transparent !important;
  font-weight: normal !important;
}

.e-schedule .e-appointment.working-hours-block.vacation,
.e-appointment.working-hours-block.vacation,
div.e-appointment.working-hours-block.vacation {
  background-color: #000000 !important;
  border: 1px solid #000000 !important;
  border-color: #000000 !important;
  color: transparent !important;
}

.e-appointment.working-hours-block.sick-leave {
  background-color: #000000 !important;
  border: 1px solid #000000 !important;
  color: transparent !important;
}

.e-appointment.working-hours-block.training {
  background-color: #000000 !important;
  border: 1px solid #000000 !important;
  color: transparent !important;
}

/* Ensure working hours blocks appear behind regular appointments */
.e-appointment:not(.working-hours-block) {
  z-index: 10 !important;
}

/* Text styling for working hours blocks - ALLES verstecken */
.e-appointment.working-hours-block .e-subject,
.e-appointment.working-hours-block .e-appointment-details,
.e-appointment.working-hours-block .e-time,
.e-appointment.working-hours-block .e-date-time,
.e-appointment.working-hours-block .e-subject-wrap {
  font-size: 0px !important;
  color: transparent !important;
  opacity: 0 !important;
  display: none !important;
  visibility: hidden !important;
}

/* Verstecke auch den Inhalt */
.e-appointment.working-hours-block:not(.all-day)::before,
.e-appointment.working-hours-block:not(.all-day)::after {
  content: "" !important;
  display: none !important;
}

/* Ausnahme: Ganztägige Blöcke zeigen Text */
.e-appointment.working-hours-block.all-day .e-subject {
  font-size: 12px !important;
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
  color: #ffffff !important;
}

/* Working hours blocks should not show resize handles */
.e-appointment.working-hours-block .e-resize-handle {
  display: none !important;
}

/* Working hours blocks should not be draggable */
.e-appointment.working-hours-block {
  cursor: default !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .e-appointment.working-hours-block {
    font-size: 9px !important;
  }

  .e-appointment.working-hours-block .e-subject {
    font-size: 8px !important;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .e-appointment.working-hours-block {
    background-color: #2d2d2d !important;
    border-color: #404040 !important;
    color: #cccccc !important;
  }

  .e-appointment.working-hours-block.unavailable-range {
    background-color: #4d2d2d !important;
    border-color: #6d4040 !important;
    color: #ff6666 !important;
  }

  .e-appointment.working-hours-block.vacation {
    background-color: #4d4d2d !important;
    border-color: #6d6d40 !important;
    color: #ffff66 !important;
  }
}

/* Special styling for full-day working hours blocks */
.e-appointment.working-hours-block.all-day {
  background-color: #000000 !important;
  border: 1px solid #000000 !important;
  color: #ffffff !important;
  font-weight: bold !important;
}

/* Text für ganztägige Blöcke anzeigen */
.e-appointment.working-hours-block.all-day .e-subject::before {
  content: "Arbeitsfrei";
  color: #ffffff !important;
  font-size: 12px !important;
}

/* Hover effects (minimal since blocks are non-interactive) */
.e-appointment.working-hours-block:hover {
  opacity: 0.8 !important;
}

/* Ensure proper layering in different Syncfusion views */
.e-schedule .e-work-cells .e-appointment.working-hours-block {
  z-index: 1 !important;
}

.e-schedule .e-work-cells .e-appointment:not(.working-hours-block) {
  z-index: 10 !important;
}

/* ===== GANZTAGES-FÄRBUNG FÜR KALENDER-ZELLEN ===== */
/* Basis-Styling für Zellen mit ganztägigen Terminen */
.e-schedule .e-work-cells.all-day-cell-highlight,
.e-schedule .e-time-cells.all-day-cell-highlight {
  position: relative;
}

/* Dynamische Farben für verschiedene Termine */
/* Rot (z.B. Krankheit) */
.all-day-cell-highlight.all-day-color-ff0000,
.all-day-cell-highlight.all-day-color-FF0000 {
  background-color: rgba(255, 0, 0, 0.3) !important;
  border-left: 4px solid rgb(255, 0, 0) !important;
}

/* Schwarz (z.B. WorkingHoursBlocks) */
.all-day-cell-highlight.all-day-color-000000 {
  background-color: rgba(0, 0, 0, 0.5) !important;
  border-left: 4px solid rgb(0, 0, 0) !important;
}

/* Grün */
.all-day-cell-highlight.all-day-color-00ff00,
.all-day-cell-highlight.all-day-color-00FF00 {
  background-color: rgba(0, 255, 0, 0.3) !important;
  border-left: 4px solid rgb(0, 255, 0) !important;
}

/* Blau */
.all-day-cell-highlight.all-day-color-0000ff,
.all-day-cell-highlight.all-day-color-0000FF {
  background-color: rgba(0, 0, 255, 0.3) !important;
  border-left: 4px solid rgb(0, 0, 255) !important;
}

/* Gelb */
.all-day-cell-highlight.all-day-color-ffff00,
.all-day-cell-highlight.all-day-color-FFFF00 {
  background-color: rgba(255, 255, 0, 0.3) !important;
  border-left: 4px solid rgb(255, 255, 0) !important;
}

/* Orange */
.all-day-cell-highlight.all-day-color-ffa500,
.all-day-cell-highlight.all-day-color-FFA500 {
  background-color: rgba(255, 165, 0, 0.3) !important;
  border-left: 4px solid rgb(255, 165, 0) !important;
}

/* Lila */
.all-day-cell-highlight.all-day-color-800080 {
  background-color: rgba(128, 0, 128, 0.3) !important;
  border-left: 4px solid rgb(128, 0, 128) !important;
}

/* ===== ABTEILUNGS-ARBEITSZEIT-BLÖCKE (WORKING_TIME_DEPARTMENT) ===== */
/* Transparente Blöcke mit Abteilungsfarbe als Hintergrund */
/* WICHTIG: position/left/width MÜSSEN im Stylesheet stehen (nicht nur inline),
   weil Syncfusions JS-Overlap-Engine die Inline-Styles überschreibt.
   CSS !important aus Stylesheet > Inline-Styles ohne !important (von Syncfusion JS). */
.e-schedule .e-appointment.department-working-time,
.e-appointment.department-working-time,
div.e-appointment.department-working-time {
  position: absolute !important; /* Aus dem normalen Layout-Flow nehmen */
  opacity: 0.25 !important; /* Durchsichtig */
  pointer-events: none !important; /* Nicht klickbar */
  z-index: 0 !important; /* Ganz hinten */
  border: none !important;
  border-radius: 0 !important;
}

/*
 * Syncfusion teilt bei Überlappung die Spaltenbreite (50/50, 33/33/33 …).
 * Arbeitszeiten sind keine „echten“ parallelen Termine → volle Ressourcen-Spalte wie Hintergrund.
 * Der gemeinsame Parent (.e-appointment-wrap / .e-appointment-wrapper) bleibt volle Breite.
 */
.e-schedule .e-vertical-view .e-appointment-wrap,
.e-schedule .e-vertical-view .e-appointment-wrapper,
.e-schedule .e-timeline-view .e-appointment-wrap,
.e-schedule .e-timeline-view .e-appointment-wrapper {
  position: relative;
}

.e-schedule .e-vertical-view .e-appointment-wrap .e-appointment.department-working-time,
.e-schedule .e-vertical-view .e-appointment-wrapper .e-appointment.department-working-time,
.e-schedule .e-timeline-view .e-appointment-wrap .e-appointment.department-working-time,
.e-schedule .e-timeline-view .e-appointment-wrapper .e-appointment.department-working-time {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
}

/* Text in Abteilungs-Blöcken verstecken */
.e-appointment.department-working-time .e-subject,
.e-appointment.department-working-time .e-appointment-details,
.e-appointment.department-working-time .e-time,
.e-appointment.department-working-time .e-date-time,
.e-appointment.department-working-time .e-subject-wrap,
.e-appointment.department-working-time .e-inner-wrap {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Resize-Handles verstecken */
.e-appointment.department-working-time .e-resize-handle {
  display: none !important;
}

/* Kein Hover-Effekt */
.e-appointment.department-working-time:hover {
  opacity: 0.25 !important;
  cursor: default !important;
}
/* ===== OVERLAP-FIX: Termine ohne echte Termin-Konflikte ===== */
/* Wenn ein Termin nur mit Arbeitszeit-Blöcken überlappt (keine echten Termine),
   soll er trotzdem die volle Zellenbreite nutzen.
   CSS !important aus Stylesheet überschreibt Syncfusions JS-gesetzte Inline-Styles. */
.e-schedule .e-appointment.no-overlap-appointment,
.e-appointment.no-overlap-appointment,
div.e-appointment.no-overlap-appointment {
  max-width: 100% !important;
}

/* ===== MONATSANSICHT: VERFÜGBARKEITS-HINTERGRUND ===== */
.e-schedule .e-month-view .e-work-cells.availability-cell,
.e-schedule .e-work-cells.availability-cell {
  background-color: rgba(76, 175, 80, 0.25) !important;
}

/* Häufige Abteilungsfarben */
.e-schedule .e-month-view .e-work-cells.availability-color-4caf50,
.e-schedule .e-work-cells.availability-color-4caf50 {
  background-color: rgba(76, 175, 80, 0.25) !important;
}

.e-schedule .e-month-view .e-work-cells.availability-color-2196f3,
.e-schedule .e-work-cells.availability-color-2196f3 {
  background-color: rgba(33, 150, 243, 0.25) !important;
}

.e-schedule .e-month-view .e-work-cells.availability-color-ff9800,
.e-schedule .e-work-cells.availability-color-ff9800 {
  background-color: rgba(255, 152, 0, 0.25) !important;
}

.e-schedule .e-month-view .e-work-cells.availability-color-9c27b0,
.e-schedule .e-work-cells.availability-color-9c27b0 {
  background-color: rgba(156, 39, 176, 0.25) !important;
}

.e-schedule .e-month-view .e-work-cells.availability-color-f44336,
.e-schedule .e-work-cells.availability-color-f44336 {
  background-color: rgba(244, 67, 54, 0.25) !important;
}

.e-schedule .e-month-view .e-work-cells.availability-color-009688,
.e-schedule .e-work-cells.availability-color-009688 {
  background-color: rgba(0, 150, 136, 0.25) !important;
}

.e-schedule .e-month-view .e-work-cells.availability-color-795548,
.e-schedule .e-work-cells.availability-color-795548 {
  background-color: rgba(121, 85, 72, 0.25) !important;
}

.e-schedule .e-month-view .e-work-cells.availability-color-607d8b,
.e-schedule .e-work-cells.availability-color-607d8b {
  background-color: rgba(96, 125, 139, 0.25) !important;
}

.e-schedule .e-month-view .e-work-cells.availability-color-e91e63,
.e-schedule .e-work-cells.availability-color-e91e63 {
  background-color: rgba(233, 30, 99, 0.25) !important;
}

.e-schedule .e-month-view .e-work-cells.availability-color-3f51b5,
.e-schedule .e-work-cells.availability-color-3f51b5 {
  background-color: rgba(63, 81, 181, 0.25) !important;
}

.e-schedule .e-month-view .e-work-cells.availability-color-00bcd4,
.e-schedule .e-work-cells.availability-color-00bcd4 {
  background-color: rgba(0, 188, 212, 0.25) !important;
}

.e-schedule .e-month-view .e-work-cells.availability-color-8bc34a,
.e-schedule .e-work-cells.availability-color-8bc34a {
  background-color: rgba(139, 195, 74, 0.25) !important;
}

.e-schedule .e-month-view .e-work-cells.availability-color-ffc107,
.e-schedule .e-work-cells.availability-color-ffc107 {
  background-color: rgba(255, 193, 7, 0.25) !important;
}

.e-schedule .e-month-view .e-work-cells.availability-color-888888,
.e-schedule .e-work-cells.availability-color-888888 {
  background-color: rgba(136, 136, 136, 0.25) !important;
}

/* ===== MONATSANSICHT: WORKING HOURS ALS DEZENTE FARBSTREIFEN ===== */
/* Working Hours sind in der Monatsansicht als normale Events im DataSource,
   werden aber über OnEventRendered mit der Klasse 'month-working-hours' versehen. */
.e-schedule .e-month-view .e-appointment.month-working-hours,
.e-appointment.month-working-hours,
div.e-appointment.month-working-hours {
  height: 4px !important;
  min-height: 0 !important;
  max-height: 4px !important;
  line-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  cursor: default !important;
  border-radius: 2px !important;
}

/* Text in Month-Working-Hours verstecken */
.e-appointment.month-working-hours .e-subject,
.e-appointment.month-working-hours .e-appointment-details,
.e-appointment.month-working-hours .e-time,
.e-appointment.month-working-hours .e-date-time,
.e-appointment.month-working-hours .e-subject-wrap,
.e-appointment.month-working-hours .e-inner-wrap {
  display: none !important;
}

/* Resize-Handle verstecken */
.e-appointment.month-working-hours .e-resize-handle {
  display: none !important;
}