/* Chosen Journey Therapy Group - Dark Mode Theme System */

/* ============================================================================
   DARK MODE - Override existing CSS variables
   This file overrides the variables defined in style.css when dark mode is active
   Using :root[data-theme] for proper specificity and variable inheritance
   ============================================================================ */

:root[data-theme="dark"] {
    /* Primary Colors - Adjusted for dark mode */
    --primary-color: #4A6D8F;  /* Lighter blue for dark background */
    --primary-dark: #5A7D9F;
    --primary-light: #6A8DAF;
    --accent-color: #B8D4C8;
    --accent-light: #C8E4D8;

    /* Backgrounds - Dark theme */
    --white: #1a1a1a;
    --background-color: #0f0f0f;
    --background-secondary: #262626;
    --off-white: #1a1a1a;
    --border-color: #404040;

    /* Text - Inverted for dark mode */
    --text-color: #e5e5e5;
    --text-gray: #a3a3a3;
    --text-light: #737373;

    /* Semantic Colors - Adjusted */
    --success-color: #6dab8e;
    --error-color: #d87b7b;
    --warning-color: #e4b888;
    --info-color: #a8c5c0;

    /* Gradients - Dark theme */
    --gradient-primary: linear-gradient(135deg, #2a4a6b 0%, #3a5a7e 100%);
    --gradient-soft: linear-gradient(135deg, #1a1a1a 0%, #262626 100%);
    --gradient-accent: linear-gradient(135deg, #a8c5c0 0%, #92b8ad 100%);
    --gradient-overlay: linear-gradient(180deg, rgba(26,26,26,0.95) 0%, rgba(26,26,26,0.85) 100%);

    /* Shadows - Lighter for dark mode */
    --shadow-xs: 0 1px 2px rgba(255, 255, 255, 0.05);
    --shadow-sm: 0 2px 8px rgba(255, 255, 255, 0.08);
    --shadow-md: 0 4px 16px rgba(255, 255, 255, 0.1);
    --shadow-lg: 0 8px 32px rgba(255, 255, 255, 0.12);
    --shadow-xl: 0 12px 48px rgba(255, 255, 255, 0.15);
    --shadow-2xl: 0 24px 64px rgba(255, 255, 255, 0.18);

    /* Component-specific dark mode variables */
    --navbar-bg: rgba(26, 26, 26, 0.95);
    --menu-overlay-bg: rgba(38, 38, 38, 0.98);
    --section-overlay-bg: rgba(15, 15, 15, 0.92);
    --footer-bg: #0f0f0f;
    --footer-text: #a3a3a3;
    --footer-heading: #e5e5e5;
    --footer-tagline: #b8b8b8;
    --footer-link: #8a8a8a;
    --stats-section-bg: #1a2a3a;
    --stats-number-color: #e5e5e5;
    --stats-label-color: #B8D4C8;
    --carousel-bg: #1a1a1a;
}

/* ============================================================================
   Smooth theme transitions
   ============================================================================ */
*,
*::before,
*::after {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Disable transitions during theme switching to prevent flashing */
.theme-switching * {
    transition: none !important;
}

/* ============================================================================
   Component-specific dark mode adjustments
   ============================================================================ */

/* Cards */
:root[data-theme="dark"] .card {
    background: var(--white);
    border-color: var(--border-color);
}

/* Navigation - Fix transparency issue */
:root[data-theme="dark"] .navbar {
    background: var(--navbar-bg) !important;
    backdrop-filter: blur(12px);
    border-color: var(--border-color);
}

:root[data-theme="dark"] .navbar.scrolled {
    background: rgba(26, 26, 26, 0.8) !important;
    backdrop-filter: blur(16px);
}

:root[data-theme="dark"] .navbar-logo {
    color: var(--text-color) !important;
}

:root[data-theme="dark"] .navbar-logo .logo-text {
    background: var(--gradient-primary) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: var(--text-color) !important;
    background-clip: text !important;
}

:root[data-theme="dark"] .menu-link {
    color: var(--text-color) !important;
}

:root[data-theme="dark"] .menu-overlay {
    background: var(--menu-overlay-bg) !important;
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .hamburger-menu span {
    background: var(--text-color) !important;
}

:root[data-theme="dark"] nav {
    background: var(--primary-color);
    border-color: var(--border-color);
}

/* Buttons */
:root[data-theme="dark"] .btn-outline {
    color: var(--text-color);
    border-color: var(--border-color);
}

:root[data-theme="dark"] .btn-outline:hover {
    background: var(--background-secondary);
}

/* Forms */
:root[data-theme="dark"] .form-input,
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] input:not([type="radio"]):not([type="checkbox"]),
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
    background: var(--background-secondary);
    color: var(--text-color);
    border-color: var(--border-color);
}

:root[data-theme="dark"] .form-input::placeholder,
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
    color: var(--text-gray);
}

/* Tables */
:root[data-theme="dark"] table {
    background: var(--white);
}

:root[data-theme="dark"] th {
    background: var(--background-secondary);
    border-color: var(--border-color);
}

:root[data-theme="dark"] td {
    border-color: var(--border-color);
}

:root[data-theme="dark"] tr:hover {
    background: var(--background-secondary);
}

/* Modals */
:root[data-theme="dark"] .modal {
    background: rgba(0, 0, 0, 0.85);
}

:root[data-theme="dark"] .modal-content {
    background: var(--background-secondary);
    border-color: var(--border-color);
}

/* ============================================================================
   CHATBOT WIDGET DARK MODE - Fixed for mobile and desktop
   ============================================================================ */

/* Chatbot modal container */
:root[data-theme="dark"] #chatbot-modal,
:root[data-theme="dark"] #chatbot-container {
    background: var(--white) !important;
    border-color: var(--border-color) !important;
}

/* Chatbot messages container - THIS WAS APPEARING BLACK */
:root[data-theme="dark"] #chatbot-messages,
:root[data-theme="dark"] #fullpage-chatbot-messages {
    background: var(--background-color) !important;
}

/* Individual message bubbles - assistant messages */
:root[data-theme="dark"] #chatbot-messages > div > div,
:root[data-theme="dark"] #fullpage-chatbot-messages > div > div {
    background: var(--background-secondary) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* User messages - keep gradient but adjust for dark mode */
:root[data-theme="dark"] .chatbot-message.user {
    background: var(--gradient-primary) !important;
    color: white !important;
}

/* Quick actions area */
:root[data-theme="dark"] #quick-actions,
:root[data-theme="dark"] #fullpage-quick-actions {
    background: var(--background-color) !important;
    border-color: var(--border-color) !important;
}

/* Quick action buttons */
:root[data-theme="dark"] #quick-actions-buttons button,
:root[data-theme="dark"] #fullpage-quick-actions-buttons button {
    background: var(--white) !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Input area wrapper */
:root[data-theme="dark"] #chatbot-modal > div:last-child,
:root[data-theme="dark"] .container > div > div:last-child {
    background: var(--white) !important;
    border-color: var(--border-color) !important;
}

/* Input container */
:root[data-theme="dark"] #chatbot-input-container,
:root[data-theme="dark"] #fullpage-chatbot-form > div {
    background: var(--background-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Input field */
:root[data-theme="dark"] #chatbot-input,
:root[data-theme="dark"] #fullpage-chatbot-input {
    background: transparent !important;
    color: var(--text-color) !important;
}

:root[data-theme="dark"] #chatbot-input::placeholder,
:root[data-theme="dark"] #fullpage-chatbot-input::placeholder {
    color: var(--text-gray) !important;
}

/* Plus button */
:root[data-theme="dark"] #chatbot-input-container button {
    color: var(--text-gray) !important;
}

/* Upload menu */
:root[data-theme="dark"] #chatbot-upload-menu {
    background: var(--white) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

:root[data-theme="dark"] #chatbot-upload-menu button {
    color: var(--text-color) !important;
}

/* Selected files display */
:root[data-theme="dark"] #chatbot-selected-files {
    background: var(--background-secondary) !important;
}

/* Chatbot launcher tooltip */
:root[data-theme="dark"] #chatbot-tooltip {
    background: var(--background-secondary) !important;
    color: var(--text-color) !important;
}

/* Typing indicator */
:root[data-theme="dark"] #typing-indicator > div,
:root[data-theme="dark"] #fullpage-typing-indicator > div {
    background: var(--background-secondary) !important;
    color: var(--text-gray) !important;
}

/* Chatbot message text - ensure visibility */
:root[data-theme="dark"] #chatbot-messages p,
:root[data-theme="dark"] #fullpage-chatbot-messages p,
:root[data-theme="dark"] #chatbot-messages div {
    color: var(--text-color) !important;
}

:root[data-theme="dark"] .chatbot-message.assistant {
    background: var(--background-secondary) !important;
    border-color: var(--border-color) !important;
}

/* ============================================================================
   MOBILE CHATBOT LAYOUT FIXES
   ============================================================================ */

/* Fix upload menu positioning on mobile */
@media (max-width: 768px) {
    #chatbot-upload-menu {
        bottom: 75px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 2.5rem) !important;
        max-width: 320px !important;
    }

    /* Ensure chatbot modal fits mobile screens */
    #chatbot-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        bottom: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
    }

    /* Fix chatbot messages scrolling on mobile */
    #chatbot-messages,
    #fullpage-chatbot-messages {
        padding: 1rem !important;
    }
}

/* Alert / Flash Messages */
:root[data-theme="dark"] .alert {
    border-color: var(--border-color);
}

/* Links */
:root[data-theme="dark"] a {
    color: var(--accent-color);
}

:root[data-theme="dark"] a:hover {
    color: var(--accent-light);
}

/* Hero sections */
:root[data-theme="dark"] .hero {
    background: var(--gradient-soft);
}

/* Footer */
:root[data-theme="dark"] footer {
    background: var(--background-secondary);
    border-color: var(--border-color);
}

/* Images - slight brightness adjustment for dark mode */
:root[data-theme="dark"] img:not(.company-logo) {
    opacity: 0.9;
}

/* Company logo - maintain clarity */
:root[data-theme="dark"] .company-logo {
    filter: brightness(1.1);
}

/* Hero sections with background images - handle inline styles */
:root[data-theme="dark"] .hero[style*="background"] {
    /* Override inline gradient overlay for dark mode */
    background-blend-mode: darken !important;
}

/* Stats numbers in dark sections */
:root[data-theme="dark"] .stat-item .stat-number {
    color: var(--stats-number-color);
}

/* Override hardcoded white backgrounds in inline styles */
:root[data-theme="dark"] [style*="background: white"],
:root[data-theme="dark"] [style*="background-color: white"],
:root[data-theme="dark"] [style*="background:white"] {
    background: var(--white) !important;
}

/* Override hardcoded white text colors in inline styles */
:root[data-theme="dark"] [style*="color: white"],
:root[data-theme="dark"] [style*="color:#FFFFFF"],
:root[data-theme="dark"] [style*="color: #FFFFFF"] {
    color: var(--text-color) !important;
}

/* Preserve white text in buttons on dark backgrounds */
:root[data-theme="dark"] .btn-primary [style*="color"],
:root[data-theme="dark"] .btn[style*="background: white"] {
    color: var(--primary-dark) !important;
}

/* Section headings */
:root[data-theme="dark"] section h2[style*="color: white"] {
    color: var(--text-color) !important;
}

/* CTA sections */
:root[data-theme="dark"] section[style*="background: var(--gradient-primary)"] {
    background: var(--gradient-primary) !important;
}

:root[data-theme="dark"] section[style*="background: var(--gradient-primary)"] h2,
:root[data-theme="dark"] section[style*="background: var(--gradient-primary)"] p {
    color: var(--text-color);
}

/* ============================================================================
   ADMIN-SPECIFIC DARK MODE OVERRIDES
   Admin templates have embedded styles that need dark mode support
   ============================================================================ */

/* Admin navbar */
:root[data-theme="dark"] .admin-navbar {
    background: linear-gradient(135deg, #1a2a3a 0%, #2a3a4a 100%) !important;
}

/* Admin logo and text */
:root[data-theme="dark"] .admin-logo {
    color: var(--text-color) !important;
}

/* Admin menu buttons */
:root[data-theme="dark"] .admin-menu-btn {
    background: rgba(255,255,255,0.05) !important;
    color: var(--text-color) !important;
}

:root[data-theme="dark"] .admin-menu-btn:hover {
    background: rgba(255,255,255,0.1) !important;
}

/* Admin menu overlay/sidebar */
:root[data-theme="dark"] .admin-menu-overlay {
    background: var(--background-secondary) !important;
}

/* Admin sidebar menu items */
:root[data-theme="dark"] .admin-menu-item {
    background: transparent !important;
    color: var(--text-color) !important;
}

:root[data-theme="dark"] .admin-menu-item:hover {
    background: rgba(255,255,255,0.05) !important;
}

:root[data-theme="dark"] .admin-menu-item.active {
    background: rgba(74, 109, 143, 0.2) !important;
    color: var(--accent-color) !important;
}

/* Admin cards and panels */
:root[data-theme="dark"] .admin-card,
:root[data-theme="dark"] .admin-panel {
    background: var(--white) !important;
    border-color: var(--border-color) !important;
}

/* Admin sidebar sections */
:root[data-theme="dark"] .admin-sidebar {
    background: var(--background-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Admin tables */
:root[data-theme="dark"] .admin-table {
    background: var(--white) !important;
}

:root[data-theme="dark"] .admin-table th {
    background: var(--background-secondary) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .admin-table td {
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

:root[data-theme="dark"] .admin-table tr:hover {
    background: var(--background-secondary) !important;
}

/* Admin status badges */
:root[data-theme="dark"] .badge,
:root[data-theme="dark"] .status-badge {
    border: 1px solid var(--border-color);
}

/* Admin dashboard widgets */
:root[data-theme="dark"] .dashboard-widget {
    background: var(--white) !important;
    border-color: var(--border-color) !important;
}

/* Admin search bars */
:root[data-theme="dark"] .admin-search,
:root[data-theme="dark"] .search-input {
    background: var(--background-secondary) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* Override inline white backgrounds in admin templates */
:root[data-theme="dark"] [style*="background: white"],
:root[data-theme="dark"] [style*="background:white"],
:root[data-theme="dark"] [style*="background-color: white"],
:root[data-theme="dark"] [style*="background:#fff"],
:root[data-theme="dark"] [style*="background: #fff"] {
    background: var(--white) !important;
}

/* Override inline rgba white backgrounds */
:root[data-theme="dark"] [style*="background: rgba(255,255,255"],
:root[data-theme="dark"] [style*="background:rgba(255,255,255"] {
    background: rgba(38, 38, 38, 0.5) !important;
}

/* Preserve contrast for user avatars and profile elements */
:root[data-theme="dark"] [style*="background: rgba(255,255,255,0.2)"] {
    background: rgba(255,255,255,0.1) !important;
}