/* De maandbalk: een rij maandpillen waar je horizontaal doorheen scrolt of
   veegt om snel bij een andere maand te komen. Zelfde patroon als het naamwiel
   van de rassengids. Gedeeld door de klantkalender en de beheerkalender, zodat
   die twee zich hetzelfde gedragen. */
.maandbalk {
  position: relative;
  display: flex; gap: .4rem;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: .3rem .1rem .5rem;
  margin: 0 0 .6rem;
  scrollbar-width: thin;
}
.maandbalk::-webkit-scrollbar { height: 7px; }
.maandbalk::-webkit-scrollbar-thumb {
  background: var(--wash-2, #E3CBA0); border-radius: 999px;
}
.maandbalk::-webkit-scrollbar-track { background: transparent; }
.maandpil {
  flex: 0 0 auto; scroll-snap-align: center; cursor: pointer; white-space: nowrap;
  font: inherit; font-family: 'Baloo 2', cursive; font-weight: 700; font-size: .9rem;
  padding: .35rem .8rem;
  border: 2px solid var(--ink, #2A2622); border-radius: 999px;
  background: var(--card, #FFFDF7); color: var(--graphite, #6E6558);
  transition: background .12s ease, color .12s ease, transform .12s ease;
}
/* Enkel waar er echt een muis is: op een aanraakscherm blijft de hover-kleur na
   een tik plakken tot je ergens anders tikt, en dan lijkt de aangetikte maand
   oranje in plaats van zwart. */
@media (hover: hover) {
  .maandpil:hover { background: var(--wash, #EFDFC0); color: var(--ink, #2A2622); }
}
.maandpil.actief {
  background: var(--ink, #2A2622); color: var(--paper, #FAF6EC);
  border-color: var(--ink, #2A2622); transform: scale(1.04);
}
/* Het eerste pilletje van een nieuw jaar krijgt het jaartal erbij; dat regelt
   de JS met een extra klasse zodat de rij niet vol jaartallen staat. */
.maandpil .jaar { font-size: .78em; opacity: .8; margin-left: .2rem; }
.maandbalk-hint {
  font-size: .82rem; color: var(--graphite, #6E6558); font-weight: 600;
  margin: -.3rem 0 .7rem; text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .maandbalk { scroll-behavior: auto; }
  .maandpil.actief { transform: none; }
}