/* Style for the Pikaday datepicker */

:root {
  --highlight-dark-color: #000017;
  --highlight-color: #415a77;
  --light-color: #e0e1dd;
  --text-color: #0d1b2a;
}

#datepicker {
  display: none;
}

#slots {
  margin-top: 20px;
}

#calendarContainer {
  touch-action: pan-y;
}

#calendarContainer .pika-label {
  background-color: var(--light-color);
  color: var(--text-color);
}

#calendarContainer .is-selected .pika-button,
.has-event .pika-button {
  color: var(--text-color);
  font-weight: bold;
  background: var(--light-color);
  box-shadow: inset 0 1px 3px var(--highlight-dark-color);
  border-radius: 3px;
}

#calendarContainer .pika-single {
  border-radius: 0.25rem; /* rounded */
  border: 1px solid var(--highlight-color); /* border-green-600 */
  background-color: var(--light-color); /* bg-background */
  box-shadow:
    0 1px 3px 0 rgb(0 0 0 / 0.1),
    0 1px 2px -1px rgb(0 0 0 / 0.1); /* shadow */
  z-index: 15;
}

#calendarContainer .pika-title {
  font-size: 1.125rem; /* text-lg */
  font-weight: 600; /* font-semibold */
  color: var(--text-color); /* text-text */
}

#calendarContainer .pika-button {
  background-color: var(--light-color); /* bg-background-light (approximated) */
  color: var(--text-color); /* text-text */
}

#calendarContainer .pika-button:hover {
  background-color: var(--highlight-color); /* bg-background-dark */
  color: var(--light-color); /* text-text-light */
}

#calendarContainer .pika-day {
  color: var(--text-color); /* text-text */
}

#calendarContainer .pika-day:hover {
  background-color: var(--light-color); /* bg-background-light (approximated) */
  color: var(
    --highlight-dark-color
  ); /* text-text-dark (approximated as dark gray) */
}

#calendarContainer .pika-day.pika-selected {
  background-color: var(
    --highlight-dark-color
  ); /* bg-primary (approximated as blue) */
  color: var(--light-color); /* text-text-light */
}

#calendarContainer .pika-day.pika-today {
  background-color: var(--highlight-color); /* bg-background-dark */
  color: var(--light-color); /* text-text-light */
}

#calendarContainer .pika-nav {
  color: var(--light-color); /* text-text-light */
}

#calendarContainer .pika-prev,
#calendarContainer .pika-next {
  color: var(--light-color); /* text-text-light */
}

#calendarContainer .pika-prev:hover,
#calendarContainer .pika-next:hover {
  color: var(--highlight-dark-color); /* text-text-dark approximated */
}

#calendarContainer .pika-months {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#calendarContainer .pika-months select,
#calendarContainer .pika-years,
#calendarContainer .pika-years select {
  display: none;
}

#calendarContainer .pika-footer {
  margin-top: 0.5rem; /* mt-2 */
  font-size: 0.75rem; /* text-xs */
  color: var(--light-color); /* text-text-light */
}

#calendarContainer .pika-close {
  color: var(--light-color); /* text-text-light */
}

#calendarContainer .pika-close:hover {
  background-color: var(--highlight-color); /* bg-background-dark */
  color: var(--light-color); /* text-text-light */
}

#calendarContainer .pika-table {
  width: 100%;
  text-align: center;
}

#calendarContainer .pika-table th {
  background-color: var(--highlight-color); /* bg-background-dark */
  color: var(--light-color); /* text-text-light */
}

#calendarContainer .pika-table td {
  background-color: var(--light-color); /* bg-background */
  color: var(--text-color); /* text-text */
}

#calendarContainer .pika-table td:hover {
  background-color: var(--light-color); /* bg-background-light approximated */
  color: #1f2937; /* text-text-dark approximated */
}

#calendarContainer .pika-table td.pika-selected {
  background-color: var(--highlight-dark-color); /* bg-primary approximated */
  color: var(--light-color); /* text-text-light */
}

#calendarContainer .pika-table td.pika-today {
  background-color: var(
    --highlight-color
  ); /* bg-secondary approximated as green */
  color: var(--light-color); /* text-text-light */
}

#calendarContainer .pika-table td.pika-disabled {
  cursor: not-allowed;
  color: var(--light-color); /* text-text-light */
  opacity: 0.5;
}

#calendarContainer .pika-table td.pika-disabled:hover {
  background-color: var(--light-color); /* bg-background */
  color: var(--light-color); /* text-text-light */
}

#calendarContainer .pika-table td.pika-highlight {
  background-color: var(--highlight-dark-color); /* bg-primary approximated */
  color: var(--light-color); /* text-text-light */
}

#calendarContainer .pika-table td.pika-highlight:hover {
  background-color: var(
    --highlight-dark-color
  ); /* bg-primary-dark approximated */
  color: var(--light-color); /* text-text-light */
}

#calendarContainer .pika-table td.pika-selected:hover {
  background-color: var(
    --highlight-dark-color
  ); /* bg-primary-dark approximated */
  color: var(--light-color);
}

#calendarContainer .pika-table td.pika-today:hover {
  background-color: var(--highlight-color); /* bg-secondary-dark approximated */
  color: var(--light-color);
}

#calendarContainer .pika-table td.pika-selected.pika-today,
#calendarContainer .pika-table td.pika-selected.pika-highlight,
#calendarContainer .pika-table td.pika-highlight.pika-selected {
  background-color: var(--highlight-dark-color); /* bg-primary approximated */
  color: var(--light-color); /* text-text-light */
}

/* -------------------------------------------
   Pikaday – Responsive Sizing & Tap Feedback
   (nur Ergänzungen; bestehende Farben bleiben)
--------------------------------------------*/

/* Barrierearm: Animationen optional deaktivieren */
@media (prefers-reduced-motion: reduce) {
  #calendarContainer .pika-button,
  #calendarContainer .pika-prev,
  #calendarContainer .pika-next {
    transition: none !important;
  }
}

/* --- Mobile bis 767px: fingerfreundlich (44x44 px) --- */
@media (max-width: 767px) {
  /* Gesamter Kalender etwas lesbarer */
  #calendarContainer .pika-single {
    font-size: 1rem; /* ~text-base */
  }

  /* Datum-Buttons (Klickfläche) */
  #calendarContainer .pika-button {
    /* exakt ~44x44 Klickfläche */
    min-width: 35px;
    height: 35px;
    line-height: 35px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* dezentes Tap-Feedback */
    transition: transform 100ms ease-out;
  }
  #calendarContainer .pika-button:active {
    transform: scale(0.9);
  }

  /* Monatsnavigation */
  #calendarContainer .pika-prev,
  #calendarContainer .pika-next {
    min-width: 35px;
    height: 35px;
    line-height: 35px;
    padding: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 100ms ease-out;
  }
  #calendarContainer .pika-prev:active,
  #calendarContainer .pika-next:active {
    transform: scale(0.9);
  }

  /* Monats-/Jahreslabel vertikal mittig */
  #calendarContainer .pika-label {
    line-height: 35px;
  }

  /* Lendar breiter machen als Default (240px) */
  #calendarContainer .pika-lendar {
    width: auto; /* nicht auf 240px begrenzen */
    min-width: calc(7 * 35px); /* 7 Spalten à 44px = 308px */
  }

  /* Gleichmäßige Spaltenbreiten, kein Umbruch */
  #calendarContainer .pika-table {
    table-layout: fixed;
    width: 100%;
  }

  /* Wochentags-Köpfe auf 44px Höhe bringen */
  #calendarContainer .pika-table th {
    height: 35px;
    line-height: 35px;
  }

  /* Optional: Außenabstand, damit die Box nicht am Rand klebt */
  #calendarContainer .pika-single {
    margin: 0 auto; /* zentrieren, falls Container breiter ist */
    display: inline-block;
  }
}

/* --- Desktop ab 768px: kompakter (32x32 px) --- */
@media (min-width: 768px) {
  #calendarContainer .pika-single {
    font-size: 0.875rem; /* ~text-sm */
  }

  #calendarContainer .pika-button {
    min-width: 32px;
    height: 32px;
    line-height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 100ms ease-out;
  }
  #calendarContainer .pika-button:active {
    transform: scale(0.95);
  }

  #calendarContainer .pika-prev,
  #calendarContainer .pika-next {
    min-width: 32px;
    height: 32px;
    line-height: 32px;
    padding: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 100ms ease-out;
  }
  #calendarContainer .pika-prev:active,
  #calendarContainer .pika-next:active {
    transform: scale(0.95);
  }

  #calendarContainer .pika-label {
    line-height: 32px;
  }
}