.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid #e9ecef; .modal-title { margin: 0; font-size: 1.25rem; font-weight: 500; } .close { padding: 0; background: transparent; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; color: #6c757d; &:hover { color: #495057; } } } .modal-body { padding: 1rem; .modal-card { border: none; border-radius: 0.5rem; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); max-height: 80vh; overflow-y: auto; .card-body { padding: 1.5rem; } } } .case-form { .form-row { display: flex; flex-wrap: wrap; margin: 0 -0.5rem; margin-bottom: 1rem; .form-group { flex: 1 0 calc(50% - 1rem); margin: 0 0.5rem; margin-bottom: 1rem; label { display: block; margin-bottom: 0.5rem; font-weight: 500; &.required-field::after { content: " *"; color: #dc3545; } } .form-control { width: 100%; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; &:focus { color: #495057; background-color: #fff; border-color: #80bdff; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } &.is-invalid { border-color: #dc3545; &:focus { box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); } } } textarea.form-control { min-height: 100px; resize: vertical; } .invalid-feedback { width: 100%; margin-top: 0.25rem; font-size: 80%; color: #dc3545; } } } .section { margin-bottom: 2rem; padding: 1rem; background-color: #f8f9fa; border-radius: 0.25rem; .section-title { margin-top: 0; margin-bottom: 1rem; font-size: 1.1rem; font-weight: 500; color: #495057; border-bottom: 1px solid #dee2e6; padding-bottom: 0.5rem; } .form-row { margin-bottom: 0; .form-group { flex: 1 0 calc(33.333% - 1rem); } } } .form-actions { display: flex; justify-content: flex-end; margin-top: 1.5rem; .btn { padding: 0.5rem 1.5rem; font-size: 1rem; line-height: 1.5; border-radius: 0.25rem; cursor: pointer; transition: all 0.15s ease-in-out; &.btn-primary { color: #fff; background-color: #007bff; border-color: #007bff; &:hover { background-color: #0069d9; border-color: #0062cc; } &:focus { box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } } } } }