/*
 * Statuscomponenten: meldingen, lege staat, laadindicator, skeleton, toast.
 */

.ww-c-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: var(--ww-space-4);
    border: 1px solid var(--ww-notice-color, var(--ww-color-blue));
    border-radius: var(--ww-radius-md);
    background: color-mix(in srgb, var(--ww-notice-color, var(--ww-color-blue)) 8%, white);
    color: var(--ww-color-text);
    font-size: var(--ww-text-sm);
    line-height: 1.6;
}

.ww-c-notice i,
.ww-c-notice svg {
    flex: none;
    margin-top: 2px;
    color: var(--ww-notice-color, var(--ww-color-blue));
    --fa-primary-color: currentColor;
    --fa-secondary-color: currentColor;
    --fa-secondary-opacity: 0.4;
}

.ww-c-notice strong {
    color: var(--ww-color-navy);
}

.ww-c-notice--success { --ww-notice-color: var(--ww-color-success); }
.ww-c-notice--warning { --ww-notice-color: var(--ww-color-orange); }
.ww-c-notice--error   { --ww-notice-color: var(--ww-color-danger); }
.ww-c-notice--muted   { --ww-notice-color: var(--ww-color-muted-strong); }

.ww-c-notice[hidden] {
    display: none;
}

/* Lege staat: gecentreerd, met optioneel icoon, titel, tekst en actie. */
.ww-c-empty {
    display: grid;
    place-items: center;
    gap: 10px;
    min-height: 160px;
    padding: var(--ww-space-7);
    border: 1px dashed var(--ww-color-border);
    border-radius: var(--ww-radius-md);
    background: var(--ww-color-soft);
    color: var(--ww-color-muted);
    text-align: center;
}

.ww-c-empty__icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border: 1px solid var(--ww-color-border);
    border-radius: var(--ww-radius-md);
    background: var(--ww-gradient-tint);
    font-size: 24px;
}

.ww-c-empty__title {
    margin: 0 !important;
    color: var(--ww-color-navy) !important;
    -webkit-text-fill-color: var(--ww-color-navy) !important;
    font: var(--ww-font-weight-extrabold) var(--ww-text-lg)/1.3 var(--ww-font-family) !important;
}

.ww-c-empty__copy {
    max-width: 420px;
    margin: 0;
    color: var(--ww-color-muted-strong);
    font-size: var(--ww-text-base);
    line-height: 1.6;
}

.ww-c-empty__action {
    margin-top: var(--ww-space-2);
}

.ww-c-empty--lock .ww-c-empty__icon {
    --fa-primary-color: var(--ww-color-orange);
    --fa-secondary-color: var(--ww-color-navy);
    --fa-secondary-opacity: 0.6;
}

.ww-c-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--ww-color-border);
    border-top-color: var(--ww-color-blue);
    border-radius: 50%;
    animation: ww-c-spin 700ms linear infinite;
}

.ww-c-spinner--sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

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

/* Laadplaats voor kaarten of tekst. */
.ww-c-skeleton {
    border-radius: var(--ww-radius-xs);
    background: linear-gradient(90deg, var(--ww-navy-a06) 25%, var(--ww-navy-a10) 50%, var(--ww-navy-a06) 75%);
    background-size: 200% 100%;
    animation: ww-shimmer 1.4s linear infinite;
    color: transparent !important;
}

/* Kleine, tijdelijke melding rechtsonder (WheelWarriors.ui.toast). */
.ww-c-toast-stack {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(360px, calc(100vw - 36px));
    font-family: var(--ww-font-family);
}

.ww-c-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-left: 4px solid var(--ww-notice-color, var(--ww-color-blue));
    border-radius: var(--ww-radius-sm);
    background: var(--ww-color-navy);
    box-shadow: var(--ww-shadow-strong);
    color: #fff;
    font: var(--ww-font-weight-semibold) var(--ww-text-base)/1.4 var(--ww-font-family);
    animation: ww-fade-up 0.3s var(--ww-ease-out) both;
}

.ww-c-toast--success { --ww-notice-color: var(--ww-color-success); }
.ww-c-toast--warning { --ww-notice-color: var(--ww-color-orange); }
.ww-c-toast--error   { --ww-notice-color: var(--ww-color-danger); }

.ww-c-toast.is-leaving {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--ww-transition-normal), transform var(--ww-transition-normal);
}

/* Bezig-staat op een knop of blok (alleen binnen een View). */
.ww-scope .is-busy,
.ww-c-component.is-busy {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
    .ww-c-spinner,
    .ww-c-skeleton {
        animation: none;
    }
}