/* Work Estimate Approval field (panel column + detail) */
.work-estimate-approval {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

/* flex-item blockification stretches the label's own line-box height,
   adding ambient line-height on top of its padding - pin it back to
   `normal` so the pill matches the plain inline Status badge's height. */
.work-estimate-approval .label {
    line-height: normal;
}

.work-estimate-approval-recorded {
    font-size: 11px;
    color: var(--text-muted-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.work-estimate-approval-note {
    font-size: 12px;
    color: var(--text-muted-color);
    margin-top: 8px;
}

.work-estimate-approval-cancel {
    font-size: 12px;
}

/* Work Estimates panel footer */
.work-estimate-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--default-border-color);
}

.work-estimate-footer-detail {
    font-size: 13px;
    color: var(--text-gray-color);
}

/* Work Estimates panel: Approval/Status/Cancel columns shrink to their content width
   instead of splitting the table's remaining space evenly with Name - core's table is
   `table-layout: fixed`, which ignores content size for any column without an explicit
   width, so this also switches the table back to `auto` and uses the standard
   width:1%+nowrap shrink-to-content trick on these 3 columns. Name (the only column left
   unconstrained) absorbs whatever width they give up, which is what pushes these three
   columns over to the table's right edge. */
.panel[data-name="WorkEstimates"] .list-container table {
    table-layout: auto;
}
.panel[data-name="WorkEstimates"] .list-container table th[data-name="approval"],
.panel[data-name="WorkEstimates"] .list-container table th[data-name="status"],
.panel[data-name="WorkEstimates"] .list-container table th[data-name="cancelAction"],
.panel[data-name="WorkEstimates"] .list-container table td[data-name="approval"],
.panel[data-name="WorkEstimates"] .list-container table td[data-name="status"],
.panel[data-name="WorkEstimates"] .list-container table td[data-name="cancelAction"] {
    width: 1%;
    white-space: nowrap;
}

/* Name's nowrap description excerpt would otherwise report its full unwrapped text as this
   column's minimum content width to the auto-layout algorithm, growing the table past the
   panel and pushing the columns after it out of view - the width:100%/max-width:1px pairing
   is the standard intrinsic-sizing hack that lets an auto-layout column shrink below its
   content's natural width instead, so overflow:hidden can actually clip it. */
.panel[data-name="WorkEstimates"] .list-container table td[data-name="name"] {
    max-width: 1px;
    width: 100%;
}
.panel[data-name="WorkEstimates"] .list-container table td[data-name="name"] > a.link,
.panel[data-name="WorkEstimates"] .list-container table td[data-name="name"] > span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Case Approval field (main panel) */
.approval-rollup-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* flex-item blockification stretches the label's own line-box height,
   adding ambient line-height on top of its padding - pin it back to
   `normal` so the pill matches the plain inline Status badge's height. */
.approval-rollup-field .label {
    line-height: normal;
}

.approval-rollup-detail {
    font-size: 12px;
}