/*
╔════════════════════════════════════════════════════════════════════╗
║  ROOTED VITALITY, INC.                                             ║
║  File: styles/dark-mode/dark-mode-messaging.css                    ║
║  Purpose: Dark mode styling for messaging, tables, and layouts     ║
║  Holistic Wellness · Modern Connection Platform                    ║
║  rootedvitality.health | 2025                                      ║
╚════════════════════════════════════════════════════════════════════╝

TABLE OF CONTENTS
  1. Chat & Message Bubbles
  2. Conversation List
  3. Inbox Layout & Structure
  4. Alerts & Notifications
  5. Dashboard Layout
  6. Wellness & Project Styling
*/

@media (prefers-color-scheme: dark) {
    /* ========================================== */
    /* 1. CHAT & MESSAGE BUBBLES */
    /* ========================================== */

    /* Chat/Message Container */
    .chat-window,
    .conversation-area,
    .message-area {
        background-color: var(--dm-text-on-light) !important;
    }
    
    /* Message Bubbles - Own Messages */
    .message--own,
    .message-group.own,
    .message-group--own,
    .message.own,
    [data-message-type="own"] .message__bubble {
        background-color: #77883e !important;
        color: #ffffff !important;
    }
    
    /* Message Bubbles - Other User Messages */
    .message--other,
    .message-group.other,
    .message-group--other,
    .message.other,
    [data-message-type="other"] .message__bubble {
        background-color: var(--dm-text-primary) !important;
        color: var(--dm-text-on-light) !important;
    }
    
    /* Message Bubbles - Practitioner */
    .message--practitioner,
    .message-group.practitioner,
    [data-message-type="practitioner"] .message__bubble {
        background-color: var(--dm-text-primary) !important;
        color: #000000 !important;
    }
    
    /* Message Bubbles - Client */
    .message--client,
    .message-group.client,
    [data-message-type="client"] .message__bubble {
        background-color: #77883e !important;
        color: #ffffff !important;
    }
    
    /* Generic message bubble base styles */
    .message-bubble {
        background-color: var(--message-other-bg) !important;
        color: var(--message-other-text) !important;
    }
    
    .message-group.own .message-bubble {
        background-color: var(--message-own-bg) !important;
        color: var(--message-own-text) !important;
    }
    
    .message-group.other .message-bubble {
        background-color: var(--message-other-bg) !important;
        color: var(--message-other-text) !important;
    }

    /* Unified Messaging System - Sent Messages */
    .message-group--sent .message-bubble {
        background: linear-gradient(135deg, var(--rooted-primary) 0%, var(--rooted-primary-dark) 100%) !important;
        color: var(--message-own-text) !important;
    }

    .message-group--sent .bubble-text {
        color: var(--message-own-text) !important;
    }

    /* Unified Messaging System - Received Messages */
    .message-group--received .message-bubble {
        background-color: var(--message-other-bg) !important;
        color: var(--message-other-text) !important;
    }

    .message-group--received .bubble-text {
        color: var(--message-other-text) !important;
    }

    /* Message Bubble Base */
    .message__bubble,
    .bubble {
        border-color: transparent !important;
    }

    /* Message Bubble Styles */
    .message-bubble {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }

    .message-bubble--own {
        background-color: #77883e !important;
        color: #ffffff !important;
    }

    .message-bubble--other {
        background-color: var(--dm-bg-card-secondary) !important;
        color: var(--dm-text-primary) !important;
        border-color: var(--dm-border-primary) !important;
    }

    .message-bubble--practitioner {
        background-color: #2a5a3a !important;
        color: #ffffff !important;
    }

    .message-bubble--client {
        background-color: #4a3a2a !important;
        color: #ffffff !important;
    }
    
    /* Message Metadata */
    .message__time,
    .message-time,
    .message-timestamp,
    .message-metadata {
        color: #8f8b87 !important;
    }
    
    .message__sender,
    .message-sender {
        color: #d4cfc3 !important;
    }

    .message-timestamp {
        color: #8a8580 !important;
    }

    .message-sender {
        color: #b8b3b0 !important;
        font-weight: 600;
    }

    /* Chat Input */
    .chat-input-area {
        background-color: var(--dm-bg-card) !important;
        border-top-color: var(--dm-border-primary) !important;
    }

    .chat-input-field {
        background-color: var(--dm-bg-card-secondary) !important;
        color: var(--dm-text-primary) !important;
        border-color: var(--dm-border-primary) !important;
    }

    .chat-input-field:focus {
        border-color: #77883e !important;
        box-shadow: 0 0 0 3px rgba(119, 136, 62, 0.2) !important;
    }

    .chat-input-button {
        background-color: #77883e !important;
        color: #ffffff !important;
    }

    .chat-input-button:hover {
        background-color: #5f7030 !important;
    }

    /* ========================================== */
    /* 2. CONVERSATION LIST */
    /* ========================================== */

    /* Conversation List */
    .conversation-list,
    .thread-list,
    .message-list {
        background-color: var(--dm-text-on-light) !important;
    }
    
    .conversation-item,
    .thread-item,
    .message-list-item {
        background-color: var(--dm-bg-card) !important;
        border-color: var(--dm-border-primary) !important;
        color: var(--dm-text-primary) !important;
    }
    
    .conversation-item:hover,
    .thread-item:hover,
    .message-list-item:hover {
        background-color: var(--dm-bg-card-secondary) !important;
    }
    
    .conversation-item.active,
    .thread-item.active,
    .message-list-item.active {
        background-color: var(--dm-bg-card-secondary) !important;
        border-left-color: #77883e !important;
    }
    
    .conversation-preview,
    .thread-preview,
    .last-message {
        color: #d4cfc3 !important;
    }

    /* Unified messaging */
    .unified-messaging-container {
        background-color: var(--dm-text-on-light) !important;
    }

    .conversation-list {
        background-color: var(--dm-bg-card) !important;
    }

    .conversation-item {
        border-bottom-color: var(--dm-border-primary) !important;
        background-color: var(--dm-bg-card) !important;
        color: var(--dm-text-primary) !important;
    }

    .conversation-item:hover {
        background-color: var(--dm-bg-card-secondary) !important;
    }

    .conversation-item.active {
        background-color: #77883e !important;
        color: #ffffff !important;
    }

    .conversation-item .participant-name {
        color: #ffffff !important;
    }

    .conversation-item .last-message {
        color: #b8b3b0 !important;
    }

    /* ========================================== */
    /* 3. INBOX LAYOUT & STRUCTURE */
    /* ========================================== */

    /* CLIENT INBOX LAYOUT */
    .message-thread-column {
        background: var(--dm-bg-page) !important;
        border-color: var(--dm-border-primary) !important;
    }

    .message-thread-panel {
        background: var(--dm-bg-page) !important;
    }

    .thread-header {
        background: var(--dm-bg-page) !important;
        border-color: var(--dm-border-primary) !important;
        color: var(--dm-text-primary) !important;
    }

    .message-thread {
        background: var(--dm-bg-page) !important;
    }

    .my-matches-container {
        background: var(--dm-bg-page) !important;
    }

    .matches-sidebar {
        background: var(--dm-bg-page) !important;
    }

    /* CLIENT INBOX - All background overrides */
    .matches-grid-3col {
        background: var(--dm-bg-page) !important;
    }

    /* Middle Column - Practitioners List */
    .inbox-list {
        background: var(--dm-bg-page) !important;
        color: var(--dm-text-primary) !important;
    }

    .inbox-search {
        background: var(--dm-bg-page) !important;
    }

    .search-input {
        background: var(--dm-bg-card) !important;
        color: var(--dm-text-primary) !important;
        border-color: var(--dm-border-primary) !important;
    }

    .inbox-threads-list {
        background: var(--dm-bg-page) !important;
    }

    .thread-item,
    .conversation-item {
        background: var(--dm-bg-card) !important;
        border-color: var(--dm-border-primary) !important;
        color: var(--dm-text-primary) !important;
        border-left-color: transparent !important;
    }

    .thread-item:hover,
    .conversation-item:hover {
        background: var(--dm-bg-card-secondary) !important;
        border-left-color: #77883e !important;
    }

    .thread-item.active,
    .conversation-item.active {
        background: var(--dm-bg-card-secondary) !important;
        border-color: var(--dm-border-primary) !important;
        border-left-color: #77883e !important;
        color: #ffffff !important;
    }

    .thread-item--closed {
        background: var(--dm-bg-card) !important;
        border-color: var(--dm-border-primary) !important;
    }

    .thread-item--closed .thread-name {
        color: #8f8b87 !important;
    }

    /* Message Thread */
    .empty-state {
        background: var(--dm-bg-page) !important;
        color: #8f8b87 !important;
    }

    .empty-state p,
    .empty-state div {
        color: #8f8b87 !important;
        background: transparent !important;
    }

    .thread-header {
        background: var(--dm-bg-card) !important;
        border-color: var(--dm-border-primary) !important;
        color: var(--dm-text-primary) !important;
    }

    .thread-header__title,
    .thread-header-info {
        color: #ffffff !important;
    }

    .message-input-area {
        background: var(--dm-bg-card) !important;
        border-color: var(--dm-border-primary) !important;
    }

    .message-input,
    .message-send-btn {
        background: var(--dm-bg-card-secondary) !important;
        color: var(--dm-text-primary) !important;
        border-color: var(--dm-border-primary) !important;
    }

    .message-input::placeholder {
        color: #8f8b87 !important;
    }

    .message-send-btn {
        background: #77883e !important;
        color: #ffffff !important;
        border-color: #77883e !important;
    }

    .message-send-btn:hover {
        background: #5f7030 !important;
    }

    .thread-avatar {
        background: linear-gradient(135deg, #77883e 0%, #5f7030 100%) !important;
        color: var(--dm-text-on-light) !important;
    }

    .thread-participant-name {
        color: #ffffff !important;
    }

    .thread-last-message {
        color: #b8b3b0 !important;
    }

    .thread-timestamp {
        color: #8a8580 !important;
    }

    /* Message area */
    .message-area {
        background-color: var(--dm-text-on-light) !important;
    }

    .message-area-header {
        background-color: var(--dm-bg-card) !important;
        border-bottom-color: var(--dm-border-primary) !important;
    }

    .message-area-header h2 {
        color: #ffffff !important;
    }

    .message-thread {
        background-color: var(--dm-text-on-light) !important;
    }

    /* Message content */
    .message-item {
        margin: 0.5rem 0;
    }

    .message-content {
        color: var(--dm-text-primary) !important;
    }

    /* Filters section */
    .filters-header {
        color: #ffffff !important;
    }

    /* ========================================== */
    /* 4. ALERTS & NOTIFICATIONS */
    /* ========================================== */

    .alert {
        background-color: var(--dm-bg-card-secondary) !important;
        border-color: var(--dm-border-primary) !important;
        color: var(--dm-text-primary) !important;
    }

    .alert-success {
        background-color: rgba(76, 175, 80, 0.2) !important;
        border-color: #4caf50 !important;
        color: #81c784 !important;
    }

    .alert-danger,
    .alert-error {
        background-color: rgba(211, 47, 47, 0.2) !important;
        border-color: #d32f2f !important;
        color: #ef5350 !important;
    }

    .alert-warning {
        background-color: rgba(255, 152, 0, 0.2) !important;
        border-color: #ff9800 !important;
        color: #ffb74d !important;
    }

    .alert-info {
        background-color: rgba(33, 150, 243, 0.2) !important;
        border-color: #2196f3 !important;
        color: #64b5f6 !important;
    }

    /* Danger message */
    .danger-message {
        background-color: var(--dm-bg-card-secondary) !important;
        border-left-color: #dc2626 !important;
    }

    .danger-message p {
        color: #ff9999 !important;
    }

    /* TOAST NOTIFICATIONS */
    .toast {
        background-color: #77883e !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(119, 136, 62, 0.4) !important;
    }

    .toast.success {
        background-color: #4caf50 !important;
    }

    .toast.error {
        background-color: #d32f2f !important;
    }

    .toast.warning {
        background-color: #ff9800 !important;
        color: #ffffff !important;
    }

    .toast.info {
        background-color: #2196f3 !important;
    }

    .notification-toast {
        background-color: #77883e !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(119, 136, 62, 0.3) !important;
    }

    .notification-toast.success {
        background-color: #4caf50 !important;
    }

    .notification-toast.error {
        background-color: #d32f2f !important;
    }

    .notification-toast.warning {
        background-color: #ff9800 !important;
    }

    /* ========================================== */
    /* 5. DASHBOARD LAYOUT */
    /* ========================================== */

    .inbox-main-container {
        background-color: var(--dm-text-on-light) !important;
    }

    .inbox-header {
        background-color: var(--dm-bg-card) !important;
        border-bottom-color: var(--dm-border-primary) !important;
    }

    .inbox-header h1 {
        color: #ffffff !important;
    }

    .inbox-sidebar {
        background-color: var(--dm-text-on-light) !important;
    }

    .inbox-content {
        background-color: var(--dm-text-on-light) !important;
    }

    /* ========================================== */
    /* 6. WELLNESS & PROJECT STYLING */
    /* ========================================== */

    .my-wellness-intro {
        background: var(--dm-bg-card) !important;
        border-color: var(--dm-border-primary) !important;
    }

    .wellness-intro-title {
        color: #ffffff !important;
    }

    .wellness-intro-text {
        color: var(--dm-text-primary) !important;
    }

    .wellness-intro-subtitle {
        color: #b8b3b0 !important;
    }

    /* Main container */
    .my-projects-container {
        background: var(--dm-bg-page) !important;
    }

    /* MY WELLNESS - PROJECTS SIDEBAR STYLING */
    .projects-sidebar__card {
        background: var(--dm-bg-card) !important;
        border-color: var(--dm-bg-card-secondary) !important;
    }
    
    .projects-sidebar__card:hover {
        border-color: #77883e !important;
    }
    
    .projects-sidebar__card--featured {
        background: rgba(119, 136, 62, 0.15) !important;
        border-color: #77883e !important;
    }
    
    /* Text elements in sidebar */
    .projects-sidebar__text {
        color: var(--dm-text-primary) !important;
    }
    
    .projects-sidebar__text strong {
        color: #d9cc94 !important;
    }
    
    .projects-sidebar__note {
        color: #a09b97 !important;
    }
    
    .projects-sidebar__title {
        color: #d9cc94 !important;
    }
    
    /* Stats card styling */
    .projects-stats-card {
        background: var(--dm-bg-card) !important;
        border-color: var(--dm-bg-card-secondary) !important;
    }
    
    /* Stat item labels and values */
    .stat-item__label {
        color: var(--dm-text-primary) !important;
    }
    
    .stat-item__value {
        color: #d9cc94 !important;
    }
    
    /* Filter and select elements */
    .projects-filters {
        background: transparent !important;
    }
    
    .filter-select {
        background: var(--dm-bg-card) !important;
        border-color: var(--dm-bg-card-secondary) !important;
        color: var(--dm-text-primary) !important;
    }
    
    .filter-select:focus {
        border-color: #77883e !important;
        box-shadow: 0 0 0 2px rgba(119, 136, 62, 0.2) !important;
    }
    
    /* Hero section */
    .projects-hero {
        background-color: #77883e !important;
    }
    
    /* CTA buttons in sidebar */
    .projects-sidebar__cta,
    .btn-path-style {
        background: var(--dm-bg-page) !important;
        border-color: var(--dm-bg-card-secondary) !important;
        color: var(--dm-text-primary) !important;
    }
    
    .btn-path-style:hover {
        background: #77883e !important;
        color: #ffffff !important;
    }

    /* MY WELLNESS - Empty states and descriptions */
    .projects-empty {
        background: var(--dm-bg-card) !important;
        border-color: var(--dm-bg-card-secondary) !important;
    }
    
    .projects-empty p {
        color: var(--dm-text-primary) !important;
    }
    
    /* Open to Match toggle section */
    .open-to-match-section {
        background: var(--dm-bg-card) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }
    
    .toggle-text {
        color: var(--dm-text-primary) !important;
    }
    
    .open-to-match-description {
        color: #b8b3b0 !important;
    }

    /* Future Feature Note */
    .future-feature-note {
        background-color: var(--dm-bg-card-secondary) !important;
        border-left-color: var(--dm-border-primary) !important;
        color: #b8b3b0 !important;
    }

    .feature-badge {
        background: var(--dm-bg-card-secondary) !important;
        color: var(--dm-text-primary) !important;
    }

    /* Additional Interactive */
    .match-settings-main {
        background: var(--dm-bg-page) !important;
    }
}