/* ═══════════════════════════════════════════════════════════════
   🏛 INSTITUTIONAL TRACKER — CSS ULTRA-MINIMALISTE & PRO (v3)
   ═══════════════════════════════════════════════════════════════
   ✅ Dark/Light 100% cohérent (même sur styles inline du JS)
   ✅ Modaux unifiés avec le design flat
   ✅ Cards simples, sans trait coloré à gauche
   ✅ Contour fin sur favoris
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   🎨 VARIABLES — PALETTE + ALIAS LEGACY (compat JS inline styles)
   ═══════════════════════════════════════════════════════════════ */
   :root {
    --accent:        #5b6bff;
    --accent-dim:    rgba(91, 107, 255, 0.1);
    --accent-dim-2:  rgba(91, 107, 255, 0.18);

    --success:       #16a34a;
    --success-dim:   rgba(22, 163, 74, 0.1);
    --danger:        #dc2626;
    --danger-dim:    rgba(220, 38, 38, 0.1);
    --warning:       #d97706;
    --warning-dim:   rgba(217, 119, 6, 0.1);

    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  14px;

    --transition: all 0.15s ease;

    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* ── ALIAS LEGACY : rendent tous les inline styles JS adaptatifs ── */
    --border-radius-sm: var(--radius-sm);
    --border-radius-md: var(--radius-md);
    --border-radius-lg: var(--radius-lg);
    --border-radius-xl: var(--radius-lg);
    --spacing-xs: var(--space-xs);
    --spacing-sm: var(--space-sm);
    --spacing-md: var(--space-md);
    --spacing-lg: var(--space-lg);
    --spacing-xl: var(--space-xl);
    --transition-smooth: var(--transition);
    --transition-fast: var(--transition);
}

/* ── DARK MODE (défaut) ─────────────────────────────────────── */
body.avd-page:not(.light-mode),
body.dark-mode:not(.light-mode) {
    --surface:        #14161c;
    --surface-2:      #191c23;
    --border-color:   rgba(255, 255, 255, 0.08);
    --border-color-2: rgba(255, 255, 255, 0.14);
    --text-primary:   #e8eaed;
    --text-secondary: #9aa0ac;
    --text-tertiary:  #6b7280;
    --hover-bg:       rgba(255, 255, 255, 0.03);

    /* Alias legacy */
    --glass-bg:      var(--surface);
    --glass-border:  var(--border-color);
    --glass-shadow:  none;
}

/* ── LIGHT MODE ─────────────────────────────────────────────── */
body.light-mode {
    --surface:        #ffffff;
    --surface-2:      #fafafa;
    --border-color:   rgba(0, 0, 0, 0.08);
    --border-color-2: rgba(0, 0, 0, 0.13);
    --text-primary:   #16181d;
    --text-secondary: #6b7280;
    --text-tertiary:  #9ca3af;
    --hover-bg:       rgba(0, 0, 0, 0.02);

    /* Alias legacy */
    --glass-bg:      var(--surface);
    --glass-border:  var(--border-color);
    --glass-shadow:  none;
}

/* ═══════════════════════════════════════════════════════════════
   📐 CONTENT AREA
   ═══════════════════════════════════════════════════════════════ */
#avDriveContent {
    padding: 20px 24px;
    background: var(--surface-2);
}

/* ═══════════════════════════════════════════════════════════════
   📊 SECTIONS
   ═══════════════════════════════════════════════════════════════ */
.section {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.section-title.gradient-title {
    color: var(--text-primary);
    background: none;
    -webkit-text-fill-color: initial;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: var(--space-lg);
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.01em;
}

.section-title.gradient-title i {
    color: var(--accent);
    background: var(--accent-dim);
    -webkit-text-fill-color: initial;
    font-size: 0.95rem;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════════════════════════
   🔍 SEARCH / INPUTS
   ═══════════════════════════════════════════════════════════════ */
.loader-input,
#institutionSearch,
#positionsSearchInput {
    width: 100%;
    padding: 10px 14px;
    background: var(--surface-2) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary) !important;
    transition: var(--transition);
    outline: none;
    font-family: 'Inter', -apple-system, sans-serif;
    box-sizing: border-box;
}

.loader-input:focus,
#institutionSearch:focus,
#positionsSearchInput:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-dim);
    background: var(--surface) !important;
}

.loader-input::placeholder,
#institutionSearch::placeholder,
#positionsSearchInput::placeholder {
    color: var(--text-tertiary);
}

/* ═══════════════════════════════════════════════════════════════
   🏢 INSTITUTIONS GRID
   ═══════════════════════════════════════════════════════════════ */
.institutions-grid,
#favoriteInstitutionsGrid,
.alerts-grid,
.pattern-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

/* ═══════════════════════════════════════════════════════════════
   📇 INSTITUTION CARD
   ═══════════════════════════════════════════════════════════════ */
.institution-card {
    background: var(--surface) !important;
    border-radius: var(--radius-md);
    padding: var(--space-md);
    border: 1px solid var(--border-color) !important;
    transition: var(--transition);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 250px;
}

.institution-card:hover {
    border-color: var(--border-color-2) !important;
    background: var(--hover-bg) !important;
}

.institution-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    position: relative;
}

.institution-logo,
.stock-logo-mini,
.modal-company-logo {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--surface-2) !important;
    border: 1px solid var(--border-color) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.modal-company-logo {
    width: 120px !important;
    height: 120px !important;
    border-radius: var(--radius-lg) !important;
}

.institution-logo img,
.stock-logo-mini img,
.modal-company-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.institution-logo .text-fallback {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent);
}

.institution-info { flex: 1; min-width: 0; }

.institution-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 3px 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.institution-cik {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-weight: 600;
    font-family: 'SF Mono', 'Consolas', monospace;
    display: inline-block;
}

.institution-description {
    font-size: 0.83rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: var(--space-sm);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.institution-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 6px;
    margin-bottom: var(--space-sm);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-2) !important;
    border: 1px solid var(--border-color) !important;
    padding: 5px 9px;
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    color: var(--text-secondary) !important;
}

.meta-item i { font-size: 0.68rem; opacity: 0.7; color: var(--accent) !important; }

.institution-view-btn {
    width: 100%;
    padding: 9px 16px;
    background: var(--accent) !important;
    color: white !important;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    min-height: 38px;
    font-family: 'Inter', -apple-system, sans-serif;
}

.institution-view-btn:hover { background: #4856e0 !important; }
.institution-view-btn:active { transform: scale(0.98); }

/* ═══════════════════════════════════════════════════════════════
   ⭐ FAVORIS — CONTOUR FIN + THEME ADAPTATIF
   ═══════════════════════════════════════════════════════════════ */
#favoriteInstitutionsGrid > div {
    position: relative !important;
    background: var(--surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    transition: var(--transition) !important;
}

#favoriteInstitutionsGrid > div:hover {
    border-color: var(--border-color-2) !important;
    background: var(--hover-bg) !important;
    transform: none !important;
    box-shadow: none !important;
}

#favoriteInstitutionsGrid button[onclick*="removeFromFavoriteList"] {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    background: var(--surface) !important;
    color: var(--danger) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: var(--transition) !important;
    padding: 0 !important;
    font-size: 0.78rem !important;
    z-index: 20 !important;
}

#favoriteInstitutionsGrid button[onclick*="removeFromFavoriteList"]:hover {
    background: var(--danger-dim) !important;
    border-color: var(--danger) !important;
}

.favorite-institution-cik,
.favorite-institution-headquarters {
    color: var(--text-secondary) !important;
}

.section > div:has(#favoriteListSelector) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
}

#favoriteListSelector {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 10px 14px !important;
    background: var(--surface-2) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    color: var(--text-primary) !important;
    cursor: pointer !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    outline: none !important;
}

button[onclick*="openManageListsModal"] {
    flex: 0 0 auto !important;
    padding: 10px 18px !important;
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    min-height: 40px !important;
    box-shadow: none !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
}

button[onclick*="openManageListsModal"]:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    transform: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   📈 SCORE CARDS — SIMPLES, SANS ACCENT COLORÉ
   ═══════════════════════════════════════════════════════════════ */
.score-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
    margin-top: var(--space-md);
}

.score-card {
    background: var(--surface) !important;
    padding: 18px !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: var(--transition);
}

.score-card:hover { border-color: var(--border-color-2) !important; transform: none !important; }

.score-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: var(--radius-sm) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem !important;
    color: white !important;
    flex-shrink: 0;
    background: var(--accent) !important;
    box-shadow: none !important;
}

.score-card:hover .score-icon { transform: none !important; }

.score-content { flex: 1; min-width: 0; }

.score-label {
    font-size: 0.72rem;
    color: var(--text-tertiary) !important;
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.score-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary) !important;
    line-height: 1.1;
    margin-bottom: 2px;
    letter-spacing: -0.02em;
    background: none !important;
    -webkit-text-fill-color: initial !important;
}

.score-sublabel { font-size: 0.78rem; color: var(--text-secondary) !important; font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════
   🤖 ALPHY AI PANEL
   ═══════════════════════════════════════════════════════════════ */
.alphy-panel {
    background: var(--surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.alphy-simple-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md);
    padding: var(--space-lg);
}

.alphy-summary {
    grid-column: 1 / -1;
    padding: var(--space-lg) !important;
    background: var(--surface-2) !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-color) !important;
    border-left: 1px solid var(--border-color) !important;
}

.alphy-action-row { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-sm); }

.alphy-action-icon-small {
    width: 44px !important;
    height: 44px !important;
    border-radius: var(--radius-sm) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem !important;
    color: white !important;
    font-weight: 700;
    flex-shrink: 0;
}

.alphy-action-text {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: initial !important;
    background: none !important;
}

.alphy-score-text { font-size: 0.9rem; color: var(--text-secondary) !important; font-weight: 600; }
.ai-text { font-size: 0.9rem; color: var(--text-secondary) !important; line-height: 1.7; }

.alphy-section {
    background: var(--surface-2) !important;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color) !important;
}

.alphy-metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }

.alphy-metric-compact {
    background: var(--surface) !important;
    padding: 10px 12px !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-color) !important;
    border-left: 1px solid var(--border-color) !important;
}

.metric-label { font-size: 0.7rem; color: var(--text-tertiary) !important; font-weight: 700; margin-bottom: 3px; text-transform: uppercase; }
.metric-value { font-size: 1rem; font-weight: 800; color: var(--text-primary) !important; }

.insight-list, .action-list, .risk-list { display: flex; flex-direction: column; gap: 8px; }

.insight-item, .action-item, .risk-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px !important;
    background: var(--surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    transition: var(--transition);
}

.insight-item i, .action-item i, .risk-item i { font-size: 0.85rem; margin-top: 2px; color: var(--accent) !important; }
.insight-item:hover, .action-item:hover, .risk-item:hover { border-color: var(--border-color-2) !important; background: var(--hover-bg) !important; transform: none !important; }

/* ═══════════════════════════════════════════════════════════════
   ⚠ ALERTS & PATTERNS — SANS TRAIT COLORÉ
   ═══════════════════════════════════════════════════════════════ */
.alert, .pattern-card {
    background: var(--surface) !important;
    padding: var(--space-md) !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-color) !important;
    border-left: 1px solid var(--border-color) !important;
    box-shadow: none !important;
    transition: var(--transition);
    max-width: 100%;
    overflow: hidden;
}

.alert:hover, .pattern-card:hover { border-color: var(--border-color-2) !important; transform: none !important; }

/* Neutraliser les icônes de sévérité en fond flat accent */
.alert div[style*="border-radius: 12px"][style*="display: flex"],
.pattern-card div[style*="border-radius: 12px"][style*="display: flex"] {
    background: var(--accent) !important;
}

/* ═══════════════════════════════════════════════════════════════
   📊 RISK METRICS
   ═══════════════════════════════════════════════════════════════ */
.risk-metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: var(--space-md); }

.risk-metric-card {
    background: var(--surface) !important;
    padding: 16px !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: var(--transition);
}

.risk-metric-card:hover { border-color: var(--border-color-2) !important; transform: none !important; }

.risk-metric-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: var(--radius-sm) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem !important;
    color: white !important;
    flex-shrink: 0;
    background: var(--accent) !important;
}

.risk-metric-content { flex: 1; min-width: 0; }
.risk-metric-label { font-size: 0.7rem; color: var(--text-tertiary) !important; font-weight: 700; margin-bottom: 3px; text-transform: uppercase; }
.risk-metric-value { font-size: 1.25rem; font-weight: 800; color: var(--text-primary) !important; line-height: 1.1; }
.risk-metric-sublabel { font-size: 0.78rem; color: var(--text-secondary) !important; font-weight: 500; margin-top: 3px; }

/* ═══════════════════════════════════════════════════════════════
   📋 TABLES — FLAT HEADER + THEME ADAPTATIF
   ═══════════════════════════════════════════════════════════════ */
.table-container {
    overflow-x: auto;
    margin-top: var(--space-sm);
    border-radius: var(--radius-md);
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-color);
}

.table-container table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface) !important; }

.table-container thead tr,
.table-container thead {
    background: var(--surface-2) !important;
}

.table-container th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 700;
    color: var(--text-secondary) !important;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--surface-2) !important;
    border-bottom: 1px solid var(--border-color);
}

.table-container td { padding: 12px 16px; color: var(--text-primary) !important; font-size: 0.87rem; border-bottom: 1px solid var(--border-color); background: transparent !important; }

.table-container tbody tr { transition: var(--transition); background: transparent !important; }
.table-container tbody tr:hover { background: var(--hover-bg) !important; }
.table-container tbody tr:last-child td { border-bottom: none; }

.pattern-badge { display: inline-block; padding: 4px 10px; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.72rem; }

.stock-logo-mini {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-2) !important;
    border: 1px solid var(--border-color) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   🏆 TOP GAINERS / LOSERS
   ═══════════════════════════════════════════════════════════════ */
.section > div[style*="grid-template-columns: 1fr 1fr"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.section > div[style*="grid-template-columns: 1fr 1fr"] > div {
    background: var(--surface) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}

/* Lignes gainers/losers : suppression accent gauche */
[style*="border-left: 4px solid #10b981"],
[style*="border-left: 4px solid #ef4444"] {
    border-left: 1px solid var(--border-color) !important;
    background: var(--surface-2) !important;
}

/* ═══════════════════════════════════════════════════════════════
   🎯 MODALS — STYLE UNIFIÉ FLAT
   ═══════════════════════════════════════════════════════════════ */
.modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
    animation: fadeIn 0.15s ease;
}

.modal.active { display: flex; align-items: center; justify-content: center; }

.modal-content {
    background: var(--surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-lg) !important;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: none !important;
    animation: slideUp 0.2s ease;
    margin: auto;
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    background: var(--surface-2) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm);
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    z-index: 10;
    min-width: 32px;
    min-height: 32px;
}

.modal-close:hover { background: var(--danger-dim) !important; color: var(--danger) !important; border-color: var(--danger) !important; transform: none !important; }

/* ── Bannière header du modal institution (flatten gradient → accent uni) ── */
#institutionInfoContent > div:first-child,
[style*="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"][style*="padding: 40px"] {
    background: var(--accent) !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

/* Masquer les rayures décoratives du header modal */
[style*="repeating-linear-gradient"] { display: none !important; }

/* Badges/CIK dans le header restent lisibles (fond semi-transparent blanc sur accent uni) */
#institutionInfoContent span[style*="rgba(255, 255, 255, 0.25)"],
#institutionInfoContent div[style*="rgba(255, 255, 255, 0.2)"] {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Toutes les box "info" à l'intérieur des modaux (rgba colorée + border-left coloré) → flat */
.modal-content div[style*="border-left: 3px solid #"],
.modal-content div[style*="border-left: 4px solid #"] {
    background: var(--surface-2) !important;
    border-left: 1px solid var(--border-color) !important;
    border: 1px solid var(--border-color) !important;
}

/* Liens / CTA dans les modaux : neutraliser fonds colorés de liens secondaires */
.modal-content a[style*="background: linear-gradient(135deg, #6c757d"] {
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

/* Texte gris clair codé en dur dans les modaux */
.modal-content [style*="color: #64748b"] { color: var(--text-secondary) !important; }
.modal-content hr { border-color: var(--border-color) !important; }

/* ═══════════════════════════════════════════════════════════════
   📄 PAGINATION
   ═══════════════════════════════════════════════════════════════ */
#paginationContainer { margin-top: var(--space-lg); }

#paginationContainer button {
    padding: 8px 16px;
    background: var(--surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-primary) !important;
    min-height: 38px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 0.85rem;
}

#paginationContainer button:hover:not(:disabled) { border-color: var(--accent) !important; color: var(--accent) !important; }
#paginationContainer button:disabled { opacity: 0.35; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════
   ⏳ LOADING
   ═══════════════════════════════════════════════════════════════ */
.loading {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: transparent !important;
    backdrop-filter: none !important;
    z-index: 99999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    pointer-events: none !important;
    animation: fadeIn 0.15s ease;
}

.loading.hidden { display: none; }

.spinner { position: relative; width: 34px !important; height: 34px !important; background: transparent !important; }
.spinner::before {
    content: '' !important;
    position: absolute !important; top: 0; left: 0;
    width: 100% !important; height: 100% !important;
    border-radius: 50% !important;
    border: 2.5px solid transparent !important;
    border-top-color: var(--accent) !important;
    border-right-color: var(--accent) !important;
    opacity: 0.6;
    animation: spinLoader 0.6s linear infinite !important;
}
.spinner::after { content: none !important; display: none !important; }
.spinner i {
    position: absolute !important; top: 50%; left: 50%;
    transform: translate(-50%, -50%) !important;
    font-size: 0.95rem !important;
    color: var(--accent) !important;
    -webkit-text-fill-color: var(--accent) !important;
    background: none !important;
}

.loading p {
    margin-top: 16px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    background: none !important;
    text-align: center !important;
    padding: 0 20px !important;
}

.chart-loading-spinner {
    width: 34px !important; height: 34px !important;
    border: 2.5px solid transparent !important;
    border-top-color: var(--accent) !important;
    border-right-color: var(--accent) !important;
    border-radius: 50% !important;
    animation: spinLoader 0.6s linear infinite !important;
    margin: 0 auto !important;
    opacity: 0.7;
}

.chart-loading-text { font-size: 0.85rem !important; font-weight: 600 !important; color: var(--text-secondary) !important; text-align: center !important; margin-top: 10px !important; }

/* ═══════════════════════════════════════════════════════════════
   🌐 NETWORK GRAPH
   ═══════════════════════════════════════════════════════════════ */
.network-graph-container { position: relative; background: var(--surface-2); border-radius: var(--radius-md); padding: var(--space-md); overflow: hidden; border: 1px solid var(--border-color); }
#networkGraphSvg { width: 100%; height: 600px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border-color); }
.network-controls { position: absolute; top: var(--space-md); right: var(--space-md); z-index: 10; }
.network-control-btn { padding: 8px 14px; background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; transition: var(--transition); color: var(--text-primary); min-height: 36px; font-family: 'Inter', -apple-system, sans-serif; font-size: 0.82rem; }
.network-control-btn:hover { border-color: var(--accent); color: var(--accent); }
.network-tooltip { position: absolute; display: none; background: var(--surface); color: var(--text-primary); padding: 10px 14px; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 500; pointer-events: none; z-index: 100; border: 1px solid var(--border-color); max-width: 240px; }
.network-link { stroke: var(--border-color-2); stroke-width: 1px; }
.network-node circle { stroke: var(--surface); stroke-width: 2px; cursor: pointer; transition: var(--transition); }
.network-node:hover circle { stroke-width: 3px; stroke: var(--accent); }
.network-label { font-size: 10px; font-weight: 600; fill: var(--text-secondary); text-anchor: middle; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════════
   🔥 WATERFALL LEGEND
   ═══════════════════════════════════════════════════════════════ */
.waterfall-legend { display: flex; align-items: center; justify-content: center; gap: var(--space-md); margin-top: var(--space-sm); flex-wrap: wrap; }
.waterfall-legend-item { display: flex; align-items: center; gap: 6px; }
.waterfall-legend-color { width: 12px; height: 12px; border-radius: 3px; }
.waterfall-legend-label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════════
   🎨 FACTOR EXPOSURE
   ═══════════════════════════════════════════════════════════════ */
.factor-radar-container { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-md); align-items: start; }
.factor-legend { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; gap: 8px !important; }
.factor-legend-item { display: flex; align-items: center; gap: 8px; padding: 9px 10px; background: var(--surface-2); border-radius: var(--radius-sm); border: 1px solid var(--border-color); }
.factor-color-box { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.factor-legend-label { flex: 1; font-weight: 600; color: var(--text-primary); font-size: 0.82rem; }
.factor-legend-value { font-weight: 800; color: var(--text-primary); font-size: 0.9rem; }

/* ═══════════════════════════════════════════════════════════════
   🗓 QUARTERS SELECTOR
   ═══════════════════════════════════════════════════════════════ */
.quarters-selector-btn { padding: 8px 16px; background: var(--surface); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-weight: 600; font-size: 0.82rem; cursor: pointer; transition: var(--transition); font-family: 'Inter', -apple-system, sans-serif; }
.quarters-selector-btn.active { background: var(--accent) !important; color: white !important; border-color: var(--accent) !important; }
.quarters-selector-btn:hover:not(.active) { border-color: var(--accent); color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════
   🚫 SUPPRESSION PASTILLES ENRICHISSEMENT
   ═══════════════════════════════════════════════════════════════ */
.institution-card div[style*="position: absolute"][style*="background: linear-gradient(135deg, #10b981"],
div[style*="background: linear-gradient(135deg, #10b981"][style*="border-radius: 50%"],
div[style*="background: linear-gradient(135deg, #10b981"][style*="width: 28px"],
div[style*="background: linear-gradient(135deg, #10b981"][style*="width: 32px"],
span#enrichedCount, #enrichedCount,
[title*="Enhanced with Google Knowledge Graph"],
[title*="Enhanced Data"],
.badge-enriched, .enrichment-badge, .enriched-indicator {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   🩹 PATCH GLOBAL — NEUTRALISATION DES STYLES INLINE HÉRITÉS
   (couvre tout ce qui n'est pas capturé par les classes ci-dessus)
   ═══════════════════════════════════════════════════════════════ */

/* Fonds blancs codés en dur dans le JS (cards charts, tables, panels) */
.section [style*="background: white"] {
    background: var(--surface) !important;
    border: 1px solid var(--border-color) !important;
}

/* Toute box avec un trait de couleur à gauche → contour fin uniforme */
[style*="border-left: 3px solid #"],
[style*="border-left: 4px solid #"] {
    border-left: 1px solid var(--border-color) !important;
    background: var(--surface-2) !important;
}

/* En-têtes de tableau en gradient coloré → flat neutre */
[style*="background: linear-gradient(135deg, #667eea, #764ba2)"] {
    background: var(--surface-2) !important;
}
.table-container th[style*="color: white"] {
    color: var(--text-secondary) !important;
}

/* Textes gris clairs codés en dur (var(--text-tertiary) déjà ok, mais hex directs) */
[style*="color: #64748b"] { color: var(--text-secondary) !important; }
[style*="color: #6c757d"] { color: var(--text-tertiary) !important; }

/* Menu utilisateur header (fond sombre fixe) → adaptatif */
#avdHeaderUserMenu {
    background: var(--surface) !important;
    border-color: var(--border-color) !important;
}
#avdHeaderUserMenu hr { border-top-color: var(--border-color) !important; }

/* ═══════════════════════════════════════════════════════════════
   🎨 ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spinLoader { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════
   🖱 ACCESSIBILITY & TOUCH
   ═══════════════════════════════════════════════════════════════ */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
* { -webkit-tap-highlight-color: transparent; }

/* ═══════════════════════════════════════════════════════════════
   ██████████████████████████████████████████████████████████████
   📱 RESPONSIVE MOBILE
   ██████████████████████████████████████████████████████████████
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    #avDriveContent { padding: 12px 10px; }
    .section { padding: var(--space-md); border-radius: var(--radius-md); }
    .section-title.gradient-title { font-size: 1rem; }

    .institutions-grid, .alerts-grid, .pattern-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .institution-card { padding: 8px; min-height: 170px; border-radius: var(--radius-sm); }
    .institution-logo { width: 34px !important; height: 34px !important; }
    .institution-name { font-size: 0.78rem; }
    .institution-cik { display: none !important; }
    .institution-description { font-size: 0.72rem; -webkit-line-clamp: 2; margin-bottom: 8px; }
    .institution-meta { gap: 4px; margin-bottom: 8px; }
    .meta-item { padding: 3px 5px; font-size: 0.62rem; }
    .institution-view-btn { padding: 6px 10px; font-size: 0.68rem; gap: 4px; min-height: 34px; }

    #favoriteInstitutionsGrid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    #favoriteInstitutionsGrid button[onclick*="removeFromFavoriteList"] { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; top: 4px !important; right: 4px !important; font-size: 0.7rem !important; }
    #favoriteInstitutionsGrid button[onclick*="removeFromFavoriteList"] span { display: none !important; }

    .section > div:has(#favoriteListSelector) { gap: 8px !important; }
    #favoriteListSelector { flex: 1 1 auto !important; padding: 9px 10px !important; font-size: 0.82rem !important; }
    button[onclick*="openManageListsModal"] { width: 40px !important; min-width: 40px !important; padding: 9px !important; gap: 0 !important; }
    button[onclick*="openManageListsModal"] span { display: none !important; }
    button[onclick*="openManageListsModal"] i { font-size: 1rem !important; margin: 0 !important; }

    .score-container { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .score-card { padding: 12px !important; flex-direction: column !important; text-align: center !important; gap: 8px !important; }
    .score-icon { width: 36px !important; height: 36px !important; font-size: 1rem !important; margin: 0 auto !important; }
    .score-value { font-size: 1.2rem !important; }
    .score-label, .score-sublabel { font-size: 0.68rem !important; }

    .risk-metrics-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .risk-metric-card { padding: 12px !important; flex-direction: column !important; text-align: center !important; gap: 8px !important; }
    .risk-metric-icon { width: 34px !important; height: 34px !important; font-size: 0.95rem !important; margin: 0 auto !important; }
    .risk-metric-value { font-size: 1.05rem !important; }
    .risk-metric-label, .risk-metric-sublabel { font-size: 0.68rem !important; }

    .alphy-simple-grid { grid-template-columns: 1fr; gap: 10px; padding: 14px; }
    .alphy-metrics-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .metric-label { font-size: 0.68rem; }
    .metric-value { font-size: 0.9rem; }
    .alphy-action-text { font-size: 1.15rem !important; }

    .alert, .pattern-card { padding: 12px !important; border-radius: var(--radius-sm) !important; }

    .table-container th, .table-container td { padding: 9px 10px; font-size: 0.8rem; }
    .stock-logo-mini { width: 30px; height: 30px; }

    .section > div[style*="grid-template-columns: 1fr 1fr"] { display: flex !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x mandatory !important; gap: 12px !important; padding-bottom: 10px !important; }
    .section > div[style*="grid-template-columns: 1fr 1fr"] > div { min-width: 90% !important; flex-shrink: 0 !important; scroll-snap-align: start !important; padding: 14px !important; border-radius: var(--radius-sm) !important; }

    .modal { padding: 10px; align-items: flex-start; }
    .modal-content { max-width: 100%; max-height: calc(100vh - 20px); padding: 16px !important; margin-top: 10px; border-radius: var(--radius-md) !important; }
    .modal-close { top: 10px; right: 10px; width: 32px; height: 32px; }

    button[onclick*="createNewList"] span { display: none !important; }
    button[onclick*="createNewList"] { padding: 9px !important; min-width: 40px !important; }
    #manageListsContent > div > div > div { flex-direction: column !important; align-items: flex-start !important; }
    .manage-list-action-btn { font-size: 0.76rem !important; padding: 6px 10px !important; }

    #networkGraphSvg { height: 380px; }
    .network-controls { top: var(--space-sm); right: var(--space-sm); }
    .network-control-btn { padding: 7px 10px; font-size: 0.78rem; }

    .factor-radar-container { grid-template-columns: 1fr !important; }
    .factor-legend { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .factor-legend-item { padding: 8px !important; flex-direction: column !important; text-align: center !important; align-items: center !important; }
    .factor-color-box { margin: 0 auto !important; width: 16px !important; height: 16px !important; }
    .factor-legend-label { font-size: 0.74rem !important; text-align: center !important; }
    .factor-legend-value { font-size: 0.95rem !important; }

    .section [style*="display: flex; gap: 10px"] { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .quarters-selector-btn { width: 100%; padding: 8px 12px; font-size: 0.78rem; }
    .section [style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"] { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

    #paginationContainer button { padding: 7px 14px; font-size: 0.8rem; }
    .loader-input, #institutionSearch, #positionsSearchInput { padding: 10px 14px; font-size: 0.88rem; }
}

/* ═══════════════════════════════════════════════════════════════
   📱 TRÈS PETIT MOBILE (≤ 480px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    #avDriveContent { padding: 8px 6px; }
    .section { padding: var(--space-sm); border-radius: var(--radius-sm); }
    .section-title.gradient-title { font-size: 0.92rem; }
    .institution-card { padding: 6px; min-height: 160px; }
    .institution-logo { width: 30px !important; height: 30px !important; }
    .institution-name { font-size: 0.72rem; }
    .institution-view-btn { padding: 5px 8px; font-size: 0.63rem; min-height: 30px; }
    #favoriteInstitutionsGrid button[onclick*="removeFromFavoriteList"] { width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; top: 3px !important; right: 3px !important; font-size: 0.65rem !important; }
    .score-card { padding: 10px !important; gap: 6px !important; }
    .score-icon { width: 32px !important; height: 32px !important; font-size: 0.9rem !important; }
    .score-value { font-size: 1.05rem !important; }
    .score-label, .score-sublabel { font-size: 0.64rem !important; }
    .risk-metric-card { padding: 10px !important; gap: 6px !important; }
    .risk-metric-icon { width: 30px !important; height: 30px !important; font-size: 0.85rem !important; }
    .risk-metric-value { font-size: 0.95rem !important; }
    .risk-metric-label, .risk-metric-sublabel { font-size: 0.64rem !important; }
    .table-container th, .table-container td { padding: 7px 8px; font-size: 0.76rem; }
    .stock-logo-mini { width: 28px; height: 28px; }
    .section > div[style*="grid-template-columns: 1fr 1fr"] > div { min-width: 95% !important; }
    #networkGraphSvg { height: 280px; }
    .factor-legend { gap: 6px !important; }
    .factor-legend-item { padding: 6px !important; gap: 5px !important; }
    .factor-color-box { width: 14px !important; height: 14px !important; }
    .factor-legend-label { font-size: 0.7rem !important; }
    .factor-legend-value { font-size: 0.85rem !important; }
    .section > div:has(#favoriteListSelector) { gap: 6px !important; }
    #favoriteListSelector { padding: 8px 9px !important; font-size: 0.78rem !important; }
    button[onclick*="openManageListsModal"] { width: 38px !important; min-width: 38px !important; padding: 7px !important; }
    .modal-content { padding: 12px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   📐 PRINT
   ═══════════════════════════════════════════════════════════════ */
@media print {
    #avdSidebar, #avDriveHeader, .modal, .loading, .network-controls, #paginationContainer { display: none !important; }
    #avdMain { margin-left: 0 !important; }
    .section { page-break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════════
   🩹 PATCH v4 — Corrections précises
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   🐛 FIX CRITIQUE : boutons liens + ranking Top 20 invisibles
   en light mode (le patch v3 flattait TOUS les éléments avec ce
   gradient, y compris les badges de rang et boutons SEC.gov qui
   ont du texte blanc → invisible sur fond clair)
   ─────────────────────────────────────────────────────────────── */

/* ❌ SUPPRIME l'ancienne règle trop large (si encore présente, à retirer) :
   [style*="background: linear-gradient(135deg, #667eea, #764ba2)"] { background: var(--surface-2) !important; }
*/

/* ✅ Remplacée par une règle SCOPÉE uniquement aux en-têtes de tableau */
.table-container thead tr[style*="linear-gradient"] {
    background: var(--surface-2) !important;
}
.table-container thead tr[style*="linear-gradient"] th {
    background: transparent !important;
    color: var(--text-secondary) !important;
}

/* Les badges de rang (#1, #2...) et boutons liens gardent leur couleur
   d'origine (gradient + texte blanc) → toujours visibles quel que soit le thème */

/* ═══════════════════════════════════════════════════════════════
   🎯 MODALS — ENCORE PLUS DISCRET (suppression totale du bleu)
   ═══════════════════════════════════════════════════════════════ */

/* Toutes les bannières de header de modal (institution info, manage lists,
   favorites) qui utilisent le pattern "margin: -24px -24px" pour sortir
   du padding → flatten complet, plus de fond bleu/gradient */
[style*="margin: -24px -24px"] {
    background: var(--surface-2) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}

/* Texte à l'intérieur de ces headers : plus de blanc forcé */
[style*="margin: -24px -24px"] h2,
[style*="margin: -24px -24px"] h3 {
    color: var(--text-primary) !important;
    text-shadow: none !important;
    -webkit-text-fill-color: initial !important;
    background: none !important;
}

[style*="margin: -24px -24px"] p {
    color: var(--text-secondary) !important;
}

/* Badges semi-transparents blancs dans les headers (CIK, Enhanced Data...) */
[style*="margin: -24px -24px"] span[style*="rgba(255, 255, 255"],
[style*="margin: -24px -24px"] div[style*="rgba(255, 255, 255"] {
    background: var(--surface) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
    box-shadow: none !important;
}

/* Logo container dans le header (fond blanc dur) → adaptatif */
[style*="margin: -24px -24px"] .modal-company-logo {
    background: var(--surface) !important;
    border: 1px solid var(--border-color) !important;
}

/* Icône check verte de succès → garder colorée mais neutraliser le shadow bleu */
[style*="margin: -24px -24px"] [style*="box-shadow"] {
    box-shadow: none !important;
}

/* Titre section dans le modal (h4 avec icône colorée) → icône discrète */
.modal-content h4 i {
    color: var(--accent) !important;
}

/* ═══════════════════════════════════════════════════════════════
   📱 RESPONSIVE — Cards Institutions Lists & Favoris (mobile)
   ═══════════════════════════════════════════════════════════════ */

/* Forcer la taille du logo partout (même quand du inline 60px override) */
.institution-logo,
.stock-logo-mini {
    width: 44px !important;
    height: 44px !important;
}
.modal-company-logo {
    width: 120px !important;
    height: 120px !important;
}

@media (max-width: 768px) {

    /* Cards favoris : réduire drastiquement padding/gap/tailles */
    #favoriteInstitutionsGrid > div {
        padding: 10px !important;
        gap: 8px !important;
        flex-wrap: wrap;
    }

    #favoriteInstitutionsGrid .institution-logo {
        width: 34px !important;
        height: 34px !important;
        flex-shrink: 0;
    }

    /* Nom / CIK / headquarters dans les cards favoris */
    #favoriteInstitutionsGrid > div div[style*="font-weight: 800"] {
        font-size: 0.78rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .favorite-institution-cik {
        font-size: 0.7rem !important;
    }

    .favorite-institution-headquarters {
        font-size: 0.68rem !important;
    }

    /* Badge "enriched" dans favoris : réduire */
    #favoriteInstitutionsGrid > div div[style*="border-radius: 50%"] {
        width: 22px !important;
        height: 22px !important;
        font-size: 0.65rem !important;
    }

    /* Bouton remove toujours accessible */
    #favoriteInstitutionsGrid button[onclick*="removeFromFavoriteList"] {
        opacity: 1 !important;
    }
}

@media (max-width: 480px) {
    #favoriteInstitutionsGrid {
        grid-template-columns: 1fr !important;
    }

    #favoriteInstitutionsGrid > div {
        flex-direction: row !important;
        padding: 10px !important;
    }

    #favoriteInstitutionsGrid .institution-logo {
        width: 32px !important;
        height: 32px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   👤 AVATAR HEADER — Masquer le status dot
   ═══════════════════════════════════════════════════════════════ */
#avdStatusDot {
    display: none !important;
}

/* Si le conteneur parent ne contient plus que ce dot, on le masque aussi */
#avDriveHeader div:has(> #avdStatusDot) {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   🩹 PATCH v5 — CORRECTIONS DÉFINITIVES
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   🐛 FIX : pastille fantôme blanche sous la barre de recherche
   (le badge "enriched" était caché mais son conteneur restait visible)
   ─────────────────────────────────────────────────────────────── */
   div:has(> #enrichedCount) {
        display: none !important;
    }
   
   /* ═══════════════════════════════════════════════════════════════
      📱 CARDS "OTHER INSTITUTIONS" — RESPONSIVE DÉFINITIF
      ═══════════════════════════════════════════════════════════════ */
   @media (max-width: 640px) {
   
       /* 1 seule colonne dès 640px : plus lisible qu'un grid 2 colonnes serré */
       .institutions-grid {
           grid-template-columns: 1fr !important;
           gap: 10px !important;
       }
   
       .institution-card {
           min-height: auto !important;
           padding: 14px !important;
           flex-direction: row !important;
           flex-wrap: wrap !important;
       }
   
       /* Header logo + nom + CIK en ligne, pleine largeur */
       .institution-card .institution-header {
           width: 100%;
           margin-bottom: 10px !important;
       }
   
       .institution-card .institution-logo {
           width: 40px !important;
           height: 40px !important;
       }
   
       .institution-card .institution-name {
           font-size: 0.88rem !important;
           white-space: normal !important;
       }
   
       .institution-card .institution-cik {
           display: inline-block !important;
           font-size: 0.7rem !important;
       }
   
       .institution-card .institution-description {
           display: none !important; /* trop de bruit visuel en mobile */
       }
   
       .institution-card .institution-meta {
           display: none !important; /* idem, on garde la card légère */
       }
   
       /* Ligne d'action : favoris + view positions, alignés et propres */
       .institution-card > div[style*="display: flex; gap: 10px"] {
           width: 100%;
           gap: 8px !important;
       }
   
       .institution-card button[onclick*="openFavoritesModal"] {
           width: 40px !important;
           height: 40px !important;
           flex: 0 0 40px !important;
           border: 1px solid var(--border-color) !important;
           border-radius: var(--radius-sm) !important;
       }
   
       .institution-view-btn {
           flex: 1;
           min-height: 40px !important;
           font-size: 0.8rem !important;
       }
   }
   
   @media (max-width: 400px) {
       .institution-card { padding: 12px !important; }
       .institution-card .institution-logo { width: 36px !important; height: 36px !important; }
   }
   
   /* ═══════════════════════════════════════════════════════════════
      🎯 MODAL ENTREPRISE — REFONTE TOTALE MINIMALISTE
      ═══════════════════════════════════════════════════════════════ */
   
   /* Header : plus AUCUNE couleur de fond, juste une bordure de séparation */
   #institutionInfoContent > div:first-child {
       background: var(--surface) !important;
       border-bottom: 1px solid var(--border-color) !important;
       padding: 24px !important;
       margin: -24px -24px 24px -24px !important;
       border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
       box-shadow: none !important;
       text-align: center;
   }
   
   /* Neutralise TOUT le texte du header (fini le blanc sur blanc / bleu) */
   #institutionInfoContent > div:first-child * {
       color: var(--text-primary) !important;
       text-shadow: none !important;
       -webkit-text-fill-color: initial !important;
       background: none !important;
       box-shadow: none !important;
       animation: none !important;
   }
   
   /* Overlay décoratif (rayures) supprimé */
   #institutionInfoContent > div:first-child > div[style*="position: absolute"] {
       display: none !important;
   }
   
   /* Logo : cadre discret */
   #institutionInfoContent .modal-company-logo {
       background: var(--surface-2) !important;
       border: 1px solid var(--border-color) !important;
       width: 88px !important;
       height: 88px !important;
       margin: 0 auto 16px !important;
   }
   
   /* Nom de l'entreprise */
   #institutionInfoContent > div:first-child h2 {
       font-size: 1.4rem !important;
       font-weight: 700 !important;
       margin-bottom: 10px !important;
   }
   
   /* Badge CIK et Enhanced Data : petites pilules discrètes */
   #institutionInfoContent > div:first-child span,
   #institutionInfoContent > div:first-child > div > div {
       display: inline-flex !important;
       background: var(--surface-2) !important;
       border: 1px solid var(--border-color) !important;
       color: var(--text-secondary) !important;
       font-size: 0.75rem !important;
       font-weight: 600 !important;
       padding: 5px 12px !important;
       border-radius: 20px !important;
       margin: 3px !important;
   }
   
   /* Boutons "Links" (Website / SEC.gov / Wikipedia) : outline discret uniforme */
   .modal-content a[style*="padding: 12px 24px"] {
       background: var(--surface) !important;
       color: var(--text-primary) !important;
       border: 1px solid var(--border-color) !important;
       box-shadow: none !important;
       font-weight: 600 !important;
   }
   .modal-content a[style*="padding: 12px 24px"]:hover {
       border-color: var(--accent) !important;
       color: var(--accent) !important;
       background: var(--accent-dim) !important;
   }
   .modal-content a[style*="padding: 12px 24px"] i {
       color: var(--accent) !important;
   }
   
   /* CTA principal "Load Institutional Positions" : seul bouton plein (accent) */
   .modal-content button[onclick*="loadInstitutionPositions"] {
       background: var(--accent) !important;
       box-shadow: none !important;
       border: none !important;
   }
   .modal-content button[onclick*="loadInstitutionPositions"]:hover {
       background: #4856e0 !important;
   }
   
   /* Info grid (CIK/Type/HQ/etc.) déjà flat via patch v3, on renforce ici */
   .modal-content div[style*="border-left: 3px solid #"],
   .modal-content div[style*="border-left: 4px solid #"] {
       background: var(--surface-2) !important;
       border: 1px solid var(--border-color) !important;
       border-left: 1px solid var(--border-color) !important;
   }
   
   /* Titres de section (h4) sobres */
   .modal-content h4 {
       color: var(--text-primary) !important;
       font-size: 0.95rem !important;
       font-weight: 700 !important;
   }
   .modal-content h4 i {
       background: var(--accent-dim) !important;
       color: var(--accent) !important;
       width: 26px;
       height: 26px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       border-radius: var(--radius-sm);
       font-size: 0.8rem !important;
   }

   /* Fix rank badges Top 20 Holdings — netteté garantie */
    .table-container td div[style*="linear-gradient(135deg, #667eea, #764ba2)"] {
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        opacity: 1 !important;
        animation: none !important;
        color: white !important;
    }
   
   /* ═══════════════════════════════════════════════════════════════
      ⬅ BOUTON "BACK TO INSTITUTIONS LIST" — DANS LE HEADER
      ═══════════════════════════════════════════════════════════════ */
   #headerBackBtn {
       display: flex !important;
   }
   @media (max-width: 640px) {
       #headerBackBtn span { display: none !important; }
   }

   /* ═══════════════════════════════════════════════════════════════
   🤖 GEMINI AI — CHAT WIDGET & NARRATIVE (style unifié minimaliste)
   ═══════════════════════════════════════════════════════════════ */
.it-chat-fab {
    position: fixed; bottom: 24px; right: 24px;
    width: 52px; height: 52px;
    background: var(--accent);
    border-radius: 16px; border: none; color: white; font-size: 20px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(91,107,255,0.35);
    z-index: 9998; transition: var(--transition);
}
.it-chat-fab:hover { transform: scale(1.06); background: #4856e0; }
.it-chat-fab-badge {
    position: absolute; top: -4px; right: -4px; width: 16px; height: 16px;
    background: var(--danger); border-radius: 50%; border: 2px solid var(--surface);
    font-size: 8px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}

.it-chat-panel {
    position: fixed; bottom: 90px; right: 24px; width: 380px; max-height: 560px;
    background: var(--surface); border: 1px solid var(--border-color);
    border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    display: flex; flex-direction: column; z-index: 9999; overflow: hidden;
    animation: slideUp 0.2s ease;
}
.it-chat-header {
    background: var(--accent); padding: 14px 18px;
    display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.it-chat-header-left { display: flex; align-items: center; gap: 10px; color: white; }
.it-chat-ai-icon {
    width: 32px; height: 32px; background: rgba(255,255,255,0.2); border-radius: 8px;
    display: flex; align-items: center; justify-content: center; font-size: 14px; overflow: hidden;
}
.it-chat-title { font-size: 13px; font-weight: 700; color: white; }
.it-chat-subtitle { font-size: 10px; color: rgba(255,255,255,0.8); }
.it-chat-close-btn {
    background: rgba(255,255,255,0.15); border: none; color: white; width: 28px; height: 28px;
    border-radius: 8px; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center;
}
.it-chat-close-btn:hover { background: rgba(255,255,255,0.25); }

.it-chat-messages {
    flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px;
    min-height: 200px; max-height: 360px;
}
.it-chat-msg { display: flex; gap: 8px; align-items: flex-start; }
.it-chat-msg-user { flex-direction: row-reverse; }
.it-chat-ai-avatar {
    width: 28px; height: 28px; min-width: 28px; background: var(--accent);
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: white; overflow: hidden;
}
.it-chat-bubble { max-width: 80%; padding: 10px 13px; border-radius: 12px; font-size: 12px; line-height: 1.6; }
.it-chat-bubble.ai { background: var(--surface-2); border: 1px solid var(--border-color); color: var(--text-primary); border-bottom-left-radius: 4px; }
.it-chat-bubble.user { background: var(--accent); color: white; border-bottom-right-radius: 4px; }

.it-chat-presets { padding: 8px 14px; display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--border-color); flex-shrink: 0; }
.it-chat-preset-btn {
    padding: 4px 10px; background: var(--accent-dim); border: 1px solid var(--border-color);
    border-radius: 20px; font-size: 10px; font-weight: 600; color: var(--accent); cursor: pointer;
    transition: var(--transition); white-space: nowrap;
}
.it-chat-preset-btn:hover { background: var(--accent-dim-2); }

.it-chat-input-wrap { padding: 12px 14px; display: flex; gap: 8px; align-items: flex-end; border-top: 1px solid var(--border-color); flex-shrink: 0; }
.it-chat-input {
    flex: 1; border: 1px solid var(--border-color); border-radius: 10px; padding: 8px 12px; font-size: 12px;
    resize: none; outline: none; font-family: inherit; background: var(--surface); color: var(--text-primary);
    max-height: 80px; overflow-y: auto;
}
.it-chat-input:focus { border-color: var(--accent); }
.it-chat-send-btn {
    width: 34px; height: 34px; min-width: 34px; background: var(--accent); border: none; border-radius: 10px;
    color: white; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center;
}
.it-chat-send-btn:hover { background: #4856e0; }

.it-thinking-dots { display: flex; gap: 4px; align-items: center; padding: 4px 0; }
.it-thinking-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: itThinking 0.8s ease-in-out infinite; }
.it-thinking-dots span:nth-child(2) { animation-delay: .15s; }
.it-thinking-dots span:nth-child(3) { animation-delay: .30s; }
@keyframes itThinking { 0%,80%,100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }

.it-typing-cursor { display: inline-block; width: 2px; height: 1em; background: var(--accent); margin-left: 2px; vertical-align: text-bottom; animation: itCursorBlink 0.8s step-end infinite; }
@keyframes itCursorBlink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }

.it-logo-white-bg { background: #fff !important; width: 100%; height: 100%; border-radius: inherit; display: flex; align-items: center; justify-content: center; }
.it-logo-white-bg img { width: 65%; height: 65%; object-fit: contain; }

/* ── Narrative widget (résumé IA en haut des positions) ── */
.it-narrative-card {
    background: var(--surface); border: 1px solid var(--border-color);
    border-radius: 14px; padding: 20px 24px; margin-bottom: 24px; position: relative; overflow: hidden;
}
.it-narrative-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.it-narrative-icon {
    width: 36px; height: 36px; background: var(--accent); border-radius: 10px;
    display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; overflow: hidden;
}
.it-narrative-title { font-size: 13px; font-weight: 800; color: var(--text-primary); }
.it-narrative-subtitle { font-size: 11px; color: var(--text-secondary); }
.it-narrative-body { font-size: 13px; line-height: 1.7; color: var(--text-primary); }
.it-narrative-footer { margin-top: 10px; font-size: 10px; color: var(--text-tertiary); display: flex; align-items: center; gap: 6px; }
.it-narrative-loading { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 12px; color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════════
   🔀 TICKER ACTION MODAL — Choix de redirection
   ═══════════════════════════════════════════════════════════════ */
   #tickerActionModal .modal-content button:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}
#tickerActionModal .modal-content button:nth-child(2):hover {
    background: #4856e0 !important;
    color: white !important;
}

/* Rendre cliquables les cellules "entreprise" dans les tableaux */
.table-container td [data-clickable-company] {
    cursor: pointer;
    transition: var(--transition);
    border-radius: var(--radius-sm);
    padding: 4px 6px;
    margin: -4px -6px;
}
.table-container td [data-clickable-company]:hover {
    background: var(--hover-bg);
}
[data-clickable-company]:hover .institution-name,
[data-clickable-company]:hover [style*="font-weight: 700"] {
    color: var(--accent) !important;
}