/*
 * MWFewoManager
 *
 * @author Küstenweb GmbH <info@mwfewomanager.de>
 * @copyright mwfewomanager.de
 */

:root {
    --calendar-surface: var(--color-surface, #ffffff);
    --calendar-text: var(--color-text, #1f2937);
    --calendar-muted: var(--color-muted, #6b7280);
    --calendar-border: var(--border-color, #e3e8ee);
    --calendar-radius: var(--border-radius, 8px);
    --calendar-modal-radius-desktop: 16px;
    --calendar-modal-shadow: var(--shadow-card, 0 8px 24px rgba(0, 0, 0, 0.12));
    --calendar-modal-backdrop: rgba(0, 0, 0, 0.4);
    --calendar-z-index: 1030;
    --calendar-header-padding: 1rem;
    --calendar-footer-padding: 1rem;
    --calendar-content-padding: 1rem;
    --calendar-nav-padding: 0.9rem 0.75rem;
    --calendar-nav-gap: 0.25rem;
    --calendar-nav-button-padding: 0.25rem 0.4rem;
    --calendar-title-font-size: 1rem;
    --calendar-wrapper-gap: 1rem;
    --calendar-grid-padding: 0.5rem;
    --calendar-weekday-font-size: 0.85rem;
    --calendar-weekday-padding: 0.35rem 0;
    --calendar-day-font-size: 0.95rem;
    --calendar-day-font-weight: 500;
    --calendar-day-radius: 0.4rem;
    --calendar-day-disabled-opacity: 0.45;
    --calendar-day-transition: all 0.15s ease;
    --calendar-price-font-size: 0.65rem;
    --calendar-price-bottom: 2px;
    --calendar-check-radius: 8px;
    --calendar-check-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    --calendar-check-label-font-size: 0.65rem;
    --calendar-check-label-padding: 0.25rem 0.45rem;
    --calendar-check-label-radius: 6px;
    --calendar-check-label-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    --calendar-check-marker-size: 8px;
    --calendar-check-marker-offset: -4px;
    --calendar-selection-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05);
    --calendar-legend-gap: 0.6rem 1rem;
    --calendar-legend-margin-bottom: 1rem;
    --calendar-legend-font-size: 0.85rem;
    --calendar-legend-key-gap: 0.35rem;
    --calendar-swatch-size: 1rem;
    --calendar-swatch-radius: 4px;
    --calendar-swatch-border: 1px solid rgba(0, 0, 0, 0.15);
    --calendar-edit-icon-size: 12px;
    --calendar-edit-icon-offset-top: 4px;
    --calendar-edit-icon-offset-right: 4px;
    --calendar-edit-icon-opacity: 0.65;
    --calendar-edit-icon-opacity-hover: 1;
    --calendar-edit-check-icon-size: 11px;
    --calendar-edit-check-icon-offset-top: 6px;
    --calendar-edit-check-icon-offset-right: 6px;
    --calendar-edit-check-icon-opacity: 0.8;
    --calendar-stay-duration-margin-top: 1rem;
    --calendar-stay-duration-gap: 0.25rem;
    --calendar-stay-duration-label-font-size: 0.9rem;
    --calendar-stay-duration-label-weight: 600;
    --calendar-tooltip-bg: var(--tooltip-bg, var(--calendar-text));
    --calendar-tooltip-fg: var(--tooltip-fg, var(--white, #ffffff));
    --calendar-tooltip-padding: 0.4rem 0.55rem;
    --calendar-tooltip-radius: 6px;
    --calendar-tooltip-font-size: 0.8rem;
    --calendar-tooltip-transform: translate(-50%, -110%);
    --calendar-open-duration-mobile: 0.22s;
    --calendar-close-duration-mobile: 0.18s;
    --calendar-open-duration-desktop: 0.15s;
    --calendar-close-duration-desktop: 0.12s;
}

/* =========================================================
   CALENDAR MODAL – MOBILE FIRST
   ========================================================= */

.calendar-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: stretch; /* wichtig für 100% Breite */
    z-index: var(--calendar-z-index);

    pointer-events: none;
    transform: translateY(100%);
}

/* Backdrop: immer hier – nicht auf .calendar-modal */
.calendar-modal__backdrop,
.calendar-modal .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background-color .2s ease-out;
}

/* Modal-Wrapper muss volle Breite bekommen */
.calendar-modal__modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    transform: none;
}

/* Dialog = Bottom-Sheet */
.calendar-modal__dialog {
    width: 100%;
    max-height: 100dvh;
    margin: 0;

    background: var(--calendar-surface);
    border-radius: 0;
    box-shadow: var(--calendar-modal-shadow);

    display: flex;            /* wichtig: Header/Footer fix, Content scrollt */
    flex-direction: column;
    overflow: hidden;         /* nur Content scrollt */
}

/* Header/Footer fix (über flex, nicht sticky nötig) */
.calendar-modal__header {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: var(--calendar-header-padding);
    background: var(--calendar-surface);
    z-index: 1;
    border-bottom: 1px solid var(--calendar-border);
}

.calendar-modal__header h2 {
    margin: 0;
}

.calendar-modal__footer {
    flex: 0 0 auto;
    padding: var(--calendar-footer-padding);
    background: var(--calendar-surface);
    z-index: 1;
    border-top: 1px solid var(--calendar-border);
}

/* Content scrollt */
.calendar-modal__content {
    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--calendar-content-padding);
}

/* OPEN/CLOSE states */
.calendar-modal.is-open {
    pointer-events: auto;
    animation: slideInUp var(--calendar-open-duration-mobile) ease-out both;
}

.calendar-modal.is-open .calendar-modal__backdrop,
.calendar-modal.is-open .modal-backdrop {
    background: var(--calendar-modal-backdrop);
}

.calendar-modal.is-closing {
    pointer-events: none;
    animation: slideOutDown var(--calendar-close-duration-mobile) ease-in both;
}

.calendar-modal.is-closing .calendar-modal__backdrop,
.calendar-modal.is-closing .modal-backdrop {
    background: rgba(0,0,0,0);
}

/* Slide nur mobil */
@keyframes slideInUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes slideOutDown {
    from { transform: translateY(0); }
    to   { transform: translateY(100%); }
}

/* Desktop: fade für das Modal, Backdrop fadet weiter über background-color */
@media (min-width: 820px) {
    .calendar-modal {
        transform: none;
        align-items: center;
        justify-content: center;
        padding: 0;
        animation: none;
        opacity: 0;
    }

    .calendar-modal.is-open {
        opacity: 1;
        animation: fadeInModal var(--calendar-open-duration-desktop) ease-out both;
    }

    .calendar-modal.is-closing {
        opacity: 0;
        animation: fadeOutModal var(--calendar-close-duration-desktop) ease-in both;
    }

    .calendar-modal__modal {
        width: auto;
        max-width: none;
        align-self: auto;
    }

    .calendar-modal__dialog {
        /*width: min(920px, 92vw);*/
        /*max-height: min(90vh, 760px);*/
        border-radius: var(--calendar-modal-radius-desktop);
    }

    .calendar-modal.is-open .calendar-modal__backdrop,
    .calendar-modal.is-open .modal-backdrop {
        background: var(--calendar-modal-backdrop);
    }

    @keyframes fadeInModal { from { opacity: 0; } to { opacity: 1; } }
    @keyframes fadeOutModal { from { opacity: 1; } to { opacity: 0; } }
}

@media (prefers-reduced-motion: reduce) {
    .calendar-modal { animation: none !important; }
}

/* =========================================================
   NAVIGATION + TITEL
   ========================================================= */
.calendar__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--calendar-nav-padding);
    border-bottom: 1px solid var(--calendar-border);
}

.calendar__title {
    flex: 1;
    text-align: center;
    font-weight: 600;
    color: var(--calendar-text);
    font-size: var(--calendar-title-font-size);
}

.calendar__navigation {
    display: flex;
    gap: var(--calendar-nav-gap);
    margin-left: auto;
}
.calendar__navigation button {
    border: none;
    background: transparent;
    color: var(--calendar-muted);
    cursor: pointer;
    padding: var(--calendar-nav-button-padding);
}
.calendar__navigation button:hover {
    color: var(--calendar-text);
}

/* =========================================================
   KALENDER-GRID
   ========================================================= */
.calendar-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--calendar-wrapper-gap);
}

@media (min-width: 820px) {
    .calendar-wrapper { grid-template-columns: repeat(2, 1fr); }
}
.calendar {
    border: 1px solid var(--calendar-border);
    border-radius: var(--calendar-radius);
    background: var(--calendar-surface);
}
.calendar__grid {
    padding: var(--calendar-grid-padding);
}
.calendar__grid table {
    width: 100%;
    border-collapse: separate;
}
.calendar__grid th {
    color: var(--calendar-muted);
    font-size: var(--calendar-weekday-font-size);
    font-weight: 500;
    text-align: center;
    padding: var(--calendar-weekday-padding);
}

/* =========================================================
   TAG-ZELLEN
   ========================================================= */
.calendar__button-day {
    position: relative;
    width: var(--calendar-cell-width);
    height: var(--calendar-cell-height);
    /*margin: 0.15rem;*/
    border-radius: var(--calendar-day-radius);
    border: 1px solid var(--calendar-border);
    background: var(--calendar-surface);
    color: var(--calendar-text);
    font-size: var(--calendar-day-font-size);
    font-weight: var(--calendar-day-font-weight);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--calendar-day-transition);
}
.calendar__button-day:hover:not([aria-disabled="true"]) {
    background: var(--calendar-day-hover-bg);
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.calendar__button-day:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.calendar__button-day[aria-disabled="true"] {
    opacity: var(--calendar-day-disabled-opacity);
    cursor: not-allowed;
    text-decoration: line-through;
}

/* =========================================================
   TAG-STATUS
   ========================================================= */
.calendar__button-day--free {
    background: var(--calendar-bg-free);
    color: var(--calendar-fg-free);
}
.calendar__button-day--booked {
    background: var(--calendar-bg-booked);
    color: var(--calendar-fg-booked);
    cursor: not-allowed;
}
.calendar__button-day--blocked {
    background: var(--calendar-bg-blocked);
    color: var(--calendar-fg-blocked);
    cursor: not-allowed;
}
.calendar__button-day--owner {
    background: var(--calendar-bg-owner);
    color: var(--calendar-fg-owner);
    cursor: not-allowed;
}
.calendar__button-day--selected {
    background: var(--calendar-bg-selected);
    color: var(--calendar-fg-selected);
}

/* =========================================================
   💰 Preis-Label – Standard
   ========================================================= */
.calendar__button-day--price {
    position: absolute;
    bottom: var(--calendar-price-bottom);
    left: 0;
    right: 0;
    font-size: var(--calendar-price-font-size);
    color: var(--calendar-muted);
    text-align: center;
    pointer-events: none;
    z-index: 1;
}

/* =========================================================
   💰 Preis auf Check-in / Check-out sichtbar machen
   ========================================================= */
.calendar__button-day--check-in .calendar__button-day--price,
.calendar__button-day--check-out .calendar__button-day--price {
    color: var(--calendar-price-on-check-fg); /* hoher Kontrast */
    text-shadow: 0 0 3px rgba(0,0,0,0.4);
    font-weight: 500;
    z-index: 2; /* über Hintergrund, unter Label */
}

/* =========================================================
   💰 Preis bei Bearbeitungsmodus (editRange)
   ========================================================= */
.calendar__button-day--edit .calendar__button-day--price {
    color: color-mix(in srgb, var(--color-warning) 85%, #3b2f00);
    text-shadow: none;
}

/* =========================================================
   💰 Preis bei editierten Check-in/Check-out-Tagen
   ========================================================= */
.calendar__button-day--edit.calendar__button-day--check-in .calendar__button-day--price,
.calendar__button-day--edit.calendar__button-day--check-out .calendar__button-day--price {
    color: var(--calendar-price-on-check-fg);
    text-shadow: 0 0 3px rgba(0,0,0,0.35);
}

/* =========================================================
   Auswahlbereich: Check-in / Check-out / Zwischenbereich
   ========================================================= */

/* Gesamte Range */
.calendar__button-day--selected {
    background: var(--calendar-bg-selected);
    color: var(--calendar-fg-selected);
    position: relative;
    font-weight: 500;
}

/* Check-in / Check-out stärker betont */
.calendar__button-day--check-in,
.calendar__button-day--check-out {
    position: relative;
    background: var(--calendar-bg-check);
    color: var(--calendar-fg-check);
    font-weight: 600;
    border-radius: var(--calendar-check-radius);
    z-index: 2;
    box-shadow: var(--calendar-check-shadow);
}

/* Sanfter Hovereffekt */
.calendar__button-day--check-in:hover,
.calendar__button-day--check-out:hover {
    background: color-mix(in srgb, var(--calendar-bg-check) 85%, var(--calendar-surface));
    color: var(--calendar-fg-check);
}

/* Abgesetzte Labels (z. B. "Anreise" / "Abreise") */
.calendar__button-day--check-in::after,
.calendar__button-day--check-out::after {
    content: attr(data-check-label);
    position: absolute;
    top: -1.2rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--calendar-bg-check);
    color: var(--calendar-check-label-fg);
    font-size: var(--calendar-check-label-font-size);
    line-height: 1;
    font-weight: 500;
    padding: var(--calendar-check-label-padding);
    border-radius: var(--calendar-check-label-radius);
    white-space: nowrap;
    box-shadow: var(--calendar-check-label-shadow);
}

/* Kleine runde Marker zur visuellen Trennung */
.calendar__button-day--check-in::before,
.calendar__button-day--check-out::before {
    content: "";
    position: absolute;
    top: 50%;
    width: var(--calendar-check-marker-size);
    height: var(--calendar-check-marker-size);
    border-radius: 50%;
    transform: translateY(-50%);
    background: var(--calendar-surface);
}
.calendar__button-day--check-in::before { left: var(--calendar-check-marker-offset); }
.calendar__button-day--check-out::before { right: var(--calendar-check-marker-offset); }

/* =========================================================
   Zwischenliegende Tage – sanfter Farbverlauf
   ========================================================= */

.calendar__button-day--selected:not(.calendar__button-day--check-in):not(.calendar__button-day--check-out) {
    background: color-mix(in srgb, var(--color-primary) 8%, var(--calendar-surface));
    color: var(--calendar-bg-check);
}

/* Optional: Weiche Übergänge an den Kanten */
.calendar__button-day--check-in + .calendar__button-day--selected,
.calendar__button-day--selected + .calendar__button-day--check-out {
    box-shadow: var(--calendar-selection-shadow);
}

/* =========================================================
   📘 Legende (aktualisiert)
   ========================================================= */
.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--calendar-legend-gap);
    margin-bottom: var(--calendar-legend-margin-bottom);
    font-size: var(--calendar-legend-font-size);
    align-items: center;
}

.calendar-legend .key {
    display: flex;
    align-items: center;
    gap: var(--calendar-legend-key-gap);
    color: var(--calendar-text);
}

.calendar-legend .swatch {
    display: inline-block;
    width: var(--calendar-swatch-size);
    height: var(--calendar-swatch-size);
    border-radius: var(--calendar-swatch-radius);
    border: var(--calendar-swatch-border);
}

/* === Farben nach aktuellem Design === */
.swatch.free {
    background: var(--calendar-bg-free);
    border-color: var(--calendar-border-free);
}

.swatch.booked {
    background: var(--calendar-bg-booked);
    border-color: var(--calendar-border-booked);
}

.swatch.blocked {
    background: var(--calendar-bg-blocked);
    border-color: var(--calendar-border-blocked);
}

.swatch.owner {
    background: var(--calendar-bg-owner);
    border-color: var(--calendar-border-owner);
}

.swatch.edit {
    background: var(--calendar-bg-edit);
    border-color: var(--calendar-border-edit);
}

.swatch.selected {
    background: var(--calendar-bg-selected);
    border-color: var(--calendar-border-selected);
}

.swatch.check {
    background: var(--calendar-bg-check);
    border-color: var(--calendar-border-check);
}

/* =========================================================
   Bearbeitungsmodus (edit) – sichtbarer Bereich
   ========================================================= */

/* Basisfarbe für Edit-Tage */
.calendar__button-day--edit {
    background: var(--calendar-bg-edit); /* sanftes Gelb */
    border: 1px solid var(--calendar-border-edit);
    color: color-mix(in srgb, var(--color-warning) 80%, #3b2f00);
    position: relative;
    font-weight: 500;
}

/* Zwischenliegende Tage (Edit-Range) ebenfalls gelblich */
.calendar__button-day--edit.calendar__button-day--selected:not(.calendar__button-day--check-in):not(.calendar__button-day--check-out) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-warning) 18%, var(--color-surface)) 0%, color-mix(in srgb, var(--color-warning) 30%, var(--color-surface)) 100%);
    color: color-mix(in srgb, var(--color-warning) 80%, #3b2f00);
}

/* Check-in / Check-out innerhalb eines Edit-Zeitraums */
.calendar__button-day--edit.calendar__button-day--check-in,
.calendar__button-day--edit.calendar__button-day--check-out {
    background: color-mix(in srgb, var(--color-warning) 34%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-warning) 55%, var(--border-color));
    color: var(--calendar-check-label-fg);
    font-weight: 600;
    position: relative;
}

.calendar__button-day--edit.calendar__button-day--check-in:hover,
.calendar__button-day--edit.calendar__button-day--check-out:hover {
    color: var(--calendar-check-label-fg);
}

/* Label in goldgelb */
.calendar__button-day--edit.calendar__button-day--check-in::after,
.calendar__button-day--edit.calendar__button-day--check-out::after {
    background: color-mix(in srgb, var(--color-warning) 70%, #000);
    color: var(--calendar-check-label-fg);
}

/* =========================================================
   ✏️ Stift-Icon – Standardposition
   ========================================================= */
.calendar__button-day--edit::before {
    content: "";
    position: absolute;
    top: var(--calendar-edit-icon-offset-top);
    right: var(--calendar-edit-icon-offset-right);
    width: var(--calendar-edit-icon-size);
    height: var(--calendar-edit-icon-size);
    background: no-repeat center / contain;
    opacity: var(--calendar-edit-icon-opacity);
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23a67c00' viewBox='0 0 24 24'><path d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1.003 1.003 0 000-1.42l-2.34-2.34a1.003 1.003 0 00-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82z'/></svg>");
}

.calendar__button-day--edit:hover::before {
    opacity: var(--calendar-edit-icon-opacity-hover);
}

/* =========================================================
   ✏️ Stift-Icon bei Check-in/Check-out → verschieben
   ========================================================= */
.calendar__button-day--edit.calendar__button-day--check-in::before,
.calendar__button-day--edit.calendar__button-day--check-out::before {
    top: var(--calendar-edit-check-icon-offset-top);
    right: var(--calendar-edit-check-icon-offset-right);
    left: auto;
    width: var(--calendar-edit-check-icon-size);
    height: var(--calendar-edit-check-icon-size);
    opacity: var(--calendar-edit-check-icon-opacity);
    z-index: 3; /* über Label, aber unter Tooltip */
}

/* =========================================================
   AUFENTHALTSDAUER (Dropdown)
   ========================================================= */
.calendar-stay-duration {
    margin-top: var(--calendar-stay-duration-margin-top);
    display: flex;
    flex-direction: column;
    gap: var(--calendar-stay-duration-gap);
}
.calendar-stay-duration label {
    font-size: var(--calendar-stay-duration-label-font-size);
    font-weight: var(--calendar-stay-duration-label-weight);
    color: var(--calendar-text);
}
/*select#calendar-stay-duration-nights {*/
/*    appearance: none;*/
/*    -webkit-appearance: none;*/
/*    -moz-appearance: none;*/

/*    width: 100%;*/
/*    max-width: 250px;*/
/*    padding: 0.6rem 2.2rem 0.6rem 0.75rem; !* Platz für Pfeil rechts *!*/
/*    border: 1px solid var(--border-color);*/
/*    border-radius: 8px;*/
/*    background-color: var(--tooltip-fg, var(--white));*/
/*    color: var(--color-text);*/
/*    font-size: 1rem;*/
/*    line-height: 1.3;*/
/*    cursor: pointer;*/
/*    transition: border-color .15s ease, box-shadow .15s ease;*/

/*    !* Eigenes Caret (SVG, nutzt currentColor => passt sich Farbe an) *!*/
/*    background-image: url("data:image/svg+xml;utf8,\*/
/*  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\*/
/*  <polyline points='6 9 12 15 18 9'/></svg>");*/
/*    background-repeat: no-repeat;*/
/*    background-position: right 0.9rem center;*/
/*    background-size: 14px 14px;*/
/*}*/
select#calendar-stay-duration-nights:hover {
    border-color: var(--color-primary);
}
/* Standardzustand: immer ausblenden, wenn aria-hidden="true" */
.calendar-stay-duration[aria-hidden="true"] {
    display: none !important;
    visibility: hidden;
    opacity: 0;
}

/* Nur anzeigen, wenn aria-hidden explizit auf false gesetzt ist */
.calendar-stay-duration[aria-hidden="false"] {
    display: flex;
    flex-direction: column;
    gap: var(--calendar-stay-duration-gap);
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* Optional: optische Feinheiten */
.calendar-stay-duration label {
    font-size: var(--calendar-stay-duration-label-font-size);
    font-weight: var(--calendar-stay-duration-label-weight);
    color: var(--calendar-text);
}

/* =========================================================
   MODAL
   ========================================================= */

.calendar-modal__modal {
    position: relative;
}

/* =========================================================
   TOOLTIP
   ========================================================= */
.calendar-modal__tooltip{
    position: absolute;
    background: var(--calendar-tooltip-bg);
    color: var(--calendar-tooltip-fg);
    padding: var(--calendar-tooltip-padding);
    border-radius: var(--calendar-tooltip-radius);
    font-size: var(--calendar-tooltip-font-size);
    transform: var(--calendar-tooltip-transform);
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}
.calendar-modal__tooltip[data-hidden="true"] { display: none; }