/* Calendar wrapper */
#calendar-wrapper {
  max-width: 100%;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e0e0e0;
  overflow: visible; /* allows hover cards to overflow */
  padding: 8px;
}

/* Calendar container */
#calendar {
  display: flex;
  flex-direction: column;
  font-family: "Inter", system-ui, sans-serif;
}

/* Header and rows */
.calendar-header,
.candidate-row {
  display: flex;
  align-items: stretch;
  min-width: 0;
}

/* Candidate label column */
.candidate-label {
  width: 220px;
  min-width: 140px;
  border-right: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #3b3d3c;
  border-bottom: 1px solid #eee;
  font-size: 1rem;
  flex-shrink: 0;
  padding: 6px;
  text-align: center;
}

/* Calendar header */
.calendar-header {
  height: 80px;
  background: #f9fafb;
  border-bottom: 1px solid #eee;
  font-size: 1rem;
  font-weight: 600;
}

.day-header {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 8px 6px;
  border-right: 1px solid #eee;
  font-size: 0.95rem;
  font-weight: 600;
  color: #555;
}

/* Day cells */
.day-cell {
  position: relative;
  flex: 1 1 0;
  height: 50px;
  border-right: 1px solid #f2f2f2;
  border-bottom: 1px solid #eee;
  background: #fff;
  min-width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 4px;
}

/* Event block */
.event-block {
  position: relative;
  font-size: 0.85rem;
  padding: 4px 6px;
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  width: 90%;
  text-align: center;
}

/* Event hover effect */
.event-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

/* Event types */
.availability {
  background: linear-gradient(135deg, #0d6efd, #4dabf7);
}
.availability-attended {
  background: linear-gradient(135deg, #198754, #45c763);
}

.hover-card {
  position: absolute;
  background: #fff;
  color: #333;
  font-size: 0.85rem;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.25);
  border: 1px solid #e0e0e0;
  opacity: 0;
  pointer-events: none;
  /* <-- prevent interaction when hidden */
  z-index: 9999;
  transition: opacity 0.15s ease, transform 0.15s ease;
  min-width: 180px;
  white-space: nowrap;
  transform: translate(-50%, 10px);
}

.hover-card.show {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
  /* enable interaction only when visible */
}

.hover-card::after {
  content: "";
  position: absolute;
  top: -6px;
  /* above the card */
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
  z-index: 10000;
}


/* Time label inside event block */
.time-label {
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 2px;
  color: rgba(255, 255, 255, 0.9);
}

/* Appointments inside hover card */
.afspraken-list {
  margin-top: 6px;
}
.afspraak-item {
  background: rgba(13, 110, 253, 0.1);
  border-radius: 6px;
  padding: 3px 6px;
  margin-bottom: 4px;
  font-size: 0.75rem;
  color: #0d6efd;
}

.hover-card .btn {
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 5px;
  flex: 0 1 auto; /* don't stretch to 0 width */
  text-align: center;
}

.hover-card .btn + .btn {
  margin-left: 4px;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .candidate-label {
    min-width: 120px;
    font-size: 0.85rem;
  }
  .day-cell {
    min-width: 50px;
    height: 50px;
  }
  .event-block {
    font-size: 0.75rem;
    height: 32px;
    min-width: 60px;
    padding: 0 4px;
  }
  .time-label {
    font-size: 0.7rem;
  }
}
.hover-card {
  transform: translate(-50%, 10px);
  /* start lower */
}

.hover-card.show {
  transform: translate(-50%, 0);
  /* rise up */
}

/* Make organisatie selector visible in green header */
.card-header .choices__inner {
  background-color: #ffffff;   /* clear contrast */
  color: #212529;
  border: 1px solid #ced4da;   /* default Bootstrap border */
}

/* Dropdown list background */
.card-header .choices__list--dropdown {
  background-color: #ffffff;
  color: #212529;
}

/* Highlighted item in dropdown */
.card-header .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: #e9f5ee;   /* very light green */
  color: #212529;
}

/* Selected items text (keep default look) */
.card-header .choices__item--selectable {
  background-color: #e9ecef;
  color: #212529;
}

/* Placeholder text visibility */
.card-header .choices__placeholder {
  color: #6c757d;
}

/* Candidate name column colors */

.candidate-label.afdeling-it {
  background-color: #33b7eb;
  /* green-100 */
}

.candidate-label.afdeling-fietsen {
  background-color: #ffd83c;
  /* blue-100 */
}

.candidate-label.afdeling-default {
  background-color: #b5b8bd;
  /* gray-200 */
}

.ecoware-footer {
    background-color: #f4f6f9;
    border-top: 1px solid #e0e0e0;
    color: #6c757d;
}

.ecoware-footer small {
    font-size: 0.8rem;
}

.legend-box-wrapper {
  background: #ffffff;
  padding: 6px 10px;
  border-radius: 999px; /* pill shape */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
}

.legend-box-wrapper span {
  color: #000; /* black text */
}

.legend-box {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  display: inline-block;
}

/* afdeling colors */
.afdeling-it {
  background-color: #329ee6;
}

.afdeling-fietsen {
  background-color: #ffd83c;
}