/* Server Details - Info Card */
.info-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-muted) !important;
    display: flex;
    align-items: center;
}

.info-value {
    font-size: 0.95rem;
    font-weight: 400;
    padding-left: 1.25rem;
    color: var(--color-text, #f9feff) !important;
}

/* All text within info-value should be visible */
.info-value,
.info-value *,
.info-value span,
.info-value .text-muted,
.info-value .text-success {
    color: var(--color-text, #f9feff) !important;
}

.info-value .text-muted {
    font-style: italic;
    font-size: 0.9rem;
}

/* Section Headers in Info Card */
.card-body h6.text-muted {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: var(--color-text) !important;
}

.card-body h6.text-muted i {
    font-size: 1rem;
}

/* Description and other text-muted paragraphs */
.card-body p.text-muted {
    color: var(--color-text) !important;
}

/* Graph Container */
.graphcontainer {
    height: 25rem;
    width: 100%;
    background-color: var(--color-surface, #212121);
    border-radius: 0.375rem;
}

.graph {
    width: 100%;
    height: 22rem;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .info-item {
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 768px) {
    .card-header .d-flex.gap-2 {
        flex-wrap: wrap;
    }

    .card-header .btn-sm {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}