/* Employee Filters Carousel (scoped) */
.employee-carousel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}
/* Place dots on a new row */
.employee-carousel .employee-carousel-dots {
  width: 100%;
  order: 3;
}
.employee-filters-wrapper {
  overflow: hidden; /* hide scrollbars; still allow programmatic scroll */
  flex: 1;
  scroll-snap-type: none; /* no snap for smooth drag */
  scroll-behavior: auto; /* instant scroll for drag responsiveness */
  touch-action: pan-x; /* horizontal touch scrolling */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.employee-filters-wrapper.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto; /* ensure no smooth during drag */
}
.employee-carousel .employee-filters {
  display: flex !important; /* override any grid display */
  flex-wrap: nowrap;
  gap: var(--space-3);
  padding: 1em;
  background: linear-gradient(135deg, var(--white) 0%, var(--bg-lightest) 100%);
  border: 1px solid rgba(var(--color-primary-rgb), 0.1);
  border-radius: var(--radius-14);
  width: max-content; /* allow horizontal overflow */
}
.employee-carousel .employee-filter {
  flex: 0 0 auto;
  min-width: 180px; /* ensure visible card width */
  scroll-snap-align: start;
}

/* Carousel nav buttons */
.employee-carousel-btn {
  background: var(--white);
  border: 1px solid rgba(var(--black-rgb), 0.08);
  color: var(--text-tertiary);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}
.employee-carousel-btn:hover { background: var(--bg-lightest); }
.employee-carousel-btn:active { transform: scale(0.98); }
@media (max-width: 768px) {
  .employee-carousel-btn { display: none; }
}

/* Dots (pagination) */
.employee-carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.employee-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-md);
  background: var(--color-border-dark);
  transition: transform 0.2s ease, background 0.2s ease;
}
.employee-carousel-dot.active {
  background: var(--color-primary);
  transform: scale(1.15);
}

/* Drag cursor */
.employee-filters-wrapper.is-dragging {
  cursor: grabbing;
}

/* Hide scrollbar footprint when possible */
.employee-filters-wrapper::-webkit-scrollbar { height: 0; }