/**
 * frontend-placeholder-wiring.css
 * ---------------------------------
 * Minimal styles for health widget states used by frontend-placeholder-wiring.js.
 * Non-invasive — only targets classes applied by the wiring script itself.
 *
 * Loaded globally via AssetManager through Header.php.
 */

/* === Health status badge — base ========================= */

.health-status-badge {
    display: inline-block;
    padding: 0.2em 0.6em;
    border-radius: 0.3em;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    vertical-align: middle;
    border: 1px solid transparent;
}

/* === Health status badge — ok / healthy state =========== */

.health-status-badge--ok,
.health-status-badge.is-ok {
    background-color: #d1fae5;
    color: #065f46;
    border-color: #6ee7b7;
}

/* === Health status badge — degraded / down state ======== */

.health-status-badge--degraded,
.health-status-badge--down,
.health-status-badge.is-unavailable,
.is-unavailable .health-status-badge {
    background-color: #fee2e2;
    color: #991b1b;
    border-color: #fca5a5;
}

/* === Widget-level unavailable overlay =================== */

/* Applied directly to the data-health-endpoint container when
   the endpoint cannot be reached or returns an unexpected payload. */
.is-unavailable {
    opacity: 0.7;
}

/* === Placeholder-action toast notice ==================== */
/*
 * Shown by wireInterceptionHandlers() in frontend-placeholder-wiring.js
 * whenever a user interacts with an unfinished placeholder control.
 * Fixed to the bottom-right corner so it is non-blocking and dismisses
 * automatically after 2.5 s.
 */

.ph-toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;

    max-width: 22rem;
    padding: 0.75rem 1.1rem;
    border-radius: 0.4rem;

    background-color: #1e293b; /* slate-800 — high contrast on white pages */
    color: #f1f5f9;            /* slate-100 */
    font-size: 0.875rem;
    line-height: 1.5;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);

    /* Hidden by default — transition driven by .ph-toast--visible modifier. */
    opacity: 0;
    transform: translateY(0.5rem);
    pointer-events: none; /* invisible toast must not block clicks underneath */

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

/* Visible state toggled by JS */
.ph-toast--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Respect user motion preference — disable all transitions */
@media (prefers-reduced-motion: reduce) {
    .ph-toast {
        transition: none;
    }
}