/* ============================================================================
   BENJFORUM DARK MODE FIX - Private Message Form
   Aggressive CSS Override
   ============================================================================ */

/* Base Dark Mode Styles - Using ALL possible selectors */
html[data-theme="dark"],
body[data-theme="dark"],
html body.dark-mode,
body.dark-mode,
[data-theme="dark"] {

    /* Form Container - Target all possible container classes */
    .content-wrapper,
    .main-content,
    .page-content,
    .forum-content,
    #content,
    .container-fluid,
    .container-main,
    .page-wrapper,
    .pm-container,
    .message-container,
    form[action*="message"],
    form[action*="pm"],
    form[action*="send"],
    .card,
    .panel,
    .pm-form,
    .new-message-form,
    .compose-form,
    .message-form {
        background-color: #1f2937 !important;
        background: #1f2937 !important;
    }
    
    /* Override ANY element that might be white */
    .white-bg,
    .bg-white,
    .bg-light,
    [class*="bg-white"],
    [class*="bg-light"],
    [style*="background: white"],
    [style*="background:#fff"],
    [style*="background-color: white"],
    [style*="background-color:#fff"],
    [style*="background-color: #fff"],
    [style*="background-color: #ffffff"],
    body,
    .body-content,
    .main-body {
        background-color: #1f2937 !important;
        background: #1f2937 !important;
        color: #f3f4f6 !important;
    }
}

/* Input Fields - Aggressive Override */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
body[data-theme="dark"] input,
body[data-theme="dark"] textarea,
body[data-theme="dark"] select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] textarea,
[data-theme="dark"] .form-control,
[data-theme="dark"] .editor,
[data-theme="dark"] .editor-textarea,
[data-theme="dark"] .message-body,
[data-theme="dark"] .pm-textarea {
    background-color: #374151 !important;
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #f3f4f6 !important;
    caret-color: #f3f4f6 !important;
}

/* Placeholder text */
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
}

/* Labels and Text */
html[data-theme="dark"] label,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .control-label,
body[data-theme="dark"] label,
body[data-theme="dark"] .form-label,
[data-theme="dark"] label,
[data-theme="dark"] .form-label,
[data-theme="dark"] .control-label,
[data-theme="dark"] .col-form-label,
[data-theme="dark"] .field-label {
    color: #e5e7eb !important;
    font-weight: 500 !important;
}

/* Buttons */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-submit,
html[data-theme="dark"] .btn-send,
body[data-theme="dark"] .btn-primary,
body[data-theme="dark"] .btn-submit,
body[data-theme="dark"] .btn-send,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-submit,
[data-theme="dark"] .btn-send,
[data-theme="dark"] button[type="submit"] {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .btn-cancel,
body[data-theme="dark"] .btn-secondary,
body[data-theme="dark"] .btn-default,
body[data-theme="dark"] .btn-cancel,
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-default,
[data-theme="dark"] .btn-cancel,
[data-theme="dark"] button[type="button"] {
    background-color: #4b5563 !important;
    border-color: #6b7280 !important;
    color: #f3f4f6 !important;
}

/* Form container specific */
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .well,
body[data-theme="dark"] .card,
body[data-theme="dark"] .panel,
body[data-theme="dark"] .well,
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .well,
[data-theme="dark"] .card-body {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #f3f4f6 !important;
}

/* Headers and titles */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .form-title,
body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] h4,
body[data-theme="dark"] .page-title,
body[data-theme="dark"] .form-title,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] .page-title,
[data-theme="dark"] .form-title {
    color: #f3f4f6 !important;
}

/* Form group spacing */
html[data-theme="dark"] .form-group,
html[data-theme="dark"] .form-group-row,
body[data-theme="dark"] .form-group,
body[data-theme="dark"] .form-group-row,
[data-theme="dark"] .form-group,
[data-theme="dark"] .form-group-row {
    margin-bottom: 1rem !important;
}

/* Divider/separator */
html[data-theme="dark"] hr,
body[data-theme="dark"] hr,
[data-theme="dark"] hr {
    border-color: #374151 !important;
}

/* Links in dark mode */
html[data-theme="dark"] a,
body[data-theme="dark"] a,
[data-theme="dark"] a {
    color: #60a5fa !important;
}

html[data-theme="dark"] a:hover,
body[data-theme="dark"] a:hover,
[data-theme="dark"] a:hover {
    color: #93c5fd !important;
}

/* Checkbox and radio */
html[data-theme="dark"] .form-check-input,
body[data-theme="dark"] .form-check-input,
[data-theme="dark"] .form-check-input {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
}

/* Focus states */
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
body[data-theme="dark"] input:focus,
body[data-theme="dark"] textarea:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25) !important;
}

/* Message/PM specific classes - VERY AGGRESSIVE */
html[data-theme="dark"] .message-box,
html[data-theme="dark"] .pm-box,
html[data-theme="dark"] .new-message-box,
html[data-theme="dark"] .compose-box,
html[data-theme="dark"] .send-message-box,
body[data-theme="dark"] .message-box,
body[data-theme="dark"] .pm-box,
body[data-theme="dark"] .new-message-box,
body[data-theme="dark"] .compose-box,
body[data-theme="dark"] .send-message-box {
    background-color: #1f2937 !important;
}

html[data-theme="dark"] .message-box *,
html[data-theme="dark"] .pm-box *,
html[data-theme="dark"] .new-message-box *,
body[data-theme="dark"] .message-box *,
body[data-theme="dark"] .pm-box *,
body[data-theme="dark"] .new-message-box * {
    background-color: transparent !important;
    color: #e5e7eb !important;
}

/* ULTIMATE OVERRIDE - Force ALL backgrounds to be dark in dark mode */
@media (prefers-color-scheme: dark) {
    html[data-theme="dark"] *,
    body[data-theme="dark"] * {
        border-color: #374151 !important;
    }
}

/* Even more aggressive - target by common patterns */
*[style*="background: rgb(255, 255, 255)"],
*[style*="background: #ffffff"],
*[style*="background: #fff"],
*[style*="background-color: rgb(255, 255, 255)"],
*[style*="background-color: #ffffff"],
*[style*="background-color: #fff"] {
    background-color: #1f2937 !important;
}

/* Form rows and columns */
html[data-theme="dark"] .row,
body[data-theme="dark"] .row,
[data-theme="dark"] .row {
    background-color: transparent !important;
    color: #f3f4f6 !important;
}

html[data-theme="dark"] .col,
html[data-theme="dark"] .col- *,
body[data-theme="dark"] .col,
body[data-theme="dark"] .col- *,
[data-theme="dark"] .col,
[data-theme="dark"] .col-* {
    background-color: transparent !important;
}

/* Text inputs specifically */
input[type="text"],
input[type="email"], 
input[type="password"],
input[type="search"],
textarea,
.form-control,
.form-input,
.text-input {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Mobile responsive */
@media (max-width: 768px) {
    html[data-theme="dark"] .container,
    html[data-theme="dark"] .container-fluid,
    body[data-theme="dark"] .container,
    body[data-theme="dark"] .container-fluid {
        background-color: #1f2937 !important;
    }
}