:root {
    --app-accent: var(--accent-fill-rest, var(--colorBrandBackground, #0f6cbd));
    --app-surface: var(--neutral-layer-1, var(--colorNeutralBackground1, #fff));
    --app-surface-muted: var(--neutral-layer-2, var(--colorNeutralBackground2, #f6f8fa));
    --app-border: var(--neutral-stroke-rest, var(--colorNeutralStroke2, #d7dde5));
    --app-foreground: var(--neutral-foreground-rest, var(--colorNeutralForeground1, #17212b));
    --app-foreground-muted: var(--neutral-foreground-hint, var(--colorNeutralForeground3, #5f6b7a));
    --app-success: #107c10;
    --app-warning: #a15c00;
    --app-danger: #b42318;
}

.app-page-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .625rem;
}

.app-page-heading h1 {
    margin: 0;
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -.015em;
}

.data-grid-container {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    box-sizing: border-box;
    padding: 0;
    border: 1px solid var(--color-glass-border, var(--app-border));
    border-radius: var(--borderRadius2XLarge, 1rem);
    background: var(--color-glass-layer2-bg, var(--app-surface));
    box-shadow: 0 8px 32px var(--color-glass-shadow, rgba(20, 35, 50, .08));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    scrollbar-gutter: stable;
}

.data-grid-container > .fluent-data-grid {
    width: 100%;
    min-width: max-content;
}

.data-grid-container > .fluent-data-grid thead {
    background: var(--color-glass-layer1-bg, var(--app-surface-muted));
}

.ui-state {
    display: grid;
    max-width: 42rem;
    min-height: 14rem;
    margin: 1rem auto;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    place-items: center;
    align-content: center;
    gap: .75rem;
    border: 1px solid var(--app-border);
    border-radius: 1.125rem;
    background: var(--app-surface);
    color: var(--app-foreground);
    text-align: center;
}

.ui-state h2,
.ui-state p {
    margin: 0;
}

.ui-state p {
    max-width: 34rem;
    color: var(--app-foreground-muted);
    line-height: 1.65;
}

.ui-state--success {
    border-color: color-mix(in srgb, var(--app-success) 35%, var(--app-border));
}

.ui-state--error {
    border-color: color-mix(in srgb, var(--app-danger) 35%, var(--app-border));
}

@media (max-width: 48rem) {
    .data-grid-container {
        border-radius: .75rem;
    }

    .toolbar fluent-button {
        flex: 1 1 auto;
    }

    .toolbar fluent-text-field,
    .toolbar fluent-search {
        flex: 1 1 100%;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}