/**
 * 5meter Holidays — zentrale Picker-Stile
 *
 * Klassen:
 *   .fm-holiday-badge          → Sonnenschirm-Span im Dispo-Datums-Header
 *   .fm-holiday-day-berlin     → Tageszelle: Berlin oder NATIONAL = blau
 *   .fm-holiday-day-other      → Tageszelle: andere Bundeslaender = gelb
 *
 * Konsumenten:
 *   - Disposition: disposition-overview-v2.php (Sonnenschirm-Span)
 *   - DateTime-Picker: event-edit-v2/partials/datetime-picker.php
 *   - Flatpickr (auto-patched): Mietomat, Dispo-Filter, ...
 *   - ACF date_picker: jQuery UI (Step 4)
 *
 * @since 5meter-core 1.0.12
 */

/* ═══════════════════════════════════════════════════════
 * Sonnenschirm-Badge (Dispo-Tagesgruppen-Header)
 * ═══════════════════════════════════════════════════════ */
.fm-holiday-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    padding: 2px 5px;
    border-radius: 4px;
    cursor: help;
    vertical-align: middle;
    line-height: 1;
}
.fm-holiday-badge .fm-holiday-icon {
    width: 16px;
    height: 16px;
    display: block;
}
.fm-holiday-badge.fm-holiday-berlin {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.12);
}
.fm-holiday-badge.fm-holiday-other {
    color: #ca8a04;
    background: rgba(202, 138, 4, 0.15);
}

/* ═══════════════════════════════════════════════════════
 * Custom DateTime-Picker (event-edit-v2)
 * ═══════════════════════════════════════════════════════ */
.ev2-picker-day.fm-holiday-day-berlin { background: rgba(37, 99, 235, 0.18); }
.ev2-picker-day.fm-holiday-day-other  { background: rgba(202, 138, 4, 0.22); }
.ev2-picker-day.other.fm-holiday-day-berlin,
.ev2-picker-day.other.fm-holiday-day-other { opacity: .45; }
/* .selected gewinnt visuell (weisser Text auf blau) — bleibt unangetastet */

/* ═══════════════════════════════════════════════════════
 * Flatpickr (Mietomat, Dispo-Filter, alle anderen)
 * ═══════════════════════════════════════════════════════ */
.flatpickr-day.fm-holiday-day-berlin {
    background: rgba(37, 99, 235, 0.18);
    color: #1e3a8a;
    font-weight: 600;
}
.flatpickr-day.fm-holiday-day-other {
    background: rgba(202, 138, 4, 0.22);
    color: #713f12;
    font-weight: 600;
}
.flatpickr-day.fm-holiday-day-berlin:hover,
.flatpickr-day.fm-holiday-day-other:hover {
    filter: brightness(0.94);
}
.flatpickr-day.prevMonthDay.fm-holiday-day-berlin,
.flatpickr-day.nextMonthDay.fm-holiday-day-berlin,
.flatpickr-day.prevMonthDay.fm-holiday-day-other,
.flatpickr-day.nextMonthDay.fm-holiday-day-other {
    opacity: .5;
}
/* selected / today / inRange behalten ihre flatpickr-Stile */

/* ═══════════════════════════════════════════════════════
 * Sofort-CSS-Tooltip (kein 1.5s Native-Delay)
 * Aktiviert sich automatisch auf jedem Element mit data-fm-tooltip.
 * Native title="" bleibt zusaetzlich erhalten (Accessibility/Fallback).
 * ═══════════════════════════════════════════════════════ */
[data-fm-tooltip] {
    position: relative;
}
[data-fm-tooltip]:hover::after,
[data-fm-tooltip]:focus-visible::after {
    content: attr(data-fm-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.96);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    white-space: normal;
    text-align: center;
    width: max-content;
    max-width: 240px;
    pointer-events: none;
    z-index: 100000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    /* Sicherheitsabstand falls am Rand */
    -webkit-font-smoothing: antialiased;
}
[data-fm-tooltip]:hover::before,
[data-fm-tooltip]:focus-visible::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(15, 23, 42, 0.96);
    pointer-events: none;
    z-index: 100000;
}

/* ═══════════════════════════════════════════════════════
 * ACF date_picker (jQuery UI) — Step 4 Vorbereitung
 * ═══════════════════════════════════════════════════════ */
.ui-datepicker td.fm-holiday-day-berlin a,
.ui-datepicker td.fm-holiday-day-berlin .ui-state-default {
    background: rgba(37, 99, 235, 0.18) !important;
    color: #1e3a8a !important;
    font-weight: 600;
    border-color: rgba(37, 99, 235, 0.3) !important;
}
.ui-datepicker td.fm-holiday-day-other a,
.ui-datepicker td.fm-holiday-day-other .ui-state-default {
    background: rgba(202, 138, 4, 0.22) !important;
    color: #713f12 !important;
    font-weight: 600;
    border-color: rgba(202, 138, 4, 0.3) !important;
}