/* ===== OO EmptyState =====
   Gestrichelter Rahmen in der Form einer List (Radius md), mittig Icon, Titel, Text und optional ein Knopf.
   Compact: nur gedämpfter Text, ohne Rahmen und Icon, linksbündig.
   ========================= */

.oo-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--oo-space-2);
    padding: var(--oo-space-8) var(--oo-space-4);
    border: var(--oo-border-width) dashed var(--oo-color-border);
    border-radius: var(--oo-radius-md);
    text-align: center;
}

.oo-empty-state__icon {
    color: var(--oo-color-text-subtle);
    font-size: 1.5em;
}

.oo-empty-state__text {
    color: var(--oo-color-text-subtle);
    font-size: var(--oo-font-size-small);
}

.oo-empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--oo-space-2);
    margin-top: var(--oo-space-2);
}

.oo-empty-state--compact {
    align-items: flex-start;
    gap: var(--oo-space-1);
    padding: 0;
    border: 0;
    text-align: left;
}

.oo-empty-state--compact .oo-empty-state__title {
    font-weight: inherit;
}

.oo-empty-state--compact .oo-empty-state__title,
.oo-empty-state--compact .oo-empty-state__text {
    color: var(--oo-color-text-subtle);
    font-size: var(--oo-font-size-small);
}

.oo-empty-state--compact .oo-empty-state__actions {
    justify-content: flex-start;
    margin-top: 0;
}