.pending-stage-list {
    display: grid;
    gap: 0.5rem;
}

.pending-stage-item {
    padding: 0.75rem 1rem;
    border: 1px solid var(--elev-border);
    border-radius: var(--elev-radius);
    background: var(--elev-surface);
}

.pending-stage-item:hover {
    background: var(--elev-bg-pale);
}

.pending-stage-color-preview {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.25rem;
    border: 1px solid var(--elev-border);
    flex-shrink: 0;
}

.pending-stage-item__actions {
    margin-left: auto;
    flex-shrink: 0;
}


.part-image-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.part-thumbnail,
.part-thumbnail-catalog {
    border: 1px solid var(--elev-border);
    border-radius: var(--elev-radius);
    background: var(--elev-surface);
    padding: 0.5rem;
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
}

.part-thumbnail-catalog {
    padding: 0.25rem;
    max-width: 100px;
    max-height: 100px;
    opacity: 0.85;
}

/* Text link is wider than the icon-only actions column (3.5rem). */
.elev-listing-page .orders-table-card .service-orders-table .mud-table-head .mud-table-cell.orders-table-cell--audit-details,
.elev-listing-page .orders-table-card .service-orders-table .mud-table-body .mud-table-cell.orders-table-cell--audit-details {
    width: 6.75rem !important;
    max-width: 6.75rem !important;
    min-width: 6.75rem !important;
    white-space: nowrap;
    text-align: center;
    padding-inline: 0.5rem !important;
    box-sizing: border-box;
}

.audit-log-details-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    gap: 0.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--elev-primary);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-sm-size);
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audit-log-details-link:hover {
    color: var(--elev-text-bold);
}

@media (max-width: 600px) {
    .elev-listing-page .mud-xs-table .mud-table-body .mud-table-cell.orders-table-cell--audit-details,
    .elev-listing-page .mud-sm-table .mud-table-body .mud-table-cell.orders-table-cell--audit-details,
    .elev-listing-page .mud-md-table .mud-table-body .mud-table-cell.orders-table-cell--audit-details {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        text-align: center !important;
    }
}

.audit-log-detail {
    display: grid;
    gap: 1.5rem;
}

.audit-log-detail__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.audit-log-detail__changes {
    display: grid;
    gap: 0.75rem;
}

.audit-log-detail__changes h3 {
    margin: 0;
    color: var(--elev-text-bold);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-sm-size);
    font-weight: 700;
}

.audit-log-detail__empty {
    margin: 0;
    color: var(--elev-muted);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-sm-size);
}

.audit-log-changes {
    overflow: auto;
    border: 1px solid var(--elev-border);
    border-radius: var(--elev-radius);
    background: var(--elev-surface);
}

.audit-log-changes table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.audit-log-changes th,
.audit-log-changes td {
    padding: 0.75rem 1rem;
    text-align: left;
    vertical-align: top;
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-sm-size);
    line-height: 1.35;
    word-break: break-word;
}

.audit-log-changes th {
    background: var(--elev-surface-strong);
    color: var(--elev-gray-900);
    font-weight: 600;
    border-bottom: 1px solid var(--elev-border);
    white-space: nowrap;
}

.audit-log-changes td {
    color: var(--elev-gray-900);
    border-bottom: 1px solid var(--elev-border-soft);
}

.audit-log-changes tbody tr:last-child td {
    border-bottom: 0;
}

.audit-log-changes td.is-old {
    color: var(--elev-muted);
}

.audit-log-changes td.is-new {
    font-weight: 600;
}

@media (max-width: 720px) {
    .audit-log-detail__fields {
        grid-template-columns: 1fr;
    }
}

.assignment-pickers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
    min-width: 0;
}

.assignment-picker {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
}

.assignment-picker h3 {
    margin: 0;
    color: var(--elev-text-bold);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-sm-size);
    font-weight: 700;
}

.assignment-picker__zones {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.assignment-picker__zone {
    display: grid;
    grid-template-rows: auto minmax(12rem, 16rem);
    min-width: 0;
    border: 1px solid var(--elev-border);
    border-radius: var(--elev-radius);
    background: var(--elev-surface);
    overflow: hidden;
}

.assignment-picker__zone-title {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--elev-border);
    background: var(--elev-surface-strong);
    color: var(--elev-gray-900);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-xs-size, 0.75rem);
    font-weight: 600;
}

.assignment-picker__list {
    min-height: 0;
    overflow: auto;
}

.assignment-picker .mud-list-item {
    font-family: var(--elev-font-sans);
}

.assignment-picker__person,
.elev-person-option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    max-width: 100%;
}

.assignment-picker__person .mud-avatar,
.elev-person-option .mud-avatar {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.6875rem;
}

.mud-select-input .elev-person-option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    max-width: 100%;
}

.mud-select-input .elev-person-option .mud-avatar {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.625rem;
}

.assignment-picker__person > span,
.elev-person-option > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oncall-schedule-list {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.oncall-schedule-list__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.oncall-schedule-list__header h3 {
    margin: 0;
    color: var(--elev-text-bold);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-sm-size);
    font-weight: 700;
}

.oncall-schedule-list__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Single frame + full width: listing body uses padding-inline !important */
.oncall-schedule-list__table.orders-table-card {
    margin: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
    width: 100%;
}

.oncall-schedule-list__table.orders-table-card .elev-ui-card__body.orders-table-body,
.oncall-schedule-list__table.orders-table-card .elev-ui-card__body {
    padding: 0 !important;
    padding-inline: 0 !important;
}

.oncall-schedule-list__table .orders-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
}

/* Desktop: two action icons, shrink-wrapped */
.oncall-schedule-list__table .mud-table-head .mud-table-cell.orders-table-cell--actions,
.oncall-schedule-list__table .mud-table-body .mud-table-cell.orders-table-cell--actions {
    width: 5.5rem !important;
    max-width: 5.5rem !important;
    min-width: 5.5rem !important;
    white-space: nowrap;
    text-align: right;
    padding-inline: 0.25rem 0.5rem !important;
    box-sizing: border-box;
}

/* Mud keeps mud-xs-table class always; stacked layout only under 600px */
@media (max-width: 600px) {
    .oncall-schedule-list__table .mud-xs-table .mud-table-body .mud-table-cell.orders-table-cell--actions,
    .oncall-schedule-list__table .mud-sm-table .mud-table-body .mud-table-cell.orders-table-cell--actions,
    .oncall-schedule-list__table .mud-md-table .mud-table-body .mud-table-cell.orders-table-cell--actions {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        justify-content: flex-end;
        text-align: end !important;
    }

    .oncall-schedule-list__table .mud-xs-table .mud-table-body .mud-table-cell.orders-table-cell--actions::before,
    .oncall-schedule-list__table .mud-sm-table .mud-table-body .mud-table-cell.orders-table-cell--actions::before,
    .oncall-schedule-list__table .mud-md-table .mud-table-body .mud-table-cell.orders-table-cell--actions::before {
        content: none;
    }

    .oncall-schedule-list__table .mud-xs-table .mud-table-body .mud-table-cell.orders-table-cell--actions .orders-row-actions,
    .oncall-schedule-list__table .mud-sm-table .mud-table-body .mud-table-cell.orders-table-cell--actions .orders-row-actions,
    .oncall-schedule-list__table .mud-md-table .mud-table-body .mud-table-cell.orders-table-cell--actions .orders-row-actions {
        width: auto;
        margin-inline-start: auto;
    }
}

.area-detail-layout,
.oncall-detail-layout {
    grid-template-columns: 1fr;
}

.area-detail-avatar {
    flex-shrink: 0;
}

.area-detail-layout .service-detail-user-row,
.oncall-detail-layout .service-detail-user-row {
    display: inline-flex;
    width: auto;
    max-width: 100%;
}

.area-detail-layout .service-detail-user-row__name,
.oncall-detail-layout .service-detail-user-row__name {
    flex: 0 1 auto;
}

.area-detail-layout .service-detail-user-row__menu.mud-menu,
.oncall-detail-layout .service-detail-user-row__menu.mud-menu {
    justify-self: start;
}

@media (max-width: 720px) {
    .assignment-pickers,
    .assignment-picker__zones {
        grid-template-columns: minmax(0, 1fr);
    }
}
