/* ============================================================
   COPAI — PALETTE FINALE harmonisée
   Bleu lumineux (logo) + cyan azur en accent
   ============================================================ */

:root {
    /* Bleus principaux (lumineux, du logo CoPAi) */
    --copai-deep: #1e40af;
    --copai-primary: #2563eb;          /* Royal vif, dominante */
    --copai-primary-dark: #1d4ed8;
    --copai-primary-mid: #3b82f6;      /* Boutons primaires */
    --copai-primary-light: #60a5fa;    /* Hover doux */

    /* Cyan azur (accents, hot leads, badges succès) */
    --copai-accent: #0ea5e9;
    --copai-accent-bright: #38bdf8;
    --copai-accent-light: #7dd3fc;

    /* Tons clairs (fond de page, headers) */
    --copai-bg: #f0f9ff;               /* Fond très léger bleu ciel */
    --copai-bg-soft: #e0f2fe;          /* Header gradient stop */
    --copai-bg-card: #ffffff;
    --copai-border: #bae6fd;
    --copai-border-soft: #e0e7ff;

    /* Texte */
    --copai-text: #0f172a;
    --copai-text-muted: #64748b;
    --copai-text-on-blue: #ffffff;

    /* Statuts (vert -> cyan, rouge/orange conservés) */
    --copai-success: #0ea5e9;
    --copai-warning: #f59e0b;
    --copai-danger: #ef4444;

    /* Gradients réutilisables */
    --topbar-gradient: linear-gradient(135deg, #1e40af 0%, #2563eb 45%, #38bdf8 100%);
    --header-gradient: linear-gradient(135deg, #ffffff 0%, #e0f2fe 100%);
    --button-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    --sidebar-active-bg: linear-gradient(90deg, rgba(37, 99, 235, 0.12), rgba(56, 189, 248, 0.06));

    /* Compat variables LinkedIn legacy */
    --linkedin-blue: #2563eb;
    --linkedin-dark: #1e40af;
    --primary-blue: #2563eb;
    --primary-blue-light: #3b82f6;
    --success-green: #0ea5e9;
    --warning-orange: #f59e0b;
    --danger-red: #ef4444;
}

body {
    background-color: var(--copai-bg);
    color: var(--copai-text);
}

/* ============================================================
   TOPBAR (sidebar 8 sections)
   ============================================================ */
.topbar {
    background: var(--topbar-gradient) !important;
    box-shadow: 0 2px 14px rgba(37, 99, 235, 0.2);
}
.topbar .brand { color: #fff !important; font-weight: 700; }
.topbar .user-menu a { color: rgba(255, 255, 255, 0.95) !important; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.app-sidebar {
    background: #fff;
    border-right: 1px solid var(--copai-border-soft);
}
.app-sidebar a.section-link { color: var(--copai-text); }
.app-sidebar a.section-link:hover {
    background: var(--copai-bg-soft);
    color: var(--copai-primary);
}
.app-sidebar a.section-link.active {
    background: var(--sidebar-active-bg);
    border-left-color: var(--copai-primary);
    color: var(--copai-primary);
    font-weight: 600;
}

/* ============================================================
   PAGE-HEADER STANDARD (à appliquer partout)
   ============================================================ */
.page-header {
    background: var(--header-gradient);
    border: 1px solid var(--copai-border);
    border-bottom-width: 2px;
    border-bottom-color: var(--copai-primary);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.06);
}
.page-header h1, .page-header h2, .page-header h3 {
    color: var(--copai-deep) !important;
    font-weight: 700; margin: 0;
}
.page-header .page-subtitle {
    color: var(--copai-text-muted);
    font-size: 0.95rem; margin-top: 0.25rem;
}
.page-header .page-actions { margin-top: 0.5rem; }

/* ============================================================
   BOUTONS — bleu vif lumineux
   ============================================================ */
.btn-primary, .btn-linkedin {
    background: var(--copai-primary-mid) !important;
    border-color: var(--copai-primary-mid) !important;
    color: white !important;
}
.btn-primary:hover, .btn-linkedin:hover,
.btn-primary:focus, .btn-linkedin:focus,
.btn-primary:active, .btn-linkedin:active {
    background: var(--copai-primary-dark) !important;
    border-color: var(--copai-primary-dark) !important;
    color: white !important;
}
.btn-outline-primary {
    color: var(--copai-primary) !important;
    border-color: var(--copai-primary) !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background: var(--copai-primary) !important;
    color: white !important;
}

.btn-secondary, .btn-outline-secondary {
    color: var(--copai-text) !important;
    border-color: var(--copai-border) !important;
}
.btn-outline-secondary:hover {
    background: var(--copai-bg-soft) !important;
    color: var(--copai-primary) !important;
    border-color: var(--copai-primary-light) !important;
}
.btn-info, .btn-outline-info {
    color: var(--copai-accent) !important;
    border-color: var(--copai-accent) !important;
}
.btn-info { background: var(--copai-accent) !important; color: white !important; }

/* Boutons "vert" du legacy (validation, envoi) → cyan azur */
.btn-success, .btn-outline-success {
    --bs-btn-bg: var(--copai-accent);
    --bs-btn-border-color: var(--copai-accent);
    background-color: var(--copai-accent) !important;
    border-color: var(--copai-accent) !important;
    color: white !important;
}
.btn-success:hover, .btn-outline-success:hover {
    background-color: var(--copai-primary) !important;
    border-color: var(--copai-primary) !important;
    color: white !important;
}

/* ============================================================
   COLOR UTILITIES (Bootstrap overrides)
   ============================================================ */
.text-primary { color: var(--copai-primary) !important; }
.bg-primary { background: var(--copai-primary) !important; }
.border-primary { border-color: var(--copai-primary) !important; }
.text-success { color: var(--copai-accent) !important; }
.bg-success { background-color: var(--copai-accent) !important; }
.border-success { border-color: var(--copai-accent) !important; }
.text-info { color: var(--copai-accent) !important; }
.bg-info { background-color: var(--copai-accent) !important; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
    border-color: var(--copai-border-soft);
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.04);
}
.card:hover {
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--copai-border-soft);
    font-weight: 600;
    color: var(--copai-deep);
}
.card-title { color: var(--copai-deep); }

/* Header "metric-card" des dashboards = gradient bleu */
.metric-card {
    background: var(--topbar-gradient) !important;
    color: white !important;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.18);
}
.metric-card .metric-value, .metric-card .text-muted { color: white !important; }

/* ============================================================
   BADGES
   ============================================================ */
.badge.bg-primary { background-color: var(--copai-primary) !important; }
.badge.bg-info { background-color: var(--copai-accent) !important; color: white; }
.badge.bg-success {
    background-color: var(--copai-accent) !important;
    color: white !important;
}
.badge.bg-secondary { background-color: var(--copai-text-muted) !important; }

/* ============================================================
   ALERTS
   ============================================================ */
.alert-primary, .alert-info {
    background: rgba(14, 165, 233, 0.08);
    border-color: var(--copai-accent);
    color: var(--copai-deep);
}
.alert-success {
    background: rgba(14, 165, 233, 0.08) !important;
    border-color: var(--copai-accent) !important;
    color: var(--copai-deep) !important;
}

/* ============================================================
   TABLES
   ============================================================ */
.table thead.table-primary, .table thead th {
    background: var(--copai-bg-soft);
    color: var(--copai-deep);
    border-bottom: 2px solid var(--copai-primary);
}
.table-hover tbody tr:hover {
    background: var(--copai-bg-soft);
}

/* ============================================================
   OVERRIDES AGRESSIFS — supprime tout vert et tout bleu LinkedIn
   ============================================================ */

/* Hex verts hardcodés en inline style → cyan */
[style*="background: #28a745"], [style*="background-color: #28a745"],
[style*="background: #198754"], [style*="background-color: #198754"],
[style*="background: #10b981"], [style*="background-color: #10b981"],
[style*="background: #22c55e"], [style*="background-color: #22c55e"],
[style*="background: #16a34a"], [style*="background-color: #16a34a"] {
    background: var(--copai-accent) !important;
    background-color: var(--copai-accent) !important;
}
[style*="color: #28a745"], [style*="color: #198754"],
[style*="color: #10b981"], [style*="color: #22c55e"],
[style*="color: #16a34a"] {
    color: var(--copai-accent) !important;
}

/* Hex bleu LinkedIn en inline style → bleu palette */
[style*="background: #0a66c2"], [style*="background-color: #0a66c2"],
[style*="background: #004182"], [style*="background-color: #004182"] {
    background: var(--copai-primary) !important;
    background-color: var(--copai-primary) !important;
}

/* ============================================================
   HEADERS LEGACY — uniformisation
   ============================================================ */

/* Cartes de titre des templates campaigns/sequences/personas
   (rectangle blanc avec h1.card-title) → ajout du gradient */
.card .card-title:first-child:not(:only-child),
.card-body > h1:first-child,
.card-body > h2:first-child {
    color: var(--copai-deep);
}

/* "Hero" du Network Manager (rectangle bleu plein)
   → adouci avec le gradient page-header */
.linkedin-hero,
.page-hero,
[class*="hero-section"],
.dashboard-hero {
    background: var(--header-gradient) !important;
    color: var(--copai-deep) !important;
    border: 1px solid var(--copai-border) !important;
    border-bottom: 2px solid var(--copai-primary) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.06) !important;
}
.linkedin-hero h1, .linkedin-hero h2, .linkedin-hero h3,
.page-hero h1, .page-hero h2, .page-hero h3,
[class*="hero-section"] h1, [class*="hero-section"] h2, [class*="hero-section"] h3 {
    color: var(--copai-deep) !important;
    text-shadow: none !important;
}
.linkedin-hero p, .linkedin-hero .lead,
.page-hero p, .page-hero .lead {
    color: var(--copai-text-muted) !important;
}

/* Background bleu plein de pages legacy (network manager)
   → fond doux uniforme */
body.bg-primary, body[style*="background: #2563"],
body[style*="background-color: #2563"],
body[style*="background: #3b82"], body[style*="background-color: #3b82"] {
    background: var(--copai-bg) !important;
    color: var(--copai-text) !important;
}

/* ============================================================
   ULTRA-AGGRESSIVE LEGACY OVERRIDES
   Forçage des variables CSS + inline styles + gradients legacy
   ============================================================ */

/* Override des variables CSS legacy (definies dans linkedin_campaign_system,
   linkedin_main_app, linkedin_network_manager) -> palette CoPAi */
:root {
    --ai-purple: var(--copai-primary) !important;
    --primary-blue: var(--copai-primary) !important;
    --primary-blue-light: var(--copai-accent) !important;
    --bg-blue-light: var(--copai-bg-soft) !important;
    --bg-blue-very-light: var(--copai-bg) !important;
    --success-green: var(--copai-accent) !important;
    --warning-orange: #f59e0b !important;
    --danger-red: #ef4444 !important;
    --info-blue: var(--copai-accent) !important;
    --linkedin-blue: var(--copai-primary) !important;
    --linkedin-dark: var(--copai-deep) !important;
    --bs-primary: var(--copai-primary) !important;
    --bs-success: var(--copai-accent) !important;
    --bs-info: var(--copai-accent) !important;
}

/* Body avec fond gradient legacy -> fond CoPAi unifie */
body, body[style] {
    background: var(--copai-bg) !important;
    background-color: var(--copai-bg) !important;
    background-image: none !important;
}
body[style*="linear-gradient"] {
    background: var(--copai-bg) !important;
    background-image: none !important;
}

/* Containers de premier niveau / hero de pages legacy
   Cible largement : .header (Network Manager), .linkedin-hero,
   .page-hero, .ai-hero, .phase-indicator, etc.
   ============================================================ */
body > .container > .header,
body > .container-fluid > .header,
.container > .header:not(.card-header):not(.modal-header):not(.offcanvas-header),
.container-fluid > .header:not(.card-header):not(.modal-header):not(.offcanvas-header),
.linkedin-hero, .page-hero, .dashboard-hero, .header-section,
[class*="hero-section"], [class*="ai-hero"], [class*="stats-hero"],
.phase-indicator,
.ai-banner, .stats-banner, .page-banner {
    background: var(--header-gradient) !important;
    background-image: var(--header-gradient) !important;
    color: var(--copai-deep) !important;
    border: 1px solid var(--copai-border) !important;
    border-bottom: 2px solid var(--copai-primary) !important;
    border-radius: 12px !important;
    padding: 1.5rem 2rem !important;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.06) !important;
    text-shadow: none !important;
}
body > .container > .header h1, body > .container > .header h2,
body > .container > .header h3, body > .container > .header p,
.container > .header:not(.card-header) h1,
.container > .header:not(.card-header) h2,
.container > .header:not(.card-header) h3,
.container > .header:not(.card-header) p,
.linkedin-hero h1, .linkedin-hero h2, .linkedin-hero h3, .linkedin-hero p,
.page-hero h1, .page-hero h2, .page-hero h3, .page-hero p,
[class*="hero-section"] h1, [class*="hero-section"] h2, [class*="hero-section"] h3,
[class*="hero-section"] p,
[class*="ai-hero"] h1, [class*="ai-hero"] h2, [class*="ai-hero"] h3,
[class*="ai-hero"] p,
.phase-indicator h1, .phase-indicator h2, .phase-indicator h3, .phase-indicator p,
.phase-indicator span {
    color: var(--copai-deep) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* Sous-titres / lead -> gris doux */
body > .container > .header p[style*="opacity"],
.linkedin-hero p[style*="opacity"], .page-hero p[style*="opacity"],
.linkedin-hero .lead, .page-hero .lead {
    color: var(--copai-text-muted) !important;
    opacity: 1 !important;
}

/* Nav legacy (Network Manager) - ligne de boutons sous le header */
body > .container > .nav,
.container > .nav:not(.navbar):not(.nav-tabs):not(.nav-pills) {
    background: white !important;
    border: 1px solid var(--copai-border-soft) !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    margin-bottom: 1rem !important;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.04) !important;
    color: var(--copai-text) !important;
}
body > .container > .nav a,
.container > .nav:not(.navbar):not(.nav-tabs) a {
    color: var(--copai-primary) !important;
    background: transparent !important;
    border: 1px solid var(--copai-primary) !important;
    padding: 0.4rem 0.8rem !important;
    border-radius: 6px !important;
    margin: 0 0.25rem !important;
    text-decoration: none !important;
    display: inline-block !important;
}
body > .container > .nav a:hover,
.container > .nav:not(.navbar):not(.nav-tabs) a:hover {
    background: var(--copai-primary) !important;
    color: white !important;
}

/* Cibles inline style avec gradients violets / verts / mauvais bleus */
[style*="#667eea"], [style*="#764ba2"],
[style*="rgb(102, 126, 234)"], [style*="rgb(118, 75, 162)"] {
    background: var(--header-gradient) !important;
    background-image: var(--header-gradient) !important;
    color: var(--copai-deep) !important;
}
[style*="linear-gradient(135deg, #667eea"],
[style*="linear-gradient(135deg, #764ba2"],
[style*="linear-gradient(45deg, #f093fb"],
[style*="linear-gradient(45deg, var(--success-green)"],
[style*="linear-gradient(45deg, #2563eb"],
[style*="linear-gradient(135deg, #007bff"] {
    background: var(--header-gradient) !important;
    background-image: var(--header-gradient) !important;
    color: var(--copai-deep) !important;
}

/* Body avec fond bleu/violet plein */
body[style*="#2563eb"], body[style*="#dbeafe"],
body[style*="#667eea"], body[style*="#764ba2"] {
    background: var(--copai-bg) !important;
    background-image: none !important;
}

/* Cards "stats" / "metric" / hero gradients de toute sorte */
.stats-card, .metric-card, .hero-section, .ai-hero, .header,
.persona-card, .stat-card {
    background: var(--copai-bg-card) !important;
    background-image: none !important;
    color: var(--copai-text) !important;
    border: 1px solid var(--copai-border-soft) !important;
    border-radius: 12px !important;
}

/* Override quand le card a explicitement un gradient en classe */
.card[style*="linear-gradient"],
.card[style*="background"][style*="#"] {
    background: var(--copai-bg-card) !important;
    background-image: none !important;
}

/* Boutons gradient legacy (mix vert+bleu, violet, etc.) -> bleu palette */
.btn[style*="linear-gradient"],
[class*="btn-"][style*="linear-gradient"],
.btn-vert, .btn-success-gradient, .btn-ai, .btn-purple {
    background: var(--copai-primary-mid) !important;
    background-image: none !important;
    border-color: var(--copai-primary-mid) !important;
    color: white !important;
}

/* Texte color violet/vert hardcode -> palette */
[style*="color: #667eea"], [style*="color: #764ba2"],
[style*="color: #28a745"], [style*="color: #16a34a"] {
    color: var(--copai-primary) !important;
}

/* Tables avec headers colores legacy */
.table thead[style*="background"],
.table th[style*="background"] {
    background: var(--copai-bg-soft) !important;
    background-image: none !important;
    color: var(--copai-deep) !important;
}

/* Borders colorees legacy (vert/violet) -> bleu */
[style*="border: 3px solid #16a34a"],
[style*="border: 2px solid #28a745"],
[style*="border-color: #16a34a"],
[style*="border-color: #28a745"] {
    border-color: var(--copai-accent) !important;
}

/* Force aussi les sections "warning" jaune fade -> conservee en orange palette */
[style*="#fff3cd"] {
    background: rgba(245, 158, 11, 0.08) !important;
    border-color: var(--copai-warning) !important;
}

/* Cards legacy avec backgrounds verts (champagne / prospects detectes) */
[style*="#f0fdf4"], [style*="#dcfce7"] {
    background: rgba(14, 165, 233, 0.06) !important;
}

/* ============================================================
   LIENS
   ============================================================ */
a { color: var(--copai-primary); }
a:hover { color: var(--copai-primary-dark); }

/* ============================================================
   FOCUS / FORMS
   ============================================================ */
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--copai-primary-mid);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.15);
}
.form-check-input:checked {
    background-color: var(--copai-primary) !important;
    border-color: var(--copai-primary) !important;
}