/* PhoenixLiveCalendar — Optional CSS for animations and urgency indicators.
Import this in your app.css if you want animated urgency borders:
@import "../../deps/phoenix_live_calendar/priv/static/assets/phoenix_live_calendar.css";
*/
/* Urgency pulse animations */
@keyframes cal-pulse-warning {
0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4); }
50% { box-shadow: 0 0 0 4px rgba(251, 191, 36, 0); }
}
@keyframes cal-pulse-critical {
0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}
/* Back-to-back booking proximity indicator */
@keyframes cal-proximity-flash {
0%, 100% { border-color: transparent; }
50% { border-color: var(--cal-proximity-color, oklch(var(--wa, 0.8 0.2 80))); }
}
/* Selecting state for drag-to-select */
.cal-selecting {
background-color: oklch(var(--p, 0.6 0.2 260) / 0.15);
}
/* Drag states */
.cal-dragging {
opacity: 0.4;
}
.cal-drop-target {
background-color: oklch(var(--p, 0.6 0.2 260) / 0.1);
outline: 2px dashed oklch(var(--p, 0.6 0.2 260) / 0.3);
}
.cal-resizing {
opacity: 0.7;
}
.cal-long-press {
transform: scale(1.02);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Ghost element during drag */
.cal-ghost {
pointer-events: none;
opacity: 0.7;
transform: rotate(2deg);
}
/* Reduced motion — disable all calendar animations */
@media (prefers-reduced-motion: reduce) {
.cal-urgency-attention,
.cal-urgency-warning,
.cal-urgency-critical,
.cal-status-pending {
animation: none !important;
}
}