.server-info {
    background-color: var(--color-topbar);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    width: min(960px, 100%);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

body.mobile .server-info {
    width: auto;
}

.system-details {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-sm);
}

.server-info-header {
    display: block;
    margin-top: var(--spacing-lg);
}

.server-info-title {
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.usage-bar {
    background-color: var(--color-background);
    height: var(--spacing-sm);
    border-radius: 9999px;
    overflow: hidden;
    margin: 0;
    flex: 1;
}

.usage-bar-fill {
    height: 100%;
    width: 0%;
}

.usage-bar-fill[data-level="normal"] {
    background-color: var(--color-bar-normal);
}

.usage-bar-fill[data-level="warning"] {
    background-color: var(--color-bar-warning);
}

.usage-bar-fill[data-level="critical"] {
    background-color: var(--color-bar-critical);
}

.server-info-entry {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.server-info-key {
    margin: 0;
}

.server-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.server-info-subsection {
    outline: 1px solid var(--color-background);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.server-info-subsection > *:first-child {
    margin-top: 0;
}