/* Modal Container */
.custom-dark-modal {
    background-color: #1e1e1e;
    border: 1px solid #333;
    color: #e0e0e0;
}

/* Modal Header */
.custom-dark-modal-header {
    background-color: #2a2a2a;
    border-bottom: 1px solid #444;
}

/* Modal Body */
.custom-dark-modal-body {
    background-color: #1e1e1e;
}

/* Modal Footer */
.custom-dark-modal-footer {
    background-color: #2a2a2a; /* Match header */
    border-top: 1px solid #444; /* Darker border */
}

/* Text */
.custom-dark-text {
    color: #e0e0e0; /* Light gray for readability */
}

/* Input Fields */
.custom-dark-input {
    background-color: #333; /* Darker input background */
    color: #e0e0e0; /* Light text */
    border: 1px solid #555; /* Subtle border */
}
.custom-dark-input::placeholder {
    color: #888; /* Muted placeholder text */
}
.custom-dark-input:focus {
    background-color: #333;
    color: #e0e0e0;
    border-color: #666; /* Slightly lighter on focus */
    box-shadow: 0 0 0 0.2rem rgba(100, 100, 100, 0.25); /* Subtle gray focus ring */
}

/* Error Message */
.custom-dark-error {
    color: #ff5555; /* Softer red for dark mode */
}

/* Buttons */
.custom-dark-btn-outline {
    color: #e0e0e0; /* Light text */
    border-color: #555; /* Dark border */
    background-color: transparent;
}
.custom-dark-btn-outline:hover {
    background-color: #444; /* Hover effect */
    color: #fff;
    border-color: #555;
}

.custom-dark-btn-primary {
    background-color: #1a73e8; /* Muted blue */
    border-color: #1a73e8;
    color: #fff;
}
.custom-dark-btn-primary:hover {
    background-color: #1557b0; /* Darker blue on hover */
    border-color: #1557b0;
    color: #fff;
}

.custom-dark-btn-success {
    background-color: #2e7d32; /* Muted green */
    border-color: #2e7d32;
    color: #fff;
}
.custom-dark-btn-success:hover {
    background-color: #1b5e20; /* Darker green on hover */
    border-color: #1b5e20;
    color: #fff;
}

/* Gradient Button */
.custom-dark-btn-gradient {
    background: linear-gradient(135deg, #2e7d32, #1a73e8); /* Green to blue gradient */
    border: none;
}
.custom-dark-btn-gradient:hover {
    background: linear-gradient(135deg, #1b5e20, #1557b0); /* Darker gradient on hover */
}

/* Close Button */
.custom-dark-close {
    filter: invert(1); /* Makes the X white for visibility */
}