/* Rotate-to-landscape overlay for the shift planner.
   Hidden by default; shown only on small screens held in portrait, where the
   dense schedule layout is unusable. Pure CSS media query drives visibility —
   no JS needed to show/hide. The optional "rotate automatically" button attempts
   a real orientation lock (see MitWare.tryLockLandscape), which only works on
   some browsers; the message covers everything else. */
.mw-sp-orient-overlay {
    display: none;
}

@media (orientation: portrait) and (max-width: 960px) {
    .mw-sp-orient-overlay {
        position: fixed;
        inset: 0;
        z-index: 2000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        padding: 2rem;
        text-align: center;
        background: var(--mud-palette-surface, #fff);
        color: var(--mud-palette-text-primary, #000);
    }
}

.mw-sp-orient-icon {
    font-size: 4.5rem;
    color: var(--mud-palette-primary, #594ae2);
    animation: mw-sp-orient-rotate 2.6s ease-in-out infinite;
}

@keyframes mw-sp-orient-rotate {
    0%, 35% {
        transform: rotate(0deg);
    }
    55%, 100% {
        transform: rotate(-90deg);
    }
}

.mw-sp-orient-message {
    max-width: 22rem;
    font-size: 1.1rem;
    line-height: 1.5;
}