/* Flatpickr im Look der App ("Editorial Calm") — nutzt dieselben CSS-Variablen wie app.css */

.flatpickr-calendar{
  background:var(--surface, #fffdf9);
  border:1px solid var(--line, #e2ddd2);
  border-radius:var(--radius, 12px);
  box-shadow:var(--shadow, 0 10px 30px rgba(0,0,0,.12));
  font-family:var(--body, system-ui, -apple-system, sans-serif);
  width:auto;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after{border-bottom-color:var(--line, #e2ddd2)}

.flatpickr-months{padding:10px 8px 4px}
.flatpickr-months .flatpickr-month{color:var(--ink, #211c18);fill:var(--ink, #211c18)}
.flatpickr-current-month{font-family:var(--display, Georgia, serif);font-weight:500;font-size:16px;padding:0}
.flatpickr-current-month .cur-month{font-family:var(--display, Georgia, serif);color:var(--ink, #211c18)}
.flatpickr-current-month input.cur-year{font-family:var(--display, Georgia, serif);color:var(--ink, #211c18)}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month{
  fill:var(--muted, #7c7568);color:var(--muted, #7c7568);
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg{fill:var(--accent-ink, #3f4a38)}

.flatpickr-weekdays{background:var(--surface, #fffdf9)}
span.flatpickr-weekday{
  color:var(--muted, #7c7568);font-weight:600;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;background:var(--surface, #fffdf9);
}

.flatpickr-day{
  color:var(--ink, #211c18);border-radius:var(--radius-sm, 8px);
}
.flatpickr-day.today{border-color:var(--accent, #5e6b54)}
.flatpickr-day:hover,
.flatpickr-day:focus{background:var(--accent-soft, #e8ece4);border-color:var(--accent-soft, #e8ece4)}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus{
  background:var(--accent, #5e6b54);border-color:var(--accent, #5e6b54);color:var(--surface, #fffdf9);
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay{color:var(--muted, #7c7568);opacity:.55}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover{color:var(--line, #e2ddd2);cursor:not-allowed}

.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm{color:var(--ink, #211c18)}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover{background:var(--accent-soft, #e8ece4)}

/* Sichtbares Eingabefeld (altInput): erbt bereits die Basis-Optik aus app.css
   (input,select,textarea{...}); hier nur Kalender-Cursor ergänzen. */
input.flatpickr-alt-eingabe{cursor:pointer;background-image:none}

/* Unleserliches Datum: der Text bleibt stehen, das Feld ist markiert (js/datepicker-init.js) */
.flatpickr-alt-eingabe.flatpickr-ungueltig{border-color:var(--danger, #8c3b34)}
.flatpickr-hinweis{display:block;margin-top:4px;color:var(--danger, #8c3b34);font-size:13px}