.continuation-sheet-container { padding: 0.5rem; display: flex; flex-direction: column; gap: 24px; .actions-bar { clear: both; margin-bottom: -16px; mat-slide-toggle { transform: scale(0.8); margin-left: -0.5rem; } button { float: right; } } .table-container { position: relative; overflow: auto; border-radius: 8px; .loading-shade { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.7); z-index: 1; display: flex; align-items: center; justify-content: center; } mat-table { width: 100%; mat-icon { cursor: pointer; transition: all 0.2s ease; &:hover { transform: scale(1.1); } } .mat-column-actions { width: 120px; text-align: center; } } .no-data-message { text-align: center; padding: 0.9rem; color: rgba(0, 0, 0, 0.54); mat-icon { font-size: 1rem; width: 1rem; height: 1rem; margin-bottom: -3px; } } mat-paginator { border-top: 1px solid rgba(0, 0, 0, 0.12); border-radius: 0 0 8px 8px; padding-top: 4px; } } .form-container { background-color: white; padding: 24px; border-radius: 8px; margin-top: 16px; .form-header { // margin-bottom: 24px; h3 { margin: 0; color: var(--mat-sys-primary); font-weight: 500; } } form { display: flex; flex-direction: column; gap: 16px; .form-row { display: flex; gap: 16px; align-items: start; mat-form-field { flex: 1; } mat-label { font-size: 0.875rem; } } .form-error { margin-top: -16px; margin-bottom: 8px; display: block; color: var(--mat-form-field-error-text-color, var(--mat-sys-error)); font-size: 12px; } .form-actions { display: flex; justify-content: flex-end; gap: 16px; margin-top: 16px; } .horizontal-group { display: flex; gap: 16px; flex-wrap: wrap; } ::ng-deep .mat-radio-button.mat-accent .mat-radio-outer-circle { border-color: #3f51b5; } ::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle { background-color: #3f51b5; } .dollar-prefix { padding-left: 4px; } .readonly-section { padding-top: 0.5rem; border-top: 1px solid #eee; .readonly-fields { display: flex; gap: 2rem; .field-column { flex: 1; display: flex; flex-direction: column; gap: 1.5rem; } } .readonly-field { label { display: block; font-size: 0.875rem; color: #666; margin-bottom: 0.25rem; } .readonly-value { padding: 0.25rem; font-size: 0.875rem; display: flex; align-items: center; } } } } } } // Responsive adjustments @media (max-width: 768px) { .continuation-sheet-container { padding: 16px; .form-row { flex-direction: column; gap: 16px !important; } } }