/* Глобальные стили карточек деталей: WebClient не подключает *.styles.css,
   поэтому isolated .razor.css из RCL на страницу не попадает. */

.details-card-section {
    --details-card-accent: var(--mud-palette-dark);
    border-radius: 14px !important;
    padding: 0 !important;
    overflow: hidden;
    background: var(--mud-palette-gray-light) !important;
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent) !important;
    box-shadow:
        inset 4px 0 0 var(--details-card-accent),
        0 8px 20px color-mix(in srgb, var(--mud-palette-black) 28%, transparent) !important;
}

.details-card-section--neutral {
    --details-card-accent: var(--mud-palette-dark);
}

.details-card-section--main {
    --details-card-accent: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, var(--mud-palette-gray-light)) !important;
    border-color: color-mix(in srgb, var(--mud-palette-primary) 42%, transparent) !important;
}

.details-card-section--links {
    --details-card-accent: var(--mud-palette-info);
    background: color-mix(in srgb, var(--mud-palette-info) 18%, var(--mud-palette-gray-light)) !important;
    border-color: color-mix(in srgb, var(--mud-palette-info) 42%, transparent) !important;
}

.details-card-section--status {
    --details-card-accent: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 16%, var(--mud-palette-gray-light)) !important;
    border-color: color-mix(in srgb, var(--mud-palette-warning) 42%, transparent) !important;
}

.details-card-section--tabs {
    --details-card-accent: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-dark) 22%, var(--mud-palette-gray-light)) !important;
    border-color: color-mix(in srgb, var(--mud-palette-text-primary) 24%, transparent) !important;
}

.details-card-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px 10px 16px;
    background: color-mix(in srgb, var(--mud-palette-black) 22%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 14%, transparent);
}

.details-card-section__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.details-card-section__actions {
    flex-shrink: 0;
}

.details-card-section__body {
    min-width: 0;
    padding: 14px 16px 16px;
}