/* Style the form container */
h1 {
    font-size: 2.5rem;
    color: #064737; /* Matches the Monetty theme color */
    text-align: center;
    margin-bottom: 1rem;
    margin-top: 1rem;
    font-weight: bold;
}

/* Style the paragraph */
p {
    font-size: 1.2rem;
    color: #333;
    text-align: center;
    margin-bottom: 2rem;
}

form {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.container {
    background-color: #fff !important;
    color: #45AD6B !important;
}

.card {
    background-color: #fff !important;
    color: #064737 !important;
}

.card h3 {
    color: #45AD6B !important;
}

.select2 {
    color: #45AD6B !important;
}

/* Style the input fields */
input[type="text"], input[type="email"], input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}

/* Style the button */
button[type="submit"] {
    width: 100%;
    padding: 12px;
    background-color: #064737;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1.2rem;
    cursor: pointer;
}

button[type="submit"]:hover {
    background-color: #45AD6B;
}

/* Dark mode styles - Comprehensive form input targeting */
.dark-mode input[type="text"], 
.dark-mode input[type="email"], 
.dark-mode input[type="password"],
.dark-mode input[type="tel"],
.dark-mode input[type="date"],
.dark-mode input[type="number"],
.dark-mode input[type="search"],
.dark-mode input[type="url"],
.dark-mode input:not([type]),
.dark-mode textarea,
.dark-mode select,
.dark-mode .form-control,
.dark-mode .form-select,
.dark-mode input.form-control,
.dark-mode select.form-control,
.dark-mode textarea.form-control,
.dark-mode input[class*="form-"],
.dark-mode select[class*="form-"],
.dark-mode textarea[class*="form-"] {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #45AD6B !important;
    border-color: rgba(67, 216, 133, 0.3) !important;
}

.dark-mode input[type="text"]:focus, 
.dark-mode input[type="email"]:focus, 
.dark-mode input[type="password"]:focus,
.dark-mode input[type="tel"]:focus,
.dark-mode input[type="date"]:focus,
.dark-mode input[type="number"]:focus,
.dark-mode input[type="search"]:focus,
.dark-mode input[type="url"]:focus,
.dark-mode input:not([type]):focus,
.dark-mode textarea:focus,
.dark-mode select:focus,
.dark-mode .form-control:focus,
.dark-mode .form-select:focus,
.dark-mode input.form-control:focus,
.dark-mode select.form-control:focus,
.dark-mode textarea.form-control:focus,
.dark-mode input[class*="form-"]:focus,
.dark-mode select[class*="form-"]:focus,
.dark-mode textarea[class*="form-"]:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #45AD6B !important;
    border-color: #45AD6B !important;
    box-shadow: 0 0 0 3px rgba(67, 216, 133, 0.1) !important;
}

.dark-mode .select2-container--default .select2-selection--single {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(67, 216, 133, 0.3) !important;
}

.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #45AD6B !important;
}

.dark-mode .select2-container--default.select2-container--focus .select2-selection--single {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #45AD6B !important;
}

.dark-mode .select2-dropdown {
    background: rgba(6, 71, 55, 0.95) !important;
    border-color: rgba(67, 216, 133, 0.3) !important;
}

.dark-mode .select2-container--default .select2-results__option {
    background-color: rgba(6, 71, 55, 0.95) !important;
    color: #45AD6B !important;
}

.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected],
.dark-mode .select2-container--default .select2-results__option[aria-selected=true],
.dark-mode .select2-container--default .select2-results__option:hover {
    background-color: #45AD6B !important;
    color: #ffffff !important;
}

/* Additional dark mode rules for forms without explicit dark-mode class */
body.dark-mode input[type="text"], 
body.dark-mode input[type="email"], 
body.dark-mode input[type="password"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="date"],
body.dark-mode input[type="number"],
body.dark-mode input[type="search"],
body.dark-mode input[type="url"],
body.dark-mode input:not([type]),
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .form-control,
body.dark-mode .form-select {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #45AD6B !important;
    border-color: rgba(67, 216, 133, 0.3) !important;
}

body.dark-mode input[type="text"]:focus, 
body.dark-mode input[type="email"]:focus, 
body.dark-mode input[type="password"]:focus,
body.dark-mode input[type="tel"]:focus,
body.dark-mode input[type="date"]:focus,
body.dark-mode input[type="number"]:focus,
body.dark-mode input[type="search"]:focus,
body.dark-mode input[type="url"]:focus,
body.dark-mode input:not([type]):focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus,
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #45AD6B !important;
    border-color: #45AD6B !important;
    box-shadow: 0 0 0 3px rgba(67, 216, 133, 0.1) !important;
}

/* Dark mode for allauth forms */
.dark-mode .allauth input,
.dark-mode .allauth textarea,
.dark-mode .allauth select {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #45AD6B !important;
    border-color: rgba(67, 216, 133, 0.3) !important;
}

.dark-mode .allauth input:focus,
.dark-mode .allauth textarea:focus,
.dark-mode .allauth select:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #45AD6B !important;
    border-color: #45AD6B !important;
    box-shadow: 0 0 0 3px rgba(67, 216, 133, 0.1) !important;
}

/* Dark mode for all form text elements */
.dark-mode label,
.dark-mode .form-label,
.dark-mode .control-label,
.dark-mode .field-label,
.dark-mode .input-label,
.dark-mode label[for],
.dark-mode .label,
.dark-mode .text-muted,
.dark-mode .form-text,
.dark-mode .help-text,
.dark-mode .help-block,
.dark-mode .form-help,
.dark-mode small,
.dark-mode .small,
.dark-mode .text-secondary,
.dark-mode .text-light,
.dark-mode .form-control,
.dark-mode .text-dark,
.dark-mode .text-body,
.dark-mode .text-muted,
.dark-mode .form-description,
.dark-mode .field-help,
.dark-mode .input-help,
.dark-mode .field-description,
.dark-mode .form-field-help,
.dark-mode .form-group small,
.dark-mode .form-group .help-text,
.dark-mode .form-group .form-text,
.dark-mode .mb-3 small,
.dark-mode .mb-3 .help-text,
.dark-mode .mb-3 .form-text,
.dark-mode .form-floating label,
.dark-mode .form-floating .form-label,
.dark-mode .input-group-text,
.dark-mode .form-check-label,
.dark-mode .form-check-label,
.dark-mode .checkbox-label,
.dark-mode .radio-label {
    color: #45AD6B !important;
}

/* Dark mode for form placeholders */
.dark-mode input::placeholder,
.dark-mode textarea::placeholder,
.dark-mode select::placeholder,
.dark-mode .form-control::placeholder,
.dark-mode .form-select::placeholder,
.dark-mode input[placeholder]::placeholder,
.dark-mode textarea[placeholder]::placeholder {
    color: rgba(67, 216, 133, 0.7) !important;
}

/* Dark mode for form error messages */
.dark-mode .text-danger,
.dark-mode .error,
.dark-mode .errorlist,
.dark-mode .field-error,
.dark-mode .form-error,
.dark-mode .input-error,
.dark-mode .validation-error,
.dark-mode .error-message,
.dark-mode .form-group .text-danger,
.dark-mode .mb-3 .text-danger,
.dark-mode .form-control.is-invalid,
.dark-mode .form-select.is-invalid,
.dark-mode .invalid-feedback,
.dark-mode .form-text.text-danger {
    color: #ff6b6b !important;
}

/* Dark mode for form success messages */
.dark-mode .text-success,
.dark-mode .success,
.dark-mode .field-success,
.dark-mode .form-success,
.dark-mode .input-success,
.dark-mode .validation-success,
.dark-mode .success-message,
.dark-mode .form-group .text-success,
.dark-mode .mb-3 .text-success,
.dark-mode .form-control.is-valid,
.dark-mode .form-select.is-valid,
.dark-mode .valid-feedback,
.dark-mode .form-text.text-success {
    color: #45AD6B !important;
}

/* Dark mode for form warning messages */
.dark-mode .text-warning,
.dark-mode .warning,
.dark-mode .field-warning,
.dark-mode .form-warning,
.dark-mode .input-warning,
.dark-mode .validation-warning,
.dark-mode .warning-message,
.dark-mode .form-group .text-warning,
.dark-mode .mb-3 .text-warning,
.dark-mode .form-text.text-warning {
    color: #ffa726 !important;
}

/* Dark mode for form info messages */
.dark-mode .text-info,
.dark-mode .info,
.dark-mode .field-info,
.dark-mode .form-info,
.dark-mode .input-info,
.dark-mode .validation-info,
.dark-mode .info-message,
.dark-mode .form-group .text-info,
.dark-mode .mb-3 .text-info,
.dark-mode .form-text.text-info {
    color: #29b6f6 !important;
}

/* Dark mode for form headings and titles */
.dark-mode .form-title,
.dark-mode .form-heading,
.dark-mode .form-header h1,
.dark-mode .form-header h2,
.dark-mode .form-header h3,
.dark-mode .form-header h4,
.dark-mode .form-header h5,
.dark-mode .form-header h6,
.dark-mode .card-title,
.dark-mode .card-header h1,
.dark-mode .card-header h2,
.dark-mode .card-header h3,
.dark-mode .card-header h4,
.dark-mode .card-header h5,
.dark-mode .card-header h6,
.dark-mode .form-container h1,
.dark-mode .form-container h2,
.dark-mode .form-container h3,
.dark-mode .form-container h4,
.dark-mode .form-container h5,
.dark-mode .form-container h6 {
    color: #45AD6B !important;
}

/* Dark mode for form descriptions and instructions */
.dark-mode .form-description,
.dark-mode .form-instructions,
.dark-mode .form-note,
.dark-mode .form-tip,
.dark-mode .form-hint,
.dark-mode .form-subtitle,
.dark-mode .form-intro,
.dark-mode .form-explanation,
.dark-mode .form-guidance,
.dark-mode .form-info-text,
.dark-mode .form-additional-info {
    color: rgba(67, 216, 133, 0.8) !important;
}

/* Dark mode for form links */
.dark-mode .form-link,
.dark-mode .form-link a,
.dark-mode .form-container a,
.dark-mode .form-group a,
.dark-mode .mb-3 a,
.dark-mode .form-text a,
.dark-mode .help-text a,
.dark-mode .form-help a {
    color: #45AD6B !important;
}

.dark-mode .form-link:hover,
.dark-mode .form-link a:hover,
.dark-mode .form-container a:hover,
.dark-mode .form-group a:hover,
.dark-mode .mb-3 a:hover,
.dark-mode .form-text a:hover,
.dark-mode .help-text a:hover,
.dark-mode .form-help a:hover {
    color: #ffffff !important;
}

/* Body-level dark mode for all form text elements */
body.dark-mode label,
body.dark-mode .form-label,
body.dark-mode .control-label,
body.dark-mode .field-label,
body.dark-mode .input-label,
body.dark-mode label[for],
body.dark-mode .label,
body.dark-mode .text-muted,
body.dark-mode .form-text,
body.dark-mode .help-text,
body.dark-mode .help-block,
body.dark-mode .form-help,
body.dark-mode small,
body.dark-mode .small,
body.dark-mode .text-secondary,
body.dark-mode .text-light,
body.dark-mode .input-group,
body.dark-mode .text-dark,
body.dark-mode .text-body,
body.dark-mode .text-muted,
body.dark-mode .form-description,
body.dark-mode .field-help,
body.dark-mode .input-help,
body.dark-mode .field-description,
body.dark-mode .form-field-help,
body.dark-mode .form-group small,
body.dark-mode .form-group .help-text,
body.dark-mode .form-group .form-text,
body.dark-mode .mb-3 small,
body.dark-mode .mb-3 .help-text,
body.dark-mode .mb-3 .form-text,
body.dark-mode .form-floating label,
body.dark-mode .form-floating .form-label,
body.dark-mode .input-group-text,
body.dark-mode .form-check-label,
body.dark-mode .form-check-label,
body.dark-mode .checkbox-label,
body.dark-mode .radio-label {
    color: #45AD6B !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder,
body.dark-mode select::placeholder,
body.dark-mode .form-control::placeholder,
body.dark-mode .form-select::placeholder,
body.dark-mode input[placeholder]::placeholder,
body.dark-mode textarea[placeholder]::placeholder {
    color: rgba(67, 216, 133, 0.7) !important;
}

body.dark-mode .text-danger,
body.dark-mode .error,
body.dark-mode .errorlist,
body.dark-mode .field-error,
body.dark-mode .form-error,
body.dark-mode .input-error,
body.dark-mode .validation-error,
body.dark-mode .error-message,
body.dark-mode .form-group .text-danger,
body.dark-mode .mb-3 .text-danger,
body.dark-mode .form-control.is-invalid,
body.dark-mode .form-select.is-invalid,
body.dark-mode .invalid-feedback,
body.dark-mode .form-text.text-danger {
    color: #ff6b6b !important;
}

body.dark-mode .text-success,
body.dark-mode .success,
body.dark-mode .field-success,
body.dark-mode .form-success,
body.dark-mode .input-success,
body.dark-mode .validation-success,
body.dark-mode .success-message,
body.dark-mode .form-group .text-success,
body.dark-mode .mb-3 .text-success,
body.dark-mode .form-control.is-valid,
body.dark-mode .form-select.is-valid,
body.dark-mode .valid-feedback,
body.dark-mode .form-text.text-success {
    color: #45AD6B !important;
}

/* Dark mode for input groups and their form controls */
.dark-mode .input-group,
.dark-mode .input-group .form-control,
.dark-mode .input-group input,
.dark-mode .input-group textarea,
.dark-mode .input-group select,
.dark-mode .input-group .form-select {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #666 !important;
    border-color: rgba(67, 216, 133, 0.3) !important;
}

.dark-mode .input-group:focus-within,
.dark-mode .input-group .form-control:focus,
.dark-mode .input-group input:focus,
.dark-mode .input-group textarea:focus,
.dark-mode .input-group select:focus,
.dark-mode .input-group .form-select:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #666 !important;
    border-color: #666 !important;
    box-shadow: 0 0 0 3px rgba(67, 216, 133, 0.1) !important;
}

.dark-mode .input-group .btn {
    background-color: rgba(67, 216, 133, 0.2) !important;
    border-color: rgba(67, 216, 133, 0.3) !important;
    color: #666 !important;
}

.dark-mode .input-group .btn:hover {
    background-color: rgba(67, 216, 133, 0.3) !important;
    border-color: #666 !important;
    color: #ffffff !important;
}

/* Body-level dark mode for input groups */
body.dark-mode .input-group,
body.dark-mode .input-group .form-control,
body.dark-mode .input-group input,
body.dark-mode .input-group textarea,
body.dark-mode .input-group select,
body.dark-mode .input-group .form-select {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #666 !important;
    border-color: rgba(67, 216, 133, 0.3) !important;
}

body.dark-mode .input-group:focus-within,
body.dark-mode .input-group .form-control:focus,
body.dark-mode .input-group input:focus,
body.dark-mode .input-group textarea:focus,
body.dark-mode .input-group select:focus,
body.dark-mode .input-group .form-select:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #666 !important;
    border-color: #666 !important;
    box-shadow: 0 0 0 3px rgba(67, 216, 133, 0.1) !important;
}

body.dark-mode .input-group .btn {
    background-color: rgba(67, 216, 133, 0.2) !important;
    border-color: rgba(67, 216, 133, 0.3) !important;
    color: #666 !important;
}

body.dark-mode .input-group .btn:hover {
    background-color: rgba(67, 216, 133, 0.3) !important;
    border-color: #45AD6B !important;
    color: #ffffff !important;
}

/* Additional styles for responsiveness */
@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }

    p {
        font-size: 1rem;
    }

    form {
        padding: 1.5rem;
    }
}