/**
 * Dark Theme Colors
 * ==================
 * Basecamp-inspired dark theme
 * Loaded when user selects dark mode
 */

:root[data-theme^="dark"] {
    /* ========== PRIMARY COLORS ========== */
    --primary: #4e8cef;
    --primary-hover: #6ba0f5;
    --primary-light: rgba(78, 140, 239, 0.15);

    /* ========== ACCENT COLORS ========== */
    --accent-green: #34d399;
    --accent-green-light: rgba(52, 211, 153, 0.15);
    --accent-yellow: #fbbf24;
    --accent-yellow-light: rgba(251, 191, 36, 0.12);
    --accent-red: #f87171;
    --accent-red-light: rgba(248, 113, 113, 0.15);
    --accent-blue: #60a5fa;
    --accent-blue-light: rgba(96, 165, 250, 0.15);
    --accent-purple: #a78bfa;
    --accent-purple-light: rgba(167, 139, 250, 0.15);
    --accent-orange: #fb923c;
    --accent-orange-light: rgba(251, 146, 60, 0.15);
    --accent-pink: #f472b6;
    --accent-pink-light: rgba(244, 114, 182, 0.15);
    --accent-teal: #2dd4bf;
    --accent-teal-light: rgba(45, 212, 191, 0.15);

    /* Dark-friendly "dark" accent variants (for subtitles on dark bg) */
    --accent-yellow-dark: #e5a918;
    --accent-green-dark: #2bb583;
    --accent-purple-dark: #9179e8;
    --primary-light: rgba(78, 140, 239, 0.2);

    /* ========== BACKGROUND COLORS ========== */
    --bg: #1a1d21;
    --bg-cream: #141618;
    --bg-secondary: #1e2228;
    --surface: #252a30;
    --card-bg: #252a30;
    --bg-hover: rgba(255, 255, 255, 0.06);

    /* ========== SCROLLBAR ========== */
    --scrollbar-track: #111418;
    --scrollbar-thumb: var(--primary);
    --scrollbar-thumb-hover: var(--primary-hover);

    /* ========== BORDER COLORS ========== */
    --border: #353b44;
    --border-light: #2a3038;
    --border-dark: #444d58;

    /* ========== TEXT COLORS ========== */
    --text: #e8eaed;
    --text-secondary: #9aa5b4;
    --text-muted: #6b7685;
    --text-light: #4a5568;

    /* ========== LINK COLORS ========== */
    --link-color: #4e8cef;
    --link-hover: #6ba0f5;

    /* ========== CLIENT/EXTERNAL COLORS ========== */
    --client-badge-bg: rgba(251, 191, 36, 0.15);
    --client-badge-text: #fbbf24;
    --client-banner-bg: rgba(251, 191, 36, 0.1);
    --client-banner-border: rgba(251, 191, 36, 0.3);

    /* ========== INPUT COLORS ========== */
    --input-bg: #1e2228;
    --input-border: #353b44;
    --input-focus-border: #4e8cef;
    --input-placeholder: #6b7685;

    /* ========== BADGE BACKGROUNDS (semi-transparent in dark) ========== */
    --badge-green-bg: rgba(52, 211, 153, 0.15);
    --badge-green-text: #34d399;
    --badge-blue-bg: rgba(96, 165, 250, 0.15);
    --badge-blue-text: #60a5fa;
    --badge-red-bg: rgba(248, 113, 113, 0.15);
    --badge-red-text: #f87171;
    --badge-yellow-bg: rgba(251, 191, 36, 0.15);
    --badge-yellow-text: #fbbf24;
    --badge-purple-bg: rgba(167, 139, 250, 0.15);
    --badge-purple-text: #a78bfa;
    --badge-pink-bg: rgba(244, 114, 182, 0.15);
    --badge-pink-text: #f472b6;
    --badge-orange-bg: rgba(251, 146, 60, 0.15);
    --badge-orange-text: #fb923c;
    --badge-indigo-bg: rgba(99, 102, 241, 0.15);
    --badge-indigo-text: #818cf8;
    --badge-teal-bg: rgba(45, 212, 191, 0.15);
    --badge-teal-text: #2dd4bf;
    --badge-gray-bg: rgba(156, 163, 175, 0.12);
    --badge-gray-text: #9ca3af;

    /* ========== TINTED BACKGROUNDS ========== */
    --bg-blue-tint: rgba(96, 165, 250, 0.08);
    --bg-green-tint: rgba(52, 211, 153, 0.08);
    --bg-amber-tint: rgba(251, 191, 36, 0.08);
    --bg-red-tint: rgba(248, 113, 113, 0.08);

    /* ========== ADDITIONAL TEXT ========== */
    --text-disabled: #4a5568;
    --text-on-primary: #ffffff;

    /* ========== COLORED BORDERS ========== */
    --border-red-light: rgba(248, 113, 113, 0.3);
    --border-green-light: rgba(52, 211, 153, 0.3);
    --border-blue-light: rgba(96, 165, 250, 0.3);
    --border-yellow-light: rgba(251, 191, 36, 0.3);

    /* ========== SHADOWS (darker for dark mode) ========== */
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
}

/* ========== SCROLLBAR FOR DARK MODE ========== */
:root[data-theme^="dark"] ::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

:root[data-theme^="dark"] ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
}

:root[data-theme^="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* ========== SELECTION FOR DARK MODE ========== */
:root[data-theme^="dark"] ::selection {
    background: rgba(78, 140, 239, 0.3);
    color: var(--text);
}

/* ========== BADGE OVERRIDES FOR DARK MODE ========== */
:root[data-theme^="dark"] .badge-primary { background: rgba(96, 165, 250, 0.15); color: var(--accent-blue); }
:root[data-theme^="dark"] .badge-success { background: rgba(52, 211, 153, 0.15); color: var(--accent-green); }
:root[data-theme^="dark"] .badge-warning { background: rgba(251, 191, 36, 0.15); color: var(--accent-yellow); }
:root[data-theme^="dark"] .badge-danger { background: rgba(248, 113, 113, 0.15); color: var(--accent-red); }
:root[data-theme^="dark"] .badge-gray { background: rgba(156, 163, 175, 0.15); color: var(--badge-gray-text); }
:root[data-theme^="dark"] .badge-purple { background: rgba(167, 139, 250, 0.15); color: var(--accent-purple); }
:root[data-theme^="dark"] .badge-pink { background: rgba(244, 114, 182, 0.15); color: var(--accent-pink); }
:root[data-theme^="dark"] .badge-teal { background: rgba(45, 212, 191, 0.15); color: var(--accent-teal); }
:root[data-theme^="dark"] .badge-orange { background: rgba(251, 146, 60, 0.15); color: var(--accent-orange); }

/* ========== TAG OVERRIDES FOR DARK MODE ========== */
:root[data-theme^="dark"] .tag-yellow { background: rgba(251, 191, 36, 0.15); color: var(--accent-yellow); }
:root[data-theme^="dark"] .tag-green { background: rgba(52, 211, 153, 0.15); color: var(--accent-green); }
:root[data-theme^="dark"] .tag-blue { background: rgba(96, 165, 250, 0.15); color: var(--accent-blue); }
:root[data-theme^="dark"] .tag-pink { background: rgba(244, 114, 182, 0.15); color: var(--accent-pink); }
:root[data-theme^="dark"] .tag-orange { background: rgba(251, 146, 60, 0.15); color: var(--accent-orange); }
:root[data-theme^="dark"] .tag-purple { background: rgba(167, 139, 250, 0.15); color: var(--accent-purple); }
:root[data-theme^="dark"] .tag-teal { background: rgba(45, 212, 191, 0.15); color: var(--accent-teal); }
:root[data-theme^="dark"] .tag-red { background: rgba(248, 113, 113, 0.15); color: var(--accent-red); }
:root[data-theme^="dark"] .tag-gray { background: rgba(156, 163, 175, 0.12); color: var(--badge-gray-text); }

/* ========== ALERT OVERRIDES FOR DARK MODE ========== */
:root[data-theme^="dark"] .alert-success {
    background: rgba(52, 211, 153, 0.1);
    color: var(--accent-green);
    border-color: rgba(52, 211, 153, 0.25);
}

:root[data-theme^="dark"] .alert-error,
:root[data-theme^="dark"] .alert-danger {
    background: rgba(248, 113, 113, 0.1);
    color: var(--accent-red);
    border-color: rgba(248, 113, 113, 0.25);
}

:root[data-theme^="dark"] .alert-warning {
    background: rgba(251, 191, 36, 0.1);
    color: var(--accent-yellow);
    border-color: rgba(251, 191, 36, 0.25);
}

:root[data-theme^="dark"] .alert-info {
    background: rgba(96, 165, 250, 0.1);
    color: var(--accent-blue);
    border-color: rgba(96, 165, 250, 0.25);
}

/* ========== TOAST OVERRIDES FOR DARK MODE ========== */
:root[data-theme^="dark"] .toast.success,
:root[data-theme^="dark"] .toast-success {
    background: rgba(52, 211, 153, 0.15);
    border-color: rgba(52, 211, 153, 0.3);
    color: var(--accent-green);
}

:root[data-theme^="dark"] .toast.error,
:root[data-theme^="dark"] .toast-error {
    background: rgba(248, 113, 113, 0.15);
    border-color: rgba(248, 113, 113, 0.3);
    color: var(--accent-red);
}

:root[data-theme^="dark"] .toast.warning,
:root[data-theme^="dark"] .toast-warning {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
    color: var(--accent-yellow);
}

:root[data-theme^="dark"] .toast.info,
:root[data-theme^="dark"] .toast-info {
    background: rgba(96, 165, 250, 0.15);
    border-color: rgba(96, 165, 250, 0.3);
    color: var(--accent-blue);
}

/* ========== HARDCODED COLOR OVERRIDES ========== */
:root[data-theme^="dark"] .bc-project-settings {
    background: var(--bg-secondary);
}

:root[data-theme^="dark"] .bc-settings-section {
    background: var(--surface);
}

:root[data-theme^="dark"] .bc-member-item {
    background: var(--bg-secondary);
}

:root[data-theme^="dark"] .bc-group-item {
    background: var(--bg-secondary);
}

:root[data-theme^="dark"] .bc-group-name {
    color: var(--text);
}

:root[data-theme^="dark"] .bc-variable-item {
    background: var(--bg-secondary);
}

:root[data-theme^="dark"] .bc-variable-value {
    color: var(--text-secondary);
}

:root[data-theme^="dark"] .bc-variable-key {
    color: var(--accent-purple);
}

:root[data-theme^="dark"] .bc-variable-link {
    color: var(--primary);
}

:root[data-theme^="dark"] .bc-key-suggestions {
    background: var(--surface);
}

:root[data-theme^="dark"] .bc-key-suggestion {
    color: var(--text-secondary);
    border-bottom-color: var(--border);
}

:root[data-theme^="dark"] .bc-key-suggestion:hover,
:root[data-theme^="dark"] .bc-key-suggestion.active {
    background: var(--bg-secondary);
    color: var(--accent-purple);
}

:root[data-theme^="dark"] .bc-template-chip {
    background: var(--bg-secondary);
    border-color: var(--border);
    color: var(--text-secondary);
}

:root[data-theme^="dark"] .bc-template-chip:hover {
    border-color: var(--primary);
    background: var(--surface);
}

:root[data-theme^="dark"] .bc-template-chip.selected {
    background: var(--primary);
    color: white;
}

:root[data-theme^="dark"] .bc-template-chip.timed {
    background: rgba(139, 92, 246, 0.15);
    border-color: #8b5cf6;
}

:root[data-theme^="dark"] .bc-template-chip.timed:hover {
    background: rgba(139, 92, 246, 0.25);
    border-color: #a78bfa;
}

:root[data-theme^="dark"] .bc-template-chip.timed.selected {
    background: #8b5cf6;
    color: white;
}

:root[data-theme^="dark"] .bc-description-view p {
    color: var(--text-secondary);
}

:root[data-theme^="dark"] .row-error td {
    background: rgba(248, 113, 113, 0.1) !important;
    border-bottom-color: rgba(248, 113, 113, 0.25) !important;
}

/* ========== MENTION OVERRIDE FOR DARK MODE ========== */
/* Override inline styles from old mentions saved in DB with hardcoded light colors */
:root[data-theme^="dark"] .mention,
:root[data-theme^="dark"] .mention[style],
:root[data-theme^="dark"] span.mention {
    background: var(--bg-secondary) !important;
    background-image: none !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

:root[data-theme^="dark"] .mention .mention-avatar {
    color: #fff !important;
}

/* ========== COMMENT BODY TEXT FOR DARK MODE ========== */
/* Override inline styles from TinyMCE (e.g. color: rgb(43, 55, 62)) on rendered comments */
:root[data-theme^="dark"] .comment-body-content p,
:root[data-theme^="dark"] .bc-comment-body-content p,
:root[data-theme^="dark"] .bc-comment-content p,
:root[data-theme^="dark"] .comment-body-content p[style],
:root[data-theme^="dark"] .bc-comment-body-content p[style],
:root[data-theme^="dark"] .bc-comment-content p[style] {
    color: var(--text) !important;
}

:root[data-theme^="dark"] .comment-body-content span:not(.mention):not(.mention-avatar),
:root[data-theme^="dark"] .bc-comment-body-content span:not(.mention):not(.mention-avatar),
:root[data-theme^="dark"] .bc-comment-content span:not(.mention):not(.mention-avatar) {
    color: var(--text) !important;
}

:root[data-theme^="dark"] .comment-body-content div[style],
:root[data-theme^="dark"] .bc-comment-body-content div[style],
:root[data-theme^="dark"] .bc-comment-content div[style] {
    color: var(--text) !important;
}

:root[data-theme^="dark"] .comment-body-content h1,
:root[data-theme^="dark"] .comment-body-content h2,
:root[data-theme^="dark"] .comment-body-content h3,
:root[data-theme^="dark"] .comment-body-content h4,
:root[data-theme^="dark"] .bc-comment-body-content h1,
:root[data-theme^="dark"] .bc-comment-body-content h2,
:root[data-theme^="dark"] .bc-comment-body-content h3,
:root[data-theme^="dark"] .bc-comment-body-content h4,
:root[data-theme^="dark"] .bc-comment-content h1,
:root[data-theme^="dark"] .bc-comment-content h2,
:root[data-theme^="dark"] .bc-comment-content h3,
:root[data-theme^="dark"] .bc-comment-content h4 {
    color: var(--text) !important;
}

/* Mention figcaption from Basecamp import */
:root[data-theme^="dark"] .bc-comment-content bc-attachment[content-type="application/vnd.basecamp.mention"] figcaption {
    color: var(--link-color) !important;
}

/* ========== NAV ICON OVERRIDES ========== */
:root[data-theme^="dark"] .nav-icon.blue { background: rgba(59, 130, 246, 0.15); color: var(--accent-blue); }
:root[data-theme^="dark"] .nav-icon.green { background: rgba(22, 163, 74, 0.15); color: var(--accent-green); }
:root[data-theme^="dark"] .nav-icon.orange { background: rgba(245, 158, 11, 0.15); color: var(--accent-yellow); }
:root[data-theme^="dark"] .nav-icon.purple { background: rgba(139, 92, 246, 0.15); color: var(--accent-purple); }
:root[data-theme^="dark"] .nav-icon.red { background: rgba(239, 68, 68, 0.15); color: var(--accent-red); }
:root[data-theme^="dark"] .nav-icon.teal { background: rgba(20, 184, 166, 0.15); color: var(--accent-teal); }

/* ========== ADVISOR PANEL DARK MODE ========== */
:root[data-theme^="dark"] .bc-advisor-panel {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--surface) 100%);
}

:root[data-theme^="dark"] .bc-advisor-critical {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.1) 0%, rgba(248, 113, 113, 0.05) 100%);
    border-color: rgba(248, 113, 113, 0.3);
    color: var(--accent-red);
}

:root[data-theme^="dark"] .bc-advisor-high {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(251, 191, 36, 0.05) 100%);
    border-color: rgba(251, 191, 36, 0.3);
    color: var(--accent-yellow);
}

:root[data-theme^="dark"] .bc-advisor-medium {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.1) 0%, rgba(96, 165, 250, 0.05) 100%);
    border-color: rgba(96, 165, 250, 0.3);
    color: var(--accent-blue);
}

:root[data-theme^="dark"] .bc-advisor-low {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.1) 0%, rgba(52, 211, 153, 0.05) 100%);
    border-color: rgba(52, 211, 153, 0.3);
    color: var(--accent-green);
}

:root[data-theme^="dark"] .bc-advisor-nudge {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.12) 0%, rgba(251, 191, 36, 0.06) 100%);
    border-color: rgba(251, 191, 36, 0.3);
}

:root[data-theme^="dark"] .bc-perm-active {
    background: rgba(52, 211, 153, 0.15);
    color: var(--accent-green);
}

:root[data-theme^="dark"] .bc-perm-inactive {
    background: rgba(248, 113, 113, 0.15);
    color: var(--accent-red);
}

/* ==========================================================================
   COMPREHENSIVE DARK MODE OVERRIDES FOR APP.HTML COMPONENTS
   ==========================================================================
   These overrides catch inline styles, hardcoded colors in templates,
   and component-specific patterns that CSS variables alone cannot fix.
   ========================================================================== */

/* ========== GLOBAL INLINE STYLE OVERRIDES ========== */
/* Override common inline style patterns with !important */
:root[data-theme^="dark"] [style*="background: #f0f9ff"],
:root[data-theme^="dark"] [style*="background: #e3f2fd"],
:root[data-theme^="dark"] [style*="background: #e0f2fe"],
:root[data-theme^="dark"] [style*="background: #f0f4ff"],
:root[data-theme^="dark"] [style*="background: #f3f7fc"],
:root[data-theme^="dark"] [style*="background: #d0ebff"] {
    background: rgba(96, 165, 250, 0.08) !important;
}

:root[data-theme^="dark"] [style*="background: #d1fae5"],
:root[data-theme^="dark"] [style*="background: #ecfdf5"],
:root[data-theme^="dark"] [style*="background: #e8f5e9"],
:root[data-theme^="dark"] [style*="background: #f1f8f2"],
:root[data-theme^="dark"] [style*="background: #d3f9d8"] {
    background: rgba(52, 211, 153, 0.1) !important;
}

:root[data-theme^="dark"] [style*="background: #fef2f2"],
:root[data-theme^="dark"] [style*="background: #ffe3e3"],
:root[data-theme^="dark"] [style*="background: #fff1f2"],
:root[data-theme^="dark"] [style*="background: #ffdeeb"] {
    background: rgba(248, 113, 113, 0.08) !important;
}

:root[data-theme^="dark"] [style*="background: #fff9db"],
:root[data-theme^="dark"] [style*="background: #fff3bf"],
:root[data-theme^="dark"] [style*="background: #fffbeb"],
:root[data-theme^="dark"] [style*="background: #fefce8"],
:root[data-theme^="dark"] [style*="background: #fffef5"],
:root[data-theme^="dark"] [style*="background: #fffde8"] {
    background: rgba(251, 191, 36, 0.08) !important;
}

:root[data-theme^="dark"] [style*="background: #f3e8ff"],
:root[data-theme^="dark"] [style*="background: #e5dbff"],
:root[data-theme^="dark"] [style*="background: #fdf4ff"] {
    background: rgba(167, 139, 250, 0.1) !important;
}

:root[data-theme^="dark"] [style*="background: #c3fae8"] {
    background: rgba(45, 212, 191, 0.1) !important;
}

:root[data-theme^="dark"] [style*="background: #ffe8cc"],
:root[data-theme^="dark"] [style*="background: #fed7aa"] {
    background: rgba(251, 146, 60, 0.1) !important;
}

/* Neutral gray backgrounds in inline styles */
:root[data-theme^="dark"] [style*="background: #f0f2f5"],
:root[data-theme^="dark"] [style*="background: #f5f6f6"],
:root[data-theme^="dark"] [style*="background: #f8f8f8"],
:root[data-theme^="dark"] [style*="background: #f8f9fa"],
:root[data-theme^="dark"] [style*="background: #f1f3f5"],
:root[data-theme^="dark"] [style*="background: #f0f4f8"],
:root[data-theme^="dark"] [style*="background: #f5f7f8"] {
    background: var(--bg-secondary) !important;
}

:root[data-theme^="dark"] [style*="background: #e2e8f0"],
:root[data-theme^="dark"] [style*="background: #e8e8e8"],
:root[data-theme^="dark"] [style*="background: #e8e1d8"],
:root[data-theme^="dark"] [style*="background: #e3edf7"] {
    background: var(--border) !important;
}

/* Dark code block backgrounds */
:root[data-theme^="dark"] [style*="background: #0f172a"],
:root[data-theme^="dark"] [style*="background: #1e293b"],
:root[data-theme^="dark"] [style*="background: #1a1a1a"] {
    background: var(--bg-cream) !important;
}

/* White backgrounds in inline styles */
:root[data-theme^="dark"] [style*="background: white"],
:root[data-theme^="dark"] [style*="background: #fff;"],
:root[data-theme^="dark"] [style*="background: #ffffff"] {
    background: var(--surface) !important;
}

/* ========== INLINE TEXT COLOR OVERRIDES ========== */
/* Dark text colors that need to become light */
:root[data-theme^="dark"] [style*="color: #111827"],
:root[data-theme^="dark"] [style*="color: #1f2937"],
:root[data-theme^="dark"] [style*="color: #374151"],
:root[data-theme^="dark"] [style*="color: #1e293b"],
:root[data-theme^="dark"] [style*="color: #334155"],
:root[data-theme^="dark"] [style*="color: #283c46"],
:root[data-theme^="dark"] [style*="color: #495057"],
:root[data-theme^="dark"] [style*="color: #1e3a5f"],
:root[data-theme^="dark"] [style*="color: #333"] {
    color: var(--text) !important;
}

:root[data-theme^="dark"] [style*="color: #6b7280"],
:root[data-theme^="dark"] [style*="color: #64748b"],
:root[data-theme^="dark"] [style*="color: #546e7a"],
:root[data-theme^="dark"] [style*="color: #4b5563"] {
    color: var(--text-secondary) !important;
}

:root[data-theme^="dark"] [style*="color: var(--badge-gray-text)"],
:root[data-theme^="dark"] [style*="color: #94a3b8"],
:root[data-theme^="dark"] [style*="color: #8696a0"] {
    color: var(--text-muted) !important;
}

/* ========== INLINE ACCENT COLOR OVERRIDES ========== */
:root[data-theme^="dark"] [style*="color: #dc3545"],
:root[data-theme^="dark"] [style*="color: #dc2626"],
:root[data-theme^="dark"] [style*="color: #ef4444"],
:root[data-theme^="dark"] [style*="color: #f5576c"] {
    color: var(--accent-red) !important;
}

:root[data-theme^="dark"] [style*="color: #28a745"],
:root[data-theme^="dark"] [style*="color: #22c55e"],
:root[data-theme^="dark"] [style*="color: #16a34a"],
:root[data-theme^="dark"] [style*="color: #2e7d32"],
:root[data-theme^="dark"] [style*="color: #166534"] {
    color: var(--accent-green) !important;
}

:root[data-theme^="dark"] [style*="color: #1565c0"],
:root[data-theme^="dark"] [style*="color: #1264a3"],
:root[data-theme^="dark"] [style*="color: #007bff"],
:root[data-theme^="dark"] [style*="color: #1e88e5"],
:root[data-theme^="dark"] [style*="color: #0ea5e9"],
:root[data-theme^="dark"] [style*="color: #2196F3"] {
    color: var(--accent-blue) !important;
}

:root[data-theme^="dark"] [style*="color: #f0ad4e"],
:root[data-theme^="dark"] [style*="color: #f59e0b"],
:root[data-theme^="dark"] [style*="color: #a16207"],
:root[data-theme^="dark"] [style*="color: #92400e"] {
    color: var(--accent-yellow) !important;
}

:root[data-theme^="dark"] [style*="color: #a855f7"],
:root[data-theme^="dark"] [style*="color: #7e22ce"],
:root[data-theme^="dark"] [style*="color: #667eea"],
:root[data-theme^="dark"] [style*="color: #6d28d9"] {
    color: var(--accent-purple) !important;
}

:root[data-theme^="dark"] [style*="color: #06b6d4"],
:root[data-theme^="dark"] [style*="color: #0d9488"],
:root[data-theme^="dark"] [style*="color: #0f766e"] {
    color: var(--accent-teal) !important;
}

:root[data-theme^="dark"] [style*="color: #ea580c"],
:root[data-theme^="dark"] [style*="color: #c2410c"] {
    color: var(--accent-orange) !important;
}

:root[data-theme^="dark"] [style*="color: #db2777"],
:root[data-theme^="dark"] [style*="color: #be185d"] {
    color: var(--accent-pink) !important;
}

:root[data-theme^="dark"] [style*="color: #38bdf8"] {
    color: #7dd3fc !important;
}

/* ========== INLINE BORDER COLOR OVERRIDES ========== */
:root[data-theme^="dark"] [style*="border-color: #e5e7eb"],
:root[data-theme^="dark"] [style*="border-color: #e9edef"],
:root[data-theme^="dark"] [style*="border: 1px solid #e5e7eb"],
:root[data-theme^="dark"] [style*="border: 1px solid #e9edef"],
:root[data-theme^="dark"] [style*="border-bottom: 1px solid #e5e7eb"],
:root[data-theme^="dark"] [style*="border-top: 1px solid #e5e7eb"] {
    border-color: var(--border) !important;
}

:root[data-theme^="dark"] [style*="border-color: #d1d5db"],
:root[data-theme^="dark"] [style*="border-color: #cbd5e1"],
:root[data-theme^="dark"] [style*="border-color: #ced4da"],
:root[data-theme^="dark"] [style*="border: 1px solid #d1d5db"] {
    border-color: var(--border-dark) !important;
}

:root[data-theme^="dark"] [style*="border-color: #fecaca"],
:root[data-theme^="dark"] [style*="border-color: #fca5a5"],
:root[data-theme^="dark"] [style*="border-color: var(--accent-red)"] {
    border-color: rgba(248, 113, 113, 0.3) !important;
}

:root[data-theme^="dark"] [style*="border-color: #a7f3d0"],
:root[data-theme^="dark"] [style*="border-color: #6ee7b7"],
:root[data-theme^="dark"] [style*="border-color: #4ade80"],
:root[data-theme^="dark"] [style*="border-color: #86efac"] {
    border-color: rgba(52, 211, 153, 0.3) !important;
}

:root[data-theme^="dark"] [style*="border-color: #fcd34d"],
:root[data-theme^="dark"] [style*="border-color: var(--accent-yellow)"],
:root[data-theme^="dark"] [style*="border-color: #fde047"] {
    border-color: rgba(251, 191, 36, 0.3) !important;
}

:root[data-theme^="dark"] [style*="border-color: #0ea5e9"],
:root[data-theme^="dark"] [style*="border-color: #bae6fd"],
:root[data-theme^="dark"] [style*="border: 1px solid #bae6fd"] {
    border-color: rgba(96, 165, 250, 0.3) !important;
}

:root[data-theme^="dark"] [style*="border: 1px solid #f5d0fe"],
:root[data-theme^="dark"] [style*="border-color: #f5d0fe"] {
    border-color: rgba(167, 139, 250, 0.3) !important;
}

:root[data-theme^="dark"] [style*="border: 1px solid #fde047"] {
    border-color: rgba(251, 191, 36, 0.3) !important;
}

:root[data-theme^="dark"] [style*="border: 2px solid #fff"],
:root[data-theme^="dark"] [style*="border: 2px solid white"] {
    border-color: var(--surface) !important;
}

/* ========== WHATSAPP / CHAT SPECIFIC OVERRIDES ========== */
:root[data-theme^="dark"] [style*="background: #008069"] {
    background: #1a3a32 !important;
}

:root[data-theme^="dark"] [style*="background: #25d366"] {
    background: #25d366 !important; /* Keep WhatsApp green */
}

:root[data-theme^="dark"] [style*="background: #2196F3"],
:root[data-theme^="dark"] [style*="background: #0ea5e9"] {
    background: #2563eb !important;
}

:root[data-theme^="dark"] [style*="background: #FF9800"] {
    background: #d97706 !important;
}

/* ========== LINEAR GRADIENT OVERRIDES ========== */
:root[data-theme^="dark"] [style*="linear-gradient(135deg, #f0f9ff"],
:root[data-theme^="dark"] [style*="linear-gradient(135deg, #e0f2fe"] {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.08) 0%, rgba(96, 165, 250, 0.04) 100%) !important;
}

/* ========== BC-CARD & COMMON COMPONENT OVERRIDES ========== */
:root[data-theme^="dark"] .bc-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

:root[data-theme^="dark"] .bc-card-header {
    border-bottom-color: var(--border) !important;
}

:root[data-theme^="dark"] .bc-stat-card,
:root[data-theme^="dark"] .bc-stat-box {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

:root[data-theme^="dark"] .bc-stat-label {
    color: var(--text-secondary) !important;
}

/* ========== TABLE OVERRIDES ========== */
:root[data-theme^="dark"] .bc-table th {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border) !important;
}

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

:root[data-theme^="dark"] .bc-table tr:hover td {
    background: rgba(255, 255, 255, 0.03) !important;
}

:root[data-theme^="dark"] .bc-table tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.02);
}

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

:root[data-theme^="dark"] table thead th {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

/* ========== MODAL OVERRIDES ========== */
:root[data-theme^="dark"] .bc-modal,
:root[data-theme^="dark"] .modal-content {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text);
}

:root[data-theme^="dark"] .bc-modal-header,
:root[data-theme^="dark"] .modal-header {
    border-bottom-color: var(--border) !important;
    background: var(--bg-secondary);
}

:root[data-theme^="dark"] .bc-modal-footer,
:root[data-theme^="dark"] .modal-footer {
    border-top-color: var(--border) !important;
    background: var(--bg-secondary);
}

:root[data-theme^="dark"] .bc-modal-backdrop,
:root[data-theme^="dark"] .modal-backdrop {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* ========== FORM OVERRIDES ========== */
:root[data-theme^="dark"] input,
:root[data-theme^="dark"] textarea,
:root[data-theme^="dark"] select,
:root[data-theme^="dark"] .bc-input,
:root[data-theme^="dark"] .bc-textarea,
:root[data-theme^="dark"] .bc-select,
:root[data-theme^="dark"] .form-control,
:root[data-theme^="dark"] .form-input {
    background: var(--bg-secondary) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

:root[data-theme^="dark"] input:focus,
:root[data-theme^="dark"] textarea:focus,
:root[data-theme^="dark"] select:focus,
:root[data-theme^="dark"] .bc-input:focus,
:root[data-theme^="dark"] .form-control:focus,
:root[data-theme^="dark"] .form-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(78, 140, 239, 0.15) !important;
}

:root[data-theme^="dark"] input::placeholder,
:root[data-theme^="dark"] textarea::placeholder {
    color: var(--text-muted) !important;
}

:root[data-theme^="dark"] select.form-control,
:root[data-theme^="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
}

:root[data-theme^="dark"] label {
    color: var(--text);
}

:root[data-theme^="dark"] .form-group label,
:root[data-theme^="dark"] .bc-form-label {
    color: var(--text-secondary);
}

/* ========== BUTTON OVERRIDES ========== */
:root[data-theme^="dark"] .btn-light,
:root[data-theme^="dark"] .bc-btn-light {
    background: var(--border) !important;
    color: var(--text) !important;
    border-color: var(--border-dark) !important;
}

:root[data-theme^="dark"] .btn-outline-secondary {
    border-color: var(--border-dark) !important;
    color: var(--text-secondary) !important;
}

:root[data-theme^="dark"] .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text) !important;
}

/* ========== DROPDOWN OVERRIDES ========== */
:root[data-theme^="dark"] .dropdown-menu,
:root[data-theme^="dark"] .bc-dropdown-menu {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

:root[data-theme^="dark"] .dropdown-item:hover,
:root[data-theme^="dark"] .bc-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

:root[data-theme^="dark"] .dropdown-divider {
    border-color: var(--border) !important;
}

/* ========== TODO & TASK COMPONENT OVERRIDES ========== */
:root[data-theme^="dark"] .bc-todo-item,
:root[data-theme^="dark"] .bc-todo-row {
    border-color: var(--border) !important;
}

:root[data-theme^="dark"] .bc-todo-item:hover,
:root[data-theme^="dark"] .bc-todo-row:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

:root[data-theme^="dark"] .bc-todo-group-header {
    background: var(--bg-secondary) !important;
    border-color: var(--border) !important;
}

:root[data-theme^="dark"] .bc-todo-detail,
:root[data-theme^="dark"] .bc-todo-detail-panel {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

:root[data-theme^="dark"] .bc-todo-meta {
    color: var(--text-muted) !important;
}

/* ========== COMMENT OVERRIDES ========== */
:root[data-theme^="dark"] .bc-comment {
    border-color: var(--border) !important;
}

:root[data-theme^="dark"] .bc-comment-header {
    background: var(--bg-secondary) !important;
}

:root[data-theme^="dark"] .bc-comment-body {
    color: var(--text);
}

:root[data-theme^="dark"] .bc-comment-meta {
    color: var(--text-muted) !important;
}

/* ========== PROGRESS BAR OVERRIDES ========== */
:root[data-theme^="dark"] .bc-progress-bar,
:root[data-theme^="dark"] .progress {
    background: var(--border) !important;
}

/* ========== KANBAN OVERRIDES ========== */
:root[data-theme^="dark"] .bc-kanban-column {
    background: var(--bg-secondary) !important;
    border-color: var(--border) !important;
}

:root[data-theme^="dark"] .bc-kanban-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

:root[data-theme^="dark"] .bc-kanban-card:hover {
    border-color: var(--border-dark) !important;
}

:root[data-theme^="dark"] .bc-kanban-header {
    border-bottom-color: var(--border) !important;
}

/* ========== SUGGESTION / AUTOCOMPLETE OVERRIDES ========== */
:root[data-theme^="dark"] .bc-suggestion-compact:hover {
    background: rgba(96, 165, 250, 0.08) !important;
}

:root[data-theme^="dark"] .bc-suggestion-list {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

/* ========== TABS OVERRIDES ========== */
:root[data-theme^="dark"] .bc-tabs .bc-tab {
    color: var(--text-secondary);
    border-color: transparent;
}

:root[data-theme^="dark"] .bc-tabs .bc-tab.active,
:root[data-theme^="dark"] .bc-tabs .bc-tab:hover {
    color: var(--text);
}

:root[data-theme^="dark"] .nav-tabs {
    border-color: var(--border);
}

:root[data-theme^="dark"] .nav-tabs .nav-link {
    color: var(--text-secondary);
}

:root[data-theme^="dark"] .nav-tabs .nav-link.active {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border) var(--border) var(--surface);
}

/* ========== SIDEBAR OVERRIDES ========== */
:root[data-theme^="dark"] .bc-sidebar,
:root[data-theme^="dark"] .bc-sidebar-nav {
    background: var(--bg) !important;
    border-color: var(--border) !important;
}

:root[data-theme^="dark"] .bc-sidebar-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

:root[data-theme^="dark"] .bc-sidebar-item.active {
    background: rgba(78, 140, 239, 0.12) !important;
    color: var(--primary) !important;
}

/* ========== HEADER OVERRIDES ========== */
:root[data-theme^="dark"] .bc-header,
:root[data-theme^="dark"] .bc-project-header {
    background: var(--bg) !important;
    border-color: var(--border) !important;
}

:root[data-theme^="dark"] .bc-breadcrumb a {
    color: var(--text-secondary) !important;
}

:root[data-theme^="dark"] .bc-breadcrumb a:hover {
    color: var(--text) !important;
}

/* ========== TIMELINE OVERRIDES ========== */
:root[data-theme^="dark"] .bc-timeline-item {
    border-color: var(--border) !important;
}

:root[data-theme^="dark"] .bc-timeline-connector {
    background: var(--border) !important;
}

/* ========== SEARCH OVERRIDES ========== */
:root[data-theme^="dark"] .bc-search-results {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

:root[data-theme^="dark"] .bc-search-result-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* ========== TOOLTIP / POPOVER OVERRIDES ========== */
:root[data-theme^="dark"] .bc-tooltip,
:root[data-theme^="dark"] .bc-popover {
    background: var(--border) !important;
    color: var(--text) !important;
    border-color: var(--border-dark) !important;
}

/* ========== EMPTY STATE OVERRIDES ========== */
:root[data-theme^="dark"] .bc-empty-state {
    color: var(--text-muted);
}

:root[data-theme^="dark"] .bc-empty-state i {
    color: var(--border-dark) !important;
}

/* ========== AVATAR OVERRIDES ========== */
:root[data-theme^="dark"] .bc-avatar {
    border-color: var(--border) !important;
}

:root[data-theme^="dark"] [style*="background: #ccc"] {
    background: var(--border-dark) !important;
}

/* ========== REPORTING / STATS OVERRIDES ========== */
:root[data-theme^="dark"] .bc-report-section {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

:root[data-theme^="dark"] .bc-chart-container {
    background: var(--surface) !important;
}

/* ========== NOTIFICATION DOT OVERRIDES ========== */
:root[data-theme^="dark"] .bc-dot-gray {
    background: var(--text-muted);
}

/* ========== PRIORITY BADGE OVERRIDES ========== */
:root[data-theme^="dark"] .bc-priority-dot.priority-3 {
    background: rgba(251, 146, 60, 0.15) !important;
    color: var(--accent-orange) !important;
}

:root[data-theme^="dark"] .bc-kanban-priority.bc-priority-low {
    background: var(--text-muted) !important;
}

/* ========== CODE BLOCK OVERRIDES ========== */
:root[data-theme^="dark"] code {
    background: var(--bg-secondary);
    color: var(--text);
}

:root[data-theme^="dark"] pre {
    background: var(--bg-secondary) !important;
    border-color: var(--border);
}

:root[data-theme^="dark"] [style*="background: #e0f2fe"] {
    background: rgba(96, 165, 250, 0.12) !important;
}

/* ========== FEATURE TOGGLE OVERRIDES ========== */
:root[data-theme^="dark"] .bc-feature-toggle {
    background: var(--bg-secondary) !important;
    border-color: var(--border) !important;
}

/* ========== STATUS / BADGE ACCENT OVERRIDES ========== */
:root[data-theme^="dark"] .status-badge {
    border: none;
}

:root[data-theme^="dark"] .text-success {
    color: var(--accent-green) !important;
}

:root[data-theme^="dark"] .text-danger {
    color: var(--accent-red) !important;
}

:root[data-theme^="dark"] .text-warning {
    color: var(--accent-yellow) !important;
}

:root[data-theme^="dark"] .text-info {
    color: var(--accent-blue) !important;
}

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

/* ========== HR / SEPARATOR OVERRIDES ========== */
:root[data-theme^="dark"] hr {
    border-color: var(--border);
}

/* ========== MISC INLINE BACKGROUND OVERRIDES ========== */
:root[data-theme^="dark"] [style*="background: #166534"] {
    background: #16a34a !important;
}

:root[data-theme^="dark"] [style*="background: #b91c1c"] {
    background: #dc2626 !important;
}

:root[data-theme^="dark"] [style*="background: #ea580c"] {
    background: #f97316 !important;
}

:root[data-theme^="dark"] [style*="background: #1e7f4e"],
:root[data-theme^="dark"] [style*="background: #3d9960"] {
    background: #16a34a !important;
}

/* ========== KEYFRAME ANIMATION OVERRIDES ========== */
/* Note: Cannot override keyframe colors directly with CSS selectors.
   These are handled by the CSS variable replacements in style blocks. */

/* ========== BOX SHADOW OVERRIDES ========== */
:root[data-theme^="dark"] [style*="box-shadow"] {
    --tw-shadow-color: rgba(0, 0, 0, 0.3);
}

/* ========== SCROLLBAR WITHIN COMPONENTS ========== */
:root[data-theme^="dark"] .bc-sidebar::-webkit-scrollbar-track,
:root[data-theme^="dark"] .bc-todo-list::-webkit-scrollbar-track,
:root[data-theme^="dark"] .bc-kanban-column::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

:root[data-theme^="dark"] .bc-sidebar::-webkit-scrollbar-thumb,
:root[data-theme^="dark"] .bc-todo-list::-webkit-scrollbar-thumb,
:root[data-theme^="dark"] .bc-kanban-column::-webkit-scrollbar-thumb {
    background: var(--border-dark);
}

/* ========== BILLING / SETTINGS OVERRIDES ========== */
:root[data-theme^="dark"] .bc-billing-card,
:root[data-theme^="dark"] .bc-settings-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

/* ========== IP WHITELIST / ADMIN PANELS ========== */
:root[data-theme^="dark"] [style*="background: #fefce8"] {
    background: rgba(251, 191, 36, 0.08) !important;
}

/* ========== GROUP COLOR DOTS ========== */
:root[data-theme^="dark"] .bc-color-dot {
    border-color: var(--border);
}

/* ========== GENERAL ELEMENT OVERRIDES ========== */
:root[data-theme^="dark"] blockquote {
    border-left-color: var(--border);
    color: var(--text-secondary);
}

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

:root[data-theme^="dark"] legend {
    color: var(--text-secondary);
}

/* ========== LINK COLOR IN DARK MODE ========== */
:root[data-theme^="dark"] a {
    color: var(--primary);
}

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

/* Preserve white text on colored buttons when rendered as <a> tags */
:root[data-theme^="dark"] a.btn-primary,
:root[data-theme^="dark"] a.btn-primary:hover,
:root[data-theme^="dark"] a.btn-success,
:root[data-theme^="dark"] a.btn-success:hover {
    color: white;
}

:root[data-theme^="dark"] a.bc-btn-primary,
:root[data-theme^="dark"] a.bc-btn-primary:hover {
    color: white;
}

/* ========== CHIP / TAG OVERRIDES ========== */
:root[data-theme^="dark"] .bc-chip,
:root[data-theme^="dark"] .bc-tag {
    border-color: var(--border);
}

/* ========== ROW ERROR OVERRIDE ========== */
:root[data-theme^="dark"] .row-error td {
    background: rgba(248, 113, 113, 0.08) !important;
    border-bottom-color: rgba(248, 113, 113, 0.2) !important;
}

/* ========== TAG OVERRIDES (app.html bc-tag classes) ========== */
:root[data-theme^="dark"] .bc-tag-yellow { background: rgba(251, 191, 36, 0.15) !important; color: var(--accent-yellow) !important; }
:root[data-theme^="dark"] .bc-tag-red { background: rgba(248, 113, 113, 0.15) !important; color: var(--accent-red) !important; }
:root[data-theme^="dark"] .bc-tag-purple { background: rgba(167, 139, 250, 0.15) !important; color: var(--accent-purple) !important; }
:root[data-theme^="dark"] .bc-tag-pink { background: rgba(244, 114, 182, 0.15) !important; color: var(--accent-pink) !important; }
:root[data-theme^="dark"] .bc-tag-indigo { background: rgba(99, 102, 241, 0.15) !important; color: var(--badge-indigo-text) !important; }
:root[data-theme^="dark"] .bc-tag-teal { background: rgba(45, 212, 191, 0.15) !important; color: var(--accent-teal) !important; }
:root[data-theme^="dark"] .bc-tag-orange { background: rgba(251, 146, 60, 0.15) !important; color: var(--accent-orange) !important; }
:root[data-theme^="dark"] .bc-tag-gray { background: rgba(156, 163, 175, 0.12) !important; color: var(--badge-gray-text) !important; }

/* ========== TRELLO/JIRA INTEGRATION STYLES ========== */
:root[data-theme^="dark"] .bc-trello-card,
:root[data-theme^="dark"] [class*="trello"] {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

/* Trello-style text colors */
:root[data-theme^="dark"] [style*="color: #172b4d"],
:root[data-theme^="dark"] [style*="color: #1d1c1d"] {
    color: var(--text) !important;
}

:root[data-theme^="dark"] [style*="color: #5e6c84"],
:root[data-theme^="dark"] [style*="color: #6e6d7a"],
:root[data-theme^="dark"] [style*="color: #8993a4"],
:root[data-theme^="dark"] [style*="color: #8a8987"],
:root[data-theme^="dark"] [style*="color: #6c757d"],
:root[data-theme^="dark"] [style*="color: #b8b7b5"],
:root[data-theme^="dark"] [style*="color: #b0bac9"] {
    color: var(--text-secondary) !important;
}

:root[data-theme^="dark"] [style*="color: #0079bf"] {
    color: var(--accent-blue) !important;
}

:root[data-theme^="dark"] [style*="color: #61bd4f"],
:root[data-theme^="dark"] [style*="color: #3cb371"],
:root[data-theme^="dark"] [style*="color: #1e7f4e"],
:root[data-theme^="dark"] [style*="color: #1d7874"] {
    color: var(--accent-green) !important;
}

:root[data-theme^="dark"] [style*="color: #eb5a46"],
:root[data-theme^="dark"] [style*="color: #e74c3c"],
:root[data-theme^="dark"] [style*="color: #c62828"] {
    color: var(--accent-red) !important;
}

:root[data-theme^="dark"] [style*="color: #856404"],
:root[data-theme^="dark"] [style*="color: #664d03"],
:root[data-theme^="dark"] [style*="color: #f9a825"] {
    color: var(--accent-yellow) !important;
}

:root[data-theme^="dark"] [style*="color: #7b1fa2"],
:root[data-theme^="dark"] [style*="color: #303f9f"] {
    color: var(--accent-purple) !important;
}

:root[data-theme^="dark"] [style*="color: #c2185b"] {
    color: var(--accent-pink) !important;
}

:root[data-theme^="dark"] [style*="color: #00796b"] {
    color: var(--accent-teal) !important;
}

:root[data-theme^="dark"] [style*="color: #ef6c00"] {
    color: var(--accent-orange) !important;
}

:root[data-theme^="dark"] [style*="color: #616161"] {
    color: var(--badge-gray-text) !important;
}

/* Trello-style backgrounds */
:root[data-theme^="dark"] [style*="background: #5ba4cf"],
:root[data-theme^="dark"] [style*="background: #0079bf"] {
    background: #2563eb !important;
}

:root[data-theme^="dark"] [style*="background: #61bd4f"],
:root[data-theme^="dark"] [style*="background: #3cb371"],
:root[data-theme^="dark"] [style*="background: #176b41"] {
    background: #16a34a !important;
}

:root[data-theme^="dark"] [style*="background: #d6d9dc"],
:root[data-theme^="dark"] [style*="background: #e0e0e0"],
:root[data-theme^="dark"] [style*="background: #e9ecef"] {
    background: var(--border) !important;
}

:root[data-theme^="dark"] [style*="background: #f9f8f6"],
:root[data-theme^="dark"] [style*="background: #f9f9f9"] {
    background: var(--bg-secondary) !important;
}

:root[data-theme^="dark"] [style*="background: #e8f4fd"],
:root[data-theme^="dark"] [style*="background: #e8f4ec"] {
    background: rgba(96, 165, 250, 0.08) !important;
}

/* Trello label colors - pastel in dark mode */
:root[data-theme^="dark"] [style*="background: #c8e6c9"],
:root[data-theme^="dark"] [style*="background: #a5d6a7"] {
    background: rgba(52, 211, 153, 0.2) !important;
}

:root[data-theme^="dark"] [style*="background: #bbdefb"],
:root[data-theme^="dark"] [style*="background: #90caf9"] {
    background: rgba(96, 165, 250, 0.2) !important;
}

:root[data-theme^="dark"] [style*="background: #ffe0b2"],
:root[data-theme^="dark"] [style*="background: #ffcc80"] {
    background: rgba(251, 146, 60, 0.2) !important;
}

:root[data-theme^="dark"] [style*="background: #ffcdd2"],
:root[data-theme^="dark"] [style*="background: #ef9a9a"] {
    background: rgba(248, 113, 113, 0.2) !important;
}

/* ========== BOOTSTRAP-LIKE ALERT/BADGE OVERRIDES ========== */
:root[data-theme^="dark"] [style*="background: #fff3cd"],
:root[data-theme^="dark"] [style*="background: #ffe69c"] {
    background: rgba(251, 191, 36, 0.12) !important;
}

:root[data-theme^="dark"] [style*="border-color: #ffca2c"] {
    border-color: rgba(251, 191, 36, 0.3) !important;
}

:root[data-theme^="dark"] [style*="border-color: #3cb371"],
:root[data-theme^="dark"] [style*="border-color: #81c784"] {
    border-color: rgba(52, 211, 153, 0.3) !important;
}

:root[data-theme^="dark"] [style*="border-color: #64b5f6"] {
    border-color: rgba(96, 165, 250, 0.3) !important;
}

:root[data-theme^="dark"] [style*="border-color: #0079bf"] {
    border-color: rgba(96, 165, 250, 0.3) !important;
}

:root[data-theme^="dark"] [style*="border-color: #1e7f4e"] {
    border-color: rgba(52, 211, 153, 0.3) !important;
}

:root[data-theme^="dark"] [style*="border-color: #e0e0e0"],
:root[data-theme^="dark"] [style*="border-bottom-color: #e0e0e0"] {
    border-color: var(--border) !important;
}

/* Slack integration overrides */
:root[data-theme^="dark"] [style*="background: #1264a3"] {
    background: #2563eb !important;
}

:root[data-theme^="dark"] [style*="background: #17a2b8"] {
    background: #0891b2 !important;
}

:root[data-theme^="dark"] [style*="background: #ffc107"] {
    background: #d97706 !important;
}

:root[data-theme^="dark"] [style*="background: #28a745"] {
    background: #16a34a !important;
}

:root[data-theme^="dark"] [style*="background: #dc3545"] {
    background: #dc2626 !important;
}

/* ========== PURPLE TINT BACKGROUNDS ========== */
:root[data-theme^="dark"] [style*="background: #f5f3ff"] {
    background: rgba(167, 139, 250, 0.08) !important;
}

/* ========== KEYFRAME HIGHLIGHT BACKGROUNDS ========== */
:root[data-theme^="dark"] [style*="background: #fde68a"] {
    background: rgba(251, 191, 36, 0.25) !important;
}

:root[data-theme^="dark"] [style*="background: #eff6ff"] {
    background: rgba(96, 165, 250, 0.08) !important;
}

/* ========== SOFT TINT BACKGROUNDS ========== */
:root[data-theme^="dark"] [style*="background: #fff5f5"] {
    background: rgba(248, 113, 113, 0.06) !important;
}

:root[data-theme^="dark"] [style*="background: #bfdbfe"] {
    background: rgba(96, 165, 250, 0.15) !important;
}

:root[data-theme^="dark"] [style*="background: #e9d5ff"] {
    background: rgba(167, 139, 250, 0.15) !important;
}

:root[data-theme^="dark"] [style*="background: #fffef9"] {
    background: var(--bg-cream) !important;
}

/* ========== TERMINAL/CODE BLOCK DARK BACKGROUNDS ========== */
/* These are already dark - keep or darken slightly */
:root[data-theme^="dark"] [style*="background: #334155"] {
    background: #1e293b !important;
}

:root[data-theme^="dark"] [style*="background: #475569"] {
    background: #334155 !important;
}

:root[data-theme^="dark"] [style*="background: #64748b"] {
    background: #475569 !important;
}

/* ========== SOCIAL MEDIA BRAND COLORS (keep as-is) ========== */
/* #d7141a (Pinterest/YouTube red) and #3b5998 (Facebook blue) are brand
   colors - they should stay the same in dark mode for recognition */

/* ==========================================================================
   PAGE-SPECIFIC DARK MODE OVERRIDES - ROUND 2
   ==========================================================================
   Targeting specific issues found in visual testing of each page.
   ========================================================================== */

/* ======================================================================
   1. TODO DETAIL PAGE
   ====================================================================== */

/* Priority badges - need dark mode colors */
:root[data-theme^="dark"] .bc-priority-low {
    background: rgba(52, 211, 153, 0.2) !important;
    color: var(--accent-green) !important;
    border-color: rgba(52, 211, 153, 0.4) !important;
}
:root[data-theme^="dark"] .bc-priority-low.bc-priority-active {
    background: rgba(52, 211, 153, 0.3) !important;
    border-color: var(--accent-green) !important;
}

:root[data-theme^="dark"] .bc-priority-normal {
    background: rgba(96, 165, 250, 0.2) !important;
    color: var(--accent-blue) !important;
    border-color: rgba(96, 165, 250, 0.4) !important;
}
:root[data-theme^="dark"] .bc-priority-normal.bc-priority-active {
    background: rgba(96, 165, 250, 0.3) !important;
    border-color: var(--accent-blue) !important;
}

:root[data-theme^="dark"] .bc-priority-high {
    background: rgba(251, 146, 60, 0.2) !important;
    color: var(--accent-orange) !important;
    border-color: rgba(251, 146, 60, 0.4) !important;
}
:root[data-theme^="dark"] .bc-priority-high.bc-priority-active {
    background: rgba(251, 146, 60, 0.3) !important;
    border-color: var(--accent-orange) !important;
}

:root[data-theme^="dark"] .bc-priority-critical {
    background: rgba(248, 113, 113, 0.2) !important;
    color: var(--accent-red) !important;
    border-color: rgba(248, 113, 113, 0.4) !important;
}
:root[data-theme^="dark"] .bc-priority-critical.bc-priority-active {
    background: rgba(248, 113, 113, 0.3) !important;
    border-color: var(--accent-red) !important;
}

/* Meta labels (Přiřazeno, Termín, Priorita, etc.) */
:root[data-theme^="dark"] .bc-meta-label {
    color: var(--text-secondary) !important;
}

:root[data-theme^="dark"] .bc-meta-value {
    color: var(--text) !important;
}

/* Meta row borders */
:root[data-theme^="dark"] .bc-meta-row-notes {
    border-top-color: var(--border) !important;
}

:root[data-theme^="dark"] .bc-meta-row-subtasks {
    border-top-color: var(--border) !important;
}

/* Todo title */
:root[data-theme^="dark"] .bc-todo-title {
    color: var(--text) !important;
}

/* Progress list */
:root[data-theme^="dark"] .bc-progress-item {
    border-bottom-color: var(--border) !important;
}

:root[data-theme^="dark"] .bc-progress-total {
    color: var(--text-secondary) !important;
    border-top-color: var(--border) !important;
}

/* Added-by footer */
:root[data-theme^="dark"] .bc-todo-added-by {
    border-top-color: var(--border) !important;
    color: var(--text-muted) !important;
}

:root[data-theme^="dark"] .bc-added-label,
:root[data-theme^="dark"] .bc-added-on {
    color: var(--text-muted) !important;
}

:root[data-theme^="dark"] .bc-added-user {
    color: var(--primary) !important;
}

:root[data-theme^="dark"] .bc-todo-views-trigger {
    color: var(--primary) !important;
}

/* Timer button */
:root[data-theme^="dark"] .btn-timer-sm {
    background: #16a34a !important;
    color: white !important;
}

/* Three-dots action button */
:root[data-theme^="dark"] .btn-todo-actions {
    background: var(--bg-secondary) !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}

:root[data-theme^="dark"] .btn-todo-actions:hover {
    background: var(--border) !important;
    color: var(--text) !important;
}

/* Dropdown items */
:root[data-theme^="dark"] .bc-dropdown-item {
    color: var(--text) !important;
}

:root[data-theme^="dark"] .bc-dropdown-item i {
    color: var(--text-secondary) !important;
}

:root[data-theme^="dark"] .bc-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

:root[data-theme^="dark"] .bc-dropdown-optgroup {
    border-top-color: var(--border) !important;
}

:root[data-theme^="dark"] .bc-dropdown-optgroup-label {
    color: var(--text-muted) !important;
}

/* Checklist progress */
:root[data-theme^="dark"] .bc-checklist-progress-percent {
    color: var(--text-secondary) !important;
}

:root[data-theme^="dark"] .bc-checklist-progress-fill {
    background: var(--accent-blue) !important;
}

:root[data-theme^="dark"] .bc-checklist-progress-fill.bc-checklist-complete {
    background: var(--accent-green) !important;
}

:root[data-theme^="dark"] .bc-checklist-hide-toggle {
    color: var(--text-secondary) !important;
}

:root[data-theme^="dark"] .bc-checklist-hide-toggle:hover {
    background: var(--border) !important;
}

:root[data-theme^="dark"] .bc-checklist-hide-toggle.bc-active {
    background: #2563eb !important;
    color: white !important;
}

/* Subtask input */
:root[data-theme^="dark"] .bc-subtask-input {
    background: var(--bg-secondary) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

:root[data-theme^="dark"] .bc-subtask-input:focus {
    border-bottom-color: var(--accent-green) !important;
    color: var(--text) !important;
}

/* Subtask item */
:root[data-theme^="dark"] .bc-subtask-item {
    border-bottom-color: var(--border) !important;
}

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

:root[data-theme^="dark"] .bc-subtask-text.bc-subtask-done {
    color: var(--text-muted) !important;
}

/* Subtodo depth background colors */
:root[data-theme^="dark"] .bc-subtodo.bc-depth-3 {
    background: rgba(251, 191, 36, 0.15) !important;
}

/* Attachment cards */
:root[data-theme^="dark"] .bc-attachment-card {
    background: var(--bg-secondary) !important;
    border-color: var(--border) !important;
}

:root[data-theme^="dark"] .bc-attachment-name {
    color: var(--text) !important;
}

:root[data-theme^="dark"] .bc-attachment-meta {
    color: var(--text-muted) !important;
}

/* Notes/description rendered content */
:root[data-theme^="dark"] .bc-rendered-content {
    color: var(--text) !important;
}

:root[data-theme^="dark"] .bc-rendered-content p,
:root[data-theme^="dark"] .bc-rendered-content li,
:root[data-theme^="dark"] .bc-rendered-content span {
    color: inherit !important;
}

/* Section titles */
:root[data-theme^="dark"] .bc-section-title {
    color: var(--text) !important;
    border-bottom-color: var(--border) !important;
}

/* ======================================================================
   2. CHAT PAGE
   ====================================================================== */

/* Chat sidebar */
:root[data-theme^="dark"] .chat-sidebar {
    background: var(--bg) !important;
    border-right-color: var(--border) !important;
}

:root[data-theme^="dark"] .chat-sidebar-title {
    color: var(--text) !important;
}

:root[data-theme^="dark"] .chat-sidebar-title i {
    color: var(--accent-purple) !important;
}

/* Chat search */
:root[data-theme^="dark"] .chat-search-input {
    background: var(--bg-secondary) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

:root[data-theme^="dark"] .chat-search-input:focus {
    background: var(--surface) !important;
    border-color: var(--accent-purple) !important;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.1) !important;
}

:root[data-theme^="dark"] .chat-search-input::placeholder {
    color: var(--text-muted) !important;
}

/* Chat filter tabs */
:root[data-theme^="dark"] .chat-tabs {
    border-bottom-color: var(--border) !important;
}

:root[data-theme^="dark"] .chat-tab {
    color: var(--text-secondary) !important;
}

:root[data-theme^="dark"] .chat-tab:hover {
    color: var(--text) !important;
}

:root[data-theme^="dark"] .chat-tab.active {
    color: var(--accent-purple) !important;
    border-bottom-color: var(--accent-purple) !important;
}

:root[data-theme^="dark"] .chat-tab-badge {
    background: var(--accent-red) !important;
}

/* Chat list items */
:root[data-theme^="dark"] .chat-item {
    border-bottom-color: var(--border-light) !important;
    color: var(--text) !important;
}

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

:root[data-theme^="dark"] .chat-item.active {
    background: rgba(167, 139, 250, 0.08) !important;
    border-left-color: var(--accent-purple) !important;
}

:root[data-theme^="dark"] .chat-item-name {
    color: var(--text) !important;
}

:root[data-theme^="dark"] .chat-item-time {
    color: var(--text-muted) !important;
}

:root[data-theme^="dark"] .chat-item-message {
    color: var(--text-secondary) !important;
}

:root[data-theme^="dark"] .chat-item-message.typing {
    color: var(--accent-green) !important;
}

:root[data-theme^="dark"] .chat-item-unread {
    background: var(--accent-purple) !important;
}

/* Chat list empty state */
:root[data-theme^="dark"] .chat-list-empty {
    color: var(--text-muted) !important;
}

:root[data-theme^="dark"] .chat-list-empty i {
    color: var(--border-dark) !important;
}

/* Chat main area */
:root[data-theme^="dark"] .chat-main {
    background: var(--bg) !important;
}

:root[data-theme^="dark"] .chat-main-empty {
    color: var(--text-muted) !important;
}

:root[data-theme^="dark"] .chat-main-empty i {
    color: var(--border-dark) !important;
}

:root[data-theme^="dark"] .chat-main-empty h3 {
    color: var(--text-secondary) !important;
}

/* Chat header */
:root[data-theme^="dark"] .chat-header {
    background: var(--surface) !important;
    border-bottom-color: var(--border) !important;
}

:root[data-theme^="dark"] .chat-header-name {
    color: var(--text) !important;
}

:root[data-theme^="dark"] .chat-header-status.online {
    color: var(--accent-green) !important;
}

/* Chat message bubbles */
:root[data-theme^="dark"] .chat-message-bubble {
    background: var(--surface) !important;
    color: var(--text) !important;
}

:root[data-theme^="dark"] .chat-message.own .chat-message-bubble {
    background: rgba(52, 211, 153, 0.15) !important;
    color: var(--text) !important;
}

:root[data-theme^="dark"] .chat-message-bubble a {
    color: var(--accent-blue) !important;
}

:root[data-theme^="dark"] .chat-message.own .chat-message-bubble a {
    color: var(--accent-blue) !important;
}

:root[data-theme^="dark"] .chat-message-time {
    color: var(--text-muted) !important;
}

:root[data-theme^="dark"] .chat-message-name {
    color: var(--text-secondary) !important;
}

/* Typing dots */
:root[data-theme^="dark"] .typing-dots span {
    background: var(--text-muted) !important;
}

/* Chat input area */
:root[data-theme^="dark"] .chat-input-wrapper {
    border-top-color: var(--border) !important;
    background: var(--bg-secondary) !important;
}

:root[data-theme^="dark"] .chat-input {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

:root[data-theme^="dark"] .chat-input:focus {
    border-color: var(--accent-purple) !important;
}

:root[data-theme^="dark"] .chat-input::placeholder {
    color: var(--text-muted) !important;
}

/* Send button */
:root[data-theme^="dark"] .chat-send-btn {
    background: var(--accent-purple) !important;
    color: white !important;
}

:root[data-theme^="dark"] .chat-send-btn:hover {
    background: #8b5cf6 !important;
}

:root[data-theme^="dark"] .chat-send-btn:disabled {
    background: var(--border) !important;
    color: var(--text-muted) !important;
}

/* Reply preview */
:root[data-theme^="dark"] .chat-reply-preview {
    background: rgba(167, 139, 250, 0.08) !important;
    border-left-color: var(--accent-purple) !important;
}

:root[data-theme^="dark"] .chat-reply-name {
    color: var(--accent-purple) !important;
}

:root[data-theme^="dark"] .chat-reply-close:hover {
    background: rgba(167, 139, 250, 0.15) !important;
    color: var(--accent-purple) !important;
}

/* Project avatar gradient */
:root[data-theme^="dark"] .chat-item-avatar.project,
:root[data-theme^="dark"] .chat-header-avatar.project {
    background: linear-gradient(135deg, #7c3aed, var(--accent-purple)) !important;
}

/* Chat scrollbar */
:root[data-theme^="dark"] .chat-list::-webkit-scrollbar-thumb {
    background: var(--border-dark) !important;
}

:root[data-theme^="dark"] .chat-list::-webkit-scrollbar-thumb:hover {
    background: var(--border-dark) !important;
}

:root[data-theme^="dark"] .chat-list::-webkit-scrollbar-track {
    background: var(--bg) !important;
}

/* Chat skeleton loading */
:root[data-theme^="dark"] .skeleton,
:root[data-theme^="dark"] .skeleton-avatar,
:root[data-theme^="dark"] .skeleton-line {
    background: linear-gradient(90deg, var(--surface) 25%, var(--border) 50%, var(--surface) 75%) !important;
    background-size: 200% 100% !important;
}

/* Floating new chat button */
:root[data-theme^="dark"] [style*="background: #8b5cf6"] {
    background: #7c3aed !important;
}

/* Chat messages area */
:root[data-theme^="dark"] .chat-messages {
    background: var(--bg) !important;
}

/* Chat date separator */
:root[data-theme^="dark"] .chat-date-separator span {
    background: var(--bg) !important;
    color: var(--text-muted) !important;
}

:root[data-theme^="dark"] .chat-date-separator::before {
    background: var(--border) !important;
}

/* ======================================================================
   3. ACTIVITY / HOME PAGE
   ====================================================================== */

/* Activity detail blocks (comment previews, changelog diffs) */
:root[data-theme^="dark"] .bc-activity-detail {
    background: var(--bg-secondary) !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}

:root[data-theme^="dark"] .bc-activity-detail::before {
    background: var(--bg-secondary) !important;
    border-top-color: var(--border) !important;
    border-left-color: var(--border) !important;
}

:root[data-theme^="dark"] .bc-activity-detail.comment-preview {
    color: var(--text) !important;
}

/* Activity body text */
:root[data-theme^="dark"] .bc-activity-body {
    color: var(--text) !important;
}

:root[data-theme^="dark"] .bc-activity-body span {
    color: var(--text) !important;
}

:root[data-theme^="dark"] .bc-activity-user {
    color: var(--text) !important;
}

:root[data-theme^="dark"] .bc-activity-time {
    color: var(--text-muted) !important;
}

:root[data-theme^="dark"] .bc-activity-item-link {
    color: var(--primary) !important;
}

:root[data-theme^="dark"] .bc-activity-project-link {
    color: var(--primary) !important;
}

/* Changelog diff display */
:root[data-theme^="dark"] .bc-changelog-old {
    background: rgba(248, 113, 113, 0.15) !important;
    color: var(--accent-red) !important;
}

:root[data-theme^="dark"] .bc-changelog-new {
    background: rgba(52, 211, 153, 0.15) !important;
    color: var(--accent-green) !important;
}

:root[data-theme^="dark"] .bc-changelog-label {
    color: var(--text) !important;
}

:root[data-theme^="dark"] .bc-changelog-arrow {
    color: var(--text-muted) !important;
}

/* Activity date header */
:root[data-theme^="dark"] .bc-activity-date-header {
    color: var(--text) !important;
    border-bottom-color: var(--border) !important;
}

/* Timeline markers */
:root[data-theme^="dark"] .bc-timeline-marker {
    background: var(--bg) !important;
    border-color: var(--primary) !important;
}

:root[data-theme^="dark"] .bc-timeline::before {
    background: var(--border) !important;
}

/* Date preset buttons (Dnes, Tento tyden, Tento mesic) */
:root[data-theme^="dark"] .bc-date-preset-btn {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}

:root[data-theme^="dark"] .bc-date-preset-btn:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    background: rgba(78, 140, 239, 0.08) !important;
}

:root[data-theme^="dark"] .bc-date-preset-btn.active {
    background: rgba(78, 140, 239, 0.12) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

/* Tags page empty state */
:root[data-theme^="dark"] .bc-empty-state {
    color: var(--text-muted) !important;
}

:root[data-theme^="dark"] .bc-empty-state i {
    color: var(--border-dark) !important;
}

/* ======================================================================
   4. REPORTING / DASHBOARD PAGE
   ====================================================================== */

/* Filter box container */
:root[data-theme^="dark"] .bc-filter-box {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

/* Filter labels */
:root[data-theme^="dark"] .bc-filter-label {
    color: var(--text-secondary) !important;
}

/* Filter inputs */
:root[data-theme^="dark"] .bc-filter-input {
    background: var(--bg-secondary) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

:root[data-theme^="dark"] .bc-filter-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(78, 140, 239, 0.15) !important;
}

:root[data-theme^="dark"] .bc-filter-input::placeholder {
    color: var(--text-muted) !important;
}

:root[data-theme^="dark"] .bc-filter-input option {
    background: var(--surface) !important;
    color: var(--text) !important;
}

/* Dropdown menu in reporting */
:root[data-theme^="dark"] .bc-dropdown-menu {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

/* Search dropdown */
:root[data-theme^="dark"] .bc-search-dropdown .bc-dropdown-menu {
    background: var(--surface) !important;
}

/* Report sections */
:root[data-theme^="dark"] .bc-report-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

:root[data-theme^="dark"] .bc-report-header {
    border-bottom-color: var(--border) !important;
}

/* Report table */
:root[data-theme^="dark"] .bc-report-table th {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border) !important;
}

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

:root[data-theme^="dark"] .bc-report-table tr:hover td {
    background: rgba(255, 255, 255, 0.03) !important;
}

:root[data-theme^="dark"] .bc-report-table tfoot td {
    background: var(--bg-secondary) !important;
    font-weight: 600;
}

/* ======================================================================
   5. SHARED / NAVIGATION COMPONENTS
   ====================================================================== */

/* Navigation items in header (shared.css overrides) */
:root[data-theme^="dark"] .bc-nav-item {
    color: var(--text-secondary) !important;
}

:root[data-theme^="dark"] .bc-nav-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text) !important;
}

:root[data-theme^="dark"] .bc-nav-item.active {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text) !important;
}

/* User dropdown header */
:root[data-theme^="dark"] .bc-user-dropdown-header {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border) !important;
}

:root[data-theme^="dark"] .bc-user-dropdown-menu {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

:root[data-theme^="dark"] .bc-user-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Online indicator */
:root[data-theme^="dark"] .bc-online-btn {
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}

:root[data-theme^="dark"] .bc-online-btn:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--text-muted) !important;
}

:root[data-theme^="dark"] .bc-online-btn.online-green {
    color: var(--accent-green) !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
}

:root[data-theme^="dark"] .bc-online-btn.online-green:hover {
    background: rgba(52, 211, 153, 0.08) !important;
    border-color: rgba(52, 211, 153, 0.5) !important;
}

:root[data-theme^="dark"] .bc-online-btn.online-orange {
    color: var(--accent-yellow) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

:root[data-theme^="dark"] .bc-online-btn.online-orange:hover {
    background: rgba(251, 191, 36, 0.08) !important;
    border-color: rgba(251, 191, 36, 0.5) !important;
}

:root[data-theme^="dark"] .bc-online-btn.online-red {
    color: var(--accent-red) !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
}

:root[data-theme^="dark"] .bc-online-btn.online-red:hover {
    background: rgba(248, 113, 113, 0.08) !important;
    border-color: rgba(248, 113, 113, 0.5) !important;
}

/* Search icon */
:root[data-theme^="dark"] .bc-search-icon {
    color: var(--text-muted) !important;
}

/* Hey/notification badge - keep red but darken slightly */
:root[data-theme^="dark"] .hey-badge {
    background: #dc2626 !important;
}

/* Feature icons (gradient backgrounds - keep vibrant in dark) */
:root[data-theme^="dark"] .feature-icon.blue { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; }
:root[data-theme^="dark"] .feature-icon.green { background: linear-gradient(135deg, #22c55e, #16a34a) !important; }
:root[data-theme^="dark"] .feature-icon.purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important; }
:root[data-theme^="dark"] .feature-icon.orange { background: linear-gradient(135deg, #f97316, #ea580c) !important; }
:root[data-theme^="dark"] .feature-icon.pink { background: linear-gradient(135deg, #ec4899, #db2777) !important; }
:root[data-theme^="dark"] .feature-icon.cyan { background: linear-gradient(135deg, #06b6d4, #0891b2) !important; }

/* Breadcrumb / project header bar */
:root[data-theme^="dark"] .bc-project-bar {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

:root[data-theme^="dark"] .bc-project-bar a {
    color: var(--text-secondary) !important;
}

:root[data-theme^="dark"] .bc-project-bar a:hover {
    color: var(--text) !important;
}

/* Service bar (progress bar at top) */
:root[data-theme^="dark"] .bc-service-bar {
    background: var(--surface) !important;
    border-bottom-color: var(--border) !important;
}

/* General body/page background */
:root[data-theme^="dark"] body {
    background: var(--bg) !important;
    color: var(--text) !important;
}

/* Main content wrapper */
:root[data-theme^="dark"] .bc-main,
:root[data-theme^="dark"] .bc-content,
:root[data-theme^="dark"] .bc-page {
    background: var(--bg) !important;
}

/* Select element options */
:root[data-theme^="dark"] select option {
    background: var(--surface) !important;
    color: var(--text) !important;
}

/* Pagination */
:root[data-theme^="dark"] .bc-pagination a,
:root[data-theme^="dark"] .bc-pagination span {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}

:root[data-theme^="dark"] .bc-pagination a:hover {
    background: rgba(78, 140, 239, 0.08) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

:root[data-theme^="dark"] .bc-pagination .active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}

/* Confirm/action modals */
:root[data-theme^="dark"] .swal2-popup {
    background: var(--surface) !important;
    color: var(--text) !important;
}

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

:root[data-theme^="dark"] .swal2-html-container {
    color: var(--text-secondary) !important;
}

:root[data-theme^="dark"] .swal2-input {
    background: var(--bg-secondary) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

/* Tippy tooltips */
:root[data-theme^="dark"] .tippy-box[data-theme~='bcs'] {
    background-color: var(--border) !important;
    color: var(--text) !important;
}

:root[data-theme^="dark"] .tippy-box[data-theme~='bcs'] .tippy-arrow::before {
    border-top-color: var(--border) !important;
}

/* Floating bar (bottom action bar) */
:root[data-theme^="dark"] .bc-floating-bar {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3) !important;
}

:root[data-theme^="dark"] .bc-floating-bar-btn {
    color: var(--text-secondary) !important;
}

:root[data-theme^="dark"] .bc-floating-bar-btn:hover {
    color: var(--text) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Tab container (project tabs) */
:root[data-theme^="dark"] .bc-tab-nav {
    border-bottom-color: var(--border) !important;
}

:root[data-theme^="dark"] .bc-tab-item {
    color: var(--text-secondary) !important;
}

:root[data-theme^="dark"] .bc-tab-item:hover {
    color: var(--text) !important;
}

:root[data-theme^="dark"] .bc-tab-item.active {
    color: var(--primary) !important;
    border-bottom-color: var(--primary) !important;
}

/* Inline styles for "no data" text/placeholders */
:root[data-theme^="dark"] [style*="color: var(--text-muted)"] {
    color: var(--text-muted) !important;
}

/* Additional background colors that may exist as inline */
:root[data-theme^="dark"] [style*="background: #f9fafb"],
:root[data-theme^="dark"] [style*="background-color: #f9fafb"],
:root[data-theme^="dark"] [style*="background: #f3f4f6"],
:root[data-theme^="dark"] [style*="background-color: #f3f4f6"] {
    background: var(--bg-secondary) !important;
}

:root[data-theme^="dark"] [style*="background: #f5f5f5"],
:root[data-theme^="dark"] [style*="background-color: #f5f5f5"] {
    background: var(--bg-secondary) !important;
}

/* Additional border inline overrides */
:root[data-theme^="dark"] [style*="border: 1px solid #e8e1d8"],
:root[data-theme^="dark"] [style*="border-color: #e8e1d8"],
:root[data-theme^="dark"] [style*="border-top: 1px solid #e8e1d8"],
:root[data-theme^="dark"] [style*="border-bottom: 1px solid #e8e1d8"] {
    border-color: var(--border) !important;
}

/* Overdue/today border colors in Vue bindings */
:root[data-theme^="dark"] [style*="border-left: 4px solid #dc2626"] {
    border-left-color: var(--accent-red) !important;
}

:root[data-theme^="dark"] [style*="border-left: 4px solid #22c55e"] {
    border-left-color: var(--accent-green) !important;
}

:root[data-theme^="dark"] [style*="border-left: 4px solid #e2e8f0"] {
    border-left-color: var(--border) !important;
}

/* ======================================================================
   ROUND 3 FIXES - Remaining dark mode issues
   ====================================================================== */

/* ========== --bg-subtle variable (branding background) ========== */
:root[data-theme^="dark"] {
    --bg-subtle: var(--bg-secondary) !important;
}

/* ========== CHAT PAGE - wallpaper & header ========== */
/* Remove wallpaper image in dark mode, use solid bg */
:root[data-theme^="dark"] [style*="url(/images/bg_white.png)"],
:root[data-theme^="dark"] [style*="bg_white.png"] {
    background-image: none !important;
    background-color: var(--bg) !important;
}

/* Chat WhatsApp-style green header */
:root[data-theme^="dark"] .bc-chat-header,
:root[data-theme^="dark"] [style*="background: #008069"],
:root[data-theme^="dark"] [style*="background:#008069"] {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border) !important;
}

/* Chat header green border */
:root[data-theme^="dark"] [style*="border-bottom: 1px solid #e9edef"] {
    border-bottom-color: var(--border) !important;
}

/* Chat green gradient header override */
:root[data-theme^="dark"] [style*="background: linear-gradient(135deg, #e8f5e9"],
:root[data-theme^="dark"] [style*="background: linear-gradient(135deg, #c8e6c9"] {
    background: var(--bg-secondary) !important;
}

:root[data-theme^="dark"] [style*="border-bottom: 1px solid #a5d6a7"] {
    border-bottom-color: var(--border) !important;
}

/* ========== MOJE AKTIVITA - activity cards ========== */
:root[data-theme^="dark"] .bc-my-activity-section [style*="background: var(--bg-subtle)"] {
    background: var(--bg-secondary) !important;
}

/* ========== ASSIGNEE MODAL ========== */
:root[data-theme^="dark"] .bc-assignee-option.selected {
    background: rgba(52, 211, 153, 0.15) !important;
}

:root[data-theme^="dark"] .bc-assignee-option .bc-check-icon {
    color: var(--accent-green) !important;
}

:root[data-theme^="dark"] .bc-assignee-actions {
    background: var(--bg-secondary) !important;
    border-top-color: var(--border) !important;
}

:root[data-theme^="dark"] .bc-assignee-option:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Assignee scrollbar */
:root[data-theme^="dark"] .bc-assignee-list::-webkit-scrollbar-track {
    background: var(--bg-secondary) !important;
}

:root[data-theme^="dark"] .bc-assignee-list::-webkit-scrollbar-thumb {
    background: var(--border-dark) !important;
}

/* ========== TODO FLOATING BAR ========== */
:root[data-theme^="dark"] .bc-todo-floating-bar {
    background: rgba(30, 34, 40, 0.92) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
}

/* ========== TINYMCE EDITOR ========== */
/* TinyMCE toolbar and chrome */
:root[data-theme^="dark"] .tox-tinymce {
    border-color: var(--border) !important;
}

:root[data-theme^="dark"] .tox .tox-toolbar,
:root[data-theme^="dark"] .tox .tox-toolbar__overflow,
:root[data-theme^="dark"] .tox .tox-toolbar__primary {
    background: var(--surface) !important;
    border-bottom-color: var(--border) !important;
}

:root[data-theme^="dark"] .tox .tox-tbtn {
    color: var(--text-secondary) !important;
}

:root[data-theme^="dark"] .tox .tox-tbtn:hover,
:root[data-theme^="dark"] .tox .tox-tbtn--enabled {
    background: var(--border) !important;
    color: var(--text) !important;
}

:root[data-theme^="dark"] .tox .tox-tbtn svg {
    fill: var(--text-secondary) !important;
}

:root[data-theme^="dark"] .tox .tox-tbtn:hover svg,
:root[data-theme^="dark"] .tox .tox-tbtn--enabled svg {
    fill: var(--text) !important;
}

:root[data-theme^="dark"] .tox .tox-edit-area__iframe {
    background: var(--bg-secondary) !important;
}

:root[data-theme^="dark"] .tox .tox-statusbar {
    background: var(--surface) !important;
    border-top-color: var(--border) !important;
    color: var(--text-muted) !important;
}

:root[data-theme^="dark"] .tox .tox-statusbar a,
:root[data-theme^="dark"] .tox .tox-statusbar__path-item {
    color: var(--text-muted) !important;
}

:root[data-theme^="dark"] .tox .tox-toolbar-overlord {
    background: var(--surface) !important;
}

:root[data-theme^="dark"] .tox .tox-editor-header {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
}

:root[data-theme^="dark"] .tox .tox-toolbar__group {
    border-color: var(--border) !important;
}

:root[data-theme^="dark"] .tox .tox-edit-area {
    border-color: var(--border) !important;
}

:root[data-theme^="dark"] .tox .tox-promotion,
:root[data-theme^="dark"] .tox .tox-statusbar__resize-handle {
    display: none !important;
}

:root[data-theme^="dark"] .tox .tox-sidebar-wrap {
    background: var(--bg-secondary) !important;
}

:root[data-theme^="dark"] .tox .tox-menu,
:root[data-theme^="dark"] .tox .tox-collection,
:root[data-theme^="dark"] .tox .tox-dialog {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

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

:root[data-theme^="dark"] .tox .tox-collection__item--active {
    background: var(--border) !important;
}

:root[data-theme^="dark"] .tox .tox-dialog__header {
    background: var(--surface) !important;
    border-bottom-color: var(--border) !important;
    color: var(--text) !important;
}

:root[data-theme^="dark"] .tox .tox-dialog__footer {
    background: var(--surface) !important;
    border-top-color: var(--border) !important;
}

:root[data-theme^="dark"] .tox .tox-textfield,
:root[data-theme^="dark"] .tox .tox-textarea,
:root[data-theme^="dark"] .tox .tox-selectfield select {
    background: var(--bg) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

:root[data-theme^="dark"] .tox .tox-label {
    color: var(--text-secondary) !important;
}

:root[data-theme^="dark"] .tox .tox-tbtn--bespoke {
    background: var(--bg-secondary) !important;
    border-color: var(--border) !important;
}

:root[data-theme^="dark"] .tox .tox-tbtn--bespoke .tox-tbtn__select-label {
    color: var(--text-secondary) !important;
}

:root[data-theme^="dark"] .tox .tox-tbtn--bespoke .tox-tbtn__select-chevron svg {
    fill: var(--text-muted) !important;
}

/* ========== COMMENT BODY ========== */
:root[data-theme^="dark"] .bc-comment-body-content {
    color: var(--text) !important;
}

/* Collapsed comment gradient */
:root[data-theme^="dark"] .bc-comment-body-content.bc-comment-collapsed::after {
    background: linear-gradient(to bottom, transparent, var(--bg)) !important;
}

/* ========== AI ASISTENT (RAG) PANEL ========== */
/* Found/Active state - dark green tint */
:root[data-theme^="dark"] .bc-rag-assistant-block.rag-found {
    background: rgba(52, 211, 153, 0.08) !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

:root[data-theme^="dark"] .bc-rag-assistant-block.rag-found .bc-rag-header {
    background: rgba(52, 211, 153, 0.12) !important;
    border-bottom-color: rgba(52, 211, 153, 0.2) !important;
}

/* Loading state - dark yellow tint */
:root[data-theme^="dark"] .bc-rag-assistant-block.rag-loading {
    background: rgba(251, 191, 36, 0.08) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

:root[data-theme^="dark"] .bc-rag-assistant-block.rag-loading .bc-rag-header {
    background: rgba(251, 191, 36, 0.12) !important;
    border-bottom-color: rgba(251, 191, 36, 0.2) !important;
}

/* Low confidence - dark red tint */
:root[data-theme^="dark"] .bc-rag-assistant-block.rag-low {
    background: rgba(248, 113, 113, 0.08) !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

:root[data-theme^="dark"] .bc-rag-assistant-block.rag-low .bc-rag-header {
    background: rgba(248, 113, 113, 0.1) !important;
    border-bottom-color: rgba(248, 113, 113, 0.15) !important;
}

/* Empty/Idle state */
:root[data-theme^="dark"] .bc-rag-assistant-block.rag-empty {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

:root[data-theme^="dark"] .bc-rag-assistant-block.rag-empty .bc-rag-header {
    background: rgba(107, 118, 133, 0.1) !important;
    border-bottom-color: var(--border) !important;
}

/* AI Disabled state */
:root[data-theme^="dark"] .bc-rag-assistant-block.ai-disabled {
    background: var(--bg-secondary) !important;
    border-color: var(--border) !important;
    opacity: 0.6 !important;
}

:root[data-theme^="dark"] .bc-rag-assistant-block.ai-disabled .bc-rag-header {
    background: rgba(107, 118, 133, 0.1) !important;
    border-bottom-color: var(--border) !important;
}

/* RAG toggle button */
:root[data-theme^="dark"] .bc-rag-ai-toggle {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

:root[data-theme^="dark"] .bc-rag-ai-toggle:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* RAG status text */
:root[data-theme^="dark"] .bc-rag-status {
    color: var(--text-secondary) !important;
}

/* ========== RAG CHECKLIST (Kontrolní seznam) ========== */
:root[data-theme^="dark"] .bc-rag-checklist {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    border-left-color: var(--accent-purple) !important;
}

:root[data-theme^="dark"] .bc-rag-checklist-item {
    background: var(--bg-secondary) !important;
    border-color: var(--border) !important;
}

:root[data-theme^="dark"] .bc-rag-checklist-item.satisfied {
    background: rgba(52, 211, 153, 0.08) !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
}

:root[data-theme^="dark"] .bc-rag-checklist-item:not(.satisfied) {
    background: rgba(248, 113, 113, 0.08) !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
}

/* Checklist items in comments */
:root[data-theme^="dark"] .comment-content ul.rag-checklist li {
    border-bottom-color: var(--border) !important;
}

/* ========== VAS RADCE (Advisor Panel) ========== */
:root[data-theme^="dark"] .bc-ai-advisor-panel {
    background: var(--surface) !important;
}

:root[data-theme^="dark"] .bc-ai-panel-header {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border) !important;
}

:root[data-theme^="dark"] .bc-ai-panel-body {
    background: var(--surface) !important;
}

/* Health score circle background track */
:root[data-theme^="dark"] .bc-ai-health-circle {
    background: conic-gradient(var(--score-color, var(--border-dark)) calc(var(--score-percent, 0) * 3.6deg), var(--border) 0deg) !important;
}

:root[data-theme^="dark"] .bc-ai-health-circle-inner {
    background: var(--surface) !important;
}

:root[data-theme^="dark"] .bc-ai-health-score {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border) !important;
}

/* AI Warning items */
:root[data-theme^="dark"] .bc-ai-warning-critical {
    background: rgba(248, 113, 113, 0.1) !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
}

:root[data-theme^="dark"] .bc-ai-warning-high {
    background: rgba(251, 191, 36, 0.1) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

:root[data-theme^="dark"] .bc-ai-warning-medium {
    background: rgba(96, 165, 250, 0.1) !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
}

:root[data-theme^="dark"] .bc-ai-warning-low {
    background: rgba(52, 211, 153, 0.1) !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
}

:root[data-theme^="dark"] .bc-ai-warning-btn {
    background: var(--surface) !important;
}

:root[data-theme^="dark"] .bc-ai-warning-btn:hover {
    background: var(--border) !important;
}

/* AI Pain list */
:root[data-theme^="dark"] .bc-ai-pain-list li {
    background: rgba(248, 113, 113, 0.1) !important;
    border-left-color: var(--accent-red) !important;
}

/* AI Tip card */
:root[data-theme^="dark"] .bc-ai-tip-card {
    background: rgba(251, 191, 36, 0.12) !important;
}

/* AI Status card */
:root[data-theme^="dark"] .bc-ai-status-card {
    background: var(--bg-secondary) !important;
    border-color: var(--border) !important;
}

/* AI Suggestion items */
:root[data-theme^="dark"] .bc-ai-suggestion-item {
    background: var(--bg-secondary) !important;
    border-color: var(--border) !important;
}

:root[data-theme^="dark"] .bc-ai-suggestion-item:hover {
    background: rgba(251, 191, 36, 0.08) !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
}

/* AI Suggestion checkbox */
:root[data-theme^="dark"] .bc-ai-suggestion-checkbox {
    border-color: var(--border-dark) !important;
}

/* AI Analyze section */
:root[data-theme^="dark"] .bc-ai-analyze-section {
    background: var(--bg-secondary) !important;
    border-color: var(--border-dark) !important;
}

/* AI Title suggestion */
:root[data-theme^="dark"] .bc-ai-title-suggestion {
    background: var(--bg-secondary) !important;
}

/* ========== DASHBOARD CHARTS ========== */
/* ApexCharts / Chart.js white backgrounds */
:root[data-theme^="dark"] .bc-charts-grid .bc-card {
    background: var(--surface) !important;
}

:root[data-theme^="dark"] .apexcharts-canvas {
    background: transparent !important;
}

:root[data-theme^="dark"] .apexcharts-text,
:root[data-theme^="dark"] .apexcharts-text tspan {
    fill: var(--text-secondary) !important;
}

:root[data-theme^="dark"] .apexcharts-gridline {
    stroke: var(--border) !important;
}

:root[data-theme^="dark"] .apexcharts-xaxis-tick {
    stroke: var(--border) !important;
}

:root[data-theme^="dark"] .apexcharts-legend-text {
    color: var(--text-secondary) !important;
}

:root[data-theme^="dark"] .apexcharts-tooltip {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

:root[data-theme^="dark"] .apexcharts-tooltip-title {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border) !important;
}

/* ========== FLATPICKR / CALENDAR ========== */
:root[data-theme^="dark"] .flatpickr-calendar {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

:root[data-theme^="dark"] .flatpickr-months .flatpickr-month {
    background: var(--bg-secondary) !important;
    color: var(--text) !important;
}

:root[data-theme^="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--bg-secondary) !important;
    color: var(--text) !important;
}

:root[data-theme^="dark"] .flatpickr-current-month input.cur-year {
    color: var(--text) !important;
}

:root[data-theme^="dark"] .flatpickr-months .flatpickr-prev-month,
:root[data-theme^="dark"] .flatpickr-months .flatpickr-next-month {
    color: var(--text-secondary) !important;
    fill: var(--text-secondary) !important;
}

:root[data-theme^="dark"] .flatpickr-months .flatpickr-prev-month:hover,
:root[data-theme^="dark"] .flatpickr-months .flatpickr-next-month:hover {
    color: var(--text) !important;
    fill: var(--text) !important;
}

:root[data-theme^="dark"] span.flatpickr-weekday {
    color: var(--text-muted) !important;
    background: transparent !important;
}

:root[data-theme^="dark"] .flatpickr-day {
    color: var(--text) !important;
    border-color: transparent !important;
}

:root[data-theme^="dark"] .flatpickr-day:hover {
    background: var(--border) !important;
    border-color: var(--border) !important;
}

:root[data-theme^="dark"] .flatpickr-day.today {
    border-color: var(--primary) !important;
}

:root[data-theme^="dark"] .flatpickr-day.selected {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}

:root[data-theme^="dark"] .flatpickr-day.flatpickr-disabled {
    color: var(--border-dark) !important;
}

:root[data-theme^="dark"] .flatpickr-day.prevMonthDay,
:root[data-theme^="dark"] .flatpickr-day.nextMonthDay {
    color: var(--border-dark) !important;
}

:root[data-theme^="dark"] .flatpickr-time {
    border-top-color: var(--border) !important;
}

:root[data-theme^="dark"] .flatpickr-time input {
    color: var(--text) !important;
    background: transparent !important;
}

:root[data-theme^="dark"] .flatpickr-time .flatpickr-am-pm {
    color: var(--text) !important;
    background: transparent !important;
}

:root[data-theme^="dark"] .flatpickr-time .flatpickr-time-separator {
    color: var(--text-muted) !important;
}

/* ========== GLOBAL ACTIVITY PAGE ========== */
:root[data-theme^="dark"] .bc-timeline::before {
    background: var(--border) !important;
}

:root[data-theme^="dark"] .bc-timeline-marker {
    background: var(--surface) !important;
    border-color: var(--primary) !important;
}

:root[data-theme^="dark"] .bc-activity-date-header {
    border-bottom-color: var(--border) !important;
}

/* ========== INLINE STYLE OVERRIDES ========== */
/* Light green gradient backgrounds used in multiple places */
:root[data-theme^="dark"] [style*="background: linear-gradient(135deg, #f0fdf4"],
:root[data-theme^="dark"] [style*="background: linear-gradient(to bottom right, #f0fdf4"],
:root[data-theme^="dark"] [style*="background: linear-gradient(to right, #f0fdf4"] {
    background: rgba(52, 211, 153, 0.08) !important;
}

/* Light blue gradient backgrounds */
:root[data-theme^="dark"] [style*="background: linear-gradient(135deg, #eff6ff"],
:root[data-theme^="dark"] [style*="background: linear-gradient(135deg, #dbeafe"] {
    background: rgba(96, 165, 250, 0.08) !important;
}

/* Light red gradient backgrounds */
:root[data-theme^="dark"] [style*="background: linear-gradient(135deg, #fef2f2"],
:root[data-theme^="dark"] [style*="background: linear-gradient(135deg, #fee2e2"] {
    background: rgba(248, 113, 113, 0.08) !important;
}

/* Light yellow gradient backgrounds */
:root[data-theme^="dark"] [style*="background: linear-gradient(135deg, #fffbeb"],
:root[data-theme^="dark"] [style*="background: linear-gradient(135deg, #fef3c7"] {
    background: rgba(251, 191, 36, 0.08) !important;
}

/* Light gray gradient backgrounds */
:root[data-theme^="dark"] [style*="background: linear-gradient(135deg, #f8fafc"],
:root[data-theme^="dark"] [style*="background: linear-gradient(135deg, #f9fafb"],
:root[data-theme^="dark"] [style*="background: linear-gradient(135deg, #f3f4f6"] {
    background: var(--surface) !important;
}

/* Assignee actions bar hardcoded bg */
:root[data-theme^="dark"] [style*="background: #f9f9f9"] {
    background: var(--bg-secondary) !important;
}

/* ========== CHAOS ALERT ========== */
:root[data-theme^="dark"] .bc-chaos-hide-btn {
    border-color: rgba(251, 191, 36, 0.3) !important;
}

/* ========== RAG AI TOGGLE BUTTON ========== */
:root[data-theme^="dark"] .bc-rag-ai-toggle {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--border-dark) !important;
}

:root[data-theme^="dark"] .bc-rag-ai-toggle:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: var(--text-muted) !important;
}

/* ========== COLLAPSED COMMENT GRADIENT ========== */
:root[data-theme^="dark"] .bc-comment-body-content.bc-comment-collapsed::after {
    background: linear-gradient(to bottom, transparent, var(--bg-secondary)) !important;
}

/* ========== SCROLLBAR OVERRIDES (generic) ========== */
:root[data-theme^="dark"] ::-webkit-scrollbar-track {
    background: var(--bg) !important;
}

:root[data-theme^="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border) !important;
}

:root[data-theme^="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--border-dark) !important;
}

/* ==============================================================================
   ROUND 4 FIXES – Chat page overhaul, dashboard, mytasks, misc
   ============================================================================== */

/* ========== CHAT PAGE – SIDEBAR ========== */
/* Sidebar border */
:root[data-theme^="dark"] .bc-chat-sidebar {
    border-right-color: var(--border) !important;
}

/* Sidebar header title */
:root[data-theme^="dark"] .bc-chat-sidebar [style*="color: #111b21"] {
    color: var(--text) !important;
}

/* Sidebar icons (#54656f → muted light) */
:root[data-theme^="dark"] [style*="color: #54656f"] {
    color: var(--text-secondary) !important;
}

/* Search input text color */
:root[data-theme^="dark"] .bc-chat-sidebar input[style*="color: #111b21"] {
    color: var(--text) !important;
}

/* Contact list border separators */
:root[data-theme^="dark"] [style*="border-bottom: 1px solid #f0f2f5"] {
    border-bottom-color: var(--border) !important;
}

/* Contact name color */
:root[data-theme^="dark"] [style*="color: #111b21"] {
    color: var(--text) !important;
}

/* Secondary text (#667781) */
:root[data-theme^="dark"] [style*="color: #667781"] {
    color: var(--text-secondary) !important;
}

/* Search result section headers (#008069) */
:root[data-theme^="dark"] [style*="color: #008069"] {
    color: var(--accent-green) !important;
}

/* Connection status border */
:root[data-theme^="dark"] [style*="border-top: 1px solid #e9edef"] {
    border-top-color: var(--border) !important;
}

/* Sidebar border-right */
:root[data-theme^="dark"] [style*="border-right: 1px solid #e9edef"] {
    border-right-color: var(--border) !important;
}

/* ========== CHAT PAGE – HEADER ========== */
/* Main chat header green → dark */
:root[data-theme^="dark"] .bc-chat-header[style*="background: #008069"] {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border) !important;
}

/* Header border */
:root[data-theme^="dark"] [style*="border-bottom: 1px solid #e9edef"] {
    border-bottom-color: var(--border) !important;
}

/* ========== CHAT PAGE – MESSAGE BUBBLES ========== */
/* Incoming message bubble (white → dark surface) */
:root[data-theme^="dark"] .bc-chat-main-panel [style*="background: 'var(--text-on-primary)'"] {
    background: var(--surface) !important;
}

/* Message text color override */
:root[data-theme^="dark"] [style*="color: #111b21"] {
    color: var(--text) !important;
}

/* Incoming message tail (white) */
:root[data-theme^="dark"] [style*="border-top: 6px solid #fff"] {
    border-top-color: var(--surface) !important;
}

/* Outgoing message tail (light green) */
:root[data-theme^="dark"] [style*="border-top: 6px solid #d9fdd3"] {
    border-top-color: rgba(52, 211, 153, 0.15) !important;
}

/* Group sender name in chat */
:root[data-theme^="dark"] [style*="color: #00a884"] {
    color: var(--accent-green) !important;
}

/* Reply quote border & text */
:root[data-theme^="dark"] [style*="border-left: 4px solid #25d366"] {
    border-left-color: var(--accent-green) !important;
}

/* Reply quote background */
:root[data-theme^="dark"] [style*="background: rgba(0,0,0,0.05)"] {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Reply sender name green */
:root[data-theme^="dark"] [style*="color: #25d366"] {
    color: var(--accent-green) !important;
}

/* Date separator – white bg → dark */
:root[data-theme^="dark"] [style*="background: rgba(255,255,255,0.9)"] {
    background: var(--surface) !important;
    color: var(--text-secondary) !important;
}

/* Message checkmark blue */
:root[data-theme^="dark"] [style*="color: #53bdeb"] {
    color: #53bdeb !important; /* keep blue, it's readable */
}

/* Reaction border (non-own) */
:root[data-theme^="dark"] .chat-reaction-badge[style*="border: 1px solid #e0e0e0"] {
    border-color: var(--border-dark) !important;
}

/* ========== CHAT PAGE – INPUT AREA ========== */
/* Chat textarea text color */
:root[data-theme^="dark"] .bc-chat-input-area textarea[style*="color: #111b21"] {
    color: var(--text) !important;
}

/* E2EE banners – green gradient */
:root[data-theme^="dark"] [style*="background: linear-gradient(135deg, #f0fdf4, #dcfce7)"] {
    background: rgba(52, 211, 153, 0.1) !important;
}

/* E2EE banners – yellow gradient */
:root[data-theme^="dark"] [style*="background: linear-gradient(135deg, #fef3c7, #fffbeb)"] {
    background: rgba(251, 191, 36, 0.1) !important;
}

/* E2EE banners – blue gradient */
:root[data-theme^="dark"] [style*="background: linear-gradient(135deg, #eff6ff, #dbeafe)"] {
    background: rgba(96, 165, 250, 0.1) !important;
}

/* E2EE pending key banner border */
:root[data-theme^="dark"] [style*="border: 1px solid var(--accent-yellow)"] {
    border-color: rgba(251, 191, 36, 0.3) !important;
}

:root[data-theme^="dark"] [style*="border: 1px solid #f59e0b"] {
    border-color: rgba(245, 158, 11, 0.3) !important;
}

/* Group description banner – green gradient */
:root[data-theme^="dark"] .bc-chat-description-banner[style*="background: linear-gradient(135deg, #e8f5e9"] {
    background: rgba(52, 211, 153, 0.1) !important;
    border-bottom-color: rgba(52, 211, 153, 0.2) !important;
}

:root[data-theme^="dark"] .bc-chat-description-banner [style*="color: #1b5e20"] {
    color: #6ee7b7 !important;
}

/* Project link banner – blue gradient */
:root[data-theme^="dark"] .bc-chat-project-banner[style*="background: linear-gradient(135deg, #e3f2fd"] {
    background: rgba(96, 165, 250, 0.1) !important;
    border-bottom-color: rgba(96, 165, 250, 0.2) !important;
}

:root[data-theme^="dark"] [style*="border-bottom: 1px solid #a5d6a7"] {
    border-bottom-color: rgba(52, 211, 153, 0.2) !important;
}

:root[data-theme^="dark"] [style*="border-bottom: 1px solid #90caf9"] {
    border-bottom-color: rgba(96, 165, 250, 0.2) !important;
}

/* File message link color */
:root[data-theme^="dark"] a[style*="color: #111b21"] {
    color: var(--text) !important;
}

/* File icon color */
:root[data-theme^="dark"] [style*="color: #667781"] {
    color: var(--text-secondary) !important;
}

/* Action menu popover background (var(--text-on-primary) = white in light) */
:root[data-theme^="dark"] .bc-chat-main-panel [style*="background: 'var(--text-on-primary)'"] {
    background: var(--surface) !important;
}

/* ========== CHAT PAGE – CONTACT LIST AVATARS ========== */
/* User avatar gradient fallback */
:root[data-theme^="dark"] [style*="background: linear-gradient(135deg, #667eea, #764ba2)"] {
    background: linear-gradient(135deg, #667eea, #764ba2) !important; /* Keep as-is, dark enough */
}

/* Group avatar gradient */
:root[data-theme^="dark"] [style*="background: linear-gradient(135deg, #25d366, #128c7e)"] {
    background: linear-gradient(135deg, #25d366, #128c7e) !important; /* Keep as-is, dark enough */
}

/* Online indicator dot */
:root[data-theme^="dark"] [style*="background: #25d366"] {
    background: var(--accent-green) !important;
}

/* ========== DASHBOARD CARDS – WARNING (Nabídka) ========== */
:root[data-theme^="dark"] .bc-dashboard-card-warning {
    background: rgba(251, 191, 36, 0.08) !important;
    border-color: rgba(251, 191, 36, 0.25) !important;
    border-width: 1px !important;
}

/* ========== DASHBOARD CARDS – BILLING (Fakturace) ========== */
:root[data-theme^="dark"] .bc-dashboard-card-billing {
    background: rgba(52, 211, 153, 0.08) !important;
    border-color: rgba(52, 211, 153, 0.25) !important;
}

:root[data-theme^="dark"] .billing-widget-model {
    border-color: rgba(52, 211, 153, 0.2) !important;
}

/* ========== CHAT – DASHBOARD WIDGET ========== */
:root[data-theme^="dark"] .bc-dashboard-card-chat {
    background: rgba(139, 92, 246, 0.1) !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}

:root[data-theme^="dark"] .bc-chat-preview-item {
    border-color: rgba(139, 92, 246, 0.2) !important;
}

:root[data-theme^="dark"] .skeleton-avatar {
    background: linear-gradient(90deg, var(--surface) 25%, var(--border) 50%, var(--surface) 75%) !important;
    background-size: 200% 100% !important;
}

/* ========== MYTASKS – TODO ITEMS ========== */
/* Extra work todo gradient */
:root[data-theme^="dark"] .bc-todo-item.extra-work {
    background: rgba(251, 191, 36, 0.08) !important;
}

:root[data-theme^="dark"] .bc-todo-item.extra-work:hover {
    background: rgba(251, 191, 36, 0.15) !important;
}

/* Todo checkbox border */
:root[data-theme^="dark"] .bc-todo-checkbox {
    border-color: var(--border-dark) !important;
    background: transparent !important;
}

/* Large checkbox border */
:root[data-theme^="dark"] .bc-todo-checkbox-lg {
    border-color: var(--border-dark) !important;
}

/* ========== EMAIL MODAL ========== */
:root[data-theme^="dark"] [style*="background:white"],
:root[data-theme^="dark"] [style*="background: white"] {
    background: var(--surface) !important;
}

:root[data-theme^="dark"] [style*="background:#fff"],
:root[data-theme^="dark"] [style*="background: #fff"] {
    background: var(--surface) !important;
}

/* ========== AI VALIDATION ========== */
:root[data-theme^="dark"] .bc-ai-action-card.bc-ai-action-invalid {
    background: rgba(248, 113, 113, 0.08) !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
}

:root[data-theme^="dark"] .bc-ai-project-picker.is-invalid .bc-ai-project-selected {
    background: rgba(248, 113, 113, 0.08) !important;
}

/* ========== RAG MISSING DATA ========== */
:root[data-theme^="dark"] .bc-rag-missing-data {
    background: rgba(248, 113, 113, 0.08) !important;
}

/* ========== TOGGLE SWITCH CIRCLES ========== */
:root[data-theme^="dark"] .bc-toggle-slider::before,
:root[data-theme^="dark"] [style*="background-color: white"] {
    background-color: var(--text) !important;
}

/* ========== VALIDATION WARNING ========== */
:root[data-theme^="dark"] [style*="background: #fff3cd"],
:root[data-theme^="dark"] [style*="background:#fff3cd"],
:root[data-theme^="dark"] [style*="background-color: #fff3cd"] {
    background: rgba(251, 191, 36, 0.12) !important;
}

:root[data-theme^="dark"] [style*="color: #856404"] {
    color: var(--accent-yellow) !important;
}

/* ========== BADGE WARNING ========== */
:root[data-theme^="dark"] [style*="background: #fff3cd; border: 1px solid #ffc107"],
:root[data-theme^="dark"] [style*="background-color: #fff3cd"] {
    background: rgba(251, 191, 36, 0.12) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

/* ========== MISC WHITE RGBA OVERRIDES ========== */
:root[data-theme^="dark"] [style*="background: rgba(255,255,255,0.7)"] {
    background: rgba(0, 0, 0, 0.7) !important;
}

:root[data-theme^="dark"] [style*="background: rgba(255, 255, 255, 0.98)"] {
    background: var(--bg) !important;
}

:root[data-theme^="dark"] [style*="background: rgba(255,255,255,0.95)"],
:root[data-theme^="dark"] [style*="background: rgba(255, 255, 255, 0.95)"] {
    background: var(--surface) !important;
}

/* ========== SEARCH RESULT AVATAR ========== */
:root[data-theme^="dark"] .bc-chat-sidebar [style*="border-bottom: 1px solid #f0f2f5"] {
    border-bottom-color: var(--border) !important;
}

/* ========== CHAT EMPTY STATE ========== */
:root[data-theme^="dark"] .bc-chat-main-panel [style*="background: var(--surface)"] {
    background: var(--surface) !important;
}

/* ========== PROJECT CARD BORDER SOFTENING ========== */
/* In dark mode, full accent borders are too harsh - use semi-transparent versions */
:root[data-theme^="dark"] .bc-project-card.card-yellow {
    border-color: rgba(251, 191, 36, 0.35) !important;
}
:root[data-theme^="dark"] .bc-project-card.card-green {
    border-color: rgba(52, 211, 153, 0.35) !important;
}
:root[data-theme^="dark"] .bc-project-card.card-blue {
    border-color: rgba(96, 165, 250, 0.35) !important;
}
:root[data-theme^="dark"] .bc-project-card.card-pink {
    border-color: rgba(244, 114, 182, 0.35) !important;
}
:root[data-theme^="dark"] .bc-project-card.card-orange {
    border-color: rgba(251, 146, 60, 0.35) !important;
}
:root[data-theme^="dark"] .bc-project-card.card-purple {
    border-color: rgba(167, 139, 250, 0.35) !important;
}
:root[data-theme^="dark"] .bc-project-card.card-teal {
    border-color: rgba(45, 212, 191, 0.35) !important;
}
:root[data-theme^="dark"] .bc-project-card.card-red {
    border-color: rgba(248, 113, 113, 0.35) !important;
}
:root[data-theme^="dark"] .bc-project-card.card-gray {
    border-color: rgba(156, 163, 175, 0.25) !important;
}

/* ========== DOCS – QUICK ACTION WIDGETS ========== */
/* Soften aggressive gradient backgrounds and borders for dark theme */
:root[data-theme^="dark"] .bc-quick-action-widget {
    border-color: transparent !important;
}

/* Widget 1: Folder (yellow) */
:root[data-theme^="dark"] .bc-quick-action-widget:nth-child(1) {
    background: rgba(251, 191, 36, 0.12) !important;
    border: 1px solid rgba(251, 191, 36, 0.25) !important;
}
:root[data-theme^="dark"] .bc-quick-action-widget:nth-child(1):hover {
    background: rgba(251, 191, 36, 0.18) !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
}

/* Widget 2: Upload (blue) */
:root[data-theme^="dark"] .bc-quick-action-widget:nth-child(2) {
    background: rgba(96, 165, 250, 0.12) !important;
    border: 1px dashed rgba(96, 165, 250, 0.35) !important;
}
:root[data-theme^="dark"] .bc-quick-action-widget:nth-child(2):hover {
    background: rgba(96, 165, 250, 0.18) !important;
    border-color: rgba(96, 165, 250, 0.5) !important;
}

/* Widget 3: Document (green) */
:root[data-theme^="dark"] .bc-quick-action-widget:nth-child(4) {
    background: rgba(52, 211, 153, 0.12) !important;
    border: 1px solid rgba(52, 211, 153, 0.25) !important;
}
:root[data-theme^="dark"] .bc-quick-action-widget:nth-child(4):hover {
    background: rgba(52, 211, 153, 0.18) !important;
    border-color: rgba(52, 211, 153, 0.4) !important;
}

/* Widget 4: External link (purple) */
:root[data-theme^="dark"] .bc-quick-action-widget:nth-child(5) {
    background: rgba(167, 139, 250, 0.12) !important;
    border: 1px solid rgba(167, 139, 250, 0.25) !important;
}
:root[data-theme^="dark"] .bc-quick-action-widget:nth-child(5):hover {
    background: rgba(167, 139, 250, 0.18) !important;
    border-color: rgba(167, 139, 250, 0.4) !important;
}

/* Snoozed tasks banner — muted on dark theme */
:root[data-theme^="dark"] .bc-project-info-panel.snoozed {
    background: rgba(251, 191, 36, 0.04);
    border-color: rgba(251, 191, 36, 0.12);
    color: rgba(251, 191, 36, 0.45);
}
:root[data-theme^="dark"] .bc-project-info-panel.snoozed a {
    color: rgba(251, 191, 36, 0.55);
}
:root[data-theme^="dark"] .bc-snoozed-panel {
    background: rgba(251, 191, 36, 0.04);
    border-color: rgba(251, 191, 36, 0.12);
}
:root[data-theme^="dark"] .bc-snoozed-panel-header {
    background: rgba(251, 191, 36, 0.06);
    border-bottom-color: rgba(251, 191, 36, 0.12);
}
:root[data-theme^="dark"] .bc-snoozed-panel-header h3 {
    color: rgba(251, 191, 36, 0.45);
}
:root[data-theme^="dark"] .bc-snoozed-title {
    color: rgba(251, 191, 36, 0.5);
}
:root[data-theme^="dark"] .bc-snoozed-meta {
    color: rgba(251, 191, 36, 0.35);
}
:root[data-theme^="dark"] .bc-snoozed-item {
    border-bottom-color: rgba(251, 191, 36, 0.08);
}

/* ===== AUTH / LOGIN PAGE — DARK THEME ===== */
:root[data-theme^="dark"] .auth-container {
    background: linear-gradient(135deg, #0a0f1a 0%, #111827 50%, #1a2332 100%);
}
:root[data-theme^="dark"] .auth-left {
    background: var(--surface);
    box-shadow: 30px 0 60px rgba(0, 0, 0, 0.5);
}
:root[data-theme^="dark"] .auth-title {
    background: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
:root[data-theme^="dark"] .auth-box .form-input {
    background: var(--bg);
    border-color: var(--border);
    color: var(--text);
}
:root[data-theme^="dark"] .auth-box .form-input:focus {
    border-color: var(--accent-blue);
    background: var(--bg-secondary);
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.1), 0 4px 12px rgba(96, 165, 250, 0.1);
}
:root[data-theme^="dark"] .auth-box .form-label {
    color: var(--text-secondary);
}
:root[data-theme^="dark"] .auth-lang-btn {
    background: var(--bg);
    border-color: var(--border);
    color: var(--text-secondary);
}
:root[data-theme^="dark"] .auth-lang-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--border-dark);
}
:root[data-theme^="dark"] .auth-lang-dropdown {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
:root[data-theme^="dark"] .auth-lang-option:hover {
    background: var(--bg-secondary);
}