@use "../constants" as *;

// Next Schedule Info Component
// Shared styles for displaying next scheduled run information

.next-schedule-info,
.next-email-info {
    background: $success-bg-soft;
    padding: 12px;
    border-radius: 5px;
    margin: 0 0 1.5rem;
    margin-top: 1rem;
    border-left: 4px solid $success-color;
    transition: all 0.3s ease;

    p {
        margin: 0;
        color: #0073aa;

        strong {
            color: $success-color;
            display: block;
            margin-bottom: 0.25rem;
            font-weight: 600;

            // For dynamic mode (no label, just time)
            &.next-time {
                margin-bottom: 0;
            }
        }

        .next-run-time,
        .next-countdown,
        small {
            color: $text-secondary;
            font-style: italic;
            font-size: 0.9rem;
        }

        // Layout for dynamic mode (absolute time + countdown on same line)
        .next-time ~ .next-countdown,
        small {
            display: inline;
            margin-left: 0.5rem;
        }
    }

    &.hidden {
        display: none;
    }

    // For dynamically shown elements (like alerts page)
    &.active {
        display: block !important;
    }

    // Debug/calculating state (when schedule exists but time is not yet calculated)
    &.calculating-state {
        background: $warning-bg;
        border-left-color: $warning-color-border;
    }
}