/**
 * Availability Calendar Element Styles
 *
 * Single source of truth for calendar-cell styling (do not duplicate these
 * rules in widget.css / layouts). Scoped to .availability-calendar-element;
 * the per-instance accent colour is provided by the element template as an
 * inline custom property: style="--ac-primary-color: #hex".
 *
 * Rule order matters: the crisp variant overrides share specificity with the
 * base rules and win by declaration order.
 */

.availability-calendar-element {
    position: relative;
}

.availability-calendar-element .fc {
    font-size: 13px;
}

.availability-calendar-element .fc-daygrid-body {
    table-layout: fixed !important;
}

.availability-calendar-element .fc-daygrid-day {
    box-sizing: border-box !important;
}

.availability-calendar-element .fc .fc-button-primary {
    background-color: var(--ac-primary-color);
    border-color: var(--ac-primary-color);
}

.availability-calendar-element .fc .fc-button-primary:hover {
    background-color: var(--ac-primary-color);
    opacity: 0.9;
}

.availability-calendar-element .fc .fc-button-primary:disabled {
    background-color: var(--ac-primary-color);
    opacity: 0.5;
}

.availability-calendar-element .fc-day-available {
    background-color: rgba(34, 197, 94, 0.15) !important;
    cursor: pointer;
}

.availability-calendar-element .fc-day-unavailable {
    background-color: rgba(239, 68, 68, 0.15) !important;
    cursor: not-allowed;
}

.availability-calendar-element .fc-day-selected {
    background-color: rgba(37, 99, 235, 0.35) !important;
    outline: 2px solid var(--ac-primary-color);
    outline-offset: -2px;
}

.availability-calendar-element .fc-day-range {
    background-color: rgba(37, 99, 235, 0.2) !important;
    opacity: 1 !important;
}

/* Past days (set by JS in dayCellDidMount) */
.availability-calendar-element .fc-day-past {
    opacity: 0.4;
    pointer-events: none;
}

/* Diagonal split for checkout days (booking ends morning, available for new check-in) */
.availability-calendar-element .fc-day-checkout {
    background: linear-gradient(
        to bottom right,
        rgba(239, 68, 68, 0.25) 0%,
        rgba(239, 68, 68, 0.25) 50%,
        rgba(34, 197, 94, 0.25) 50%,
        rgba(34, 197, 94, 0.25) 100%
    ) !important;
    cursor: pointer;
}

/* Diagonal split for check-in days (booking starts, was available before) */
.availability-calendar-element .fc-day-checkin {
    background: linear-gradient(
        to bottom right,
        rgba(34, 197, 94, 0.25) 0%,
        rgba(34, 197, 94, 0.25) 50%,
        rgba(239, 68, 68, 0.25) 50%,
        rgba(239, 68, 68, 0.25) 100%
    ) !important;
    cursor: not-allowed;
}

/* ===== Crisp changeover style (public widget only, via .ac-style-crisp) ===== */
/* Hard-edge diagonals with a divider line; tints match the solid day cells. */
.availability-calendar-element.ac-style-crisp .fc-day-checkout {
    background: linear-gradient(
        to bottom right,
        rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.15) 49.3%,
        rgba(75, 85, 99, 0.55) 49.3%, rgba(75, 85, 99, 0.55) 50.7%,
        rgba(34, 197, 94, 0.15) 50.7%, rgba(34, 197, 94, 0.15) 100%
    ) !important;
    cursor: pointer;
}
.availability-calendar-element.ac-style-crisp .fc-day-checkin {
    background: linear-gradient(
        to bottom right,
        rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.15) 49.3%,
        rgba(75, 85, 99, 0.55) 49.3%, rgba(75, 85, 99, 0.55) 50.7%,
        rgba(239, 68, 68, 0.15) 50.7%, rgba(239, 68, 68, 0.15) 100%
    ) !important;
    cursor: not-allowed;
}
/* While choosing a checkout, a check-in day is a valid endpoint (leave AM). */
.availability-calendar-element.ac-style-crisp.selecting-checkout .fc-day-checkin {
    cursor: pointer;
}
/* Back-to-back: both adjacent nights booked (unavailable) but the divider line
   still marks where one booking ends and the next begins. */
.availability-calendar-element.ac-style-crisp .fc-day-back-to-back {
    background: linear-gradient(
        to bottom right,
        rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.15) 49.3%,
        rgba(75, 85, 99, 0.55) 49.3%, rgba(75, 85, 99, 0.55) 50.7%,
        rgba(239, 68, 68, 0.15) 50.7%, rgba(239, 68, 68, 0.15) 100%
    ) !important;
    cursor: not-allowed;
}
/* Adjacent-month days stay selectable so a stay can span a month boundary. */
.availability-calendar-element.ac-style-crisp .fc-day-other {
    opacity: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}
/* Uniform green: don't dim non-changeover days. Otherwise they'd be a lighter
   green than the changeover day and the diagonal green halves (two-tone look).
   The check-in-day restriction is still enforced on click and shown in the hint. */
.availability-calendar-element.ac-style-crisp .fc-day-not-changeover.fc-day-available {
    background-color: rgba(34, 197, 94, 0.15) !important;
}
/* ...but the selected range must still win over that uniform-green rule
   (same specificity, declared after it) so the whole stay highlights blue. */
.availability-calendar-element.ac-style-crisp .fc-day-range.fc-day-not-changeover {
    background-color: rgba(37, 99, 235, 0.2) !important;
}
.availability-calendar-element.ac-style-crisp .fc-day-selected.fc-day-not-changeover {
    background-color: rgba(37, 99, 235, 0.35) !important;
    outline: 2px solid var(--ac-primary-color);
    outline-offset: -2px;
}
/* Crisp legend swatch to match. */
.availability-calendar-element.ac-style-crisp .ac-legend-transition {
    background: linear-gradient(
        to bottom right,
        rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.15) 49.3%,
        rgba(75, 85, 99, 0.55) 49.3%, rgba(75, 85, 99, 0.55) 50.7%,
        rgba(34, 197, 94, 0.15) 50.7%, rgba(34, 197, 94, 0.15) 100%
    );
}

.availability-calendar-element .fc-daygrid-day-number {
    padding: 4px 8px !important;
}

.availability-calendar-element .fc-day-price {
    font-size: 10px;
    color: #059669;
    font-weight: 600;
    text-align: center;
    margin-top: -4px;
}

/* The extra .fc level keeps this more specific than FullCalendar's own
   runtime-injected ".fc .fc-daygrid-day-frame" rule (which loads later). */
.availability-calendar-element .fc .fc-daygrid-day-frame {
    position: relative;
    min-height: 40px;
}

.availability-calendar-element .fc-day-book-label {
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    font-size: 9px;
    color: #059669;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.availability-calendar-element .ac-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.availability-calendar-element .ac-loading-inner {
    display: flex;
    align-items: center;
    gap: 8px;
}

.availability-calendar-element .ac-loading-text {
    color: #6b7280;
}

.availability-calendar-element .ac-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--ac-primary-color);
    border-radius: 50%;
    animation: ac-spin 0.8s linear infinite;
}

@keyframes ac-spin {
    to { transform: rotate(360deg); }
}

.availability-calendar-element .ac-summary {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

.availability-calendar-element .ac-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
}

.availability-calendar-element .ac-summary-row.ac-total {
    border-top: 1px solid #d1d5db;
    margin-top: 8px;
    padding-top: 12px;
    font-weight: 600;
    font-size: 16px;
}

.availability-calendar-element .ac-error {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 12px;
    border-radius: 6px;
    margin-top: 12px;
    font-size: 14px;
}

.availability-calendar-element .ac-legend {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    font-size: 12px;
    color: #6b7280;
}

.availability-calendar-element .ac-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.availability-calendar-element .ac-legend-box {
    width: 16px;
    height: 16px;
    border-radius: 3px;
}

.availability-calendar-element .ac-legend-available {
    background-color: rgba(34, 197, 94, 0.3);
}

.availability-calendar-element .ac-legend-unavailable {
    background-color: rgba(239, 68, 68, 0.3);
}

.availability-calendar-element .ac-legend-selected {
    background-color: rgba(37, 99, 235, 0.3);
    outline: 2px solid var(--ac-primary-color);
    outline-offset: -2px;
}

.availability-calendar-element .ac-legend-transition {
    background: linear-gradient(
        to bottom right,
        rgba(239, 68, 68, 0.3) 0%,
        rgba(239, 68, 68, 0.3) 50%,
        rgba(34, 197, 94, 0.3) 50%,
        rgba(34, 197, 94, 0.3) 100%
    );
}

.availability-calendar-element .ac-hint {
    font-size: 12px;
    color: #6b7280;
    margin-top: 8px;
}

/* Multi-night discount Teaser (plan-02) — advertised before dates are chosen */
.availability-calendar-element .ac-teaser {
    font-size: 12px;
    color: #166534;
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    padding: 8px 12px;
    margin-top: 8px;
}

/* Multi-night discount line in the pricing summary */
.availability-calendar-element .ac-summary-row.ac-discount {
    color: #166534;
}

/* Days outside current month - not selectable */
.availability-calendar-element .fc-day-other {
    opacity: 0.75 !important;
    cursor: default !important;
    pointer-events: none;
}

.availability-calendar-element .fc-day-other .fc-daygrid-day-frame {
    background-color: transparent !important;
}

/* Non-changeover day styling - visually indicate these days cannot be check-in days */
.availability-calendar-element .fc-day-not-changeover {
    cursor: not-allowed !important;
}

.availability-calendar-element .fc-day-not-changeover.fc-day-available {
    background-color: rgba(34, 197, 94, 0.08) !important; /* lighter green - available but not for check-in */
}

/* When selecting checkout, restore normal available styling */
.availability-calendar-element.selecting-checkout .fc-day-not-changeover.fc-day-available {
    opacity: 1;
    cursor: pointer !important;
    background-color: rgba(34, 197, 94, 0.15) !important;
}

/* Range and selected days always override not-changeover styling */
.availability-calendar-element .fc-day-range.fc-day-not-changeover,
.availability-calendar-element .fc-day-selected.fc-day-not-changeover {
    opacity: 1 !important;
    cursor: default !important;
}

.availability-calendar-element .fc-day-range.fc-day-not-changeover {
    background-color: rgba(37, 99, 235, 0.2) !important;
}

.availability-calendar-element .fc-day-selected.fc-day-not-changeover {
    background-color: rgba(37, 99, 235, 0.25) !important;
}

/* Visibility utility (duplicated in widget.css deliberately: this file is the
   only stylesheet loaded when the element is used on admin pages). */
.is-hidden {
    display: none !important;
}

/* Ensure minimum touch target size (44x44px) */
@media (pointer: coarse) {
    .availability-calendar-element .fc-daygrid-day {
        min-height: 44px;
    }
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .availability-calendar-element .fc .fc-toolbar-title {
        font-size: 16px !important;
    }

    .availability-calendar-element .fc .fc-button {
        padding: 6px 10px !important;
    }

    .availability-calendar-element .fc-day-price {
        font-size: 9px;
    }

    .availability-calendar-element .ac-summary {
        padding: 12px;
    }

    .availability-calendar-element .ac-summary-row {
        font-size: 13px;
    }

    .availability-calendar-element .ac-legend {
        flex-wrap: wrap;
        gap: 8px;
    }
}