/* styles.css - Custom Styles */

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-overlay.hidden {
  display: none;
}

.modal-content {
  animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Toast Styles */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  animation: toastSlideIn 0.3s ease-out;
  transition: opacity 0.3s ease-out;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Kalender Styles */
.calendar-month {
  min-width: 280px;
}

.calendar-day {
  position: relative;
  font-weight: 500;
}

.calendar-day:hover {
  transform: scale(1.05);
}

.calendar-day-empty {
  width: 40px;
  height: 40px;
}

/* Multi-User Calendar Styles */
.calendar-day-multi {
  min-height: 70px;
  padding: 4px;
  background: white;
  border: 1px solid #e5e7eb;
}

.calendar-day-multi .date {
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 4px;
  color: #374151;
}

.calendar-day-multi .person-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0;
}

.calendar-day-multi .person-bar {
  height: 6px;
  border-radius: 2px;
  transition: all 0.2s ease;
  cursor: help;
}

.calendar-day-multi .person-bar:hover {
  transform: scaleY(1.3);
  filter: brightness(1.1);
}

.multi-user-legend {
  font-size: 0.75rem;
  color: #6b7280;
  padding: 8px;
  background: #f9fafb;
  border-radius: 6px;
  margin: 0 auto;
  max-width: fit-content;
}

/* Tooltip */
.calendar-tooltip {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  pointer-events: none;
  z-index: 1500;
  white-space: nowrap;
  display: none;
}

/* Statistik Cards */
.stat-card {
  transition: transform 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
  .calendar-month {
    min-width: 100%;
  }

  .calendar-day,
  .calendar-day-empty {
    width: 36px;
    height: 36px;
    font-size: 0.875rem;
  }

  .calendar-day-multi {
    min-height: 60px;
    padding: 3px;
  }

  .calendar-day-multi .person-bar {
    height: 5px;
  }

  .multi-user-legend {
    font-size: 0.65rem;
    flex-direction: column;
    gap: 2px;
  }

  .toast-container {
    left: 20px;
    right: 20px;
  }
}

/* Focus Styles */
input:focus,
button:focus {
  outline: none;
}

/* Smooth Transitions */
* {
  transition-property: background-color, border-color, color, transform;
  transition-timing-function: ease-in-out;
  transition-duration: 150ms;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Print Styles */
@media print {
  .modal-overlay,
  .toast-container,
  header button,
  #nav-prev,
  #nav-next,
  #nav-today {
    display: none !important;
  }

  .calendar-day {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}