﻿.customer-grid-paper .mud-data-grid .mud-table-container .mud-table-body .mud-table-cell.mud-table-child-content:has(.customer-details) {
    margin: 0;
    padding: 0;
}

.customer-details {
    margin: 0;
    padding: 16px;
    width: 100%;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

    .customer-details > .mud-grid-item{
        padding: 0;
        margin: 0;
        flex-shrink: 1;
        flex-grow: 1;
    }

.customer-license-details, .customer-contact-details {
    padding: 24px;
}

.customer-contact-details {
    flex: 0 0 auto;
}

.customer-license-details {
    flex: 1 1 0; /* Grow to fill remaining space */
    min-width: 0; /* Allows proper text wrapping/truncation if needed */
}

@media (max-width: 1100px) {
    .customer-contact-details,
    .customer-license-details {
        flex: 1 0 100%; /* Both items take full width */
    }
}
.customer-details-group{
    flex-basis: auto;
}

.customer-details-group-title {
    color: var(--text-neutral-primary);
    padding-bottom: 4px;
}

.customer-details-group.main-group .customer-details-group-title {
    padding-bottom: 24px;
}

    .customer-details-group-title.no-padding {
        padding-bottom: 0;
    }

.customer-license-point-list {
    margin: 0 !important;
}

.customer-license-point-list .mud-grid-item{
    padding: 0;
}

.customer-details-group-props {
    margin: 0;
    gap: 8px !important;
}
.customer-details-group.main-group .customer-details-group-props {
    padding-bottom: 24px;
}


.customer-details-group-labels, .customer-details-group-values {
    flex: 0 0 auto;
    overflow: auto;
    gap: 4px;
}

.customer-contact-details .customer-details-group-values {
    min-width: 100px;
}

    .customer-details-group-values .mud-chip.status-chip {
        margin: 0 !important;
    }

.customer-details-group-labels {
    min-width: 200px;
}

.customer-details-label {
    color: var(--color-grey-500);
    min-width: 40%
}

.customer-details-value {
    color: var(--color-blue-900);
}

