/* Email Modal Theme Styling */

/* Base modal styling with black border */
.modal-content {
    border: 2px solid #000000;
}

/* Light mode */
body:not([data-bs-theme="dark"]) .modal-content {
    background-color: #eaedf0;
    color: #343a40;
    border-color: #000000;
}

body:not([data-bs-theme="dark"]) .modal-header {
    border-bottom-color: #dee2e6;
    background-color: #eaedf0;
}

body:not([data-bs-theme="dark"]) .modal-header .btn-close {
    filter: invert(0.8);
}

body:not([data-bs-theme="dark"]) .modal-title {
    color: #343a40;
}

/* Dark mode */
body[data-bs-theme="dark"] .modal-content,
.dark-theme .modal-content {
    background-color: #18191a;
    color: #e4e6eb;
    border-color: #000000;
}

body[data-bs-theme="dark"] .modal-header,
.dark-theme .modal-header {
    border-bottom-color: #212529;
    background-color: #18191a;
}

body[data-bs-theme="dark"] .modal-header .btn-close,
.dark-theme .modal-header .btn-close {
    filter: invert(1);
}

body[data-bs-theme="dark"] .modal-title,
.dark-theme .modal-title {
    color: #e4e6eb;
}

/* Fallback for theme-toggle without data attribute */
html.dark .modal-content {
    background-color: #18191a;
    color: #e4e6eb;
    border-color: #000000;
}

html.dark .modal-header {
    border-bottom-color: #212529;
    background-color: #18191a;
}

html.dark .modal-header .btn-close {
    filter: invert(1);
}

html.dark .modal-title {
    color: #e4e6eb;
}