/*
  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: #1E88E5;      /* azure sky blue */
  --theme-primary-dark: #0D47A1; /* deep navy */
  --theme-primary-light: #64B5F6;/* light blue */
  --theme-on-primary: #ffffff;   /* white */
  --theme-soft: #E3F2FD;         /* very light blue */
  --theme-icon: #1E88E5;
}
/* (Black & Yellow theme removed — only Red and Sky remain) */

/* ---- 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; }

/* =====================================================
   SKY THEME — layered, complementary shades of blue (not one flat color)
   ===================================================== */
/* Icon/stat circles get distinct blue gradients for depth & variety */
body[data-theme="blue"] .blue-bg   { background: linear-gradient(135deg, #1E88E5, #0D47A1) !important; } /* azure -> navy */
body[data-theme="blue"] .aqua-bg   { background: linear-gradient(135deg, #00B0FF, #0277BD) !important; } /* bright cyan-blue */
body[data-theme="blue"] .orange-bg { background: linear-gradient(135deg, #64B5F6, #1976D2) !important; } /* light -> medium */
body[data-theme="blue"] .green-bg  { background: linear-gradient(135deg, #4FC3F7, #0288D1) !important; } /* sky -> deep */
/* Buttons: azure with a navy hover for contrast */
body[data-theme="blue"] .btn-primary,
body[data-theme="blue"] .btn.btn-primary { background: #1E88E5 !important; }
body[data-theme="blue"] .btn-primary:hover { background: #0D47A1 !important; }
/* Sidebar gets a soft blue wash; active item a light-blue highlight with a navy accent bar */
body[data-theme="blue"] .sidebar { background: linear-gradient(180deg, #ffffff 0%, #E3F2FD 100%) !important; }
body[data-theme="blue"] .nav-item.active { background: #E3F2FD !important; border-left-color: #0D47A1 !important; }
body[data-theme="blue"] .nav-item i { color: #1E88E5 !important; }
/* Page titles & section headings follow the theme accent -> ORANGE under Sky */
body[data-theme="blue"] #pageTitle,
body[data-theme="blue"] .view-header h3,
body[data-theme="blue"] .view-header h2,
body[data-theme="blue"] .sidebar-header h2,
body[data-theme="blue"] .chart-container > h3,
body[data-theme="blue"] .chart-container > h4 { color: #EF6C00 !important; }
body[data-theme="blue"] .view-header h3 i,
body[data-theme="blue"] .view-header h2 i,
body[data-theme="blue"] .sidebar-header h2 i { color: #FB8C00 !important; }
/* Pricing hero: azure -> navy gradient */
body[data-theme="blue"] .pricing-hero { background: linear-gradient(135deg, #1E88E5, #0D47A1) !important; }
/* Soft-blue tinted badges with a medium-blue label */
body[data-theme="blue"] .client-badge,
body[data-theme="blue"] .badge-blue,
body[data-theme="blue"] .badge-aqua,
body[data-theme="blue"] .badge-orange { background: #E3F2FD !important; color: #1565C0 !important; }
/* AI Assist float: gradient azure -> navy */
body[data-theme="blue"] #aiAssistFab { background: linear-gradient(135deg, #1E88E5, #0D47A1) !important; }

/* SKY: convert every remaining RED to ORANGE (danger/error/status accents) */
body[data-theme="blue"] { --danger: #FB8C00; }   /* remaps all var(--danger): errors, borders, text-danger, delete accents */
body[data-theme="blue"] .btn-delete { background: #FB8C00 !important; color: #fff !important; }
body[data-theme="blue"] .btn-delete:hover { background: #EF6C00 !important; }
body[data-theme="blue"] .btn-danger { background: #FB8C00 !important; border-color: #FB8C00 !important; }
body[data-theme="blue"] .calendar-event.busy,
body[data-theme="blue"] .duplicate-highlight,
body[data-theme="blue"] .toast.error { border-left-color: #FB8C00 !important; }
body[data-theme="blue"] .text-danger,
body[data-theme="blue"] .error-message,
body[data-theme="blue"] .error-text { color: #FB8C00 !important; }
/* Any element that literally still renders red text/border under sky -> orange */
body[data-theme="blue"] [style*="color:#E74C3C"],
body[data-theme="blue"] [style*="color:#e74c3c"],
body[data-theme="blue"] [style*="color: #E74C3C"],
body[data-theme="blue"] [style*="color:#cc0000"],
body[data-theme="blue"] [style*="color:#ef4444"] { color: #FB8C00 !important; }

/* =====================================================
   SKY = blue chrome + ORANGE icons & buttons (complementary)
   ===================================================== */
/* Major buttons -> orange shades */
body[data-theme="blue"] .btn-primary,
body[data-theme="blue"] .btn.btn-primary,
body[data-theme="blue"] .pricing-card .btn,
body[data-theme="blue"] .btn-meeting-upgrade,
body[data-theme="blue"] .toggle-btn.active,
body[data-theme="blue"] .btn-compose,
body[data-theme="blue"] .btn-add-account,
body[data-theme="blue"] .btn-edit,
body[data-theme="blue"] .client-box-action .btn {
  background: #FB8C00 !important; border-color: #FB8C00 !important; color: #ffffff !important;
}
body[data-theme="blue"] .btn-primary:hover,
body[data-theme="blue"] .btn-edit:hover { background: #EF6C00 !important; }

/* Icon glyphs on light backgrounds -> orange (email, phone, nav, headings, logo) */
body[data-theme="blue"] .nav-item i,
body[data-theme="blue"] .view-header h3 i,
body[data-theme="blue"] .view-header h2 i,
body[data-theme="blue"] .chart-container > h3 i,
body[data-theme="blue"] .chart-container > h4 i,
body[data-theme="blue"] .sidebar-header h2 i,
body[data-theme="blue"] .bloo-text,
body[data-theme="blue"] .client-email i,
body[data-theme="blue"] .client-phone i,
body[data-theme="blue"] .detail-field i,
body[data-theme="blue"] .instruction-card i,
body[data-theme="blue"] .upload-header i,
body[data-theme="blue"] .folder-icon,
body[data-theme="blue"] .stat-content i,
body[data-theme="blue"] .ai-header h3 i { color: #FB8C00 !important; }

/* Stat / activity icon circles -> orange gradients (glyph stays white) */
body[data-theme="blue"] .blue-bg   { background: linear-gradient(135deg, #FB8C00, #E65100) !important; }
body[data-theme="blue"] .aqua-bg   { background: linear-gradient(135deg, #FFA726, #EF6C00) !important; }
body[data-theme="blue"] .orange-bg { background: linear-gradient(135deg, #FF9800, #F57C00) !important; }
body[data-theme="blue"] .green-bg  { background: linear-gradient(135deg, #FFB300, #FB8C00) !important; }
body[data-theme="blue"] .stat-icon i,
body[data-theme="blue"] .activity-icon i { color: #ffffff !important; }

/* Active nav accent + AI Assist -> orange */
body[data-theme="blue"] .nav-item.active { border-left-color: #EF6C00 !important; }
body[data-theme="blue"] #aiAssistFab { background: linear-gradient(135deg, #FB8C00, #E65100) !important; }
body[data-theme="blue"] #aiAssistPanel .aa-head { background: linear-gradient(135deg, #FB8C00, #E65100) !important; }

/* Badges -> soft-orange chips */
body[data-theme="blue"] .client-badge,
body[data-theme="blue"] .badge-blue,
body[data-theme="blue"] .badge-aqua,
body[data-theme="blue"] .badge-orange { background: #FFF3E0 !important; color: #E65100 !important; }

/* Sky: left-pane (sidebar) tab icons -> black (other icons stay orange) */
body[data-theme="blue"] .sidebar-nav .nav-item i { color: #000000 !important; }

/* Sky: Upload Source Data tab tweaks */
body[data-theme="blue"] .instruction-card { background: linear-gradient(135deg, rgba(255,152,0,0.12), rgba(255,183,77,0.10)) !important; }
body[data-theme="blue"] .field-table thead { background: #E3F2FD !important; }   /* Column Name/Description strip -> light blue */
body[data-theme="blue"] .instruction-card h3,
body[data-theme="blue"] .instruction-card h3 i { color: #EF6C00 !important; }     /* "Upload Instructions" + icon -> orange */
body[data-theme="blue"] .mapping-table h4 { color: #EF6C00 !important; }          /* Client/Lead Data Fields -> orange */
body[data-theme="blue"] .info-card.lead-info { border-left-color: #FB8C00 !important; } /* Leads box line -> orange */

/* Sky: top line on Lead/Client cards + Client Dashboard boxes -> light electric blue */
body[data-theme="blue"] .client-card,
body[data-theme="blue"] .lead-card { border-top-color: #40C4FF !important; }
body[data-theme="blue"] .client-card:hover,
body[data-theme="blue"] .lead-card:hover { border-top-color: #00B0FF !important; }
body[data-theme="blue"] .client-box { border-top: 4px solid #40C4FF !important; }

/* Sky: phone icon in Leads / Client List / Client Dashboard -> electric blue (email stays orange) */
body[data-theme="blue"] .client-phone i,
body[data-theme="blue"] .client-box-info i.fa-phone { color: #00B0FF !important; }

/* Highlight a plan card when the user arrives from an "Upgrade to..." link */
@keyframes planPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); } 50% { box-shadow: 0 0 0 8px var(--theme-soft); } }
.pricing-card.plan-highlight { outline: 3px solid var(--theme-primary); outline-offset: 4px; border-radius: 12px; animation: planPulse 0.8s ease-in-out 3; }

/* 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; }