/* ============================================================
   MEDeLIFE — COMPREHENSIVE DARK MODE STYLESHEET
   Activates when body.dark-mode is present.
   ============================================================ */

/* === 1. CSS VARIABLE OVERRIDES === */
body.dark-mode {
    --white: #111827;
    --dark: #f3f4f6;
    --light: #1f2937;
    --gray: #9ca3af;
    --body-bg: #0f172a;
    --border-color: #374151;
    --shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);

    background-color: var(--body-bg) !important;
    color: var(--dark) !important;
}

/* === 2. BODY & GLOBAL BACKGROUNDS === */
body.dark-mode .main-content,
body.dark-mode .main-container {
    background-color: transparent !important;
}

/* === 3. SIDEBAR (Dashboard + Community Sidebar) === */
body.dark-mode .sidebar {
    background: var(--white) !important;
    border-color: var(--border-color) !important;
}
body.dark-mode .sidebar #sideName {
    color: var(--dark) !important;
}
/* Fix the "e" in "MEDeLIFE" logo in sidebar and navbar */
body.dark-mode .sidebar .brand span[style*="color: #000"],
body.dark-mode .sidebar .brand div span[style*="color: #000"],
body.dark-mode #navLogo div span[style*="color: #000"] {
    color: var(--dark) !important;
}
body.dark-mode .nav-item {
    color: var(--gray) !important;
}
body.dark-mode .nav-item:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    color: var(--primary) !important;
}
body.dark-mode .nav-item.active {
    background: var(--primary) !important;
    color: white !important;
}
body.dark-mode .user-mini-profile {
    border-color: var(--border-color) !important;
}
body.dark-mode .user-mini-profile:hover {
    background: var(--light) !important;
}
body.dark-mode .mini-avatar {
    border-color: var(--secondary) !important;
}

/* === 4. TOP NAVBAR (Community/Messages/Insights) === */
body.dark-mode .navbar {
    background: rgba(17, 24, 39, 0.95) !important;
    border-bottom-color: var(--border-color) !important;
}
body.dark-mode .nav-links {
    background: var(--white) !important;
    border-top-color: var(--border-color) !important;
}
body.dark-mode .nav-links a {
    color: var(--gray) !important;
}
body.dark-mode .nav-links a:hover,
body.dark-mode .nav-links a.active {
    color: var(--primary) !important;
    background: rgba(239, 68, 68, 0.1) !important;
}
body.dark-mode .desktop-search-icon,
body.dark-mode .top-search-icon,
body.dark-mode .top-message-icon {
    background: var(--light) !important;
    color: var(--dark) !important;
}
body.dark-mode .desktop-search-icon:hover,
body.dark-mode .top-search-icon:hover,
body.dark-mode .top-message-icon:hover {
    background: #374151 !important;
}
body.dark-mode .mobile-menu-btn {
    color: var(--dark) !important;
}

/* === 5. NOTIFICATION DROPDOWN === */
body.dark-mode .notifications-dropdown {
    background: var(--white) !important;
    border-color: var(--border-color) !important;
}

/* === 6. CARDS, PANELS & CONTAINERS === */
body.dark-mode .action-card,
body.dark-mode .post-card,
body.dark-mode .create-post-card,
body.dark-mode .dashboard-modal,
body.dark-mode .notification-card,
body.dark-mode .rx-paper,
body.dark-mode .widget,
body.dark-mode .stat-card,
body.dark-mode .doctor-card,
body.dark-mode .doc-card,
body.dark-mode .list-item,
body.dark-mode .profile-container,
body.dark-mode .ai-card,
body.dark-mode .modal-content,
body.dark-mode .slim-post-trigger,
body.dark-mode .single-comment,
body.dark-mode .options-dropdown,
body.dark-mode .form-section,
body.dark-mode .angel-item,
body.dark-mode .profile-header-card,
body.dark-mode .verification-box {
    background: var(--light) !important;
    border-color: var(--border-color) !important;
    color: var(--dark) !important;
}

/* Hover states for cards */
body.dark-mode .action-card:hover,
body.dark-mode .list-item:hover,
body.dark-mode .doctor-card:hover,
body.dark-mode .doc-card:hover {
    background: #1e293b !important;
    border-color: var(--primary) !important;
}

/* === 7. COMMUNITY PROFILE PAGE === */
body.dark-mode .profile-bio,
body.dark-mode .cred-item {
    color: var(--gray) !important;
}
body.dark-mode .profile-titles h1,
body.dark-mode .section-header h3 {
    color: var(--dark) !important;
}
body.dark-mode .icon-btn:hover {
    background: var(--light) !important;
    color: var(--dark) !important;
}

/* === 8. MESSAGES PAGE === */
body.dark-mode .msg-layout {
    background: var(--white) !important;
    border-color: var(--border-color) !important;
}
body.dark-mode .msg-list-pane {
    background: var(--light) !important;
    border-color: var(--border-color) !important;
}
body.dark-mode .msg-list-header {
    border-color: var(--border-color) !important;
}
body.dark-mode .msg-chat-pane {
    background: var(--white) !important;
}
body.dark-mode .chat-header {
    background: var(--white) !important;
    border-color: var(--border-color) !important;
}
body.dark-mode .chat-history {
    background: var(--body-bg) !important;
}
body.dark-mode .chat-input-area {
    background: var(--white) !important;
    border-color: var(--border-color) !important;
}
body.dark-mode .convo-item {
    border-color: var(--border-color) !important;
}
body.dark-mode .convo-item:hover,
body.dark-mode .convo-item.active {
    background: rgba(239, 68, 68, 0.1) !important;
}
body.dark-mode .convo-meta h4 {
    color: var(--dark) !important;
}
body.dark-mode .empty-chat-state i {
    color: var(--gray) !important;
}
body.dark-mode .request-barrier {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: var(--border-color) !important;
    color: var(--dark) !important;
}
body.dark-mode .chat-date-divider span {
    background: var(--light) !important;
    color: var(--gray) !important;
}
body.dark-mode .msg-list-header .icon-btn,
body.dark-mode .msg-header-options .icon-btn {
    color: var(--gray) !important;
}
body.dark-mode .msg-list-header .icon-btn:hover,
body.dark-mode .msg-header-options .icon-btn:hover {
    color: var(--dark) !important;
    background: var(--light) !important;
}

/* === 9. INPUTS, TEXTAREAS, SELECTS & SEARCH FIELDS === */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .form-input,
body.dark-mode .search-input-field,
body.dark-mode .msg-search input,
body.dark-mode .comment-input-box input,
body.dark-mode .chat-input-area input,
body.dark-mode .rx-input,
body.dark-mode .post-title-input,
body.dark-mode .search-wrapper input,
body.dark-mode .modern-search-bar {
    background-color: var(--white) !important;
    color: var(--dark) !important;
    border-color: var(--border-color) !important;
}
body.dark-mode .modern-search-bar {
    box-shadow: none !important;
}
body.dark-mode .slim-post-trigger .trigger-input {
    background: var(--white) !important;
    color: var(--gray) !important;
}

/* Select / Dropdown options */
body.dark-mode option {
    background: var(--white) !important;
    color: var(--dark) !important;
}

/* === 10. ALL TEXT ELEMENTS === */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .section-title,
body.dark-mode .page-title,
body.dark-mode .welcome-text h1,
body.dark-mode .meta h4,
body.dark-mode .doc-details h4,
body.dark-mode .stat-info h3,
body.dark-mode strong,
body.dark-mode label,
body.dark-mode .collapsible-header h3 {
    color: var(--dark) !important;
}

body.dark-mode p,
body.dark-mode .meta span,
body.dark-mode .welcome-text p,
body.dark-mode .doc-details p,
body.dark-mode .stat-info p,
body.dark-mode .post-content p,
body.dark-mode .rx-meta {
    color: var(--gray) !important;
}

/* Specific text content that uses hardcoded dark colors */
body.dark-mode .post-content h3 {
    color: var(--dark) !important;
}

/* === 11. BUTTONS & INTERACTIVE ELEMENTS === */
body.dark-mode .btn-logout,
body.dark-mode .btn-back,
body.dark-mode .btn-filter-toggle,
body.dark-mode .dual-btn-row button,
body.dark-mode .collapsible-header {
    background: var(--white) !important;
    color: var(--dark) !important;
    border-color: var(--border-color) !important;
}
body.dark-mode .btn-logout:hover,
body.dark-mode .btn-back:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}
body.dark-mode .action-btn {
    color: var(--gray) !important;
}
body.dark-mode .action-btn:hover {
    color: var(--dark) !important;
}
body.dark-mode .action-btn.liked {
    color: var(--primary) !important;
}
body.dark-mode .options-dropdown button {
    color: var(--dark) !important;
    border-color: var(--border-color) !important;
}
body.dark-mode .options-dropdown button:hover {
    background: var(--white) !important;
}

/* === 12. TABS === */
body.dark-mode .tab-item,
body.dark-mode .cp-tab,
body.dark-mode .p-tab,
body.dark-mode .report-tab,
body.dark-mode .m-tab-item,
body.dark-mode .comment-tab {
    color: var(--gray) !important;
}
body.dark-mode .tab-item.active,
body.dark-mode .cp-tab.active,
body.dark-mode .p-tab.active,
body.dark-mode .report-tab.active,
body.dark-mode .m-tab-item.active {
    color: var(--primary) !important;
}
body.dark-mode .m-tab-item.active,
body.dark-mode .report-tab:hover {
    background: rgba(239, 68, 68, 0.1) !important;
}
body.dark-mode .dashboard-tabs,
body.dark-mode .report-nav,
body.dark-mode .modal-tabs {
    border-color: var(--border-color) !important;
}

/* === 13. COMMENTS & ANSWERS SECTIONS === */
body.dark-mode .comments-section {
    background: var(--white) !important;
}
body.dark-mode .comment-tab {
    background: var(--light) !important;
}
body.dark-mode .comment-tab.active {
    background: var(--primary) !important;
    color: white !important;
}
body.dark-mode .answers-section {
    background: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

/* === 14. BADGES & TAGS === */
body.dark-mode .topic-tag {
    background: var(--light) !important;
    color: var(--dark) !important;
}
body.dark-mode .topic-tag:hover {
    background: #374151 !important;
}
body.dark-mode .role-patient {
    background: rgba(2, 132, 199, 0.15) !important;
}
body.dark-mode .role-doctor {
    background: rgba(22, 163, 74, 0.15) !important;
}
body.dark-mode .role-pharmacy {
    background: rgba(147, 51, 234, 0.15) !important;
}
body.dark-mode .chip {
    background: var(--light) !important;
    border-color: var(--border-color) !important;
}
body.dark-mode .chip:hover {
    background: rgba(239, 68, 68, 0.1) !important;
}

/* === 15. MODALS & OVERLAYS === */
body.dark-mode .dashboard-modal {
    background: var(--white) !important;
}

/* === 16. PROFILE PAGE SPECIFICS === */
body.dark-mode .form-section {
    background: var(--light) !important;
    border-color: var(--border-color) !important;
}
body.dark-mode .collapsible-content {
    background: transparent !important;
}
body.dark-mode .angel-info-box {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
}
body.dark-mode .btn-logout-profile {
    border-color: var(--border-color) !important;
}

/* === 17. PATIENT REPORTS === */
body.dark-mode .doc-icon {
    background: rgba(59, 130, 246, 0.15) !important;
}
body.dark-mode .btn-view {
    background: rgba(59, 130, 246, 0.15) !important;
}
body.dark-mode .btn-delete {
    background: rgba(239, 68, 68, 0.15) !important;
}
body.dark-mode .access-denied-box {
    background: var(--light) !important;
    border-color: var(--gray) !important;
}

/* === 18. PATIENT DASHBOARD SPECIFICS === */
body.dark-mode .action-card {
    border-color: var(--border-color) !important;
    background: var(--light) !important;
}
body.dark-mode .header-actions .btn-logout {
    background: transparent !important;
}

/* === 19. INSIGHTS PAGE === */
body.dark-mode .top-post-item {
    border-color: var(--border-color) !important;
}
body.dark-mode .top-post-stats {
    background: var(--white) !important;
}

/* === 20. SEARCH MODALS === */
body.dark-mode .search-modal-overlay .search-modal-content,
body.dark-mode .search-modal {
    background: var(--white) !important;
    border-color: var(--border-color) !important;
}

/* === 21. AVATAR PLACEHOLDERS === */
body.dark-mode .avatar {
    background: var(--light) !important;
    color: var(--gray) !important;
}

/* === 22. SCROLLBAR STYLING === */
body.dark-mode ::-webkit-scrollbar {
    width: 8px;
}
body.dark-mode ::-webkit-scrollbar-track {
    background: var(--white);
}
body.dark-mode ::-webkit-scrollbar-thumb {
    background: #4B5563;
    border-radius: 4px;
}
body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #6B7280;
}

/* === 23. BORDER FIXES === */
body.dark-mode .interaction-bar,
body.dark-mode .cp-tabs,
body.dark-mode .cp-footer,
body.dark-mode .profile-tabs {
    border-color: var(--border-color) !important;
}

/* === 24. SINGLE POST PAGE === */
body.dark-mode .back-btn {
    background: var(--light) !important;
    color: var(--dark) !important;
    border-color: var(--border-color) !important;
}

/* === 25. INLINE STYLE OVERRIDES (for spans with color:#000 etc) === */
body.dark-mode [style*="color:#000"],
body.dark-mode [style*="color: #000"],
body.dark-mode [style*="color:black"],
body.dark-mode [style*="color: black"] {
    color: var(--dark) !important;
}
body.dark-mode [style*="background:#F3F4F6"],
body.dark-mode [style*="background: #F3F4F6"],
body.dark-mode [style*="background-color:#F3F4F6"],
body.dark-mode [style*="background-color: #F3F4F6"] {
    background-color: var(--white) !important;
}

/* === 26. MISC HARDCODED COLORS CLEANUP === */
body.dark-mode .post-tag {
    background: rgba(239, 68, 68, 0.15) !important;
}
body.dark-mode .btn-upload {
    background: var(--light) !important;
    border-color: var(--border-color) !important;
    color: var(--dark) !important;
}
body.dark-mode .image-preview img {
    border-color: var(--border-color) !important;
}
body.dark-mode .sort-wrapper select {
    background: var(--white) !important;
    color: var(--dark) !important;
    border-color: var(--border-color) !important;
}
body.dark-mode .specialties-collapse {
    background: var(--white) !important;
}

/* === 27. BOOKING MODAL (Find Doctors) === */
body.dark-mode .dashboard-modal {
    background: var(--white) !important;
    color: var(--dark) !important;
}
body.dark-mode .dashboard-modal h2,
body.dark-mode .dashboard-modal h3,
body.dark-mode .dashboard-modal label {
    color: var(--dark) !important;
}
body.dark-mode .dashboard-modal p {
    color: var(--gray) !important;
}
/* Booking modal inner container (uses inline background:#fff) */
body.dark-mode .dashboard-modal [style*="background:#fff"],
body.dark-mode .dashboard-modal [style*="background: #fff"],
body.dark-mode .dashboard-modal [style*="background:white"],
body.dark-mode .dashboard-modal [style*="background: white"],
body.dark-mode .dashboard-modal div[style*="background:#F9FAFB"],
body.dark-mode .dashboard-modal div[style*="background: #F9FAFB"] {
    background: var(--light) !important;
    color: var(--dark) !important;
}
body.dark-mode .dashboard-modal [style*="border:1px solid #E5E7EB"],
body.dark-mode .dashboard-modal [style*="border: 1px solid #E5E7EB"] {
    border-color: var(--border-color) !important;
}
body.dark-mode .dashboard-modal [style*="border-bottom:1px solid #E5E7EB"],
body.dark-mode .dashboard-modal [style*="border-bottom: 1px solid"] {
    border-color: var(--border-color) !important;
}
body.dark-mode .dashboard-modal span[style*="font-size:0.9rem"] {
    color: var(--dark) !important;
}
/* Modern select inside booking modal */
body.dark-mode .modern-select,
body.dark-mode .modern-select-wrapper select {
    background: var(--light) !important;
    color: var(--dark) !important;
    border-color: var(--border-color) !important;
}
body.dark-mode .modern-select option {
    background: var(--white) !important;
    color: var(--dark) !important;
}
/* Medical Records Access radio labels */
body.dark-mode label[style*="background:#F9FAFB"],
body.dark-mode label[style*="background: #F9FAFB"] {
    background: var(--light) !important;
    border-color: var(--border-color) !important;
    color: var(--dark) !important;
}
/* Doc profile header border */
body.dark-mode .doc-profile-header {
    border-color: var(--border-color) !important;
}

/* === 28. SEARCH MODAL (Community) === */
body.dark-mode .search-result-item {
    background: var(--light) !important;
    border-color: var(--border-color) !important;
    color: var(--dark) !important;
}
body.dark-mode .search-result-item:hover {
    border-color: var(--gray) !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.2) !important;
}
body.dark-mode .search-title {
    color: var(--dark) !important;
}
body.dark-mode .search-meta {
    color: var(--gray) !important;
}
body.dark-mode .search-avatar {
    background: var(--white) !important;
    border-color: var(--border-color) !important;
    color: var(--gray) !important;
}
body.dark-mode .search-section-title {
    color: var(--gray) !important;
}
/* Search highlight fix — make highlighted text readable in dark mode */
body.dark-mode .search-result-item strong[style*="background: #FEF2F2"],
body.dark-mode .search-result-item strong[style*="background:#FEF2F2"] {
    background: rgba(239, 68, 68, 0.25) !important;
    color: #f87171 !important;
}

/* === 29. NOTIFICATIONS DROPDOWN === */
body.dark-mode .notifications-dropdown {
    background: var(--white) !important;
    border-color: var(--border-color) !important;
}
body.dark-mode .notification-item {
    border-color: var(--border-color) !important;
    color: var(--dark) !important;
}
body.dark-mode .notification-item:hover {
    background: var(--light) !important;
}
body.dark-mode .notification-item.unread {
    background: rgba(34, 197, 94, 0.1) !important;
    border-left-color: var(--secondary) !important;
}
body.dark-mode .notification-badge {
    border-color: var(--white) !important;
}

/* === 30. PERSONALISATION / INTEREST MODAL === */
body.dark-mode .interest-modal-content {
    background: var(--white) !important;
    color: var(--dark) !important;
}
body.dark-mode .interest-modal-content .modal-header h2 {
    color: var(--dark) !important;
}
body.dark-mode .interest-modal-content .modal-header p {
    color: var(--gray) !important;
}
body.dark-mode .interest-pill {
    background: var(--light) !important;
    border-color: var(--border-color) !important;
    color: var(--gray) !important;
}
body.dark-mode .interest-pill:hover {
    border-color: var(--gray) !important;
}
body.dark-mode .interest-pill.active {
    background: rgba(239, 68, 68, 0.15) !important;
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}
body.dark-mode .interest-pill.blocked {
    background: #1e293b !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
}
body.dark-mode .btn-skip {
    color: var(--gray) !important;
}
body.dark-mode .btn-skip:hover {
    color: var(--dark) !important;
}

/* === 31. FEED SORT TOGGLE === */
body.dark-mode .feed-sort-toggle {
    background: rgba(31, 41, 55, 0.7) !important;
    border-color: var(--border-color) !important;
}
body.dark-mode .feed-sort-toggle.is-sticky {
    background: rgba(31, 41, 55, 0.95) !important;
}
body.dark-mode .sort-bg {
    background: var(--white) !important;
}
body.dark-mode .sort-btn {
    color: var(--gray) !important;
}
body.dark-mode .sort-btn.active {
    color: var(--primary) !important;
}

/* === 32. RICH TEXT EDITOR === */
body.dark-mode .editor-toolbar {
    background: var(--white) !important;
    border-color: var(--border-color) !important;
}
body.dark-mode .editor-toolbar button {
    color: var(--gray) !important;
}
body.dark-mode .editor-toolbar button:hover {
    background: var(--light) !important;
    color: var(--dark) !important;
}
body.dark-mode .rich-editor {
    background: var(--white) !important;
    color: var(--dark) !important;
    border-color: var(--border-color) !important;
}

/* === 33. ANONYMOUS POSTING === */
body.dark-mode .anonymous-toggle-container {
    background: var(--light) !important;
    border-color: var(--border-color) !important;
}
body.dark-mode .anon-info-box {
    background: rgba(2, 132, 199, 0.1) !important;
    border-color: rgba(2, 132, 199, 0.3) !important;
}
body.dark-mode .anon-info-box p,
body.dark-mode .anon-info-box small {
    color: #7dd3fc !important;
}
body.dark-mode .comment-anon-wrapper {
    background: var(--light) !important;
    border-color: var(--border-color) !important;
}

/* === 34. COMMENT ACTION BUTTONS === */
body.dark-mode .comment-action-btn {
    color: var(--gray) !important;
}
body.dark-mode .comment-action-btn:hover {
    color: var(--dark) !important;
}
body.dark-mode .comment-action-btn.liked {
    color: var(--primary) !important;
}
body.dark-mode .comment-options-trigger {
    color: var(--gray) !important;
}
body.dark-mode .comment-options-trigger:hover {
    background: var(--light) !important;
    color: var(--dark) !important;
}
body.dark-mode .comment-dropdown {
    background: var(--white) !important;
    border-color: var(--border-color) !important;
}
body.dark-mode .comment-dropdown button {
    color: var(--dark) !important;
    border-color: var(--border-color) !important;
}
body.dark-mode .comment-dropdown button:hover {
    background: var(--light) !important;
}

/* === 35. MINI REPLY BOX === */
body.dark-mode .mini-reply-input {
    background: var(--light) !important;
    border-color: var(--border-color) !important;
    color: var(--dark) !important;
}
body.dark-mode .mini-reply-input:focus {
    background: var(--white) !important;
}

/* === 36. PATIENT DASHBOARD MODALS (Upload Document etc.) === */
body.dark-mode .modal-overlay .dashboard-modal,
body.dark-mode .modal-overlay.active .dashboard-modal {
    background: var(--white) !important;
    color: var(--dark) !important;
}

/* === 37. GLOBAL INLINE STYLE OVERRIDES === */
/* Override any JS-generated background: white / #fff / #F9FAFB / #F3F4F6 */
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background:white"],
body.dark-mode [style*="background: #ffffff"],
body.dark-mode [style*="background:#ffffff"],
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background:#fff"] {
    background: var(--light) !important;
}
body.dark-mode [style*="background: #F9FAFB"],
body.dark-mode [style*="background:#F9FAFB"],
body.dark-mode [style*="background: #f9fafb"],
body.dark-mode [style*="background:#f9fafb"] {
    background: var(--white) !important;
}
body.dark-mode [style*="color: #000"],
body.dark-mode [style*="color:#000"],
body.dark-mode [style*="color: black"],
body.dark-mode [style*="color:black"] {
    color: var(--dark) !important;
}
body.dark-mode [style*="color: #111827"],
body.dark-mode [style*="color:#111827"] {
    color: var(--dark) !important;
}
body.dark-mode [style*="color: #374151"],
body.dark-mode [style*="color:#374151"] {
    color: var(--gray) !important;
}
body.dark-mode [style*="color: #4B5563"],
body.dark-mode [style*="color:#4B5563"] {
    color: var(--gray) !important;
}
body.dark-mode [style*="border: 1px solid #E5E7EB"],
body.dark-mode [style*="border:1px solid #E5E7EB"],
body.dark-mode [style*="border-bottom: 1px solid #E5E7EB"],
body.dark-mode [style*="border-bottom:1px solid #E5E7EB"] {
    border-color: var(--border-color) !important;
}

/* === 38. TOAST BOX === */
body.dark-mode #toast-box {
    background: var(--dark) !important;
    color: var(--white) !important;
}

/* === 39. COMMENT TEXT (was #374151 - invisible on dark) === */
body.dark-mode .comment-text-content {
    color: var(--dark) !important;
}
body.dark-mode .comment-author {
    color: var(--dark) !important;
}
body.dark-mode .comment-avatar {
    background: var(--light) !important;
    color: var(--gray) !important;
}

/* === 40. ANSWERS SECTION (green-tinted) === */
body.dark-mode .answers-section {
    background: rgba(34, 197, 94, 0.08) !important;
    border-color: rgba(34, 197, 94, 0.2) !important;
}
body.dark-mode .answers-section .comment-text-content,
body.dark-mode .answers-section .single-comment .comment-text-content,
body.dark-mode .answer-list .comment-text-content {
    color: #d1d5db !important;
}
body.dark-mode .answers-section .single-comment {
    background: rgba(34, 197, 94, 0.06) !important;
    border-color: rgba(34, 197, 94, 0.15) !important;
}
body.dark-mode .answers-section .comment-author {
    color: var(--dark) !important;
}
body.dark-mode .answers-section .comment-time {
    color: var(--gray) !important;
}

/* === 41. TOGGLE SWITCH === */
body.dark-mode .slider {
    background-color: #4B5563 !important;
}
body.dark-mode .slider:before {
    background-color: #d1d5db !important;
}
body.dark-mode input:checked + .slider {
    background-color: var(--primary) !important;
}
body.dark-mode input:checked + .slider:before {
    background-color: white !important;
}

/* === 42. BOOKING MODAL — SCHEDULE PILLS (#FEF2F2 bg) === */
body.dark-mode [style*="background: #FEF2F2"],
body.dark-mode [style*="background:#FEF2F2"] {
    background: rgba(239, 68, 68, 0.12) !important;
}
body.dark-mode [style*="border: 1px solid #FECACA"],
body.dark-mode [style*="border:1px solid #FECACA"] {
    border-color: rgba(239, 68, 68, 0.3) !important;
}

/* === 43. UPLOAD DOCUMENT MODAL === */
body.dark-mode .modal-header-custom h2 {
    color: var(--dark) !important;
}
body.dark-mode .modal-header-custom p {
    color: var(--gray) !important;
}
body.dark-mode .icon-circle {
    background: rgba(239, 68, 68, 0.12) !important;
}
body.dark-mode .modern-upload-box {
    background: var(--white) !important;
    border-color: var(--gray) !important;
}
body.dark-mode .modern-upload-box:hover {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: var(--primary) !important;
}
body.dark-mode .modern-upload-box p {
    color: var(--dark) !important;
}
/* File selected confirmation */
body.dark-mode #fileSelectedName,
body.dark-mode [id="fileSelectedName"] {
    background: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}
body.dark-mode #fNameText {
    color: #4ade80 !important;
}
/* Modern input */
body.dark-mode .modern-input {
    background: var(--light) !important;
    color: var(--dark) !important;
    border-color: var(--border-color) !important;
}

/* === 44. COMMENT INPUT BOX === */
body.dark-mode .comment-input-box input {
    background: var(--white) !important;
    color: var(--dark) !important;
    border-color: var(--border-color) !important;
}
/* Inline-styled comment input in community.js */
body.dark-mode [id^="comment-input-"],
body.dark-mode [id^="answer-input-"] {
    background: var(--white) !important;
    color: var(--dark) !important;
    border-color: var(--border-color) !important;
}
body.dark-mode .btn-send {
    /* Keep send button visible */
}

/* === 45. CLOSE MODAL X BUTTON === */
body.dark-mode .close-modal {
    color: var(--gray) !important;
}
body.dark-mode .close-modal:hover {
    color: var(--dark) !important;
}

/* === 46. POST CONTENT TEXT === */
body.dark-mode .post-text,
body.dark-mode .post-text p,
body.dark-mode .post-content {
    color: var(--dark) !important;
}

/* === 47. SINGLE POST PAGE ERROR/LOADING STATES === */
body.dark-mode .single-post-container .loading-spinner {
    color: var(--gray) !important;
}

/* === 48. CHIP HOVER STATE (find-doctors specialties) === */
body.dark-mode .chip:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

/* === 49. REPLY NESTED COMMENTS === */
/* === 49. REPLY NESTED COMMENTS === */
body.dark-mode .single-comment.is-reply {
    background: var(--white) !important;
    border-left-color: var(--border-color) !important;
}

/* === 50. PROFILE PAGE CAMERA BUTTON === */
body.dark-mode .camera-btn {
    background: var(--light) !important;
    color: var(--gray) !important;
    border-color: var(--body-bg) !important;
}
body.dark-mode .camera-btn:hover {
    background: var(--primary) !important;
    color: white !important;
}

/* === 51. PROFILE LOGOUT BUTTON === */
body.dark-mode .btn-logout-profile {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
    color: var(--primary) !important;
}
body.dark-mode .btn-logout-profile:hover {
    background: rgba(239, 68, 68, 0.2) !important;
}

/* === 52. PROFILE INSTALL APP BUTTON === */
body.dark-mode #btnInstallPWA {
    background: rgba(37, 99, 235, 0.1) !important;
    border-color: rgba(37, 99, 235, 0.2) !important;
    color: #3b82f6 !important;
}
body.dark-mode #btnInstallPWA:hover {
    background: rgba(37, 99, 235, 0.2) !important;
}

/* === 53. DISABLED INPUTS === */
body.dark-mode input:disabled,
body.dark-mode textarea:disabled {
    background: var(--light) !important;
    color: var(--gray) !important;
    border-color: var(--border-color) !important;
}