.detail-change-dialog { width: min(820px, calc(100vw - 32px)); max-width: min(820px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow: auto; border: 1px solid #cfdfe5; border-radius: 20px; padding: 30px; color: #16324f; box-shadow: 0 22px 80px #16324f35; }
.detail-change-dialog::backdrop { background: #16324f82; }
.detail-change-dialog-heading { margin-bottom: 24px; }
.detail-change-dialog-heading h2 { margin: 8px 0; font-size: 25px; }
.detail-change-dialog-heading p { margin: 8px 0; }
.detail-change-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.detail-change-fields .field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.detail-change-fields input { width: 100%; min-width: 0; border: 1px solid #bdd1dc; border-radius: 9px; padding: 12px; background: white; color: #16324f; }
.detail-change-fields input:disabled { background: #f3f6f8; color: #435e70; opacity: 1; }
.detail-change-fields small { color: #697d92; font-weight: 400; }
.detail-change-badge { display: inline-flex; width: fit-content; flex-shrink: 0; padding: 7px 11px; border-radius: 8px; background: #fff2dc; color: #74511a; font-size: 12px; font-weight: 750; line-height: 1.4; }
.detail-change-badge.is-reviewed { background: #e1f1ed; color: #23604f; }
.client-portal .portal-navigation a small.detail-update-tab-pending { display: block; width: fit-content; margin-top: 6px; padding: 4px 6px; border-radius: 5px; background: #fff2dc; color: #74511a; font-size: 11px; font-weight: 750; white-space: normal; }
.detail-change-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; border-top: 1px solid #e0e8ee; padding-top: 18px; }
.detail-change-actions button.primary { background: #087e8b; border-color: #087e8b; }
.detail-change-feedback { margin: 16px 0; overflow-wrap: anywhere; }
.detail-change-feedback:empty { margin: 0; }
.detail-change-feedback[role="alert"] { color: #9f3434; }
.detail-change-notice { border-left: 3px solid #d8a754; padding: 10px 14px; background: #fff6e7; color: #705021; }
.detail-change-choices input:disabled + span { color: #748596; }
.detail-change-note { gap: 24px; }
.detail-change-note p { margin: 5px 0 0; }
.detail-change-details dd { overflow-wrap: anywhere; }
.detail-change-list-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.detail-change-list-heading p { margin: 5px 0; }
.detail-change-request-list { border-top: 1px solid #dce6ec; }
.detail-change-request { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; border-bottom: 1px solid #dce6ec; }
.detail-change-request h3 { margin: 0; font-size: 16px; }
.detail-change-request p { margin: 7px 0 10px; }
.detail-change-row { padding: 20px 0; border-top: 1px solid #dce6ec; }
.detail-change-row h3 { margin: 0 0 12px; font-size: 16px; }
.detail-change-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.detail-change-comparison > div { background: #f2f6f8; border-radius: 10px; padding: 14px 16px; }
.detail-change-comparison > div:nth-child(2) { background: #e9f5f5; }
.detail-change-comparison span { font-size: 12px; font-weight: 750; color: #476677; }
.detail-change-comparison p { margin: 6px 0 0; color: #16324f; overflow-wrap: anywhere; white-space: pre-wrap; }
.detail-change-comparison .detail-change-current { grid-column: 1 / -1; background: #fff4e3; }
.detail-change-choices { border: 0; padding: 0; margin: 15px 0 0; display: flex; flex-wrap: wrap; gap: 14px 24px; }
.detail-change-choices label { display: flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 650; }
.detail-change-choices input[type="radio"] { width: 18px; min-width: 18px; height: 18px; min-height: 18px; padding: 0; margin: 0; flex: 0 0 18px; accent-color: #087e8b; }
.detail-change-decision { margin-bottom: 0; color: #23604f; font-weight: 750; }
.detail-change-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 600px) { .detail-change-dialog { padding: 22px 18px; max-height: calc(100dvh - 24px); } .detail-change-fields, .detail-change-comparison { grid-template-columns: 1fr; } .detail-change-request, .detail-change-list-heading { align-items: flex-start; flex-direction: column; gap: 14px; } .detail-change-actions button { flex-grow: 1; } .detail-change-note { align-items: flex-start; } }