/*
  Copyright (c) 2026 Blue Astra Technologies LLP, India. All Rights Reserved.
  Application-wide color theme layer. Switch via body[data-theme].
  The base CSS references these variables, so changing the theme recolors the
  whole UI (all elements that were red).
*/

/* ---- Default (red) so colors resolve even before JS sets data-theme ---- */
:root,
body[data-theme="red"] {
  --theme-primary: #E74C3C;
  --theme-primary-dark: #c0392b;
  --theme-primary-light: #ff6b6b;
  --theme-on-primary: #ffffff;
  --theme-soft: #fff0f0;
  --theme-icon: #E74C3C;
}
body[data-theme="blue"] {
  --theme-primary: #29b6f6;      /* sky blue */
  --theme-primary-dark: #0288d1;
  --theme-primary-light: #81d4fa;
  --theme-on-primary: #ffffff;   /* white */
  --theme-soft: #e6f6ff;
  --theme-icon: #29b6f6;
}
body[data-theme="black-yellow"] {
  --theme-primary: #1a1a1a;      /* black */
  --theme-primary-dark: #000000;
  --theme-primary-light: #FFD400; /* yellow accent */
  --theme-on-primary: #FFD400;   /* yellow text/icons on black */
  --theme-soft: #fffbe6;
  --theme-icon: #111111;
}

/* ---- Overrides for elements whose colors are not yet variable-driven ---- */
body[data-theme] .btn-primary,
body[data-theme] .btn.btn-primary {
  background: var(--theme-primary) !important;
  color: var(--theme-on-primary) !important;
  border-color: var(--theme-primary) !important;
}
body[data-theme] .btn-primary:hover { background: var(--theme-primary-dark) !important; }

/* Sidebar nav */
body[data-theme] .nav-item i { color: var(--theme-icon) !important; }
body[data-theme] .nav-item.active { border-left-color: var(--theme-primary) !important; background: var(--theme-soft) !important; }

/* Floating AI Assist */
body[data-theme] #aiAssistFab { background: var(--theme-primary) !important; color: var(--theme-on-primary) !important; }
body[data-theme] #aiAssistFab:hover { background: var(--theme-primary-dark) !important; }
body[data-theme] #aiAssistPanel .aa-head { background: var(--theme-primary) !important; color: var(--theme-on-primary) !important; }

/* Ensure readable text on primary-colored fills (esp. black-yellow -> yellow text) */
body[data-theme] .btn-compose,
body[data-theme] .btn-add-account,
body[data-theme] .folder-count,
body[data-theme] .btn-logout,
body[data-theme] .btn-icon:hover,
body[data-theme] .btn-settings:hover,
body[data-theme] .btn-sync:hover,
body[data-theme] .btn-sync-config:hover {
  color: var(--theme-on-primary) !important;
}

/* Logout button + Bloo CRM logo follow the theme */
body[data-theme] .btn-logout { background: var(--theme-primary) !important; color: var(--theme-on-primary) !important; border-color: var(--theme-primary) !important; }
body[data-theme] .btn-logout:hover { background: var(--theme-primary-dark) !important; }
body[data-theme] .bloo-text,
body[data-theme] i.bloo-text { color: var(--theme-primary) !important; }

/* Sidebar logo wordmark "Bloo CRM" + its icon */
body[data-theme] .sidebar-header h2,
body[data-theme] .sidebar-header h2 i { color: var(--theme-primary) !important; }

/* Stat / activity icon circles (Vendor, Employee, Workflow, KB, dashboard) */
body[data-theme] .blue-bg,
body[data-theme] .aqua-bg,
body[data-theme] .orange-bg,
body[data-theme] .green-bg { background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark)) !important; }
body[data-theme] .stat-icon i,
body[data-theme] .activity-icon i { color: var(--theme-on-primary) !important; }

/* Pricing hero ("Simple, Transparent Pricing") background + text */
body[data-theme] .pricing-hero { background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark)) !important; }
body[data-theme] .pricing-hero,
body[data-theme] .pricing-hero h2,
body[data-theme] .pricing-hero p { color: var(--theme-on-primary) !important; }

/* Page title + section headings + their icons follow the theme */
body[data-theme] #pageTitle { color: var(--theme-primary) !important; }
body[data-theme] .view-header h3,
body[data-theme] .view-header h3 i,
body[data-theme] .view-header h2,
body[data-theme] .chart-container > h3,
body[data-theme] .chart-container > h3 i,
body[data-theme] .chart-container > h4,
body[data-theme] .chart-container > h4 i,
body[data-theme] .view h3 > i,
body[data-theme] .view h4 > i,
body[data-theme] .ai-header h3 { color: var(--theme-primary) !important; }

/* Client list cards, badges & buttons follow the theme */
body[data-theme] .client-name,
body[data-theme] .client-box-name,
body[data-theme] .client-box-id { color: var(--theme-primary) !important; }
body[data-theme] .client-badge,
body[data-theme] .badge-blue,
body[data-theme] .badge-aqua,
body[data-theme] .badge-orange { background: var(--theme-soft) !important; color: var(--theme-primary) !important; }
body[data-theme] .btn-edit,
body[data-theme] .client-box-action .btn { background: var(--theme-primary) !important; color: var(--theme-on-primary) !important; }
body[data-theme] .btn-edit:hover { background: var(--theme-primary-dark) !important; }
body[data-theme] .btn-delete { background: var(--theme-primary-dark) !important; color: var(--theme-on-primary) !important; }

/* Pricing & Payment tab follow the theme */
body[data-theme] .pricing-header h3,
body[data-theme] .price,
body[data-theme] .pricing-card.premium { color: var(--theme-primary) !important; }
body[data-theme] .pricing-card.premium { border-color: var(--theme-primary) !important; }
body[data-theme] .pricing-card .btn,
body[data-theme] .btn-meeting-upgrade,
body[data-theme] .toggle-btn.active { background: var(--theme-primary) !important; color: var(--theme-on-primary) !important; border-color: var(--theme-primary) !important; }

/* Upload Source Data headings/text accents */
body[data-theme] .upload-section .section-subtitle,
body[data-theme] .instruction-card h4,
body[data-theme] .upload-header h3,
body[data-theme] .upload-section h2,
body[data-theme] .upload-section h3 { color: var(--theme-primary) !important; }
body[data-theme] .instruction-card i,
body[data-theme] .upload-header i { color: var(--theme-primary) !important; }

/* Copyright footer accent line + text stay neutral */
#blooCopyright { color: #666 !important; }

/* Theme picker control */
.theme-picker { margin-bottom: 4px; }
.theme-picker label { display:block; font-size:0.75rem; color:#888; margin-bottom:4px; }
.theme-picker select { width:100%; padding:8px; border:1px solid #ddd; border-radius:6px; }