/*
 * Feedback: alerts, badges, toasts, progress bars, spinners, skeletons, empty
 * states. Tone variants share the same names: info, success, warning, danger
 * (and primary, neutral where it makes sense).
 */
@layer components {
    /* Alerts: <div class="alert alert-warning" role="alert"> */
    .alert {
        --alert-bg: var(--color-info-subtle);
        --alert-border: var(--color-info-border);
        --alert-color: var(--color-info-text);
        --alert-accent: var(--color-info);

        display: flex;
        gap: var(--space-3);
        margin-bottom: var(--space-4);
        padding: var(--space-3) var(--space-4);
        border: var(--border-width-thin) solid var(--alert-border);
        border-left: 4px solid var(--alert-accent);
        border-radius: var(--radius-surface);
        background: var(--alert-bg);
        color: var(--alert-color);
    }

    .alert > .icon {
        flex: none;
        margin-top: 0.15em;
        color: var(--alert-accent);
        font-size: 1.2em;
    }

    .alert-content {
        flex: 1;
        min-width: 0;
    }

    .alert-content > :last-child {
        margin-bottom: 0;
    }

    .alert-title {
        display: block;
        margin-bottom: var(--space-1);
        font-weight: var(--font-weight-semibold);
    }

    .alert a {
        color: inherit;
        font-weight: var(--font-weight-semibold);
    }

    .alert-success { --alert-bg: var(--color-success-subtle); --alert-border: var(--color-success-border); --alert-color: var(--color-success-text); --alert-accent: var(--color-success); }
    .alert-warning { --alert-bg: var(--color-warning-subtle); --alert-border: var(--color-warning-border); --alert-color: var(--color-warning-text); --alert-accent: var(--color-warning); }
    .alert-danger { --alert-bg: var(--color-danger-subtle); --alert-border: var(--color-danger-border); --alert-color: var(--color-danger-text); --alert-accent: var(--color-danger); }

    /* Close button of alerts, toasts and dialogs. */
    .close-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 2rem;
        height: 2rem;
        margin: -0.25rem -0.5rem -0.25rem 0;
        padding: 0;
        border: 0;
        border-radius: var(--radius-control);
        background: transparent;
        color: inherit;
        opacity: 0.7;
        cursor: pointer;
    }

    .close-button:hover {
        opacity: 1;
        background: color-mix(in srgb, currentColor 10%, transparent);
    }

    /* Badges: <span class="badge badge-success">Actif</span> */
    .badge {
        --badge-bg: var(--color-neutral-subtle);
        --badge-color: var(--color-neutral-text);

        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        padding: 0.15em 0.6em;
        border-radius: var(--badge-radius);
        background: var(--badge-bg);
        color: var(--badge-color);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        line-height: 1.5;
        white-space: nowrap;
        vertical-align: middle;
    }

    .badge-primary { --badge-bg: var(--color-primary-subtle); --badge-color: var(--color-primary-text); }
    .badge-success { --badge-bg: var(--color-success-subtle); --badge-color: var(--color-success-text); }
    .badge-warning { --badge-bg: var(--color-warning-subtle); --badge-color: var(--color-warning-text); }
    .badge-danger { --badge-bg: var(--color-danger-subtle); --badge-color: var(--color-danger-text); }
    .badge-info { --badge-bg: var(--color-info-subtle); --badge-color: var(--color-info-text); }
    .badge-solid { --badge-bg: var(--color-primary); --badge-color: var(--color-primary-contrast); }

    /* Status dot before a badge text. */
    .badge-dot::before {
        content: '';
        width: 0.45em;
        height: 0.45em;
        border-radius: 50%;
        background: currentColor;
    }

    /* Avatars: <span class="avatar">MM</span> or <img class="avatar"> */
    .avatar {
        --avatar-size: 2.5rem;

        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: var(--avatar-size);
        height: var(--avatar-size);
        overflow: hidden;
        border-radius: 50%;
        background: var(--color-primary-subtle-hover);
        color: var(--color-primary-text);
        font-size: calc(var(--avatar-size) * 0.4);
        font-weight: var(--font-weight-semibold);
        object-fit: cover;
        text-transform: uppercase;
    }

    .avatar-sm { --avatar-size: 2rem; }
    .avatar-lg { --avatar-size: 3.5rem; }

    .avatar-group {
        display: flex;
    }

    .avatar-group > .avatar {
        margin-left: -0.6rem;
        box-shadow: 0 0 0 2px var(--color-bg-surface);
    }

    .avatar-group > .avatar:first-child {
        margin-left: 0;
    }

    /* Toasts: stacked in .toast-region, at the bottom right. */
    .toast-region {
        position: fixed;
        right: var(--space-4);
        bottom: var(--space-4);
        z-index: var(--z-index-toast);
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        width: min(24rem, calc(100vw - 2 * var(--space-4)));
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .toast {
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        border: var(--border-width-thin) solid var(--color-border);
        border-radius: var(--radius-surface);
        background: var(--color-bg-surface-raised);
        box-shadow: var(--shadow-lg);
        animation: toast-in var(--duration-slow) var(--easing-emphasized);
    }

    .toast > .icon {
        flex: none;
        margin-top: 0.15em;
        font-size: 1.2em;
    }

    .toast-success > .icon { color: var(--color-success); }
    .toast-warning > .icon { color: var(--color-warning); }
    .toast-danger > .icon { color: var(--color-danger); }
    .toast-info > .icon { color: var(--color-info); }

    .toast-message {
        flex: 1;
    }

    .toast.is-leaving {
        opacity: 0;
        transform: translateX(1rem);
        transition: opacity var(--duration-normal) var(--easing-exit), transform var(--duration-normal) var(--easing-exit);
    }

    @keyframes toast-in {
        from { opacity: 0; transform: translateY(0.5rem); }
    }

    /* Progress bar: <div class="progress" role="progressbar" …><div class="progress-bar" style="width: 40%"></div></div> */
    .progress {
        --progress-color: var(--color-primary);

        height: 0.5rem;
        overflow: hidden;
        border-radius: var(--radius-full);
        background: var(--color-bg-muted);
    }

    .progress-bar {
        height: 100%;
        border-radius: inherit;
        background: var(--progress-color);
        transition: width var(--duration-slow) var(--easing-standard);
    }

    .progress-success { --progress-color: var(--color-success); }
    .progress-warning { --progress-color: var(--color-warning); }
    .progress-danger { --progress-color: var(--color-danger); }

    /* Spinner: <span class="spinner" role="status"><span class="visually-hidden">Chargement…</span></span> */
    .spinner {
        --spinner-size: 1.25em;

        display: inline-block;
        flex: none;
        width: var(--spinner-size);
        height: var(--spinner-size);
        border: 0.15em solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: spin 0.7s linear infinite;
    }

    .spinner-lg { --spinner-size: 2.5rem; border-width: 0.2rem; }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    /* Skeleton: placeholders while content loads. */
    .skeleton {
        display: block;
        height: 1em;
        margin-bottom: var(--space-2);
        border-radius: var(--radius-sm);
        background: linear-gradient(90deg, var(--color-bg-subtle) 25%, var(--color-bg-muted) 50%, var(--color-bg-subtle) 75%);
        background-size: 200% 100%;
        animation: shimmer 1.4s ease-in-out infinite;
    }

    .skeleton-circle {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
    }

    @keyframes shimmer {
        from { background-position: 200% 0; }
        to { background-position: -200% 0; }
    }

    /* Empty state: nothing to show yet. */
    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-12) var(--space-6);
        border: var(--border-width-thin) dashed var(--color-border-strong);
        border-radius: var(--radius-surface);
        text-align: center;
        color: var(--color-text-muted);
    }

    .empty-state > .icon {
        font-size: 2.5rem;
        color: var(--color-text-subtle);
    }

    .empty-state-title {
        margin: 0;
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text);
    }

    .empty-state p {
        max-width: 32rem;
        margin: 0;
    }

    .empty-state .cluster {
        justify-content: center;
        margin-top: var(--space-3);
    }

    /* Key figure: <div class="stat"><span class="stat-label">…</span><span class="stat-value">…</span></div> */
    .stat {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        padding: var(--space-5);
        border: var(--border-width-thin) solid var(--color-border);
        border-radius: var(--radius-surface);
        background: var(--color-bg-surface);
    }

    .stat-label {
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
    }

    .stat-value {
        font-size: var(--font-size-3xl);
        font-weight: var(--font-weight-bold);
        line-height: var(--font-line-height-tight);
        font-variant-numeric: tabular-nums;
    }

    .stat-trend {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
    }

    .stat-trend.is-up { color: var(--color-success); }
    .stat-trend.is-down { color: var(--color-danger); }
}

/* Steps of a long task run in the page (e.g. the update). */
@layer components {
    .update-steps .list-item::before {
        content: '';
        flex: none;
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 50%;
        background: var(--color-bg-muted);
    }

    .update-steps .is-running::before {
        background: var(--color-primary);
        animation: pulse 1s ease-in-out infinite;
    }

    .update-steps .is-done::before { background: var(--color-success); }
    .update-steps .is-failed { color: var(--color-danger); }
    .update-steps .is-failed::before { background: var(--color-danger); }

    @keyframes pulse {
        50% { opacity: 0.3; }
    }
}