/**
 * Ensemble Frontend Calendar — CSS Canon (Phase 4)
 *
 * Styles the FullCalendar-based [ensemble_calendar] shortcode.
 * Replaces the legacy PHP-generated inline CSS (generate_calendar_css), whose
 * data source (ES_Design_Settings / old Designer) no longer exists.
 *
 * Consumes --ensemble-* Brand Tuner variables with fallbacks ONLY.
 * Skinnable via body.es-layout-{set} .ensemble-fullcalendar-wrapper …
 *
 * @package Ensemble
 */

.ensemble-fullcalendar-wrapper {
    margin: 20px 0;
    background: var(--ensemble-card-bg, #ffffff);
    padding: 20px;
    border-radius: var(--ensemble-card-radius, 12px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: var(--ensemble-card-border-width, 1px) solid var(--ensemble-card-border, #e2e8f0);
}

.ensemble-fullcalendar {
    max-width: 100%;
}

/* FullCalendar base */
.ensemble-fullcalendar-wrapper .fc {
    font-family: var(--ensemble-body-font, inherit);
    color: var(--ensemble-text, #1a202c);
}

.ensemble-fullcalendar-wrapper .fc .fc-toolbar-title {
    font-family: var(--ensemble-heading-font, inherit);
    color: var(--ensemble-text, #1a202c);
}

/* Buttons */
.ensemble-fullcalendar-wrapper .fc .fc-button {
    background: var(--ensemble-primary, #667eea);
    border-color: var(--ensemble-primary, #667eea);
    color: #fff;
    text-transform: none;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--ensemble-button-radius, 8px);
    transition: all 0.2s ease;
}

.ensemble-fullcalendar-wrapper .fc .fc-button:hover {
    background: var(--ensemble-secondary, #764ba2);
    border-color: var(--ensemble-secondary, #764ba2);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.ensemble-fullcalendar-wrapper .fc .fc-button:active {
    transform: translateY(0);
}

.ensemble-fullcalendar-wrapper .fc .fc-button-primary:disabled {
    background: #ccc;
    border-color: #ccc;
    opacity: 0.5;
}

.ensemble-fullcalendar-wrapper .fc .fc-button-active {
    background: var(--ensemble-secondary, #764ba2);
    border-color: var(--ensemble-secondary, #764ba2);
}

/* Grid lines */
.ensemble-fullcalendar-wrapper .fc-theme-standard .fc-scrollgrid,
.ensemble-fullcalendar-wrapper .fc-theme-standard td,
.ensemble-fullcalendar-wrapper .fc-theme-standard th {
    border-color: var(--ensemble-card-border, #e2e8f0);
}

/* Header cells — subtle primary tint (color-mix with solid fallback) */
.ensemble-fullcalendar-wrapper .fc-col-header-cell {
    background: rgba(102, 126, 234, 0.05);
    background: color-mix(in srgb, var(--ensemble-primary, #667eea) 5%, transparent);
    font-weight: 600;
    padding: 12px 8px;
    color: var(--ensemble-text, #1a202c);
}

/* Day numbers */
.ensemble-fullcalendar-wrapper .fc-daygrid-day-number {
    padding: 8px;
    font-weight: 500;
    color: var(--ensemble-text, #1a202c);
}

/* Today highlight */
.ensemble-fullcalendar-wrapper .fc-day-today {
    background: rgba(102, 126, 234, 0.1) !important;
    background: color-mix(in srgb, var(--ensemble-primary, #667eea) 10%, transparent) !important;
}

.ensemble-fullcalendar-wrapper .fc-day-today .fc-daygrid-day-number {
    background: var(--ensemble-primary, #667eea);
    color: #fff;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Events */
.ensemble-fullcalendar-wrapper .fc-event {
    background: var(--ensemble-primary, #667eea);
    border-color: var(--ensemble-primary, #667eea);
    border-radius: var(--ensemble-badge-radius, 4px);
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ensemble-fullcalendar-wrapper .fc-event:hover {
    background: var(--ensemble-secondary, #764ba2);
    border-color: var(--ensemble-secondary, #764ba2);
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ensemble-fullcalendar-wrapper .fc-event-recurring {
    border-left: 4px solid var(--ensemble-warning, #f39c12) !important;
}

.ensemble-fullcalendar-wrapper .fc-event-title {
    font-weight: 600;
    font-size: 13px;
}

/* Fix-Paket F (Befund 7): Block-Darstellung – Titel und Zeit auf dem
   Hauptfarben-Balken kontrastsicher, kein Punkt, Titel in einer Zeile. */
.ensemble-fullcalendar-wrapper .fc-event .fc-event-main,
.ensemble-fullcalendar-wrapper .fc-event .fc-event-title,
.ensemble-fullcalendar-wrapper .fc-event .fc-event-time {
    color: var(--ensemble-primary-contrast, #ffffff);
}
.ensemble-fullcalendar-wrapper .fc-daygrid-block-event .fc-event-time {
    flex: 0 0 auto;
    white-space: nowrap;
    font-weight: 400;
    font-size: 12px;
    margin-right: 4px;
}
.ensemble-fullcalendar-wrapper .fc-daygrid-block-event .fc-event-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ensemble-fullcalendar-wrapper .fc-daygrid-event-dot {
    display: none;
}

.ensemble-fullcalendar-wrapper .fc-daygrid-event {
    cursor: pointer;
}

/* List view */
.ensemble-fullcalendar-wrapper .fc-list-event:hover td {
    background: rgba(102, 126, 234, 0.05);
    background: color-mix(in srgb, var(--ensemble-primary, #667eea) 5%, transparent);
}

.ensemble-fullcalendar-wrapper .fc-list-event-dot {
    border-color: var(--ensemble-primary, #667eea);
}

/* Week/day time grid */
.ensemble-fullcalendar-wrapper .fc-timegrid-slot {
    height: 3em;
}

.ensemble-fullcalendar-wrapper .fc-timegrid-event {
    border-radius: var(--ensemble-badge-radius, 4px);
}

/* Multi-day events */
.ensemble-fullcalendar-wrapper .fc-event-multi-day {
    background: linear-gradient(90deg, var(--ensemble-primary, #667eea) 0%, var(--ensemble-secondary, #764ba2) 100%);
    border: none;
    border-left: 4px solid var(--ensemble-primary, #667eea);
}

.ensemble-fullcalendar-wrapper .fc-event-multi-day .fc-event-title {
    font-weight: 700;
}

/* Permanent events (exhibitions etc.) */
.ensemble-fullcalendar-wrapper .fc-event-permanent {
    background: linear-gradient(90deg, var(--ensemble-success, #10b981) 0%, #059669 100%);
    border: none;
    border-left: 4px solid var(--ensemble-success, #10b981);
}

/* Responsive */
@media (max-width: 768px) {
    .ensemble-fullcalendar-wrapper {
        padding: 12px;
    }

    .ensemble-fullcalendar-wrapper .fc .fc-button {
        padding: 6px 10px;
        font-size: 12px;
    }

    .ensemble-fullcalendar-wrapper .fc .fc-toolbar-title {
        font-size: 18px;
    }
}