/* Celé pozadí kalendáře */
#calendar { 
  display: grid; 
  grid-template-columns: repeat(7, 50px); 
  gap: 5px; 
  justify-content: center; 
  background-color: #ffe6eb; 
  padding: 10px; 
  border-radius: 1rem; 
}

/* Jednotlivé dny */
.day { 
  width:50px; height:50px; 
  display:flex; justify-content:center; align-items:center; 
  border-radius:0.5rem; 
  background-color:#fff0f5; 
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
  cursor:pointer; position: relative; 
  transition: transform 0.2s, background-color 0.2s;
}

/* Hover efekt */
.day:hover { 
  transform: scale(1.15); 
  background-color: #ffd6de; 
}

/* Typy dnů */
.menstruation { background-color:#f9c0c0; }
.fertile { background-color:#ffd9da; }

/* Ikony */



.day-header { font-weight:bold; text-align:center; color:#d63384; }

/* Tooltipy */
/* Jednotlivé dny */
.day { 
  width:50px; 
  height:50px; 
  display:flex; 
  justify-content:center; 
  align-items:center; 
  border-radius:0.5rem; 
  background-color:#fff0f5; 
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
  cursor:pointer; 
  position: relative; 
  transition: transform 0.2s, background-color 0.2s;
}

/* Hover efekt: zvětšení */
.day:hover { 
  transform: scale(1.15); 
  background-color: #ffd6de; /* jemné zvýraznění */
}
/* Fade-in animace pro tooltip */
@keyframes fadeIn {
  to { opacity: 1; }
}

/* Form collapse / expand */
.form-container { transition: max-height 0.5s ease, opacity 0.5s ease; overflow:hidden; }
.form-collapsed { max-height:0; opacity:0; pointer-events:none; }

/* Toggle button */
#toggleFormBtn { position: fixed; bottom: 20px; right: 20px; z-index: 1000; }

#monthLabel {
  display: inline-block;
  background-color: #ffe9ee; /* světle růžová bublina */
  color: #d63384; /* tmavě růžový text */
  font-weight: bold;
  font-size: 1.5rem; /* větší text */
  padding: 8px 50px; /* prostor kolem textu */
  border-radius: 25px; /* zaoblená bublina */
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}