/* =============================================================================
 * Reisezeit – Darstellung des gemeinsamen Kalenders
 * -----------------------------------------------------------------------------
 * Gehört zu js/reisezeit.js. Zwei Dinge werden hier geradegezogen, die
 * Flatpickr in seiner Grundeinstellung mitbringt und die auf dem Telefon
 * spürbar stören:
 *
 * 1. Der Kalender ist mit width: 307.875px fest vermessen und klebt am
 *    Eingabefeld. Auf einem 320er-Bildschirm füllt er damit fast die ganze
 *    Breite, ohne sie zu nutzen, und rutscht je nach Position des Feldes an
 *    den Rand. Unterhalb der md-Grenze liegt er deshalb als eigene Ebene über
 *    der Seite.
 *
 * 2. Die Tagesfelder sind 39 x 39 Pixel groß. Das liegt unter den 44 Pixeln,
 *    die Apple und die WCAG-Empfehlung 2.5.5 für Berührungsziele nennen –
 *    spürbar bei den Tagen am Zeilenrand. Auf Mobilgeräten wachsen sie.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * Gemeinsam für alle Größen
 * -------------------------------------------------------------------------- */

.reisezeitKalender .reisezeitKopf {
    display: none;                 /* nur auf dem Telefon sichtbar */
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(57, 57, 57, 0.12);
}

.reisezeitKalender .reisezeitTitel {
    font-family: "Barlow Condensed", serif;
    font-size: 1.25rem;
    color: var(--theme-text-color);
}

.reisezeitKalender .reisezeitSchliessen {
    border: 0;
    background: transparent;
    color: var(--theme-text-color);
    font-size: 1.75rem;
    line-height: 1;
    width: 44px;
    height: 44px;
    cursor: pointer;
}

.reisezeitKalender .reisezeitFuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-top: 1px solid rgba(57, 57, 57, 0.12);
    background: #fff;
}

.reisezeitKalender .reisezeitFussText {
    font-size: 0.9375rem;
    color: var(--theme-text-color);
    line-height: 1.3;
}

/* Auf großen Bildschirmen steht die Zahl in der Fußzeile, der Knopf wäre dort
   überflüssig: Ein Klick neben den Kalender schließt ihn ohnehin. */
.reisezeitKalender .reisezeitUebernehmen {
    display: none;
}

/* Belegte Nächte: durchgestrichen statt farbig hinterlegt. Eine Fläche würde
   bei den runden Tagesfeldern wie ein zweiter Auswahlpunkt wirken; die
   Durchstreichung bleibt außerdem ohne Farbunterscheidung erkennbar. */
.flatpickr-day.reisezeitBelegt,
.flatpickr-day.reisezeitBelegt:hover {
    background: transparent;
    border-color: transparent;
    color: rgba(57, 57, 57, 0.34);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    cursor: not-allowed;
}

/* Tage, die als Abreisetag zu früh wären. Anders als belegte Nächte sind sie
   nicht durchgestrichen: Sie sind nicht blockiert, sondern nur nicht gemeint -
   ein Klick darauf zieht den Zeitraum auf den Mindestaufenthalt auf. */
.flatpickr-day.reisezeitZuKurz,
.flatpickr-day.reisezeitZuKurz:hover {
    color: rgba(57, 57, 57, 0.32);
}

/* Alles andere Gesperrte (vor heute, jenseits des Höchstaufenthalts) bleibt
   blass, aber ohne weitere Auszeichnung. */
.reisezeitKalender .flatpickr-day.flatpickr-disabled,
.reisezeitKalender .flatpickr-day.flatpickr-disabled:hover {
    color: rgba(57, 57, 57, 0.3);
}

.reisezeitKalender .flatpickr-day.selected,
.reisezeitKalender .flatpickr-day.startRange,
.reisezeitKalender .flatpickr-day.endRange {
    background: var(--theme-primary-color);
    border-color: var(--theme-primary-color);
    color: #fff;
}

/* Die Tage dazwischen bilden ein durchgehendes Band. Flatpickr rundet jeden
   Tag zu einem Kreis; ohne das Zurücksetzen des Radius blieben zwischen den
   Feldern weiße Lücken, und der Zeitraum sähe aus wie einzelne Punkte. */
.reisezeitKalender .flatpickr-day.inRange {
    background: rgba(153, 133, 92, 0.16);
    border-color: rgba(153, 133, 92, 0.16);
    border-radius: 0;
    box-shadow: none;
    color: var(--theme-text-color);
}

/* Anfang und Ende behalten die runde Außenkante, innen schließen sie bündig
   an das Band an. */
.reisezeitKalender .flatpickr-day.startRange {
    border-radius: 50px 0 0 50px;
}

.reisezeitKalender .flatpickr-day.endRange {
    border-radius: 0 50px 50px 0;
}

.reisezeitKalender .flatpickr-day.startRange.endRange {
    border-radius: 50px;
}

/* Das sichtbare Feld wird nur über den Kalender gefüllt. Ohne readonly öffnet
   sich auf dem Telefon zusätzlich die Bildschirmtastatur über dem Kalender. */
input.reisezeitFeld {
    background-color: #fff;
    cursor: pointer;
}

/* -----------------------------------------------------------------------------
 * Telefon: eigene Ebene über der Seite
 * -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {

    /* Flatpickr rechnet die Lage des Kalenders selbst aus und schreibt sie als
       style="top: ...; left: ..." direkt ins Element. Ein Inline-Stil schlägt
       jede Regel aus der Datei - ohne !important stünde der Kalender also
       weiterhin irgendwo neben dem Feld statt über der Seite. */
    .flatpickr-calendar.reisezeitKalender.open {
        /* Über alle vier Kanten aufgespannt statt über width/height: Ist die
           Seite selbst breiter als der Bildschirm - was auf der Startseite der
           Fall ist -, ergäbe "width: 100%" die Breite der Seite, nicht die des
           Bildschirms, und der Kalender ragte rechts hinaus. vw und vh messen
           immer den Bildschirm, unabhängig davon, wie breit die Seite ist. */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;   /* berücksichtigt die Adressleiste */

        /* Flatpickr schiebt den Kalender beim Einblenden um 20 Pixel nach oben
           (arrowBottom-Variante). Im Vollbild fehlten dadurch oben 20 Pixel der
           Kopfzeile. */
        transform: none !important;
        animation: none !important;
        max-width: none;
        max-height: none;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        z-index: 1060;             /* über der fixierten Navigationsleiste */
        overflow: hidden;
    }

    .reisezeitKalender .reisezeitKopf {
        display: flex;
        flex: 0 0 auto;
    }

    /* Der mittlere Teil scrollt, Kopf und Fuß bleiben stehen. */
    .flatpickr-calendar.reisezeitKalender.open .flatpickr-months,
    .flatpickr-calendar.reisezeitKalender.open .flatpickr-innerContainer {
        flex: 0 0 auto;
    }

    .flatpickr-calendar.reisezeitKalender.open .flatpickr-innerContainer {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .flatpickr-calendar.reisezeitKalender.open .flatpickr-rContainer,
    .flatpickr-calendar.reisezeitKalender.open .flatpickr-days,
    .flatpickr-calendar.reisezeitKalender.open .dayContainer {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .flatpickr-calendar.reisezeitKalender.open .flatpickr-weekdaycontainer {
        width: 100%;
    }

    /* Berührungsziele auf 44 Pixel. Die Höhe steuert flex-basis der Zeile, die
       Breite ergibt sich aus einem Siebtel – so bleibt das Raster bündig. */
    .flatpickr-calendar.reisezeitKalender.open .flatpickr-day {
        max-width: none;
        width: 14.2857143%;
        height: 44px;
        line-height: 44px;
        font-size: 1rem;
    }

    /* Die Monatspfeile sind bei Flatpickr absolut gesetzt. Ohne einen eigenen
       Bezugsrahmen richten sie sich am ganzen Kalender aus und ragen dann in
       die Kopfzeile hinein. */
    .flatpickr-calendar.reisezeitKalender.open .flatpickr-months {
        position: relative;
    }

    .flatpickr-calendar.reisezeitKalender.open .flatpickr-months .flatpickr-month {
        height: 44px;
    }

    .flatpickr-calendar.reisezeitKalender.open .flatpickr-prev-month,
    .flatpickr-calendar.reisezeitKalender.open .flatpickr-next-month {
        padding: 10px;
        height: 44px;
        width: 44px;
    }

    .flatpickr-calendar.reisezeitKalender.open .flatpickr-current-month {
        font-size: 1.125rem;
    }

    .reisezeitKalender .reisezeitFuss {
        flex: 0 0 auto;
        padding-bottom: calc(0.625rem + env(safe-area-inset-bottom));
    }

    /* Hier ist der Knopf die naheliegende Art zu schließen – neben den
       Kalender tippen geht im Vollbild nicht. */
    .reisezeitKalender .reisezeitUebernehmen {
        display: inline-block;
        flex: 0 0 auto;
        font-size: 1.125rem;
        padding: 0.5rem 1.25rem;
        min-height: 44px;
    }

    .reisezeitKalender .reisezeitUebernehmen:disabled {
        opacity: 0.45;
    }

    /* Ohne das scrollt die Seite hinter dem Kalender mit. */
    body.reisezeitOffen {
        overflow: hidden;
    }
}