/**
 * Modal Design System overrides
 * Provides consistent modal styling across the application
 */

/* Modal title styling */
.modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff; /* White color for better contrast on the blue header */
}

/* Modal header consistent padding */
.modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--light-border-color, #eaedf2);
  background-color: var(--primary-blue, #364899);
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

/* Modal body consistent padding */
.modal-body {
  padding: 1.5rem;
}

/* Modal footer consistent padding */
.modal-footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--light-border-color, #eaedf2);
}

/* Modal content rounded corners */
.modal-content {
  border-radius: 0.5rem;
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Modal default sizes */
.modal-sm {
  max-width: 400px;
}

.modal-lg {
  max-width: 800px;
}

.modal-xl {
  max-width: 1140px;
}

/* Custom scrollbar styling for modal body (preserving design system) */
.modal-body::-webkit-scrollbar {
  width: 8px;
}

.modal-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Ensure form elements in modal body don't break layout */
.modal-body .form-control,
.modal-body .form-select {
  max-width: 100%;
}

/* Modal animation - restore Bootstrap default */
.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -50px);
}

.modal.show .modal-dialog {
  transform: translate(0, 0);
}

/* Close button styling */
.modal .btn-close {
  opacity: 0.75;
  transition: opacity 0.2s;
  filter: invert(1) brightness(200%); /* Make the close button white */
}

.modal .btn-close:hover {
  opacity: 1;
}

/* Modal header additional styling for elements within */
.modal-header .heading-h3,
.modal-header h3 {
  color: #ffffff;
  margin-bottom: 0;
}

.modal-header .heading-h2,
.modal-header h2 {
  color: #ffffff;
  margin-bottom: 0;
}