/* Modal Dark Mode Fixes */

/* Bootstrap Modal Dark Mode Overrides */
.dark-mode .modal-content {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

.dark-mode .modal-header {
    background-color: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

.dark-mode .modal-title {
    color: var(--text-color) !important;
}

.dark-mode .modal-body {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}

.dark-mode .modal-footer {
    background-color: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-color) !important;
}

/* Form Elements in Modals */
.dark-mode .modal .form-label {
    color: var(--text-color) !important;
}

.dark-mode .modal .form-control,
.dark-mode .modal .form-select {
    background-color: var(--bg-color) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

.dark-mode .modal .form-control:focus,
.dark-mode .modal .form-select:focus {
    background-color: var(--bg-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(140, 82, 255, 0.25) !important;
}

.dark-mode .modal .form-control::placeholder {
    color: var(--text-muted) !important;
}

.dark-mode .modal .form-text {
    color: var(--text-muted) !important;
}

.dark-mode .modal .form-check-label {
    color: var(--text-color) !important;
}

.dark-mode .modal .form-check-input {
    background-color: var(--bg-color) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode .modal .form-check-input:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Textarea specific styling */
.dark-mode .modal textarea.form-control {
    background-color: var(--bg-color) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    resize: vertical;
}

.dark-mode .modal textarea.form-control:focus {
    background-color: var(--bg-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(140, 82, 255, 0.25) !important;
}

/* Select dropdown styling */
.dark-mode .modal select.form-select option {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}

/* Button styling in modals */
.dark-mode .modal .btn-secondary {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

.dark-mode .modal .btn-secondary:hover {
    background-color: var(--border-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Close button styling */
.dark-mode .modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.dark-mode .modal .btn-close-white {
    filter: none;
}

/* Alert styling in modals */
.dark-mode .modal .alert {
    border: 1px solid var(--border-color) !important;
}

.dark-mode .modal .alert-info {
    background-color: rgba(140, 82, 255, 0.1) !important;
    border-color: rgba(140, 82, 255, 0.3) !important;
    color: var(--text-color) !important;
}

.dark-mode .modal .alert-warning {
    background-color: rgba(255, 193, 7, 0.1) !important;
    border-color: rgba(255, 193, 7, 0.3) !important;
    color: var(--text-color) !important;
}

.dark-mode .modal .alert-danger {
    background-color: rgba(220, 53, 69, 0.1) !important;
    border-color: rgba(220, 53, 69, 0.3) !important;
    color: var(--text-color) !important;
}

.dark-mode .modal .alert-success {
    background-color: rgba(40, 167, 69, 0.1) !important;
    border-color: rgba(40, 167, 69, 0.3) !important;
    color: var(--text-color) !important;
}

/* Table styling in modals */
.dark-mode .modal .table {
    color: var(--text-color) !important;
}

.dark-mode .modal .table th {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

.dark-mode .modal .table td {
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

.dark-mode .modal .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Badge styling in modals */
.dark-mode .modal .badge {
    color: white !important;
}

/* Code/Pre styling in modals */
.dark-mode .modal pre,
.dark-mode .modal code {
    background-color: var(--bg-color) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Input group styling */
.dark-mode .modal .input-group-text {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Card styling in modals */
.dark-mode .modal .card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode .modal .card-header {
    background-color: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

.dark-mode .modal .card-body {
    color: var(--text-color) !important;
}

/* List group styling in modals */
.dark-mode .modal .list-group-item {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Dropdown styling in modals */
.dark-mode .modal .dropdown-menu {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode .modal .dropdown-item {
    color: var(--text-color) !important;
}

.dark-mode .modal .dropdown-item:hover {
    background-color: var(--bg-secondary) !important;
    color: var(--text-color) !important;
}

/* Spinner styling in modals */
.dark-mode .modal .spinner-border {
    color: var(--primary-color) !important;
}

/* Progress bar styling in modals */
.dark-mode .modal .progress {
    background-color: var(--bg-secondary) !important;
}

.dark-mode .modal .progress-bar {
    background-color: var(--primary-color) !important;
}

/* Nav tabs styling in modals */
.dark-mode .modal .nav-tabs {
    border-bottom: 1px solid var(--border-color) !important;
}

.dark-mode .modal .nav-tabs .nav-link {
    color: var(--text-color) !important;
    border: 1px solid transparent !important;
}

.dark-mode .modal .nav-tabs .nav-link:hover {
    border-color: var(--border-color) !important;
    color: var(--primary-color) !important;
}

.dark-mode .modal .nav-tabs .nav-link.active {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) var(--border-color) var(--card-bg) !important;
    color: var(--text-color) !important;
}

/* Tab content styling in modals */
.dark-mode .modal .tab-content {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}

/* Accordion styling in modals */
.dark-mode .modal .accordion-item {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode .modal .accordion-header button {
    background-color: var(--bg-secondary) !important;
    color: var(--text-color) !important;
    border: none !important;
}

.dark-mode .modal .accordion-body {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}

/* Pagination styling in modals */
.dark-mode .modal .pagination .page-link {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

.dark-mode .modal .pagination .page-link:hover {
    background-color: var(--bg-secondary) !important;
    color: var(--primary-color) !important;
}

.dark-mode .modal .pagination .page-item.active .page-link {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}

/* Contact Modal - CAPTCHA Box Dark Mode */
.dark-mode #contactModal .captcha-box {
    background: linear-gradient(135deg, #2c3034 0%, #1e2432 100%) !important;
    border-color: var(--border-color) !important;
}

/* Contact Modal - Button Hover Effects */
.dark-mode #contactModal .btn-primary:hover {
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.45) !important;
}

/* Contact Modal - Success Alert */
.dark-mode #contactModal .alert-success {
    background-color: rgba(40, 167, 69, 0.15) !important;
    border-color: rgba(40, 167, 69, 0.3) !important;
    color: #9ef0b8 !important;
}