/* ============================================================================
   HELIOS STELLAR POLISH — visual finishers v2
   ============================================================================

   Couche de polish au-dessus de helios-design-tokens-v2.css.
   - Body background : starlight ambient (subtle radial glows)
   - Sidebar : refined hover states, active marker
   - Cards : crisp borders, hover lift
   - KPI cards : refined typography & badges
   - Kanban cards : softer, more readable
   - Topbar/header : glass + indigo accent
   - Empty states : friendlier
   - Status badges : harmonized palette
   ============================================================================ */

/* ============================================================================
   0. UNIVERSAL CONTRAST GUARD — force readable text on dark surfaces
   ============================================================================
   Beaucoup de modules legacy utilisaient color: var(--text-dark) ou
   var(--phi-dark-7/8/900) comme couleur de texte. En dark mode ces vars
   pointent vers noir-alpha → texte INVISIBLE. Cette section restaure la
   lisibilité sur toutes les surfaces sombres communes.
   ============================================================================ */
body:not(.light-theme) {
    /* Force readable text on common card/panel selectors */
}
body:not(.light-theme) .card-title,
body:not(.light-theme) .module-title,
body:not(.light-theme) .person-name,
body:not(.light-theme) .user-name,
body:not(.light-theme) .org-node-name,
body:not(.light-theme) .org-card .name,
body:not(.light-theme) .candidate-name,
body:not(.light-theme) .candidate-card .name,
body:not(.light-theme) .candidate-meta,
body:not(.light-theme) .kanban-card .candidate-name,
body:not(.light-theme) .vivier-card .name,
body:not(.light-theme) .talent-name,
body:not(.light-theme) .source-card-title {
    color: var(--text-primary) !important;
}

body:not(.light-theme) .text-dark,
body:not(.light-theme) .text-secondary-dark,
body:not(.light-theme) .text-muted-dark,
body:not(.light-theme) [class*="text-dark"]:not(.text-dark-blue):not(.text-dark-red) {
    color: var(--text-primary) !important;
}

/* ATS Grid Unified — utilise var(--phi-dark-700/800/900) comme color: TEXT
   sur fond dark, ce qui rend invisible. Force readable text. */
body:not(.light-theme) .ats-grid,
body:not(.light-theme) .ats-grid-unified,
body:not(.light-theme) .ats-grid-th,
body:not(.light-theme) .ats-grid-td,
body:not(.light-theme) .grid-th,
body:not(.light-theme) .grid-td,
body:not(.light-theme) .ats-grid-cell-action,
body:not(.light-theme) [class*="ats-grid-"][class*="-name"],
body:not(.light-theme) [class*="ats-grid-"][class*="-label"] {
    color: var(--text-primary) !important;
}

/* Wizard panels NEVER on light background in dark mode */
body:not(.light-theme) .wizard-container-v2,
body:not(.light-theme) .wizard-card,
body:not(.light-theme) .ats-wizard,
body:not(.light-theme) .matching-wizard {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}
body:not(.light-theme) .wizard-progress-v2,
body:not(.light-theme) .wizard-step-panel {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.6) 0%, transparent 100%) !important;
}
body:not(.light-theme) .wizard-card *,
body:not(.light-theme) .ats-wizard h1,
body:not(.light-theme) .ats-wizard h2,
body:not(.light-theme) .ats-wizard h3,
body:not(.light-theme) .ats-wizard h4,
body:not(.light-theme) .wizard-step-title,
body:not(.light-theme) .wizard-step-label {
    color: var(--text-primary);
}
body:not(.light-theme) .wizard-step-description,
body:not(.light-theme) .wizard-step-hint {
    color: var(--text-secondary);
}

/* Generic text on glass/card surfaces (with backdrop-filter) */
body:not(.light-theme) .card .person-info,
body:not(.light-theme) .card .meta,
body:not(.light-theme) .glass-card p,
body:not(.light-theme) .org-card .role,
body:not(.light-theme) .org-card .title {
    color: var(--text-secondary) !important;
}

/* KPI labels (very common across modules) */
body:not(.light-theme) .kpi-label,
body:not(.light-theme) .metric-label,
body:not(.light-theme) .stat-label,
body:not(.light-theme) [class*="label"]:not(.form-label):not(.badge-label) {
    color: var(--text-muted);
}

/* Kanban column headers */
body:not(.light-theme) .kanban-col-header,
body:not(.light-theme) .kanban-column-title,
body:not(.light-theme) .mini-kanban-col-title,
body:not(.light-theme) .swimlane-title {
    color: var(--text-primary) !important;
    font-weight: 600;
}

/* ============================================================================
   1. BODY — Starlight ambient (dark mode only, subtle)
   ============================================================================ */
body.helios-app::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 1200px 600px at 25% 8%, rgba(99, 102, 241, 0.08), transparent 50%),
        radial-gradient(ellipse 900px 600px at 88% 95%, rgba(139, 92, 246, 0.06), transparent 50%),
        radial-gradient(ellipse 1100px 800px at 55% 45%, rgba(14, 165, 233, 0.035), transparent 60%);
    pointer-events: none;
    will-change: transform;
}

body.light-theme.helios-app::before {
    background:
        radial-gradient(ellipse 1200px 600px at 25% 8%, rgba(99, 102, 241, 0.05), transparent 60%),
        radial-gradient(ellipse 900px 600px at 88% 95%, rgba(139, 92, 246, 0.035), transparent 60%);
}

/* ============================================================================
   2. SIDEBAR — refined hover + active marker
   ============================================================================ */
.sidebar {
    background: linear-gradient(180deg,
        var(--hx-slate-950) 0%,
        var(--hx-slate-900) 38.2%,
        #131c30 61.8%,
        var(--hx-slate-900) 100%
    ) !important;
    border-right: 1px solid rgba(99, 102, 241, 0.08) !important;
}

.sidebar-header {
    background: linear-gradient(137.5deg,
        var(--hx-slate-900) 0%,
        #131c30 61.8%,
        var(--hx-slate-800) 100%
    ) !important;
    border-bottom: 1px solid rgba(99, 102, 241, 0.10) !important;
}

/* Sidebar link hover + active — indigo marker */
.sidebar-link,
.menu-link,
.nav-link[href] {
    position: relative;
    transition: background-color 0.15s, color 0.15s !important;
}

.sidebar-link:hover,
.menu-link:hover {
    background: rgba(99, 102, 241, 0.10) !important;
    color: #FFFFFF !important;
}

.sidebar-link.active,
.sidebar-link[aria-current="page"],
.menu-link.active {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.18), rgba(99, 102, 241, 0.06)) !important;
    color: #FFFFFF !important;
}

.sidebar-link.active::before,
.menu-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--hx-indigo-500);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.65);
}

/* Sidebar icons — subtle indigo on hover */
.sidebar-link:hover i,
.sidebar-link:hover .bi,
.menu-link:hover i,
.menu-link:hover .bi {
    color: var(--hx-indigo-300);
}

.sidebar-link.active i,
.sidebar-link.active .bi,
.menu-link.active i {
    color: var(--hx-indigo-400);
}

/* User card in sidebar — refined */
.sidebar-user-card,
.user-profile-card {
    background: linear-gradient(137.5deg, rgba(99, 102, 241, 0.10), rgba(139, 92, 246, 0.06)) !important;
    border: 1px solid rgba(99, 102, 241, 0.18) !important;
}

/* ============================================================================
   3. CARDS — crisp glassmorphism
   ============================================================================ */
.card,
.glass-card,
.h-card,
.module-card,
.kpi-card,
.metric-card,
.dashboard-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 13px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.2s;
}

.card:hover:not(.no-hover),
.glass-card:hover:not(.no-hover),
.kpi-card:hover,
.metric-card:hover,
.module-card:hover {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.32) !important;
    box-shadow: var(--shadow-lg);
}

/* Perf: contain repaint on hover-animated cards */
.kpi-card, .metric-card, .module-card, .kanban-card, .glass-card {
    contain: layout style;
}

/* Light theme — solid white cards */
body.light-theme .card,
body.light-theme .glass-card,
body.light-theme .kpi-card,
body.light-theme .metric-card,
body.light-theme .module-card {
    background: #FFFFFF !important;
    border-color: var(--hx-slate-200) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.light-theme .card:hover,
body.light-theme .glass-card:hover,
body.light-theme .kpi-card:hover {
    border-color: var(--hx-indigo-300) !important;
}

/* ============================================================================
   4. KPI CARDS — refined typography
   ============================================================================ */
.kpi-card .kpi-value,
.kpi-card .metric-value,
.kpi-value {
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1;
}

.kpi-card .kpi-label,
.kpi-card .metric-label,
.kpi-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* KPI icon badges — gradient backgrounds */
.kpi-card .icon-badge,
.kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(137.5deg, var(--hx-indigo-500), var(--hx-violet-500));
    color: #FFF;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.30);
}

.kpi-icon.success { background: linear-gradient(137.5deg, var(--hx-emerald-500), var(--hx-emerald-700)); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.30); }
.kpi-icon.warning { background: linear-gradient(137.5deg, var(--hx-amber-500), var(--hx-amber-700)); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.30); }
.kpi-icon.danger  { background: linear-gradient(137.5deg, var(--hx-rose-500),   var(--hx-rose-700));  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.30); }
.kpi-icon.info    { background: linear-gradient(137.5deg, var(--hx-sky-500),    var(--hx-sky-700));   box-shadow: 0 4px 12px rgba(14, 165, 233, 0.30); }

/* ============================================================================
   5. STATUS BADGES — harmonized
   ============================================================================ */
.badge,
.h-badge,
.status-badge {
    font-weight: 600;
    letter-spacing: 0.02em;
    font-size: var(--text-xs);
    padding: 0.28rem 0.6rem;
    border-radius: 6px;
    text-transform: none;
    line-height: 1.3;
}

.badge.bg-primary,    .badge-primary    { background: var(--hx-indigo-500) !important;  color: #FFF !important; }
.badge.bg-success,    .badge-success    { background: var(--hx-emerald-500) !important; color: #FFF !important; }
.badge.bg-warning,    .badge-warning    { background: var(--hx-amber-500) !important;   color: var(--hx-slate-900) !important; }
.badge.bg-danger,     .badge-danger     { background: var(--hx-rose-500) !important;    color: #FFF !important; }
.badge.bg-info,       .badge-info       { background: var(--hx-sky-500) !important;     color: #FFF !important; }
.badge.bg-secondary,  .badge-secondary  { background: var(--hx-slate-500) !important;   color: #FFF !important; }

/* Outline badges */
.badge-outline-primary { background: rgba(99, 102, 241, 0.12); color: var(--hx-indigo-400); border: 1px solid rgba(99, 102, 241, 0.32); }
.badge-outline-success { background: rgba(16, 185, 129, 0.12); color: var(--hx-emerald-400); border: 1px solid rgba(16, 185, 129, 0.32); }
.badge-outline-warning { background: rgba(245, 158, 11, 0.12); color: var(--hx-amber-400); border: 1px solid rgba(245, 158, 11, 0.32); }
.badge-outline-danger  { background: rgba(244, 63, 94, 0.12); color: var(--hx-rose-400); border: 1px solid rgba(244, 63, 94, 0.32); }

/* ============================================================================
   6. KANBAN COLUMNS — softer, more readable
   ============================================================================ */
.kanban-column,
.swimlane {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(148, 163, 184, 0.10);
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

body.light-theme .kanban-column,
body.light-theme .swimlane {
    background: var(--hx-slate-50);
    border-color: var(--hx-slate-200);
    backdrop-filter: none;
}

.kanban-card {
    background: var(--bg-card-hover) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px;
    box-shadow: var(--shadow-xs);
    transition: all 0.2s;
}
.kanban-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: rgba(99, 102, 241, 0.32) !important;
}

body.light-theme .kanban-card {
    background: #FFFFFF !important;
}

/* ============================================================================
   7. TOPBAR / HEADER — glass + brand accent
   ============================================================================ */
.helios-header,
.module-header,
.page-header,
.topbar {
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-bottom: 1px solid rgba(99, 102, 241, 0.10) !important;
}

body.light-theme .helios-header,
body.light-theme .module-header,
body.light-theme .page-header,
body.light-theme .topbar {
    background: rgba(255, 255, 255, 0.85) !important;
    border-bottom-color: var(--hx-slate-200) !important;
}

/* Header title — refined (solid white, no gradient text effect)
   Bug fix : le gradient text fill (--text-primary → --hx-indigo-400)
   devenait invisible sur les hero bars indigo (côté droit matchait le bg).
   Solution : couleur solide #FFFFFF en dark, slate-900 en light.
   Garde le tracking serré + font-weight 700 pour la présence. */
.helios-header h1,
.module-header h1,
.page-header h1,
.page-title {
    font-weight: 700;
    letter-spacing: -0.028em;
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    background: none;
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.15);
}

body.light-theme .helios-header h1,
body.light-theme .module-header h1,
body.light-theme .page-header h1,
body.light-theme .page-title {
    color: var(--hx-slate-900);
    -webkit-text-fill-color: var(--hx-slate-900);
    background: none;
    text-shadow: none;
}

/* SPECIFICITÉ : si le titre est DANS un hero coloré (indigo gradient bg),
   forcer le blanc indépendamment du theme (le hero reste indigo en light aussi) */
.module-header.has-gradient-bg h1,
.module-header[style*="gradient"] h1,
[class*="hero"][style*="gradient"] h1,
[class*="hero-gradient"] h1,
.dashboard-hero h1,
.hub-hero h1,
.hub-hero-premium h1 {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.18) !important;
}

/* ============================================================================
   8. INPUTS / FORMS — polished
   ============================================================================ */
.form-control,
.h-input,
.h-select,
.h-textarea,
input.form-control,
textarea.form-control,
select.form-control {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-md);
    padding: 0.55rem 0.85rem;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    font-family: var(--h-font-family);
}

.form-control:focus,
.h-input:focus,
.h-select:focus,
.h-textarea:focus {
    border-color: var(--hx-indigo-500) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18) !important;
    background: var(--bg-input-focus) !important;
}

.form-control::placeholder { color: var(--text-muted) !important; opacity: 0.7; }

body.light-theme .form-control,
body.light-theme .h-input,
body.light-theme .h-select {
    background: #FFFFFF !important;
    border-color: var(--hx-slate-300) !important;
}

/* Form labels */
.form-label,
label {
    font-weight: 500;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}

/* ============================================================================
   9. TABLES — refined
   ============================================================================ */
.table,
table.helios-table {
    --bs-table-bg: transparent;
    color: var(--text-primary);
    border-color: var(--border-color);
}

.table thead th,
table.helios-table thead th {
    background: rgba(99, 102, 241, 0.06) !important;
    color: var(--text-secondary) !important;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border-color);
    padding: 0.65rem 0.9rem;
}

.table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
}

.table tbody tr:hover {
    background: rgba(99, 102, 241, 0.05) !important;
}

body.light-theme .table thead th { background: var(--hx-slate-50) !important; }
body.light-theme .table tbody tr:hover { background: rgba(99, 102, 241, 0.04) !important; }

/* ============================================================================
   10. EMPTY STATES — friendlier
   ============================================================================ */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--text-muted);
}
.empty-state i, .empty-state .bi {
    font-size: 3rem;
    color: var(--hx-indigo-400);
    opacity: 0.55;
    margin-bottom: 0.75rem;
    display: block;
}

/* ============================================================================
   11. ALERTS — refined palette
   ============================================================================ */
.alert {
    border: 1px solid;
    border-radius: 10px;
    padding: 0.85rem 1.1rem;
    font-weight: 500;
}
.alert-primary,  .alert-info    { background: rgba(99, 102, 241, 0.10); border-color: rgba(99, 102, 241, 0.32); color: var(--hx-indigo-300); }
.alert-success                  { background: rgba(16, 185, 129, 0.10); border-color: rgba(16, 185, 129, 0.32); color: var(--hx-emerald-400); }
.alert-warning                  { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.32); color: var(--hx-amber-400); }
.alert-danger                   { background: rgba(244, 63, 94, 0.10); border-color: rgba(244, 63, 94, 0.32); color: var(--hx-rose-400); }

body.light-theme .alert-primary,
body.light-theme .alert-info    { color: var(--hx-indigo-700); }
body.light-theme .alert-success { color: var(--hx-emerald-700); }
body.light-theme .alert-warning { color: var(--hx-amber-700); }
body.light-theme .alert-danger  { color: var(--hx-rose-700); }

/* ============================================================================
   12. MODALS — premium
   ============================================================================ */
.modal-content {
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border: 1px solid rgba(99, 102, 241, 0.18) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-2xl), 0 0 0 1px rgba(99, 102, 241, 0.10);
}

body.light-theme .modal-content {
    background: #FFFFFF !important;
    border-color: var(--hx-slate-200) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.modal-header,
.modal-footer {
    border-color: var(--border-color) !important;
}

/* ============================================================================
   13. DROPDOWNS — refined
   ============================================================================ */
.dropdown-menu {
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(99, 102, 241, 0.14) !important;
    border-radius: 10px !important;
    box-shadow: var(--shadow-xl);
    padding: 0.35rem;
}
.dropdown-item {
    border-radius: 6px;
    padding: 0.45rem 0.7rem;
    color: var(--text-secondary);
    font-size: 0.88rem;
}
.dropdown-item:hover {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #FFFFFF !important;
}
.dropdown-item.active {
    background: var(--hx-indigo-500) !important;
    color: #FFFFFF !important;
}

body.light-theme .dropdown-menu {
    background: #FFFFFF !important;
    border-color: var(--hx-slate-200) !important;
}
body.light-theme .dropdown-item { color: var(--hx-slate-700); }
body.light-theme .dropdown-item:hover { color: var(--hx-slate-900) !important; background: var(--hx-slate-100) !important; }

/* ============================================================================
   14. AVATARS — polished
   ============================================================================ */
.avatar,
img.avatar,
.user-avatar {
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

/* ============================================================================
   15. SCROLLBARS — premium thin
   ============================================================================ */
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.20); border-radius: var(--radius-xs); }

/* ============================================================================
   16. CHAT / FORUM — bubble polish
   ============================================================================ */
.chat-message,
.message-bubble,
.forum-post {
    border-radius: 12px;
    transition: border-color 0.15s;
}

.message-bubble.outgoing,
.chat-message.is-self {
    background: linear-gradient(137.5deg, var(--hx-indigo-600), var(--hx-violet-600)) !important;
    color: #FFFFFF !important;
}

/* ============================================================================
   17. LOGIN — premium accents
   ============================================================================ */
.login-container,
.auth-card {
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border: 1px solid rgba(99, 102, 241, 0.18);
    box-shadow: var(--shadow-2xl), 0 0 60px rgba(99, 102, 241, 0.15);
}

/* ============================================================================
   18. UTILITY OVERRIDES — Bootstrap alignment with brand
   ============================================================================ */
.text-cyan, .text-info { color: var(--hx-sky-500) !important; }
.bg-cyan, .bg-info { background-color: var(--hx-sky-500) !important; }

/* ============================================================================
   19. ANIMATIONS — refined micro-interactions
   ============================================================================
   Utilitaires disponibles :
   - .hx-fade-in        : fade up on mount (cards KPI, dashboards)
   - .hx-pulse          : pulse glow indigo (CTAs alertes)
   - .hx-stagger-fade   : auto-stagger children avec délai cascade (kpi grid)
   ============================================================================ */
@keyframes hx-fade-in-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes hx-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); }
}

.helios-app .hx-fade-in { animation: hx-fade-in-up 0.3s cubic-bezier(0.4, 0, 0.2, 1) both; }
.helios-app .hx-pulse  { animation: hx-pulse-glow 2s ease-in-out infinite; }

/* Stagger children fade-in (jusqu'à 8 enfants) — pattern composition */
.helios-app .hx-stagger-fade > *,
.helios-app .kpi-grid > *,
.helios-app .dashboard-kpi-grid > *,
.helios-app .metric-grid > *,
.helios-app .stats-grid > *,
.helios-app .dashboard-kpis > *,
.helios-app [class*="kpi-row"] > * {
    animation: hx-fade-in-up 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.helios-app .hx-stagger-fade > *:nth-child(1),
.helios-app .kpi-grid > *:nth-child(1),
.helios-app .dashboard-kpi-grid > *:nth-child(1),
.helios-app .metric-grid > *:nth-child(1),
.helios-app .stats-grid > *:nth-child(1),
.helios-app .dashboard-kpis > *:nth-child(1) { animation-delay: 0.05s; }

.helios-app .hx-stagger-fade > *:nth-child(2),
.helios-app .kpi-grid > *:nth-child(2),
.helios-app .dashboard-kpi-grid > *:nth-child(2),
.helios-app .metric-grid > *:nth-child(2),
.helios-app .stats-grid > *:nth-child(2),
.helios-app .dashboard-kpis > *:nth-child(2) { animation-delay: 0.1s; }

.helios-app .hx-stagger-fade > *:nth-child(3),
.helios-app .kpi-grid > *:nth-child(3),
.helios-app .dashboard-kpi-grid > *:nth-child(3),
.helios-app .metric-grid > *:nth-child(3),
.helios-app .stats-grid > *:nth-child(3),
.helios-app .dashboard-kpis > *:nth-child(3) { animation-delay: 0.15s; }

.helios-app .hx-stagger-fade > *:nth-child(4),
.helios-app .kpi-grid > *:nth-child(4),
.helios-app .dashboard-kpi-grid > *:nth-child(4),
.helios-app .metric-grid > *:nth-child(4),
.helios-app .stats-grid > *:nth-child(4),
.helios-app .dashboard-kpis > *:nth-child(4) { animation-delay: 0.2s; }

.helios-app .hx-stagger-fade > *:nth-child(5),
.helios-app .kpi-grid > *:nth-child(5),
.helios-app .dashboard-kpi-grid > *:nth-child(5),
.helios-app .metric-grid > *:nth-child(5),
.helios-app .stats-grid > *:nth-child(5),
.helios-app .dashboard-kpis > *:nth-child(5) { animation-delay: 0.25s; }

.helios-app .hx-stagger-fade > *:nth-child(6),
.helios-app .kpi-grid > *:nth-child(6),
.helios-app .dashboard-kpi-grid > *:nth-child(6),
.helios-app .metric-grid > *:nth-child(6),
.helios-app .stats-grid > *:nth-child(6),
.helios-app .dashboard-kpis > *:nth-child(6) { animation-delay: 0.3s; }

.helios-app .hx-stagger-fade > *:nth-child(7) { animation-delay: 0.35s; }
.helios-app .hx-stagger-fade > *:nth-child(8) { animation-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
    .helios-app .hx-fade-in,
    .helios-app .hx-pulse,
    .helios-app .hx-stagger-fade > *,
    .helios-app .kpi-grid > *,
    .helios-app .dashboard-kpi-grid > *,
    .helios-app .metric-grid > *,
    .helios-app .stats-grid > *,
    .helios-app .dashboard-kpis > * {
        animation: none !important;
    }
}

/* ============================================================================
   20. BRAND ICONS — système de couleurs marques externes (WhatsApp, LinkedIn, etc.)
   ============================================================================
   Pattern Composition : .brand-icon (structure) + .brand-icon--<marque> (couleur).
   Remplace les styles inline hardcodés dans les vues PHP.
   ============================================================================ */
.brand-icon {
    width: var(--space-8);
    height: var(--space-8);
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.brand-icon svg {
    width: 60%;
    height: 60%;
}

.brand-icon--whatsapp {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.15), rgba(18, 140, 126, 0.15));
    color: #25D366;
}
.brand-icon--linkedin {
    background: linear-gradient(135deg, rgba(10, 102, 194, 0.15), rgba(0, 65, 130, 0.15));
    color: #0A66C2;
}
.brand-icon--outlook {
    background: linear-gradient(135deg, rgba(0, 120, 212, 0.15), rgba(0, 90, 158, 0.15));
    color: #0078D4;
}
.brand-icon--google {
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.15), rgba(15, 157, 88, 0.15));
    color: #4285F4;
}