:root {
    --bug-grid-min: 13rem;
    --bug-grid-unit: 1fr;
    --bug-grid-repeat: auto-fit;
    --bug-card-accent-size: 0.25rem;
    --bug-code-max-height: 18rem;
    --bug-transition-duration: 160ms;
    --bug-status-radius: 999rem;
    --bug-stat-icon-size: 2.75rem;
    --bug-workflow-note-min: 18rem;
    --bug-workflow-note-height: 5.5rem;
    --bug-size-zero: 0;
    --bug-flex-grow: 1;
}

.superadmin-bug-stats {
    display: grid;
    grid-template-columns: repeat(var(--bug-grid-repeat), minmax(var(--bug-grid-min), var(--bug-grid-unit)));
    gap: var(--sa-space-md);
    margin-bottom: var(--sa-space-lg);
}

.superadmin-bug-stat {
    display: flex;
    align-items: center;
    gap: var(--sa-space-md);
    padding: var(--sa-space-lg);
    background: var(--sa-color-panel);
    border: var(--sa-border);
    border-radius: var(--sa-radius-lg);
    box-shadow: var(--sa-shadow);
}

.superadmin-bug-stat > i {
    display: grid;
    place-items: center;
    width: var(--bug-stat-icon-size);
    height: var(--bug-stat-icon-size);
    color: var(--sa-color-primary);
    background: var(--sa-color-primary-soft);
    border-radius: var(--sa-radius-md);
}

.superadmin-bug-stat span,
.superadmin-bug-stat small {
    display: block;
}

.superadmin-bug-stat strong {
    font-family: var(--sa-font-display);
    font-size: var(--sa-space-lg);
}

.superadmin-bug-stat small {
    color: var(--sa-color-muted);
    font-size: var(--sa-font-size-sm);
}

.superadmin-bug-list {
    display: grid;
    gap: var(--sa-space-lg);
}

.superadmin-bug-card {
    overflow: hidden;
    background: var(--sa-color-panel);
    border: var(--sa-border);
    border-left-width: var(--bug-card-accent-size);
    border-radius: var(--sa-radius-lg);
    box-shadow: var(--sa-shadow);
}

.superadmin-bug-card--open {
    border-left-color: var(--sa-color-danger);
}

.superadmin-bug-card--investigating {
    border-left-color: var(--sa-color-warning);
}

.superadmin-bug-card--resolved {
    border-left-color: var(--sa-color-success);
}

.superadmin-bug-card--ignored {
    border-left-color: var(--sa-color-disabled);
}

.superadmin-bug-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sa-space-lg);
    padding: var(--sa-space-lg);
}

.superadmin-bug-card__header h2,
.superadmin-bug-card__header p {
    margin: var(--bug-size-zero);
}

.superadmin-bug-card__header h2 {
    margin-top: var(--sa-space-xs);
    font-family: var(--sa-font-display);
    font-size: var(--sa-space-lg);
}

.superadmin-bug-card__header p {
    margin-top: var(--sa-space-sm);
    color: var(--sa-color-muted);
}

.superadmin-bug-card__reference {
    color: var(--sa-color-primary);
    font-family: monospace;
    font-size: var(--sa-font-size-xs);
    font-weight: bold;
    letter-spacing: var(--bug-card-accent-size);
}

.superadmin-bug-status {
    flex: none;
    padding: var(--sa-space-xs) var(--sa-space-sm);
    border-radius: var(--bug-status-radius);
    font-size: var(--sa-font-size-xs);
    font-weight: bold;
}

.superadmin-bug-status--open {
    color: var(--sa-color-danger);
    background: var(--sa-color-danger-soft);
}

.superadmin-bug-status--investigating {
    color: var(--sa-color-warning);
    background: var(--sa-color-warning-soft);
}

.superadmin-bug-status--resolved {
    color: var(--sa-color-success);
    background: var(--sa-color-success-soft);
}

.superadmin-bug-status--ignored {
    color: var(--sa-color-disabled);
    background: var(--sa-color-disabled-soft);
}

.superadmin-bug-meta,
.superadmin-bug-diagnostics {
    display: grid;
    grid-template-columns: repeat(var(--bug-grid-repeat), minmax(var(--bug-grid-min), var(--bug-grid-unit)));
    gap: var(--sa-space-md);
    margin: var(--bug-size-zero);
    padding: var(--sa-space-lg);
    background: var(--sa-color-panel-soft);
    border-top: var(--sa-border);
}

.superadmin-bug-meta div,
.superadmin-bug-diagnostics div {
    min-width: var(--bug-size-zero);
}

.superadmin-bug-meta dt,
.superadmin-bug-diagnostics dt {
    color: var(--sa-color-muted);
    font-size: var(--sa-font-size-xs);
    font-weight: bold;
    text-transform: uppercase;
}

.superadmin-bug-meta dd,
.superadmin-bug-diagnostics dd {
    margin: var(--sa-space-xs) var(--bug-size-zero) var(--bug-size-zero);
    overflow-wrap: anywhere;
    font-size: var(--sa-font-size-sm);
}

.superadmin-bug-details {
    border-top: var(--sa-border);
}

.superadmin-bug-details summary {
    padding: var(--sa-space-md) var(--sa-space-lg);
    cursor: pointer;
    color: var(--sa-color-label);
    font-weight: bold;
}

.superadmin-bug-details summary:hover,
.superadmin-bug-details summary:focus-visible {
    color: var(--sa-color-primary);
    background: var(--sa-color-primary-soft);
}

.superadmin-bug-details__content {
    display: grid;
    gap: var(--sa-space-md);
    padding: var(--bug-size-zero) var(--sa-space-lg) var(--sa-space-lg);
}

.superadmin-bug-details__content h3 {
    margin: var(--bug-size-zero) var(--bug-size-zero) var(--sa-space-xs);
    font-size: var(--sa-font-size-sm);
}

.superadmin-bug-details__content pre {
    max-height: var(--bug-code-max-height);
    margin: var(--bug-size-zero);
    padding: var(--sa-space-md);
    overflow: auto;
    color: var(--sa-color-sidebar-active);
    background: var(--sa-color-sidebar);
    border-radius: var(--sa-radius-md);
    font-size: var(--sa-font-size-xs);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.superadmin-bug-workflow {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--sa-space-md);
    padding: var(--sa-space-lg);
    border-top: var(--sa-border);
}

.superadmin-bug-workflow label,
.superadmin-bug-workflow label span {
    display: grid;
    gap: var(--sa-space-xs);
    color: var(--sa-color-label);
    font-size: var(--sa-font-size-sm);
    font-weight: bold;
}

.superadmin-bug-workflow__note {
    flex: var(--bug-flex-grow);
    min-width: var(--bug-workflow-note-min);
}

.superadmin-bug-workflow select,
.superadmin-bug-workflow textarea {
    min-height: var(--sa-size-field);
    padding: var(--sa-space-sm);
    color: var(--sa-color-text);
    background: var(--sa-color-panel);
    border: var(--sa-border);
    border-radius: var(--sa-radius-md);
    font: inherit;
}

.superadmin-bug-workflow textarea {
    min-height: var(--bug-workflow-note-height);
    resize: vertical;
}

.superadmin-bug-workflow select:focus-visible,
.superadmin-bug-workflow textarea:focus-visible {
    outline: none;
    border-color: var(--sa-color-focus);
    box-shadow: var(--sa-focus-shadow);
}

.superadmin-bug-occurrences {
    display: grid;
    gap: var(--sa-space-xs);
    margin: var(--bug-size-zero);
    padding: var(--bug-size-zero);
    list-style: none;
}

.superadmin-bug-occurrences li {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sa-space-sm);
    padding: var(--sa-space-sm);
    background: var(--sa-color-panel-soft);
    border-radius: var(--sa-radius-sm);
    font-size: var(--sa-font-size-xs);
}

.superadmin-bugs-empty {
    display: grid;
    justify-items: center;
    gap: var(--sa-space-sm);
    padding: var(--sa-space-lg);
    text-align: center;
}

.superadmin-bugs-empty i {
    color: var(--sa-color-success);
    font-size: var(--bug-stat-icon-size);
}

.superadmin-bugs-empty h2,
.superadmin-bugs-empty p {
    margin: var(--bug-size-zero);
}

.superadmin-bugs-empty p {
    color: var(--sa-color-muted);
}