/* Dark Mode Contrast Fixes for Leftover Labs */

/* Fix for alert-info in both modes */
[data-theme="dark"] .alert {
    color: white !important;
}

.alert.alert-info {
    background-color: #7a9878 !important; /* Adjusted info color to match theme */
    color: #ffffff !important; /* White text for better readability */
    border-color: #5d8c6f !important; /* Darker border for better contrast */
}

[data-theme="dark"] .alert.alert-info {
    background-color: #5d8c6f !important; /* Darker green for better contrast in dark mode */
    color: #ffffff !important; /* White text for better readability */
    border-color: #3a4d43 !important; /* Dark border matching card-border */
}

/* Fix for badges in dark mode */
[data-theme="dark"] .badge {
    color: #ffffff !important; /* White text for better readability */
}

[data-theme="dark"] .badge.bg-success {
    background-color: #2c6e49 !important; /* Darker green for better contrast */
    color: #ffffff !important; /* White text for better readability */
}

[data-theme="dark"] .badge.bg-primary {
    background-color: #3d7c5f !important; /* Darker primary color for better contrast */
    color: #ffffff !important; /* White text for better readability */
}

/* Fix for btn-outline-info in both modes */
.btn-outline-info {
    color: #4d7c5f !important; /* Primary color for info buttons */
    border-color: #4d7c5f !important;
    background-color: transparent !important;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active {
    color: #ffffff !important; /* White text for contrast on hover */
    background-color: #4d7c5f !important; /* Primary color background on hover */
    border-color: #4d7c5f !important;
}

[data-theme="dark"] .btn-outline-info {
    color: #8bc2a8 !important; /* Lighter green for better contrast in dark mode */
    border-color: #8bc2a8 !important;
    background-color: transparent !important;
}

[data-theme="dark"] .btn-outline-info:hover,
[data-theme="dark"] .btn-outline-info:focus,
[data-theme="dark"] .btn-outline-info:active {
    color: #1a2721 !important; /* Dark background color for text on hover */
    background-color: #8bc2a8 !important; /* Lighter green background on hover */
    border-color: #8bc2a8 !important;
}

/* Fix for btn-outline-success in both modes */
.btn-outline-success {
    color: #2c6e49 !important; /* Darker green for better contrast in light mode */
    border-color: #2c6e49 !important;
    background-color: transparent !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
    color: #ffffff !important; /* White text for contrast on hover */
    background-color: #2c6e49 !important; /* Darker green background on hover */
    border-color: #2c6e49 !important;
}

[data-theme="dark"] .btn-outline-success {
    color: #6bd098 !important; /* Brighter green for better contrast in dark mode */
    border-color: #6bd098 !important;
    background-color: transparent !important;
}

[data-theme="dark"] .btn-outline-success:hover,
[data-theme="dark"] .btn-outline-success:focus,
[data-theme="dark"] .btn-outline-success:active {
    color: #1a2721 !important; /* Dark background color for text on hover */
    background-color: #6bd098 !important; /* Brighter green background on hover */
    border-color: #6bd098 !important;
}

/* Fix for outline buttons in dark mode */
[data-theme="dark"] .btn-outline-primary {
    color: #8bc2a8 !important; /* Lighter green for better contrast in dark mode */
    border-color: #8bc2a8 !important;
    background-color: transparent !important;
}

[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-outline-primary:focus,
[data-theme="dark"] .btn-outline-primary:active {
    color: #1a2721 !important; /* Dark background color for text on hover */
    background-color: #8bc2a8 !important; /* Lighter green background on hover */
    border-color: #8bc2a8 !important;
}

[data-theme="dark"] .btn-outline-secondary {
    color: #a0d6bc !important; /* Even lighter color for secondary buttons */
    border-color: #a0d6bc !important;
    background-color: transparent !important;
}

[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-secondary:focus,
[data-theme="dark"] .btn-outline-secondary:active {
    color: #1a2721 !important; /* Dark background color for text on hover */
    background-color: #a0d6bc !important; /* Lighter green background on hover */
    border-color: #a0d6bc !important;
}

/* Fix for dropdown-menu in dark mode */
[data-theme="dark"] .dropdown-menu {
    background-color: #2a3c33 !important; /* Dark background matching card-bg */
    border-color: #3a4d43 !important; /* Dark border matching card-border */
}

[data-theme="dark"] .dropdown-menu .dropdown-item {
    color: #f5f7f4 !important; /* Light text color for better readability */
}

[data-theme="dark"] .dropdown-menu .dropdown-item:hover,
[data-theme="dark"] .dropdown-menu .dropdown-item:focus {
    background-color: #3c605b !important; /* Primary color for hover state */
    color: #ffffff !important; /* White text for better contrast on hover */
}

[data-theme="dark"] .dropdown-menu .dropdown-divider {
    border-color: #3a4d43 !important; /* Dark border matching card-border */
}

/* Fix for monitoring dashboard graphs in dark mode */
[data-theme="dark"] canvas {
    filter: invert(0.85) hue-rotate(180deg); /* Invert colors for better contrast */
}

/* Ensure text in chart containers has good contrast */
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
    color: #f5f7f4 !important; /* Light text color for better readability */
    border-bottom: 1px solid #5d8c6f !important;
    background-color: #2a3e32 !important;
}

/* Fix for form-select in dark mode (used in graph timeframe selector) */
[data-theme="dark"] .form-select {
    background-color: #2a3c33 !important;
    color: #f5f7f4 !important;
    border-color: #3a4d43 !important;
}

/* Fix for table in dark mode (used in datasets list) */
[data-theme="dark"] .table {
    color: #f5f7f4 !important;
}

[data-theme="dark"] .table thead th {
    border-color: #3a4d43 !important;
    background-color: #1a2721 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .table tbody {
    background-color: #3a4d43 !important;
}

[data-theme="dark"] .table td {
    border-color: #3a4d43 !important;
}

/* Fix for text-muted in dark mode */
[data-theme="dark"] .text-muted {
    color: #a0d6bc !important; /* Lighter color for better contrast */
}

/* Fix for select2 dropdown in dark mode */
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: #1a2721 !important; /* Darker background for input fields */
    border-color: #3a4d43 !important; /* Dark border matching card-border */
    color: #f5f7f4 !important; /* Light text color for better readability */
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #f5f7f4 !important; /* Light text color for better readability */
}

[data-theme="dark"] .select2-dropdown {
    background-color: #2a3c33 !important; /* Dark background matching card-bg */
    border-color: #3a4d43 !important; /* Dark border matching card-border */
}

[data-theme="dark"] .select2-container--default .select2-results__option {
    color: #f5f7f4 !important; /* Light text color for better readability */
}

[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #5d8c6f !important; /* Primary color for highlighted option */
    color: #ffffff !important; /* White text for better contrast */
}

[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #3a4d43 !important; /* Darker background for selected option */
}

/* Fix for datepicker in dark mode */
[data-theme="dark"] .datepicker-dropdown {
    background-color: #2a3c33 !important; /* Dark background matching card-bg */
    border-color: #3a4d43 !important; /* Dark border matching card-border */
}

[data-theme="dark"] .datepicker table tr td,
[data-theme="dark"] .datepicker table tr th {
    color: #f5f7f4 !important; /* Light text color for better readability */
}

[data-theme="dark"] .datepicker table tr td.active,
[data-theme="dark"] .datepicker table tr td.active:hover {
    background-color: #5d8c6f !important; /* Primary color for active date */
    color: #ffffff !important; /* White text for better contrast */
}

[data-theme="dark"] .datepicker table tr td.day:hover {
    background-color: #3a4d43 !important; /* Darker background for hover state */
}

/* Fix for file input in dark mode */
[data-theme="dark"] input[type="file"] {
    background-color: #1a2721 !important; /* Darker background for input fields */
    border-color: #3a4d43 !important; /* Dark border matching card-border */
    color: #f5f7f4 !important; /* Light text color for better readability */
}

[data-theme="dark"] input[type="file"]:focus {
    border-color: #5d8c6f !important; /* Primary color for focus state */
    box-shadow: 0 0 0 0.25rem rgba(93, 140, 111, 0.25) !important; /* Subtle glow effect */
}

/* Fix for form elements in dark mode */
[data-theme="dark"] .form-container .form-title h2 {
    color: #f5f7f4 !important; /* Light text color for better readability */
}

[data-theme="dark"] .form-container .form-title p {
    color: #a0d6bc !important; /* Lighter color for better contrast */
}

[data-theme="dark"] .form-container .form-title {
    border-bottom-color: #3a4d43 !important; /* Dark border matching card-border */
}

[data-theme="dark"] .crisp-form {
    background-color: #2a3c33 !important; /* Dark background matching card-bg */
    border-color: #3a4d43 !important; /* Dark border matching card-border */
}

[data-theme="dark"] .crisp-form label {
    color: #f5f7f4 !important; /* Light text color for better readability */
}

[data-theme="dark"] .crisp-form .form-control {
    background-color: #1a2721 !important; /* Darker background for input fields */
    border-color: #3a4d43 !important; /* Dark border matching card-border */
    color: #f5f7f4 !important; /* Light text color for better readability */
}

[data-theme="dark"] .crisp-form .form-control:focus {
    border-color: #5d8c6f !important; /* Primary color for focus state */
    box-shadow: 0 0 0 0.25rem rgba(93, 140, 111, 0.25) !important; /* Subtle glow effect */
}

/* Fix for nav-link hover and non-selected states */
.navbar .navbar-nav .nav-item.active .nav-link:not(.btn),
.navbar .navbar-nav .nav-item .nav-link:not(.btn):focus,
.navbar .navbar-nav .nav-item .nav-link:not(.btn):hover,
.navbar .navbar-nav .nav-item .nav-link:not(.btn):active {
    color: #2c6e49 !important; /* Darker green for better contrast in light mode */
}

.navbar.bg-white .nav-item.active .nav-link:not(.btn),
.navbar.bg-white .nav-item .nav-link:not(.btn):focus,
.navbar.bg-white .nav-item .nav-link:not(.btn):hover,
.navbar.bg-white .nav-item .nav-link:not(.btn):active {
    color: #2c6e49 !important; /* Darker green instead of blue */
}

.navbar .navbar-nav .nav-link:not(.btn) {
    color: #4d7c5f !important; /* Primary color instead of gray */
}

[data-theme="dark"] .navbar .navbar-nav .nav-item.active .nav-link:not(.btn),
[data-theme="dark"] .navbar .navbar-nav .nav-item .nav-link:not(.btn):focus,
[data-theme="dark"] .navbar .navbar-nav .nav-item .nav-link:not(.btn):hover,
[data-theme="dark"] .navbar .navbar-nav .nav-item .nav-link:not(.btn):active {
    color: #a0d6bc !important; /* Lighter green for better contrast in dark mode */
}

[data-theme="dark"] .navbar.bg-white .nav-item.active .nav-link:not(.btn),
[data-theme="dark"] .navbar.bg-white .nav-item .nav-link:not(.btn):focus,
[data-theme="dark"] .navbar.bg-white .nav-item .nav-link:not(.btn):hover,
[data-theme="dark"] .navbar.bg-white .nav-item .nav-link:not(.btn):active {
    color: #a0d6bc !important; /* Lighter green instead of blue */
}

[data-theme="dark"] .navbar .navbar-nav .nav-link:not(.btn) {
    color: #8bc2a8 !important; /* Lighter green instead of gray */
}

/* Fix for Bootstrap utility classes to match the theme */

[data-theme="dark"] .badge {
    color: #ffffff !important; /* White text for better contrast */
}

[data-theme="dark"] .bg-primary {
    background-color: #5d8c6f !important; /* Adjusted primary color for dark mode */
}

[data-theme="dark"] .bg-info {
    background-color: #7a9878 !important; /* Adjusted info color to match theme */
    color: black !important
}

[data-theme="dark"] .text-info {
    color: #a0d6bc !important; /* Adjusted info color to match theme */
}

[data-theme="dark"] .bg-success {
    background-color: #2c6e49 !important; /* Darker green for better contrast */
    color: white !important;
}

[data-theme="dark"] .bg-danger {
    background-color: #a05252 !important; /* Adjusted danger color to match theme */
    color: white !important;
}

[data-theme="dark"] .bg-warning {
    background-color: #cbd77b !important; /* Adjusted warning color to match theme */
    color: black !important;
}

[data-theme="dark"] .btn-outline-warning {
    border: 1px solid #cbd77b !important; /* Adjusted warning color to match theme */
    color: #cbd77b !important
}

[data-theme="dark"] .btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning:active {
    color: black !important;
    background-color: #cbd77b;
}

[data-theme="dark"] .bg-white {
    background-color: #2a3c33 !important; /* Dark background instead of white */
}

/* Light mode adjustments for Bootstrap utility classes */
.bg-primary {
    background-color: #4d7c5f !important; /* Match primary color from theme */
    color: white !important;
}

/* Light mode adjustments for outline buttons */
.btn-outline-primary {
    color: #2c6e49 !important; /* Darker green for better contrast in light mode */
    border-color: #2c6e49 !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: #ffffff !important; /* White text for contrast on hover */
    background-color: #2c6e49 !important; /* Darker green background on hover */
    border-color: #2c6e49 !important;
}

.btn-outline-secondary {
    color: #4d7c5f !important; /* Primary color for secondary buttons */
    border-color: #4d7c5f !important;
    background-color: transparent !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    color: #ffffff !important; /* White text for contrast on hover */
    background-color: #4d7c5f !important; /* Primary color background on hover */
    border-color: #4d7c5f !important;
}


.badge {
    color: white !important;
}

.bg-info {
    background-color: #8ba888 !important; /* Match secondary color from theme */
}

.bg-success {
    background-color: #3d8b40 !important; /* Darker green for better contrast */
}

.bg-danger {
    background-color: #b05353 !important; /* Adjusted to match theme */
    color: white !important;
}

.bg-warning {
    background-color: #ffa760 !important; /* Match accent color from theme */
    color: black !important;
}

/* Fix for additional form elements in dark mode */
[data-theme="dark"] .form-check-input {
    background-color: #1a2721 !important; /* Darker background for input fields */
    border-color: #3a4d43 !important; /* Dark border matching card-border */
}

[data-theme="dark"] .form-check-input:checked {
    background-color: #5d8c6f !important; /* Primary color when checked */
    border-color: #5d8c6f !important; /* Primary color when checked */
}

[data-theme="dark"] .form-check-label {
    color: #f5f7f4 !important; /* Light text color for better readability */
}

[data-theme="dark"] .form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23f5f7f4'/%3e%3c/svg%3e") !important;
}

[data-theme="dark"] .form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

[data-theme="dark"] .form-range::-webkit-slider-thumb {
    background-color: #5d8c6f !important; /* Primary color for slider thumb */
}

[data-theme="dark"] .form-range::-moz-range-thumb {
    background-color: #5d8c6f !important; /* Primary color for slider thumb */
}

[data-theme="dark"] .form-range::-webkit-slider-runnable-track {
    background-color: #3a4d43 !important; /* Dark border matching card-border */
}

[data-theme="dark"] .form-range::-moz-range-track {
    background-color: #3a4d43 !important; /* Dark border matching card-border */
}

/* Fix for input placeholders in dark mode */
[data-theme="dark"] .form-control::placeholder {
    color: #8ba888 !important; /* Lighter color for better contrast but still muted */
    opacity: 0.7 !important;
}

/* Fix for disabled form elements in dark mode */
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly],
[data-theme="dark"] .form-select:disabled,
[data-theme="dark"] .form-check-input:disabled {
    background-color: #1e2e28 !important; /* Slightly lighter than input bg but still dark */
    opacity: 0.7 !important;
}

[data-theme="dark"] .form-check-input:disabled ~ .form-check-label,
[data-theme="dark"] .form-check-input[disabled] ~ .form-check-label {
    opacity: 0.7 !important;
}

/* Fix for form validation states in dark mode */
[data-theme="dark"] .form-control.is-valid,
[data-theme="dark"] .was-validated .form-control:valid {
    border-color: #3d8b40 !important; /* Darker green for better contrast */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%233d8b40' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important;
    background-color: #1a2721 !important; /* Keep dark background */
}

[data-theme="dark"] .form-control.is-invalid,
[data-theme="dark"] .was-validated .form-control:invalid {
    border-color: #a05252 !important; /* Adjusted danger color */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23a05252'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23a05252' stroke='none'/%3e%3c/svg%3e") !important;
    background-color: #1a2721 !important; /* Keep dark background */
}

[data-theme="dark"] .valid-feedback {
    color: #6bd098 !important; /* Lighter green for better visibility */
}

[data-theme="dark"] .invalid-feedback {
    color: #ef8157 !important; /* Lighter red for better visibility */
}

/* Fix for form text help in dark mode */
[data-theme="dark"] .form-text {
    color: #a0d6bc !important; /* Lighter color for better contrast */
}

/* Fix for input groups in dark mode */
[data-theme="dark"] .input-group-text {
    background-color: #2a3c33 !important; /* Dark background matching card-bg */
    border-color: #3a4d43 !important; /* Dark border matching card-border */
    color: #f5f7f4 !important; /* Light text color for better readability */
}

/* Fix for crispy forms specific elements */
[data-theme="dark"] .asteriskField {
    color: #ef8157 !important; /* Make required field asterisk visible */
}

[data-theme="dark"] .help-block {
    color: #a0d6bc !important; /* Lighter color for better contrast */
}

/* Fix for select2 dropdown in dark mode */
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: #1a2721 !important; /* Darker background for input fields */
    border-color: #3a4d43 !important; /* Dark border matching card-border */
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #f5f7f4 !important; /* Light text color for better readability */
}

[data-theme="dark"] .select2-container--default .select2-results__option {
    background-color: #2a3c33 !important; /* Dark background matching card-bg */
    color: #f5f7f4 !important; /* Light text color for better readability */
}

[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #5d8c6f !important; /* Primary color for highlighted option */
    color: #ffffff !important; /* White text for better contrast */
}

[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #3a4d43 !important; /* Darker background for selected items */
    border-color: #5d8c6f !important; /* Primary color for border */
    color: #f5f7f4 !important; /* Light text color for better readability */
}

/* Fix for datepicker in dark mode */
[data-theme="dark"] .datepicker-dropdown {
    background-color: #2a3c33 !important; /* Dark background matching card-bg */
    border-color: #3a4d43 !important; /* Dark border matching card-border */
}

[data-theme="dark"] .datepicker table tr td,
[data-theme="dark"] .datepicker table tr th {
    color: #f5f7f4 !important; /* Light text color for better readability */
}

[data-theme="dark"] .datepicker table tr td.active,
[data-theme="dark"] .datepicker table tr td.active:hover {
    background-color: #5d8c6f !important; /* Primary color for active date */
}

/* Fix for file input in dark mode */
[data-theme="dark"] .custom-file-label {
    background-color: #1a2721 !important; /* Darker background for input fields */
    border-color: #3a4d43 !important; /* Dark border matching card-border */
    color: #f5f7f4 !important; /* Light text color for better readability */
}

[data-theme="dark"] .custom-file-label::after {
    background-color: #2a3c33 !important; /* Dark background matching card-bg */
    color: #f5f7f4 !important; /* Light text color for better readability */
}

[data-theme="dark"] .form-label {
    color: white;
}

[data-theme="dark"] .nav-link {
    color: white;
}

[data-theme="dark"] .list-group-item-action:not(.active):active {
    background-color: inherit;
}

/* Fix for list-group-item text color in dark mode */
[data-theme="dark"] .list-group-item {
    color: white !important;
}

[data-theme="dark"] .form-control {
    background-color: #1a2721 !important;
    color: white;
}

[data-theme="dark"] hr {
    color: #5d8c6f !important;
    opacity: 0.50 !important;
}

[data-theme="dark"] .small {
    color: white !important;
}

[data-theme="dark"] .progress-text {
    color: white !important;
}

[data-theme="dark"] strong {
    color: white !important;
}

[data-theme="dark"] .btn-link {
    color: #a0d6bc !important;
}

[data-theme="dark"] .btn-link:hover {
    background-color: transparent !important;
    color: #a0d6bc !important;
    border-color: #a0d6bc !important;
}

[data-theme="dark"] .btn-link:active {
    background-color: transparent !important;
    color: #a0d6bc !important;
    border-color: #a0d6bc !important;
}

[data-theme="dark"] .step-item.list-group-item-action, .step-item.list-group-item-action:hover {
    background-color: transparent !important;
}

[data-theme="dark"] .step-item {
    background-color: #16201c !important; /* Darker background for input fields */
    border-color: #3a4d43 !important; /* Dark border matching card-border */
    color: white !important;
}


[data-theme="dark"] .step-name, .step-description, .step-duration {
    color: white !important;
}

[data-theme="dark"] .btn-warning {
    color: black !important;
}

/* Override nav-tabs active link styling directly */
.nav-tabs .nav-link.active {
    color: black !important;
    background-color: white !important;
}

[data-theme="dark"].nav-tabs .nav-link.active {
    color: white !important;
    background-color: #2a3c33 !important;
}

/* Fix for btn-danger in dark mode */
[data-theme="dark"] .btn-danger {
    background-color: #be7031 !important; /* Custom danger color for dark mode */
    border-color: #be7031 !important;
    color: #ffffff !important; /* White text for better contrast */
}

[data-theme="dark"] .btn-danger:hover,
[data-theme="dark"] .btn-danger:focus,
[data-theme="dark"] .btn-danger:active {
    background-color: #7a3e0d !important; /* Darker shade on hover */
    border-color: #7a3e0d !important;
    color: #ffffff !important;
}

/* Fix for btn-outline-danger in dark mode */
[data-theme="dark"] .btn-outline-danger {
    color: #ffa760 !important; /* Custom danger color for dark mode */
    border-color: #ffa760 !important;
    background-color: transparent !important;
}

[data-theme="dark"] .btn-outline-danger:hover,
[data-theme="dark"] .btn-outline-danger:focus,
[data-theme="dark"] .btn-outline-danger:active {
    color: black !important; /* White text for contrast on hover */
    background-color: #ffa760 !important; /* Custom danger color background on hover */
    border-color: #ffa760 !important;
}

/* Change the background color and text color of selected text */
[data-theme="dark"] ::selection {
    background: #919f31; /* Change the background color to blue */
    color: black; /* Change the text color to white */
}

/* For Firefox support */
[data-theme="dark"] ::-moz-selection {
    background: #919f31; /* Change the background color to blue */
    color: black; /* Change the text color to white */
}

[data-theme="dark"] .border {
    border: 1px solid rgb(160 176 151 / 27%) !important;
}

[data-theme="dark"] .text-highlighted {
    color: white;
    font-weight: bolder;
}

[data-theme="dark"] .accordion-item {
    border-color: #3a4d43 !important;
}

/* API Credentials Modal Dark Mode Styles */
[data-theme="dark"] .api-key-section {
    background-color: #2a3c33 !important; /* Dark background matching card-bg */
    border-color: #3a4d43 !important; /* Dark border matching card-border */
}

[data-theme="dark"] .api-key-section h4 {
    color: #f5f7f4 !important; /* Light text color for better readability */
}

[data-theme="dark"] .api-key-value {
    background-color: rgba(255, 255, 255, 0.1) !important; /* Light background with transparency for better contrast */
    color: #a0d6bc !important; /* Lighter green for better visibility of code */
}

/* Dark mode styling for API key copy button */
[data-theme="dark"] .api-key-copy-button {
    color: #8bc2a8 !important; /* Lighter green for better contrast */
    background-color: transparent !important;
}

[data-theme="dark"] .api-key-copy-button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important; /* Light background with transparency for hover state */
    color: #a0d6bc !important; /* Even lighter green on hover */
}

[data-theme="dark"] .api-key-copy-button:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(160, 214, 188, 0.4) !important; /* Lighter green focus ring */
}

[data-theme="dark"] .api-key-copy-button.copied {
    color: #a0d6bc !important; /* Lighter green for better contrast */
    background-color: rgba(160, 214, 188, 0.2) !important; /* Subtle background for copied state */
}

[data-theme="dark"] #create-api-key-form {
    background-color: #2a3c33 !important; /* Dark background matching card-bg */
    border-color: #3a4d43 !important; /* Dark border matching card-border */
}

[data-theme="dark"] #create-api-key-form h4 {
    color: #f5f7f4 !important; /* Light text color for better readability */
}

[data-theme="dark"] #description-help {
    color: #a0d6bc !important; /* Lighter color for better contrast but still muted */
}

/* Ensure modal elements have proper dark mode styling */
[data-theme="dark"] .modal-content {
    background-color: #1a2721 !important; /* Darker background for modal */
    border-color: #3a4d43 !important; /* Dark border matching card-border */
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: #3a4d43 !important; /* Dark border matching card-border */
    background-color: #1e2e28 !important; /* Slightly lighter than modal-content for visual separation */
}

[data-theme="dark"] .modal-title {
    color: #f5f7f4 !important; /* Light text color for better readability */
}

/* Specific styling for buttons in modal-footer */
[data-theme="dark"] .modal-footer .btn-outline-secondary {
    color: #a0d6bc !important; /* Lighter green for better contrast in dark mode */
    border-color: #a0d6bc !important;
    background-color: transparent !important;
}

[data-theme="dark"] .modal-footer .btn-outline-secondary:hover,
[data-theme="dark"] .modal-footer .btn-outline-secondary:focus,
[data-theme="dark"] .modal-footer .btn-outline-secondary:active {
    color: #1a2721 !important; /* Dark background color for text on hover */
    background-color: #a0d6bc !important; /* Lighter green background on hover */
    border-color: #a0d6bc !important;
}

/* Fix for modal close button in dark mode */
[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important; /* Invert colors to make the X visible on dark backgrounds */
    opacity: 0.8 !important; /* Increase opacity for better visibility */
}

[data-theme="dark"] .btn-close:hover,
[data-theme="dark"] .btn-close:focus {
    opacity: 1 !important; /* Full opacity on hover/focus for better feedback */
    box-shadow: 0 0 0 0.25rem rgba(160, 214, 188, 0.4) !important; /* Light green focus ring matching other elements */
}

[data-theme="dark"] code {
    color: white !important;
    background-color: #33473d !important;
}

[data-theme="dark"] .btn-success {
    background-color: #144416;
    border-color: #4CAF50;
}