/* =============================================================================
   OWEL — COMPREHENSIVE LIGHT MODE THEME OVERRIDES
   =============================================================================
   This file uses CSS attribute selectors + !important to override ALL
   hardcoded inline dark-mode colors inside app.bundle.js HTML templates.
   app.bundle.js is NEVER modified — all theme fixes are CSS-only.
   ============================================================================= */

/* --- GLOBAL BODY & SHELL CONTAINERS --- */
body.light-mode,
body.theme-profile.light-mode,
body.theme-discover.light-mode {
  background-color: #f4f3f9 !important;
  color: #1e1b4b !important;
}

body.light-mode #app {
  background-color: #f4f3f9 !important;
  box-shadow: 0 10px 50px rgba(124, 58, 237, 0.12) !important;
}

body.light-mode .discover-shell,
body.light-mode .profile-shell,
body.light-mode .settings-shell,
body.light-mode .privacy-dashboard-shell {
  background-color: transparent !important;
  color: #1e1b4b !important;
}

/* --- HARDCODED WHITE TEXT (#ffffff) → DARK SLATE (#1e1b4b) --- */
/* Targets ALL elements with inline style="color: #ffffff" */
body.light-mode [style*="color: #ffffff"],
body.light-mode [style*="color:#ffffff"],
body.light-mode [style*="color: #fff;"],
body.light-mode [style*="color:#fff;"] {
  color: #1e1b4b !important;
}

/* EXCEPTION: Sent chat bubbles (purple bg #8b5cf6) keep white text */
body.light-mode .chat-bubble-interactive[style*="#8b5cf6"] {
  color: #ffffff !important;
}

/* EXCEPTION: build-btn buttons always keep white text */
body.light-mode .build-btn {
  color: #ffffff !important;
}

/* EXCEPTION: Active subtab with purple bg keeps white text */
body.light-mode .msg-subtab-btn[style*="#8b5cf6"] {
  color: #ffffff !important;
}

/* EXCEPTION: Red notification badge keeps white text */
body.light-mode [style*="background:#ef4444"] {
  color: #fff !important;
}

/* --- HARDCODED DARK BACKGROUNDS → CLEAN WHITE/LIGHT --- */

/* #0d0d16 backgrounds → white card */
body.light-mode [style*="background: #0d0d16"],
body.light-mode [style*="background:#0d0d16"] {
  background: #ffffff !important;
  border-color: #ede9fe !important;
}

/* #12121c backgrounds → soft lavender */
body.light-mode [style*="background: #12121c"],
body.light-mode [style*="background:#12121c"] {
  background: #f1f0fb !important;
  border-color: #ddd6fe !important;
}

/* #141422 backgrounds → light slate */
body.light-mode [style*="background: #141422"],
body.light-mode [style*="background:#141422"] {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #1e1b4b !important;
}

/* #12121e backgrounds → light */
body.light-mode [style*="background: #12121e"],
body.light-mode [style*="background:#12121e"] {
  background: #f1f0fb !important;
  border-color: #ddd6fe !important;
  color: #1e1b4b !important;
}

/* #09090e backgrounds → white */
body.light-mode [style*="background: #09090e"],
body.light-mode [style*="background:#09090e"] {
  background: #ffffff !important;
  border-color: #ede9fe !important;
  color: #1e1b4b !important;
}

/* #0c0c14 backgrounds → white */
body.light-mode [style*="background: #0c0c14"],
body.light-mode [style*="background:#0c0c14"] {
  background: #ffffff !important;
  border-color: #ede9fe !important;
  color: #1e1b4b !important;
}

/* #121022 backgrounds → white */
body.light-mode [style*="background: #121022"],
body.light-mode [style*="background:#121022"] {
  background: #f8fafc !important;
  border-color: #ede9fe !important;
  color: #1e1b4b !important;
}

/* #0f0f1b backgrounds (emoji reaction pills) */
body.light-mode [style*="background: #0f0f1b"],
body.light-mode [style*="background:#0f0f1b"] {
  background: #f1f0fb !important;
  border-color: #ddd6fe !important;
}

/* #1a1a28 backgrounds */
body.light-mode [style*="background: #1a1a28"],
body.light-mode [style*="background:#1a1a28"] {
  background: #f1f0fb !important;
  border-color: #ddd6fe !important;
  color: #1e1b4b !important;
}

/* --- HARDCODED DARK BORDERS → SOFT LAVENDER BORDERS --- */
body.light-mode [style*="border: 1px solid #1a1a28"],
body.light-mode [style*="border:1px solid #1a1a28"] {
  border-color: #ede9fe !important;
}

body.light-mode [style*="border: 1px solid #1c1c28"],
body.light-mode [style*="border:1px solid #1c1c28"] {
  border-color: #ede9fe !important;
}

body.light-mode [style*="border: 1px solid #1c1c2e"],
body.light-mode [style*="border:1px solid #1c1c2e"] {
  border-color: #ede9fe !important;
}

body.light-mode [style*="border: 1px solid #1c1c2a"],
body.light-mode [style*="border:1px solid #1c1c2a"] {
  border-color: #ede9fe !important;
}

body.light-mode [style*="border: 1px solid #222232"],
body.light-mode [style*="border:1px solid #222232"] {
  border-color: #ddd6fe !important;
}

body.light-mode [style*="border: 1px solid #222230"],
body.light-mode [style*="border:1px solid #222230"] {
  border-color: #ddd6fe !important;
}

body.light-mode [style*="border: 1px solid #222234"],
body.light-mode [style*="border:1px solid #222234"] {
  border-color: #ddd6fe !important;
}

body.light-mode [style*="border: 1px solid #26263a"],
body.light-mode [style*="border:1px solid #26263a"] {
  border-color: #ddd6fe !important;
}

body.light-mode [style*="border: 1px solid #28283a"],
body.light-mode [style*="border:1px solid #28283a"] {
  border-color: #ddd6fe !important;
}

body.light-mode [style*="border: 1px solid #28283c"],
body.light-mode [style*="border:1px solid #28283c"] {
  border-color: #ddd6fe !important;
}

body.light-mode [style*="border-bottom: 1px solid #1a1a2"],
body.light-mode [style*="border-top: 1px solid #1a1a2"] {
  border-color: #ede9fe !important;
}

body.light-mode [style*="border-color: #333344"],
body.light-mode [style*="border-color:#333344"] {
  border-color: #cbd5e1 !important;
}

body.light-mode [style*="border-color: #28283a"],
body.light-mode [style*="border-color:#28283a"] {
  border-color: #ddd6fe !important;
}

body.light-mode [style*="border-color: #2a2a3c"],
body.light-mode [style*="border-color:#2a2a3c"] {
  border-color: #ddd6fe !important;
}

body.light-mode [style*="border-color: #333348"],
body.light-mode [style*="border-color:#333348"] {
  border-color: #cbd5e1 !important;
}

/* --- MUTED TEXT OVERRIDES --- */
/* #ddddee → slate gray */
body.light-mode [style*="color: #ddddee"],
body.light-mode [style*="color:#ddddee"] {
  color: #475569 !important;
}

/* #aaa → medium gray */
body.light-mode [style*="color: #aaa"],
body.light-mode [style*="color:#aaa"] {
  color: #64748b !important;
}

/* #888899 → slate */
body.light-mode [style*="color: #888899"],
body.light-mode [style*="color:#888899"] {
  color: #64748b !important;
}

/* #888 → slate */
body.light-mode [style*="color:#888;"],
body.light-mode [style*="color: #888;"] {
  color: #94a3b8 !important;
}

/* --- CSS CLASS-BASED OVERRIDES (Reinforce + cover edge cases) --- */

/* Cards, Groups, Toggles */
body.light-mode .settings-card-group,
body.light-mode .toggle-card,
body.light-mode .profile-hero-card,
body.light-mode .privacy-master-hero-card,
body.light-mode .stat-box,
body.light-mode .settings-option-card,
body.light-mode .dm-perm-option-card {
  background: #ffffff !important;
  border-color: #ede9fe !important;
  color: #1e1b4b !important;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.06) !important;
}

/* All text inside cards/toggles */
body.light-mode .settings-card-title,
body.light-mode .settings-card-sub,
body.light-mode .settings-card-info div,
body.light-mode .settings-card-left div,
body.light-mode .privacy-hero-title,
body.light-mode .privacy-hero-sub,
body.light-mode .privacy-main-title,
body.light-mode .privacy-sub-title,
body.light-mode .settings-header-title,
body.light-mode .profile-username,
body.light-mode .profile-user-id,
body.light-mode .profile-bio-text,
body.light-mode .toggle-card-label,
body.light-mode .workspace-title,
body.light-mode .workspace-subtitle {
  color: #1e1b4b !important;
}

body.light-mode .settings-card-sub,
body.light-mode .privacy-hero-sub,
body.light-mode .privacy-sub-title,
body.light-mode .workspace-subtitle {
  color: #64748b !important;
}

/* Section titles */
body.light-mode .settings-section-title {
  color: #7c3aed !important;
}

/* Header titles */
body.light-mode .brand-header-title {
  color: #1e1b4b !important;
}

/* Profile icon badges */
body.light-mode .profile-icon-badge {
  background: #ffffff !important;
  border-color: #ddd6fe !important;
  color: #1e1b4b !important;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.08) !important;
}

/* Pill tags */
body.light-mode .pill-tag {
  background: #f1f0fb !important;
  border-color: #ddd6fe !important;
  color: #5b21b6 !important;
}

/* Blue tags */
body.light-mode .blue-tag {
  background: #ede9fe !important;
  border-color: #c4b5fd !important;
  color: #5b21b6 !important;
}

/* Interactive tags (echo/reply buttons) */
body.light-mode .interactive-tag {
  background: #f1f0fb !important;
  border-color: #ddd6fe !important;
  color: #1e1b4b !important;
}

/* Whisper button keeps purple tint */
body.light-mode .interactive-tag[style*="rgba(139,92,246"] {
  background: rgba(124, 58, 237, 0.08) !important;
  border-color: #a78bfa !important;
  color: #7c3aed !important;
}

/* Direct echo badge buttons */
body.light-mode .direct-echo-badge-btn {
  background: #f1f0fb !important;
  border-color: #ddd6fe !important;
  color: #1e1b4b !important;
}

/* Subcat pills */
body.light-mode .subcat-pill {
  background: #f1f0fb !important;
  border-color: #ddd6fe !important;
  color: #475569 !important;
}

body.light-mode .subcat-pill.active {
  background: #ede9fe !important;
  border-color: #7c3aed !important;
  color: #5b21b6 !important;
}

/* Verse category pills */
body.light-mode .verse-category-pill {
  background: #f1f0fb !important;
  border-color: #ddd6fe !important;
  color: #475569 !important;
}

body.light-mode .verse-category-pill.active {
  background: #ede9fe !important;
  border-color: #7c3aed !important;
  color: #5b21b6 !important;
}

/* Message subtab buttons */
body.light-mode .msg-subtab-btn {
  color: #475569 !important;
}

body.light-mode .msg-subtab-btn.active,
body.light-mode .msg-subtab-btn[style*="background: #8b5cf6"],
body.light-mode .msg-subtab-btn[style*="#8b5cf6"] {
  color: #ffffff !important;
}

/* Circle tab buttons */
body.light-mode .circle-tab-btn {
  color: #475569 !important;
}

body.light-mode .circle-tab-btn.active {
  color: #ffffff !important;
}

/* Comments tab buttons */
body.light-mode .comments-tab-btn {
  color: #475569 !important;
}

body.light-mode .comments-tab-btn.active {
  color: #7c3aed !important;
}

/* Truth vote buttons */
body.light-mode .truth-vote-btn {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

body.light-mode .truth-vote-btn.active[style*="rgba(34,197,94"] {
  background: rgba(34, 197, 94, 0.12) !important;
  border-color: #22c55e !important;
}

body.light-mode .truth-vote-btn.active[style*="rgba(239,68,68"] {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: #ef4444 !important;
}

body.light-mode .truth-vote-btn.active[style*="rgba(234,179,8"] {
  background: rgba(234, 179, 8, 0.12) !important;
  border-color: #eab308 !important;
}

/* Search input */
body.light-mode .search-input {
  background: #ffffff !important;
  border-color: #ddd6fe !important;
  color: #1e1b4b !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.05) !important;
}

body.light-mode .search-input::placeholder {
  color: #94a3b8 !important;
}

/* Search icon */
body.light-mode .search-icon-svg {
  stroke: #94a3b8 !important;
}

/* Bottom navigation bar */
body.light-mode .bottom-nav-bar {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: #ede9fe !important;
  box-shadow: 0 -4px 20px rgba(124, 58, 237, 0.1) !important;
}

body.light-mode .nav-icon-item {
  color: #94a3b8 !important;
}

body.light-mode .nav-icon-item.active {
  color: #7c3aed !important;
}

/* Toggle switch (slider) track */
body.light-mode .switch input:checked + .slider {
  background: #7c3aed !important;
}

body.light-mode .slider {
  background: #cbd5e1 !important;
}

/* Modals */
body.light-mode .modal-overlay {
  background: rgba(15, 23, 42, 0.35) !important;
}

body.light-mode .modal-glass-card {
  background: #ffffff !important;
  border-top-color: #ede9fe !important;
  color: #1e1b4b !important;
  box-shadow: 0 -10px 40px rgba(124, 58, 237, 0.12) !important;
}

body.light-mode .modal-title {
  color: #1e1b4b !important;
}

body.light-mode .modal-close-btn {
  background: #f1f0fb !important;
  border-color: #ddd6fe !important;
  color: #1e1b4b !important;
}

/* Mode select cards */
body.light-mode .mode-select-card {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #1e1b4b !important;
}

body.light-mode .mode-select-card span {
  color: #1e1b4b !important;
}

body.light-mode .mode-select-card.active {
  background: #ede9fe !important;
  border-color: #7c3aed !important;
}

/* Tag item pills */
body.light-mode .tag-item-pill {
  background: #f1f0fb !important;
  border-color: #ddd6fe !important;
  color: #475569 !important;
}

body.light-mode .tag-item-pill.selected {
  background: #ede9fe !important;
  border-color: #7c3aed !important;
  color: #5b21b6 !important;
}

/* Stat box labels & values */
body.light-mode .stat-box-val {
  color: #1e1b4b !important;
}

/* Main category tabs */
body.light-mode .main-cat-tab {
  color: #64748b !important;
}

body.light-mode .main-cat-tab.active {
  color: #7c3aed !important;
  border-bottom-color: #7c3aed !important;
}

/* Profile feed placeholders */
body.light-mode .profile-feed-card-placeholder {
  background: #ffffff !important;
  border-color: #ede9fe !important;
  color: #64748b !important;
}

/* Verse workspace (empty state) */
body.light-mode .verse-workspace {
  color: #1e1b4b !important;
}

body.light-mode .workspace-icon {
  color: #7c3aed !important;
}

/* Conversation item card */
body.light-mode .conversation-item-card {
  background: #ffffff !important;
  border-color: #ede9fe !important;
}

/* Settings option items */
body.light-mode .settings-option-item {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #1e1b4b !important;
}

/* Settings radio */
body.light-mode .settings-radio-circle {
  border-color: #cbd5e1 !important;
}

body.light-mode .settings-radio-circle.checked {
  border-color: #7c3aed !important;
  background: #7c3aed !important;
}

/* Settings arrow */
body.light-mode .settings-arrow {
  color: #94a3b8 !important;
}

/* Footer version */
body.light-mode .settings-footer-version {
  color: #94a3b8 !important;
}

/* Futuristic avatar ring */
body.light-mode .futuristic-avatar-ring {
  border-color: #c4b5fd !important;
}

/* Pulse feed container */
body.light-mode .pulse-feed-container {
  color: #1e1b4b !important;
}

/* Chat bubble received messages */
body.light-mode .chat-bubble-interactive[style*="#141422"] {
  background: #f1f0fb !important;
  border-color: #ddd6fe !important;
  color: #1e1b4b !important;
}

/* Chat bubble deleted messages */
body.light-mode .chat-bubble-interactive[style*="#0d0d16"] {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #94a3b8 !important;
}

/* Online status dot border */
body.light-mode [style*="border:2px solid #000"] {
  border-color: #ffffff !important;
}

/* Accent colors remain intact: #8b5cf6, #a78bfa, #7c3aed, #22c55e, #ef4444, #eab308, #38bdf8, #fcd34d */
/* These semantic/brand colors should NOT be overridden */

/* --- SPECIAL: Locked Profile Buttons --- */
body.light-mode [style*="background: #1a1a28"] {
  background: #f1f0fb !important;
  border-color: #ddd6fe !important;
  color: #1e1b4b !important;
}

/* --- SPECIAL: Opacity text still inherits --- */
body.light-mode [style*="opacity: 0.6"],
body.light-mode [style*="opacity: 0.7"],
body.light-mode [style*="opacity: 0.8"] {
  color: #475569;
}

/* --- SPECIAL: Block/Delete buttons keep their red color --- */
body.light-mode [style*="color: #ef4444"],
body.light-mode [style*="color:#ef4444"] {
  color: #ef4444 !important;
}

body.light-mode [style*="border-color: #ef4444"],
body.light-mode [style*="border-color:#ef4444"] {
  border-color: #ef4444 !important;
}

/* --- SPECIAL: Edit button keeps yellow --- */
body.light-mode [style*="color: #eab308"],
body.light-mode [style*="color:#eab308"] {
  color: #b45309 !important;
}

body.light-mode [style*="border-color: #eab308"],
body.light-mode [style*="border-color:#eab308"] {
  border-color: #d97706 !important;
}

/* --- AUTH SCREENS (Signup/Login) — keep dark theme --- */
body:not(.light-mode) .auth-shell {
  /* No override needed, these screens don't use light mode */
}