/* Flatpickr Custom Overrides für 11m-band.de */

/* Basis: abgerundeter, moderner Look */
.flatpickr-calendar {
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2) !important;
    font-family: inherit !important;
    border: 1px solid rgba(255,255,255,0.08);
}

.flatpickr-months .flatpickr-month {
    border-radius: 12px 12px 0 0;
}

/* Alt-Input Styling (das sichtbare Feld) */
.flatpickr-input.form-input + .form-input,
input.flatpickr-input + input {
    /* Erbt form-input Styles */
}

/* Today-Marker */
.flatpickr-day.today {
    border-color: var(--accent, #2e7d32) !important;
}

.flatpickr-day.today:hover {
    background: var(--accent, #2e7d32) !important;
    color: #fff !important;
}

/* Ausgewaehlter Tag */
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--accent, #2e7d32) !important;
    border-color: var(--accent, #2e7d32) !important;
    color: #fff !important;
}

/* ====== DARK MODE ====== */
html.dark-mode .flatpickr-calendar {
    background: #1e1e2e !important;
    border-color: rgba(255,255,255,0.1);
}

html.dark-mode .flatpickr-months .flatpickr-month,
html.dark-mode .flatpickr-weekdays,
html.dark-mode span.flatpickr-weekday {
    background: #1e1e2e !important;
    color: #ccc !important;
}

html.dark-mode .flatpickr-current-month .flatpickr-monthDropdown-months,
html.dark-mode .flatpickr-current-month input.cur-year {
    color: #eee !important;
    background: transparent;
}

html.dark-mode .flatpickr-current-month .flatpickr-monthDropdown-months option {
    background: #1e1e2e;
    color: #eee;
}

html.dark-mode .flatpickr-day {
    color: #ddd !important;
}

html.dark-mode .flatpickr-day:hover {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.15) !important;
}

html.dark-mode .flatpickr-day.prevMonthDay,
html.dark-mode .flatpickr-day.nextMonthDay {
    color: #555 !important;
}

html.dark-mode .flatpickr-day.today {
    border-color: var(--accent, #4caf50) !important;
    color: var(--accent, #4caf50) !important;
}

html.dark-mode .flatpickr-day.selected {
    background: var(--accent, #4caf50) !important;
    border-color: var(--accent, #4caf50) !important;
    color: #fff !important;
}

/* Prev/Next Pfeile */
html.dark-mode .flatpickr-prev-month svg,
html.dark-mode .flatpickr-next-month svg {
    fill: #ccc !important;
}

html.dark-mode .flatpickr-prev-month:hover svg,
html.dark-mode .flatpickr-next-month:hover svg {
    fill: #fff !important;
}

/* Time Picker Styling */
html.dark-mode .flatpickr-time {
    border-top-color: rgba(255,255,255,0.1) !important;
}

html.dark-mode .flatpickr-time input,
html.dark-mode .flatpickr-time .flatpickr-am-pm {
    color: #eee !important;
    background: transparent;
}

html.dark-mode .flatpickr-time input:hover,
html.dark-mode .flatpickr-time input:focus {
    background: rgba(255,255,255,0.08) !important;
}

html.dark-mode .numInputWrapper span {
    border-color: rgba(255,255,255,0.1);
}

html.dark-mode .numInputWrapper span svg path {
    fill: rgba(255,255,255,0.5);
}

html.dark-mode .numInputWrapper:hover span {
    background: rgba(255,255,255,0.08);
}

/* Alt-Input (sichtbares Feld) im Dark-Mode */
html.dark-mode .flatpickr-alt-input,
html.dark-mode input.flatpickr-input[readonly] {
    color: #eee;
    background: var(--input-bg, #2a2a3e);
}