:root {
    --sa-event-zero: 0;
    --sa-event-full: 100%;
    --sa-event-grid-full: 1 / -1;
    --sa-event-summary-columns: repeat(4, minmax(var(--sa-event-zero), 1fr));
    --sa-event-filter-columns: minmax(var(--sa-event-search-min), 1.5fr)
        repeat(2, minmax(var(--sa-event-field-min), 1fr)) minmax(var(--sa-event-actions-min), auto);
    --sa-event-row-columns: var(--sa-event-icon-size) minmax(var(--sa-event-zero), 1fr)
        minmax(var(--sa-event-time-min), max-content);
    --sa-event-gap-xs: var(--sa-space-xs);
    --sa-event-gap-sm: var(--sa-space-sm);
    --sa-event-gap-md: var(--sa-space-md);
    --sa-event-gap-lg: var(--sa-space-lg);
    --sa-event-padding: var(--sa-space-lg);
    --sa-event-row-padding: var(--sa-space-md);
    --sa-event-icon-size: var(--sa-size-icon);
    --sa-event-control-height: var(--sa-size-field);
    --sa-event-search-min: 17rem;
    --sa-event-field-min: 11rem;
    --sa-event-actions-min: 10.5rem;
    --sa-event-time-min: 8.25rem;
    --sa-event-heading-size: var(--sa-font-size-md);
    --sa-event-copy-size: var(--sa-font-size-sm);
    --sa-event-label-size: var(--sa-font-size-xs);
    --sa-event-time-size: var(--sa-font-size-xs);
    --sa-event-summary-value-size: 1.125rem;
    --sa-event-summary-icon-size: 1.125rem;
    --sa-event-line-height: var(--sa-line-height-compact);
    --sa-event-label-tracking: 0.06em;
    --sa-event-timeline-width: 0.125rem;
    --sa-event-timeline-offset: calc(var(--sa-event-icon-size) / 2);
    --sa-event-payload-columns: repeat(auto-fit, minmax(var(--sa-event-field-min), 1fr));
    --sa-event-compact-radius: var(--sa-radius-sm);
    --sa-event-transition: 0.15s ease;
    --sa-event-font-weight: 700;
    --sa-event-weight-medium: 600;
    --sa-event-flex-static: 0 0 auto;
    --sa-event-panel-actions-columns: auto auto;
    --sa-event-scope-columns: repeat(4, minmax(var(--sa-event-zero), 1fr));
    --sa-event-focus-outline: 0.2rem solid var(--sa-color-focus);
    --sa-event-focus-offset: 0.15rem;
}

.superadmin-events-page {
    display: grid;
    gap: var(--sa-event-gap-lg);
}

.superadmin-events-summary {
    display: grid;
    grid-template-columns: var(--sa-event-summary-columns);
    overflow: hidden;
    background: var(--sa-color-panel);
    border: var(--sa-border);
    border-radius: var(--sa-radius-lg);
    box-shadow: var(--sa-shadow);
}

.superadmin-events-summary__fact {
    display: flex;
    align-items: center;
    gap: var(--sa-event-gap-sm);
    min-width: var(--sa-event-zero);
    padding: var(--sa-event-padding);
    border-right: var(--sa-border);
}

.superadmin-events-summary__fact:last-child {
    border-right-width: var(--sa-event-zero);
}

.superadmin-events-summary__fact > i {
    display: grid;
    flex: var(--sa-event-flex-static);
    place-items: center;
    width: var(--sa-event-icon-size);
    height: var(--sa-event-icon-size);
    color: var(--sa-color-label);
    background: var(--sa-color-panel-soft);
    border: var(--sa-border);
    border-radius: var(--sa-radius-md);
    font-size: var(--sa-event-summary-icon-size);
}

.superadmin-events-summary__fact > div {
    display: grid;
    gap: var(--sa-event-gap-xs);
    min-width: var(--sa-event-zero);
}

.superadmin-events-summary__fact strong {
    color: var(--sa-color-text);
    font-size: var(--sa-event-summary-value-size);
    font-variant-numeric: tabular-nums;
    line-height: var(--sa-event-line-height);
}

.superadmin-events-summary__fact span,
.superadmin-events-panel__header p,
.superadmin-events-filter__header > p {
    color: var(--sa-color-muted);
    font-size: var(--sa-event-copy-size);
    line-height: var(--sa-event-line-height);
}

.superadmin-events-filter {
    display: grid;
    grid-template-columns: var(--sa-event-filter-columns);
    align-items: end;
    gap: var(--sa-event-gap-sm);
    padding: var(--sa-event-padding);
    background: var(--sa-color-panel);
    border: var(--sa-border);
    border-radius: var(--sa-radius-lg);
    box-shadow: var(--sa-shadow);
}

.superadmin-events-filter__header {
    display: flex;
    grid-column: var(--sa-event-grid-full);
    align-items: end;
    justify-content: space-between;
    gap: var(--sa-event-gap-md);
}

.superadmin-events-filter__header > div,
.superadmin-events-panel__header > div:first-child {
    display: grid;
    gap: var(--sa-event-gap-xs);
}

.superadmin-events-filter__eyebrow,
.superadmin-events-panel__eyebrow {
    margin: var(--sa-event-zero);
    color: var(--sa-color-label);
    font-size: var(--sa-event-label-size);
    font-weight: var(--sa-event-font-weight);
    letter-spacing: var(--sa-event-label-tracking);
    text-transform: uppercase;
}

.superadmin-events-filter__header h2,
.superadmin-events-panel__header h2,
.superadmin-event-group h3 {
    margin: var(--sa-event-zero);
    color: var(--sa-color-text);
    font-size: var(--sa-event-heading-size);
    line-height: var(--sa-event-line-height);
}

.superadmin-events-filter__header > p,
.superadmin-events-panel__header p {
    margin: var(--sa-event-zero);
}

.superadmin-events-filter__search {
    display: flex;
    align-items: center;
    gap: var(--sa-event-gap-xs);
    min-width: var(--sa-event-zero);
    min-height: var(--sa-event-control-height);
    padding-inline: var(--sa-event-gap-sm);
    color: var(--sa-color-muted);
    background: var(--sa-color-panel-soft);
    border: var(--sa-border);
    border-radius: var(--sa-radius-md);
}

.superadmin-events-filter__search:focus-within {
    border-color: var(--sa-color-primary);
    box-shadow: var(--sa-focus-shadow);
}

.superadmin-events-filter__search input {
    width: var(--sa-event-full);
    min-width: var(--sa-event-zero);
    min-height: var(--sa-event-control-height);
    padding: var(--sa-event-zero);
    color: var(--sa-color-text);
    background: transparent;
    border-width: var(--sa-event-zero);
    font: inherit;
}

.superadmin-events-filter__search input:focus-visible,
.superadmin-events-filter__field select:focus-visible {
    outline: var(--sa-event-focus-outline);
    outline-offset: var(--sa-event-focus-offset);
}

.superadmin-events-filter__field {
    display: grid;
    gap: var(--sa-event-gap-xs);
    min-width: var(--sa-event-zero);
    color: var(--sa-color-label);
    font-size: var(--sa-event-label-size);
    font-weight: var(--sa-event-font-weight);
}

.superadmin-events-filter__field select {
    width: var(--sa-event-full);
    min-height: var(--sa-event-control-height);
    padding-inline: var(--sa-event-gap-sm);
    color: var(--sa-color-text);
    background: var(--sa-color-panel);
    border: var(--sa-border);
    border-radius: var(--sa-radius-md);
    font: inherit;
}

.superadmin-events-filter__field select:focus {
    border-color: var(--sa-color-primary);
    box-shadow: var(--sa-focus-shadow);
}

.superadmin-events-filter__actions,
.superadmin-events-panel__actions {
    display: grid;
    gap: var(--sa-event-gap-xs);
}

.superadmin-events-filter__actions {
    min-width: var(--sa-event-actions-min);
}

.superadmin-events-filter__actions .superadmin-button {
    width: var(--sa-event-full);
}

.superadmin-events-filter__reset,
.superadmin-events-panel__refresh,
.superadmin-events-empty__reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sa-event-gap-xs);
    color: var(--sa-color-primary-strong);
    font-size: var(--sa-event-copy-size);
    font-weight: var(--sa-event-weight-medium);
    text-decoration: none;
}

.superadmin-events-filter__reset,
.superadmin-events-empty__reset {
    min-height: var(--sa-event-control-height);
}

.superadmin-events-panel__refresh {
    min-height: var(--sa-event-control-height);
    padding-inline: var(--sa-event-gap-sm);
}

.superadmin-events-filter__reset:hover,
.superadmin-events-filter__reset:focus-visible,
.superadmin-events-panel__refresh:hover,
.superadmin-events-panel__refresh:focus-visible,
.superadmin-events-empty__reset:hover,
.superadmin-events-empty__reset:focus-visible,
.superadmin-events-page .superadmin-event__titleline a:hover,
.superadmin-events-page .superadmin-event__titleline a:focus-visible {
    text-decoration: underline;
}

.superadmin-events-scope {
    display: grid;
    grid-column: var(--sa-event-grid-full);
    gap: var(--sa-event-gap-xs);
    min-width: var(--sa-event-zero);
    margin: var(--sa-event-zero);
    padding: var(--sa-event-gap-sm) var(--sa-event-zero) var(--sa-event-zero);
    border-width: var(--sa-event-zero);
    border-top: var(--sa-border);
}

.superadmin-events-scope legend {
    padding: var(--sa-event-zero);
    color: var(--sa-color-label);
    font-size: var(--sa-event-label-size);
    font-weight: var(--sa-event-font-weight);
}

.superadmin-events-scope > p {
    margin: var(--sa-event-zero);
    color: var(--sa-color-muted);
    font-size: var(--sa-event-label-size);
}

.superadmin-events-scope__options {
    display: grid;
    grid-template-columns: var(--sa-event-scope-columns);
    gap: var(--sa-event-gap-xs);
}

.superadmin-events-scope__option {
    display: grid;
    grid-template-columns: auto minmax(var(--sa-event-zero), 1fr) auto;
    align-items: center;
    gap: var(--sa-event-gap-xs);
    min-width: var(--sa-event-zero);
    min-height: var(--sa-event-control-height);
    padding: var(--sa-event-gap-xs) var(--sa-event-gap-sm);
    color: var(--sa-color-label);
    background: var(--sa-color-panel-soft);
    border: var(--sa-border);
    border-radius: var(--sa-event-compact-radius);
    font: inherit;
    font-size: var(--sa-event-copy-size);
    font-weight: var(--sa-event-weight-medium);
    text-align: left;
    cursor: pointer;
}

.superadmin-events-scope__option strong {
    display: grid;
    place-items: center;
    min-width: var(--sa-event-icon-size);
    min-height: var(--sa-event-icon-size);
    color: var(--sa-color-text);
    background: var(--sa-color-panel);
    border-radius: var(--sa-radius-sm);
    font-size: var(--sa-event-label-size);
    font-variant-numeric: tabular-nums;
}

.superadmin-events-scope__option:hover,
.superadmin-events-scope__option:focus-visible,
.superadmin-events-scope__option.is-active {
    color: var(--sa-color-primary-strong);
    background: var(--sa-color-primary-soft);
    border-color: var(--sa-color-primary);
}

.superadmin-events-scope__option:focus-visible {
    box-shadow: var(--sa-focus-shadow);
    outline: var(--sa-event-focus-outline);
    outline-offset: var(--sa-event-focus-offset);
}

@media (prefers-reduced-motion: no-preference) {
    .superadmin-events-scope__option,
    .superadmin-events-panel__refresh {
        transition:
            background-color var(--sa-event-transition),
            border-color var(--sa-event-transition),
            color var(--sa-event-transition);
    }
}