/* Modal Fixes for Light and Dark Modes */

/* Light mode modal styling (explicit) */
.modal-content {
  background-color: #ffffff;
  color: #212529;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.modal-header {
  background-color: #ffffff;
  color: #212529;
  border-bottom: 1px solid #dee2e6;
}

.modal-body {
  background-color: #ffffff;
  color: #212529;
}

.modal-footer {
  background-color: #ffffff;
  border-top: 1px solid #dee2e6;
}

/* Light mode form controls in modals */
.modal .form-control,
.modal .form-select {
  background-color: #fff;
  color: #212529;
  border: 1px solid #ced4da;
}

.modal .form-control:focus,
.modal .form-select:focus {
  background-color: #fff;
  color: #212529;
  border-color: #871a67;
  box-shadow: 0 0 0 0.2rem rgba(135, 26, 103, 0.25);
}

.modal label {
  color: #212529;
}

.modal input[type="file"] {
  color: #212529;
}

/* Dark mode modal styling */
html.dark-mode .modal-content {
  background-color: #1a1a1a !important;
  color: #e5e5e5 !important;
  border: 1px solid #444 !important;
}

html.dark-mode .modal-header {
  background-color: #1a1a1a !important;
  color: #e5e5e5 !important;
  border-bottom: 1px solid #444 !important;
}

html.dark-mode .modal-body {
  background-color: #1a1a1a !important;
  color: #e5e5e5 !important;
}

html.dark-mode .modal-footer {
  background-color: #1a1a1a !important;
  border-top: 1px solid #444 !important;
}

/* Dark mode form controls in modals */
html.dark-mode .modal .form-control,
html.dark-mode .modal .form-select {
  background-color: #2a2a2a !important;
  color: #e5e5e5 !important;
  border: 1px solid #444 !important;
}

html.dark-mode .modal .form-control:focus,
html.dark-mode .modal .form-select:focus {
  background-color: #2a2a2a !important;
  color: #e5e5e5 !important;
  border-color: #871a67 !important;
  box-shadow: 0 0 0 0.2rem rgba(135, 26, 103, 0.25) !important;
}

html.dark-mode .modal label {
  color: #e5e5e5 !important;
}

html.dark-mode .modal input[type="file"] {
  color: #e5e5e5 !important;
}

html.dark-mode .modal input[type="file"]::file-selector-button {
  background-color: #2a2a2a !important;
  color: #e5e5e5 !important;
  border: 1px solid #444 !important;
  padding: 0.375rem 0.75rem;
  margin-right: 0.5rem;
}

/* Modal backdrop */
.modal-backdrop {
  background-color: #000;
}

html.dark-mode .modal-backdrop {
  background-color: #000;
  opacity: 0.75 !important;
}

/* Close button fixes */
.modal .btn-close {
  opacity: 0.5;
}

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

html.dark-mode .modal .btn-close {
  filter: invert(1);
  opacity: 0.7;
}

html.dark-mode .modal .btn-close:hover {
  opacity: 0.9;
}

/* Ensure proper button styling in modals */
.modal-footer .btn {
  min-width: 100px;
}

/* Modal button consistency - align with site-wide button pattern */
.modal-footer .btn-primary {
  /* Primary action buttons stay solid as per user preference */
}

/* Outline secondary buttons in modals */
.modal-footer .btn-outline-secondary {
  background-color: transparent !important;
  color: #6c757d !important;
  border: 2px solid #6c757d !important;
}

.modal-footer .btn-outline-secondary:hover {
  background-color: #6c757d !important;
  color: white !important;
  border-color: #6c757d !important;
}

/* Dark mode outline secondary buttons */
html.dark-mode .modal-footer .btn-outline-secondary {
  background-color: transparent !important;
  color: #9ca3af !important;
  border-color: #9ca3af !important;
}

html.dark-mode .modal-footer .btn-outline-secondary:hover {
  background-color: #6c757d !important;
  color: white !important;
  border-color: #6c757d !important;
}

/* For any solid secondary buttons that might exist */
.modal-footer .btn-secondary,
.modal-footer .btn-default {
  /* Convert to outline for consistency */
  background-color: transparent !important;
  color: #6c757d !important;
  border: 2px solid #6c757d !important;
}

.modal-footer .btn-secondary:hover,
.modal-footer .btn-default:hover {
  background-color: #6c757d !important;
  color: white !important;
}

html.dark-mode .modal-footer .btn-secondary,
html.dark-mode .modal-footer .btn-default {
  color: #9ca3af !important;
  border-color: #9ca3af !important;
}

html.dark-mode .modal-footer .btn-secondary:hover,
html.dark-mode .modal-footer .btn-default:hover {
  background-color: #6c757d !important;
  color: white !important;
  border-color: #6c757d !important;
}

/* Fix any text that might be hard to read */
html.dark-mode .modal .text-muted {
  color: #9ca3af !important;
}

html.dark-mode .modal .text-danger {
  color: #ef4444 !important;
}

html.dark-mode .modal .text-success {
  color: #10b981 !important;
}

html.dark-mode .modal .text-info {
  color: #22d3ee !important;
}

html.dark-mode .modal .text-warning {
  color: #fbbf24 !important;
}

/* Ensure proper heading colors */
html.dark-mode .modal h1,
html.dark-mode .modal h2,
html.dark-mode .modal h3,
html.dark-mode .modal h4,
html.dark-mode .modal h5,
html.dark-mode .modal h6 {
  color: #e5e5e5 !important;
}

/* Fix any custom modal classes */
html.dark-mode .modal .modal-title {
  color: #e5e5e5 !important;
}

/* Progress bars in modals */
html.dark-mode .modal .progress {
  background-color: #2a2a2a !important;
}

/* Alert boxes in modals */
html.dark-mode .modal .alert {
  background-color: #2a2a2a !important;
  border-color: #444 !important;
  color: #e5e5e5 !important;
}

html.dark-mode .modal .alert-info {
  background-color: #1e3a5f !important;
  border-color: #2563eb !important;
  color: #93c5fd !important;
}

html.dark-mode .modal .alert-warning {
  background-color: #451a03 !important;
  border-color: #f59e0b !important;
  color: #fbbf24 !important;
}

html.dark-mode .modal .alert-danger {
  background-color: #450a0a !important;
  border-color: #dc2626 !important;
  color: #fca5a5 !important;
}

html.dark-mode .modal .alert-success {
  background-color: #052e16 !important;
  border-color: #16a34a !important;
  color: #86efac !important;
}