/* SKELETONS - The Shimmer & Loading Atom */
[data-system-context="business"] { --skeleton-shimmer: color-mix(in srgb, var(--p1-3), transparent 70%); }
[data-system-context="finance"] { --skeleton-shimmer: color-mix(in srgb, var(--p5-3), transparent 70%); }
[data-system-context="workforce"] { --skeleton-shimmer: color-mix(in srgb, var(--p3-3), transparent 70%); }
[data-system-context="admin"] { --skeleton-shimmer: color-mix(in srgb, var(--p6-3), transparent 70%); }
[data-system-context="personal"] { --skeleton-shimmer: color-mix(in srgb, var(--p2-3), transparent 70%); }
[data-system-context="services"] { --skeleton-shimmer: color-mix(in srgb, var(--p9-3), transparent 70%); }

.empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: var(--spacing-5) var(--spacing-4); text-align: center;
    background: var(--bg-2); border: 2px dashed var(--text-1); border-radius: var(--radius-3);
    gap: var(--spacing-4); width: 100%; margin: 0 auto;
}

@media screen and (min-width: 40rem) {
    .empty-state { padding: 5rem var(--spacing-4); }
}
.empty-state .i-5 { color: var(--bg-5); }