/* ============================================================
   ALPHAVAULT CRM — crm-accounts.css v1.0
   Accounts Intelligence Hub — Styles spécifiques
   Étend crm-dashboard.css (variables --crm-* héritées)
   Light mode default · Dark mode via body.crm-dark-mode
   100% responsive PC/Mobile
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   1. ACCOUNTS PAGE — LAYOUT & WRAPPER
════════════════════════════════════════════════════════════ */

/* Liste principale */
.crm-accounts-list-wrap {
    margin-bottom: 16px;
    min-height: 200px;
}

/* Bottom padding */
.crm-bottom-pad { height: 40px; }

/* Breadcrumb link style */
.crm-breadcrumb-item a {
    color: var(--crm-text-faint);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s;
}

.crm-breadcrumb-item a:hover { color: var(--crm-primary); }

/* Status wrap */
.crm-status-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
}

/* Sidebar avatar images */
.crm-sidebar-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.crm-sidebar-dropdown-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.crm-sidebar-dropdown-names { min-width: 0; }

.crm-sidebar-user-details {
    flex: 1;
    min-width: 0;
}

/* Context menu divider */
.crm-ctx-divider {
    border: none;
    border-top: 1px solid var(--crm-border);
    margin: 6px 0;
}

/* Ghost button variant */
.crm-btn-ghost {
    background: transparent;
    border-color: var(--crm-border);
    color: var(--crm-text-faint);
}

.crm-btn-ghost:hover {
    background: var(--crm-input-bg);
    color: var(--crm-text-muted);
    border-color: var(--crm-border-hover);
}

/* Mobile backdrop */
.crm-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    z-index: 999;
    transition: opacity 0.3s ease;
}

/* ════════════════════════════════════════════════════════════
   2. ACCOUNTS TOOLBAR
════════════════════════════════════════════════════════════ */

.crm-accounts-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-lg);
    margin-bottom: 12px;
    flex-wrap: wrap;
}

/* Toolbar sides */
.crm-tb-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.crm-tb-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* Toolbar skeleton */
.crm-accounts-toolbar-skeleton {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-lg);
    margin-bottom: 12px;
}

/* Search */
.crm-accounts-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 340px;
}

.crm-accounts-search-icon {
    position: absolute;
    left: 10px;
    font-size: 12px;
    color: var(--crm-text-faint);
    pointer-events: none;
    z-index: 1;
}

.crm-accounts-search-input {
    width: 100%;
    background: var(--crm-input-bg);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    padding: 8px 32px 8px 30px;
    font-family: inherit;
    font-size: 12px;
    color: var(--crm-text);
    outline: none;
    transition: var(--crm-transition);
}

.crm-accounts-search-input::placeholder { color: var(--crm-text-faint); }

.crm-accounts-search-input:focus {
    border-color: var(--crm-primary);
    background: rgba(102, 126, 234, 0.05);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.crm-accounts-search-clear {
    position: absolute;
    right: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: var(--crm-text-faint);
    color: #fff;
    font-size: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--crm-transition);
    opacity: 0.6;
}

.crm-accounts-search-clear:hover { opacity: 1; background: var(--crm-red); }

/* Results count */
.crm-accounts-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--crm-text-muted);
    white-space: nowrap;
}

.crm-accounts-count-total {
    font-size: 11px;
    color: var(--crm-text-faint);
    font-weight: 500;
}

/* Toolbar button */
.crm-tb-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    background: var(--crm-input-bg);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    color: var(--crm-text-muted);
    cursor: pointer;
    transition: var(--crm-transition);
    white-space: nowrap;
    position: relative;
}

.crm-tb-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--crm-text);
    border-color: var(--crm-border-hover);
}

body.crm-dark-mode .crm-tb-btn:hover { background: rgba(255, 255, 255, 0.06); }

.crm-tb-btn.active {
    background: rgba(102, 126, 234, 0.1);
    border-color: rgba(102, 126, 234, 0.25);
    color: var(--crm-primary);
}

.crm-tb-btn-label { font-size: 11px; }

/* Filter count badge (on filter button) */
.crm-filter-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--crm-primary);
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    flex-shrink: 0;
}

/* Sort select */
.crm-tb-select {
    background: var(--crm-input-bg);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    padding: 7px 10px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    color: var(--crm-text-muted);
    cursor: pointer;
    outline: none;
    transition: var(--crm-transition);
}

.crm-tb-select:focus {
    border-color: var(--crm-primary);
    color: var(--crm-text);
}

/* Toolbar divider */
.crm-tb-divider {
    width: 1px;
    height: 20px;
    background: var(--crm-border);
    flex-shrink: 0;
}

/* View mode toggle */
.crm-view-mode-group {
    display: flex;
    background: var(--crm-input-bg);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    overflow: hidden;
}

.crm-view-mode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    font-size: 12px;
    color: var(--crm-text-faint);
    cursor: pointer;
    transition: var(--crm-transition);
    border-right: 1px solid var(--crm-border);
}

.crm-view-mode-btn:last-child { border-right: none; }

.crm-view-mode-btn:hover {
    background: rgba(102, 126, 234, 0.08);
    color: var(--crm-primary);
}

.crm-view-mode-btn.active {
    background: rgba(102, 126, 234, 0.12);
    color: var(--crm-primary);
}

/* ════════════════════════════════════════════════════════════
   3. FILTERS PANEL (collapsible)
════════════════════════════════════════════════════════════ */

#accountsFiltersPanel { margin-bottom: 12px; }

.crm-filters-panel {
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-lg);
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.2s ease, opacity 0.2s ease;
    opacity: 0;
}

.crm-filters-panel.open {
    max-height: 400px;
    padding: 16px;
    opacity: 1;
}

.crm-filters-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.crm-filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.crm-filter-label {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--crm-text-faint);
}

.crm-filter-select {
    background: var(--crm-input-bg);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    padding: 7px 10px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--crm-text-muted);
    outline: none;
    transition: var(--crm-transition);
    cursor: pointer;
    width: 100%;
}

.crm-filter-select:focus {
    border-color: var(--crm-primary);
    color: var(--crm-text);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.crm-filters-reset-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid var(--crm-border);
}

/* ════════════════════════════════════════════════════════════
   4. ENRICH PROGRESS BAR
════════════════════════════════════════════════════════════ */

.crm-enrich-progress-wrap {
    margin-bottom: 12px;
    padding: 12px 16px;
    background: var(--crm-surface);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--crm-radius-lg);
    background: rgba(139, 92, 246, 0.04);
}

.crm-enrich-progress-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--crm-purple);
    margin-bottom: 8px;
}

.crm-enrich-progress-bar-track {
    height: 4px;
    background: rgba(139, 92, 246, 0.15);
    border-radius: 4px;
    overflow: hidden;
}

.crm-enrich-progress-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--crm-purple), #6d28d9);
    width: 0%;
    transition: width 0.3s ease;
}

/* ════════════════════════════════════════════════════════════
   5. ACCOUNTS GRID VIEW
════════════════════════════════════════════════════════════ */

.crm-accounts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

/* Account Card */
.crm-account-card {
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-lg);
    padding: 16px;
    cursor: pointer;
    transition: var(--crm-transition);
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.crm-account-card:hover {
    border-color: rgba(102, 126, 234, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

body.crm-dark-mode .crm-account-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.crm-account-card.dormant {
    border-left: 3px solid rgba(239, 68, 68, 0.4);
    background: linear-gradient(135deg, var(--crm-surface) 0%, rgba(239, 68, 68, 0.03) 100%);
}

/* Card skeleton */
.crm-acc-card-skeleton {
    height: 220px;
    border-radius: var(--crm-radius-lg);
    animation: crmSkeletonPulse 1.5s ease-in-out infinite;
}

/* ── Card Header ───────────────────────────────────────── */
.crm-acc-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 4px;
}

/* Logo wrapper */
.crm-acc-logo-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    background: var(--crm-input-bg);
    border: 1px solid var(--crm-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.crm-acc-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
}

.crm-acc-logo-fallback {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 900;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: -0.5px;
}

/* Health badge */
.crm-acc-health-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

/* Dormant badge */
.crm-acc-dormant-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.1);
    color: var(--crm-red);
    font-size: 9px;
    border: 1px solid rgba(239, 68, 68, 0.2);
    flex-shrink: 0;
}

/* ── Card Name & Type ──────────────────────────────────── */
.crm-acc-name {
    font-size: 13px;
    font-weight: 900;
    color: var(--crm-text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-acc-type {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--crm-text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-acc-sector-dot {
    color: var(--crm-text-faint);
    opacity: 0.5;
}

/* ── Stage & Geo ───────────────────────────────────────── */
.crm-acc-stage-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.crm-acc-stage-pill {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.crm-acc-geo {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--crm-text-faint);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── AUM ───────────────────────────────────────────────── */
.crm-acc-aum {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--crm-text-muted);
}

/* ── Stats Row ─────────────────────────────────────────── */
.crm-acc-stats-row {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--crm-border);
    border-bottom: 1px solid var(--crm-border);
}

.crm-acc-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--crm-text-muted);
    flex: 1;
}

.crm-acc-stat small {
    font-size: 9px;
    font-weight: 500;
    color: var(--crm-text-faint);
}

/* ── Last Contact ──────────────────────────────────────── */
.crm-acc-last-contact {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
}

/* ── GKG Badge ─────────────────────────────────────────── */
.crm-acc-gkg-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 700;
    color: var(--crm-purple);
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 20px;
    padding: 2px 7px;
    width: fit-content;
}

/* ── Quick Actions (visible on hover) ─────────────────── */
.crm-acc-quick-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
    margin-top: 2px;
}

.crm-account-card:hover .crm-acc-quick-actions { opacity: 1; }

.crm-acc-qa-btn {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid var(--crm-border);
    background: var(--crm-input-bg);
    color: var(--crm-text-faint);
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--crm-transition);
    flex-shrink: 0;
}

.crm-acc-qa-btn:hover {
    background: rgba(102, 126, 234, 0.1);
    color: var(--crm-primary);
    border-color: rgba(102, 126, 234, 0.25);
}

/* ════════════════════════════════════════════════════════════
   6. ACCOUNTS LIST VIEW (Table)
════════════════════════════════════════════════════════════ */

.crm-accounts-list-table {
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-lg);
    overflow: hidden;
}

/* Table Header */
.crm-accounts-list-header {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr 1.2fr 0.8fr 0.7fr 0.6fr 0.6fr 0.9fr 0.7fr;
    gap: 8px;
    padding: 10px 16px;
    background: var(--crm-input-bg);
    border-bottom: 1px solid var(--crm-border);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--crm-text-faint);
    min-width: 900px;
}

/* Account Row */
.crm-account-row {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr 1.2fr 0.8fr 0.7fr 0.6fr 0.6fr 0.9fr 0.7fr;
    gap: 8px;
    padding: 12px 16px;
    align-items: center;
    border-bottom: 1px solid var(--crm-border);
    cursor: pointer;
    transition: var(--crm-transition);
    min-width: 900px;
}

.crm-account-row:last-child { border-bottom: none; }

.crm-account-row:hover { background: var(--crm-input-bg); }

.crm-account-row.dormant {
    background: rgba(239, 68, 68, 0.03);
    border-left: 3px solid rgba(239, 68, 68, 0.3);
}

/* Row Name Cell */
.crm-acc-row-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.crm-acc-row-logo {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid var(--crm-border);
}

.crm-acc-row-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--crm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-acc-row-web {
    font-size: 10px;
    color: var(--crm-primary);
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.15s;
}

.crm-acc-row-web:hover { opacity: 0.7; }

/* Row Actions */
.crm-acc-row-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}

.crm-account-row:hover .crm-acc-row-actions { opacity: 1; }

/* ════════════════════════════════════════════════════════════
   7. ACCOUNTS KANBAN VIEW
════════════════════════════════════════════════════════════ */

.crm-accounts-kanban {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
    min-height: 300px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.crm-kanban-col {
    background: var(--crm-input-bg);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-lg);
    display: flex;
    flex-direction: column;
    min-width: 180px;
    max-height: 700px;
    overflow: hidden;
}

.crm-kanban-col-header {
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--crm-border);
    background: var(--crm-surface);
    border-radius: var(--crm-radius-lg) var(--crm-radius-lg) 0 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    flex-shrink: 0;
}

.crm-kanban-col-title {
    font-size: 11px;
    font-weight: 800;
    flex: 1;
    white-space: nowrap;
}

.crm-kanban-col-count {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 20px;
}

.crm-kanban-col-aum {
    font-size: 9px;
    font-weight: 600;
    color: var(--crm-text-faint);
    width: 100%;
}

.crm-kanban-col-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.crm-kanban-col-body::-webkit-scrollbar { width: 3px; }
.crm-kanban-col-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.crm-kanban-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 12px;
    text-align: center;
}

/* Kanban Card */
.crm-kanban-card {
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    padding: 10px;
    cursor: pointer;
    transition: var(--crm-transition);
}

.crm-kanban-card:hover {
    border-color: rgba(102, 126, 234, 0.25);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

/* Kanban logo */
.crm-acc-kanban-logo {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid var(--crm-border);
}

/* ════════════════════════════════════════════════════════════
   8. PAGINATION
════════════════════════════════════════════════════════════ */

#accountsPagination { margin-bottom: 16px; }

.crm-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-lg);
    flex-wrap: wrap;
}

.crm-pagination-info {
    font-size: 11px;
    color: var(--crm-text-faint);
    font-weight: 600;
}

.crm-pagination-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.crm-page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    background: var(--crm-input-bg);
    border: 1px solid var(--crm-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    color: var(--crm-text-muted);
    cursor: pointer;
    transition: var(--crm-transition);
}

.crm-page-btn:hover:not(:disabled) {
    background: rgba(102, 126, 234, 0.08);
    border-color: rgba(102, 126, 234, 0.2);
    color: var(--crm-primary);
}

.crm-page-btn.active {
    background: linear-gradient(135deg, var(--crm-primary), var(--crm-primary-dark));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.35);
}

.crm-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.crm-page-ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    font-size: 12px;
    color: var(--crm-text-faint);
}

/* ════════════════════════════════════════════════════════════
   9. RESPONSIVE PART 1 — Large screens (≤ 1400px)
════════════════════════════════════════════════════════════ */

@media (max-width: 1400px) {
    .crm-accounts-grid { grid-template-columns: repeat(3, 1fr); }
    .crm-accounts-kanban { grid-template-columns: repeat(5, minmax(180px, 1fr)); }
    .crm-filters-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ════════════════════════════════════════════════════════════
   10. RESPONSIVE PART 1 — Tablet (≤ 1200px)
════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
    .crm-accounts-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .crm-accounts-kanban { grid-template-columns: repeat(4, minmax(180px, 1fr)); }
    .crm-filters-grid { grid-template-columns: repeat(3, 1fr); }

    .crm-accounts-list-header,
    .crm-account-row {
        grid-template-columns: 2.5fr 1fr 1fr 1fr 0.8fr 0.7fr 0.7fr 0.9fr 0.7fr;
    }

    /* Hide employees column on smaller screens */
    .crm-accounts-list-header span:nth-child(7),
    .crm-account-row > div:nth-child(7) { display: none; }
}

/* ════════════════════════════════════════════════════════════
   11. RESPONSIVE PART 1 — Mobile (≤ 768px)
════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Toolbar */
    .crm-accounts-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 12px;
    }

    .crm-tb-left  { flex-direction: column; align-items: stretch; gap: 8px; }
    .crm-tb-right { flex-wrap: wrap; gap: 6px; }

    .crm-accounts-search-wrap { max-width: none; }

    /* Filters */
    .crm-filters-grid { grid-template-columns: 1fr 1fr; }

    /* Grid: 2 columns */
    .crm-accounts-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    /* Always show quick actions on mobile */
    .crm-acc-quick-actions { opacity: 1; }
    .crm-acc-row-actions   { opacity: 1; }

    /* List: hide some columns */
    .crm-accounts-list-table { overflow-x: auto; }

    /* Kanban */
    .crm-accounts-kanban {
        grid-template-columns: repeat(3, minmax(160px, 1fr));
        overflow-x: auto;
    }

    /* Pagination */
    .crm-pagination {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 10px;
    }

    /* Toolbar label hidden */
    .crm-tb-btn-label { display: none; }
    .crm-tb-btn { padding: 7px; }

    /* Enrich progress */
    .crm-enrich-progress-wrap { padding: 10px 12px; }
}

/* ════════════════════════════════════════════════════════════
   12. RESPONSIVE PART 1 — Small Mobile (≤ 480px)
════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

    /* Single column */
    .crm-accounts-grid { grid-template-columns: 1fr; gap: 8px; }

    /* Filters: single column */
    .crm-filters-grid { grid-template-columns: 1fr; }

    /* Kanban: 2 cols */
    .crm-accounts-kanban { grid-template-columns: repeat(2, minmax(160px, 1fr)); }

    /* Card simplify */
    .crm-acc-stats-row { gap: 6px; }
    .crm-acc-stat small { display: none; }

    /* Toolbar: icon only */
    .crm-view-mode-btn { width: 28px; height: 28px; font-size: 11px; }
}

/* ════════════════════════════════════════════════════════════
   13. DARK MODE — Accounts Part 1
════════════════════════════════════════════════════════════ */

body.crm-dark-mode .crm-accounts-toolbar    { background: rgba(30, 41, 59, 0.9); }
body.crm-dark-mode .crm-filters-panel       { background: rgba(30, 41, 59, 0.9); }
body.crm-dark-mode .crm-account-card        { background: rgba(30, 41, 59, 0.85); }
body.crm-dark-mode .crm-account-card:hover  { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
body.crm-dark-mode .crm-accounts-list-table { background: rgba(30, 41, 59, 0.85); }
body.crm-dark-mode .crm-accounts-list-header{ background: rgba(255, 255, 255, 0.03); }
body.crm-dark-mode .crm-account-row:hover   { background: rgba(255, 255, 255, 0.04); }
body.crm-dark-mode .crm-account-row.dormant { background: rgba(239, 68, 68, 0.06); }
body.crm-dark-mode .crm-kanban-col          { background: rgba(15, 23, 42, 0.6); }
body.crm-dark-mode .crm-kanban-col-header   { background: rgba(30, 41, 59, 0.85); }
body.crm-dark-mode .crm-kanban-card         { background: rgba(30, 41, 59, 0.85); }
body.crm-dark-mode .crm-kanban-card:hover   { box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4); }
body.crm-dark-mode .crm-pagination          { background: rgba(30, 41, 59, 0.85); }
body.crm-dark-mode .crm-page-btn            { background: rgba(255, 255, 255, 0.05); }
body.crm-dark-mode .crm-acc-logo-wrap       { background: rgba(255, 255, 255, 0.06); }
body.crm-dark-mode .crm-tb-select,
body.crm-dark-mode .crm-filter-select       { background: rgba(255, 255, 255, 0.06); color: var(--crm-text-muted); }
body.crm-dark-mode .crm-view-mode-group     { background: rgba(255, 255, 255, 0.05); }
body.crm-dark-mode .crm-account-card.dormant{
    background: linear-gradient(135deg, rgba(30,41,59,0.9) 0%, rgba(239,68,68,0.05) 100%);
}

/* ════════════════════════════════════════════════════════════
   14. LIGHT MODE — Accounts Part 1
════════════════════════════════════════════════════════════ */

body:not(.crm-dark-mode) .crm-accounts-toolbar { box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
body:not(.crm-dark-mode) .crm-account-card     { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
body:not(.crm-dark-mode) .crm-kanban-card      { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
body:not(.crm-dark-mode) .crm-pagination       { box-shadow: 0 1px 4px rgba(0,0,0,0.04); }

/* ════════════════════════════════════════════════════════════
   END PART 1/2 — crm-accounts.css
   Demandez la suite pour recevoir la Partie 2/2
════════════════════════════════════════════════════════════ */

/* ============================================================
   ALPHAVAULT CRM — crm-accounts.css v1.0
   PART 2/2 — Detail Panel, AI Score, Outreach, Network,
   Charts, Responsive, Dark Mode, Light Mode
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   15. ACCOUNT DETAIL PANEL — Base
   Slide-in drawer depuis la droite, full-height
════════════════════════════════════════════════════════════ */

.crm-detail-panel {
    position: fixed;
    inset: 0;
    z-index: 5000;
    pointer-events: none;
    visibility: hidden;
}

.crm-detail-panel.open {
    pointer-events: all;
    visibility: visible;
}

/* ── Overlay (backdrop) ─────────────────────────────────── */
.crm-detail-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.crm-detail-panel.open .crm-detail-overlay { opacity: 1; }

/* ── Drawer ─────────────────────────────────────────────── */
.crm-detail-drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 560px;
    max-width: 100vw;
    background: var(--crm-sidebar-bg);
    border-left: 1px solid var(--crm-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.34, 1.1, 0.64, 1);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.18);
}

.crm-detail-panel.open .crm-detail-drawer {
    transform: translateX(0);
}

/* ════════════════════════════════════════════════════════════
   16. DETAIL PANEL — HEADER
════════════════════════════════════════════════════════════ */

.crm-detail-header {
    flex-shrink: 0;
    border-bottom: 1px solid var(--crm-border);
    padding: 16px 20px;
    background: var(--crm-surface);
    position: relative;
}

/* Close Button */
.crm-detail-close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--crm-border);
    background: var(--crm-input-bg);
    color: var(--crm-text-muted);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--crm-transition);
    z-index: 2;
}

.crm-detail-close-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--crm-red);
    border-color: rgba(239, 68, 68, 0.25);
}

/* Header Main (logo + info + stats) */
.crm-detail-header-main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-right: 40px;
    margin-bottom: 12px;
}

/* Logo in header */
.crm-detail-logo-wrap {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--crm-input-bg);
    border: 1px solid var(--crm-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.crm-detail-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.crm-detail-logo-fallback {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: -0.5px;
}

/* Info block */
.crm-detail-header-info {
    flex: 1;
    min-width: 0;
}

.crm-detail-name {
    font-size: 18px;
    font-weight: 900;
    color: var(--crm-text);
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Meta rows */
.crm-detail-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    flex-wrap: wrap;
}

.crm-detail-meta-sep {
    color: var(--crm-text-faint);
    opacity: 0.5;
    font-size: 10px;
}

/* Quick stats */
.crm-detail-header-stats {
    display: flex;
    gap: 0;
    flex-shrink: 0;
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    overflow: hidden;
    align-self: flex-start;
}

.crm-detail-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    border-right: 1px solid var(--crm-border);
    min-width: 60px;
    background: var(--crm-input-bg);
}

.crm-detail-stat:last-child { border-right: none; }

.crm-detail-stat-value {
    font-size: 16px;
    font-weight: 900;
    line-height: 1.2;
}

.crm-detail-stat-label {
    font-size: 9px;
    color: var(--crm-text-faint);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 2px;
}

/* Header Action Buttons */
.crm-detail-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.crm-detail-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--crm-border);
    background: var(--crm-input-bg);
    color: var(--crm-text-muted);
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
    transition: var(--crm-transition);
    flex-shrink: 0;
}

.crm-detail-action-btn:hover {
    background: rgba(102, 126, 234, 0.1);
    color: var(--crm-primary);
    border-color: rgba(102, 126, 234, 0.25);
}

.crm-detail-action-btn.danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--crm-red);
    border-color: rgba(239, 68, 68, 0.25);
}

/* GKG indicator line */
#accountGKGIndicator { min-height: 16px; }

/* ════════════════════════════════════════════════════════════
   17. DETAIL PANEL — TABS
════════════════════════════════════════════════════════════ */

.crm-detail-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 6px;
    border-bottom: 1px solid var(--crm-border);
    background: var(--crm-surface);
    overflow-x: auto;
    flex-shrink: 0;
}

.crm-detail-tabs::-webkit-scrollbar { height: 0; }

.crm-detail-tab-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 11px 14px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    color: var(--crm-text-faint);
    cursor: pointer;
    transition: var(--crm-transition);
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
}

.crm-detail-tab-btn:hover {
    color: var(--crm-text-muted);
    background: rgba(0, 0, 0, 0.03);
}

body.crm-dark-mode .crm-detail-tab-btn:hover {
    background: rgba(255, 255, 255, 0.04);
}

.crm-detail-tab-btn.active {
    color: var(--crm-primary);
    border-bottom-color: var(--crm-primary);
    background: rgba(102, 126, 234, 0.05);
}

.crm-detail-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 20px;
    font-size: 8px;
    font-weight: 800;
    background: rgba(102, 126, 234, 0.15);
    color: var(--crm-primary);
}

/* ════════════════════════════════════════════════════════════
   18. DETAIL PANEL — BODY (tab content)
════════════════════════════════════════════════════════════ */

.crm-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    -webkit-overflow-scrolling: touch;
}

.crm-detail-body::-webkit-scrollbar { width: 4px; }
.crm-detail-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
}
body.crm-dark-mode .crm-detail-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
}

/* ── Link style ─────────────────────────────────────────── */
.crm-detail-link {
    color: var(--crm-primary);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: opacity 0.15s;
}

.crm-detail-link:hover { opacity: 0.7; }

/* ════════════════════════════════════════════════════════════
   19. DETAIL PANEL — SECTION BASE
════════════════════════════════════════════════════════════ */

.crm-detail-section {
    padding: 16px 20px;
    border-bottom: 1px solid var(--crm-border);
}

.crm-detail-section:last-child { border-bottom: none; }

.crm-detail-section-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 800;
    color: var(--crm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 12px;
}

.crm-detail-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--crm-border);
    background: var(--crm-input-bg);
    font-size: 11px;
    font-weight: 700;
    color: var(--crm-text-muted);
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   20. OVERVIEW TAB — Info Grid
════════════════════════════════════════════════════════════ */

.crm-detail-overview {
    display: flex;
    flex-direction: column;
}

.crm-detail-info-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.crm-detail-info-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--crm-border);
}

.crm-detail-info-row:last-child { border-bottom: none; }

.crm-detail-info-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--crm-text-faint);
    white-space: nowrap;
    min-width: 90px;
    flex-shrink: 0;
}

.crm-detail-info-value {
    font-size: 11px;
    font-weight: 600;
    color: var(--crm-text);
    text-align: right;
    flex: 1;
    word-break: break-word;
}

/* Description text */
.crm-detail-description {
    font-size: 12px;
    color: var(--crm-text-muted);
    line-height: 1.7;
    background: var(--crm-input-bg);
    border-radius: var(--crm-radius);
    padding: 10px 12px;
    border: 1px solid var(--crm-border);
}

/* Key-Value pairs (GKG data) */
.crm-detail-kv {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--crm-border);
}

.crm-detail-kv:last-child { border-bottom: none; }

.crm-detail-kv-label {
    font-size: 10px;
    font-weight: 800;
    color: var(--crm-text-faint);
    min-width: 90px;
    flex-shrink: 0;
    padding-top: 2px;
}

.crm-detail-kv-value {
    font-size: 11px;
    color: var(--crm-text-muted);
    font-weight: 600;
    flex: 1;
}

/* Tags in detail */
.crm-detail-tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

/* Notes */
.crm-detail-notes {
    font-size: 12px;
    color: var(--crm-text-muted);
    line-height: 1.6;
    background: rgba(245, 158, 11, 0.04);
    border: 1px solid rgba(245, 158, 11, 0.12);
    border-radius: var(--crm-radius);
    padding: 10px 12px;
    white-space: pre-wrap;
    border-left: 3px solid var(--crm-amber);
}

/* ════════════════════════════════════════════════════════════
   21. OVERVIEW TAB — Relationship Health
════════════════════════════════════════════════════════════ */

.crm-detail-health-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.crm-detail-health-score {
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   22. OVERVIEW TAB — Warm Path Finder
════════════════════════════════════════════════════════════ */

.crm-warmpath-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--crm-radius);
    background: var(--crm-input-bg);
    border: 1px solid var(--crm-border);
    margin-bottom: 6px;
    transition: var(--crm-transition);
}

.crm-warmpath-row:last-child { margin-bottom: 0; }

.crm-warmpath-row:hover {
    border-color: var(--crm-border-hover);
    background: var(--crm-surface-hover);
}

.crm-warmpath-rank {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    flex-shrink: 0;
}

.crm-warmpath-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

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

.crm-warmpath-strength {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════
   23. CONTACTS TAB
════════════════════════════════════════════════════════════ */

.crm-detail-contacts {
    display: flex;
    flex-direction: column;
}

.crm-detail-contact-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--crm-border);
    cursor: pointer;
    transition: var(--crm-transition);
}

.crm-detail-contact-row:last-child { border-bottom: none; }

.crm-detail-contact-row:hover { background: var(--crm-input-bg); }

.crm-detail-contact-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}

.crm-detail-contact-info {
    flex: 1;
    min-width: 0;
}

/* ════════════════════════════════════════════════════════════
   24. DEALS TAB
════════════════════════════════════════════════════════════ */

.crm-detail-deals {
    display: flex;
    flex-direction: column;
}

.crm-detail-deal-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--crm-border);
    cursor: pointer;
    transition: var(--crm-transition);
}

.crm-detail-deal-row:last-child { border-bottom: none; }

.crm-detail-deal-row:hover { background: var(--crm-input-bg); }

.crm-detail-deal-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.crm-detail-deal-info {
    flex: 1;
    min-width: 0;
}

/* ════════════════════════════════════════════════════════════
   25. INTERACTIONS TAB
   (Réutilise .crm-timeline de crm-dashboard.css)
════════════════════════════════════════════════════════════ */

.crm-detail-interactions {
    display: flex;
    flex-direction: column;
}

/* Timeline sentinel inside detail panel */
.crm-detail-interactions .crm-timeline {
    padding: 16px 20px;
}

.crm-detail-interactions .crm-timeline-item {
    border-bottom: 1px solid var(--crm-border);
    padding: 10px 0;
    gap: 10px;
}

.crm-detail-interactions .crm-timeline-item:last-child {
    border-bottom: none;
}

/* Sentiment badge */
.crm-timeline-sentiment {
    display: inline-flex;
    align-items: center;
    margin-top: 4px;
}

/* ════════════════════════════════════════════════════════════
   26. INTELLIGENCE TAB
════════════════════════════════════════════════════════════ */

.crm-detail-intelligence {
    display: flex;
    flex-direction: column;
}

/* ── AI Score Card ──────────────────────────────────────── */
.crm-ai-score-card {
    background: var(--crm-input-bg);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-lg);
    padding: 16px;
}

.crm-ai-score-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--crm-border);
}

.crm-ai-score-total {
    font-size: 42px;
    font-weight: 900;
    line-height: 1;
    flex-shrink: 0;
}

/* Score Criteria */
.crm-ai-score-criteria {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.crm-score-criterion {
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    padding: 10px 12px;
    transition: var(--crm-transition);
}

.crm-score-criterion:hover { border-color: var(--crm-border-hover); }

.crm-score-criterion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

/* ── Outreach Draft ─────────────────────────────────────── */
.crm-outreach-draft {
    background: var(--crm-input-bg);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-lg);
    overflow: hidden;
}

.crm-outreach-draft-body {
    padding: 16px;
    font-size: 12px;
    line-height: 1.8;
    color: var(--crm-text-muted);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 280px;
    overflow-y: auto;
    border-bottom: 1px solid var(--crm-border);
    font-family: 'Inter', sans-serif;
}

.crm-outreach-draft-body::-webkit-scrollbar { width: 3px; }
.crm-outreach-draft-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}
body.crm-dark-mode .crm-outreach-draft-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}

.crm-outreach-draft-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--crm-surface);
}

/* ════════════════════════════════════════════════════════════
   27. NETWORK TAB
════════════════════════════════════════════════════════════ */

.crm-detail-network {
    display: flex;
    flex-direction: column;
}

/* ════════════════════════════════════════════════════════════
   28. CHARTS CONTAINERS
   Les charts TypeChart et HealthChart sont déjà stylisés
   via .crm-widget / .crm-bento-row dans crm-dashboard.css.
   Ajouts spécifiques accounts :
════════════════════════════════════════════════════════════ */

#accountsTypeChart,
#accountsHealthChart {
    min-height: 200px;
    display: flex;
    flex-direction: column;
}

#accountsTypeChart .crm-widget-loading,
#accountsHealthChart .crm-widget-loading {
    flex: 1;
}

/* Ensure canvas fills widget */
#accountsTypeChart canvas,
#accountsHealthChart canvas {
    max-height: 160px;
}

/* ════════════════════════════════════════════════════════════
   29. AI SUMMARY WIDGET (accountsAISummary)
════════════════════════════════════════════════════════════ */

#accountsAISummary {
    min-height: 60px;
}

/* ════════════════════════════════════════════════════════════
   30. TOOLBAR SKELETON (display fix)
════════════════════════════════════════════════════════════ */

.crm-accounts-toolbar-skeleton {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-lg);
    margin-bottom: 12px;
    animation: crmSkeletonPulse 1.5s ease-in-out infinite;
}

/* ════════════════════════════════════════════════════════════
   31. DETAIL PANEL — RESPONSIVE (≤ 1200px)
════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {

    .crm-detail-drawer { width: 500px; }

    .crm-detail-header-main { gap: 10px; }

    .crm-detail-name { font-size: 16px; }

    .crm-detail-logo-wrap,
    .crm-detail-logo-fallback {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }

    .crm-detail-logo-fallback { font-size: 15px; }
}

/* ════════════════════════════════════════════════════════════
   32. DETAIL PANEL — RESPONSIVE MOBILE (≤ 768px)
════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Full width drawer on mobile */
    .crm-detail-drawer {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--crm-border);
        box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.25);
        top: auto;
        height: 92vh;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
    }

    .crm-detail-panel.open .crm-detail-drawer {
        transform: translateY(0);
    }

    /* Pull indicator */
    .crm-detail-drawer::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: var(--crm-border);
        border-radius: 2px;
        margin: 10px auto 0;
        flex-shrink: 0;
    }

    .crm-detail-header {
        padding: 12px 16px;
    }

    .crm-detail-header-main {
        flex-wrap: wrap;
        gap: 10px;
    }

    .crm-detail-header-stats {
        width: 100%;
        justify-content: stretch;
    }

    .crm-detail-stat {
        flex: 1;
        padding: 8px 8px;
    }

    .crm-detail-stat-value { font-size: 14px; }

    .crm-detail-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .crm-detail-action-btn {
        width: 36px;
        height: 36px;
    }

    .crm-detail-name { font-size: 16px; }

    .crm-detail-logo-wrap,
    .crm-detail-logo-fallback {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }

    /* Tabs scrollable */
    .crm-detail-tab-btn {
        padding: 10px 10px;
        font-size: 10px;
    }

    .crm-detail-tab-btn span { display: none; }

    /* Info grid mobile */
    .crm-detail-info-row {
        flex-direction: column;
        gap: 3px;
    }

    .crm-detail-info-value { text-align: left; }

    .crm-detail-info-label { min-width: auto; }

    /* Health score */
    .crm-detail-health-score { font-size: 28px; }

    /* AI Score */
    .crm-ai-score-total { font-size: 32px; }

    .crm-ai-score-header { flex-direction: column; align-items: flex-start; }

    /* Outreach draft */
    .crm-outreach-draft-body { max-height: 180px; font-size: 11px; }

    /* Section padding */
    .crm-detail-section { padding: 12px 16px; }
    .crm-detail-contact-row { padding: 10px 16px; }
    .crm-detail-deal-row { padding: 10px 16px; }
    .crm-detail-interactions .crm-timeline { padding: 12px 16px; }
    .crm-detail-section-header { padding: 10px 16px; }

    /* Warm path */
    .crm-warmpath-row { padding: 8px 10px; }
    .crm-warmpath-avatar { width: 28px; height: 28px; font-size: 10px; }

    /* Charts: keep side by side */
    #accountsTypeChart,
    #accountsHealthChart { min-height: 180px; }

    /* Accounts grid: 2 cols (already set in Part 1) */
}

/* ════════════════════════════════════════════════════════════
   33. DETAIL PANEL — SMALL MOBILE (≤ 480px)
════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

    .crm-detail-drawer { height: 95vh; }

    .crm-detail-header-main { gap: 8px; }

    .crm-detail-name { font-size: 15px; }

    .crm-detail-logo-wrap,
    .crm-detail-logo-fallback {
        width: 40px;
        height: 40px;
        border-radius: 9px;
        font-size: 13px;
    }

    .crm-detail-stat { padding: 6px 6px; }
    .crm-detail-stat-value { font-size: 13px; }
    .crm-detail-stat-label { font-size: 8px; }

    .crm-detail-health-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .crm-detail-health-score { font-size: 26px; }

    .crm-ai-score-total { font-size: 28px; }

    .crm-ai-score-criteria { gap: 6px; }
    .crm-score-criterion { padding: 8px 10px; }

    .crm-warmpath-rank { width: 20px; height: 20px; font-size: 9px; }

    .crm-outreach-draft-body { font-size: 11px; line-height: 1.6; }
}

/* ════════════════════════════════════════════════════════════
   34. DARK MODE — Detail Panel
════════════════════════════════════════════════════════════ */

body.crm-dark-mode .crm-detail-drawer {
    background: #0f172a;
    border-left-color: rgba(255, 255, 255, 0.08);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
}

body.crm-dark-mode .crm-detail-header {
    background: rgba(15, 23, 42, 0.95);
    border-bottom-color: rgba(255, 255, 255, 0.07);
}

body.crm-dark-mode .crm-detail-tabs {
    background: rgba(15, 23, 42, 0.9);
    border-bottom-color: rgba(255, 255, 255, 0.07);
}

body.crm-dark-mode .crm-detail-tab-btn:hover {
    background: rgba(255, 255, 255, 0.04);
}

body.crm-dark-mode .crm-detail-tab-btn.active {
    background: rgba(102, 126, 234, 0.08);
}

body.crm-dark-mode .crm-detail-logo-wrap {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}

body.crm-dark-mode .crm-detail-stat {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}

body.crm-dark-mode .crm-detail-section {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.crm-dark-mode .crm-detail-section-header {
    background: rgba(255, 255, 255, 0.03);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.crm-dark-mode .crm-detail-info-row {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

body.crm-dark-mode .crm-detail-description {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.07);
}

body.crm-dark-mode .crm-detail-kv {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

body.crm-dark-mode .crm-detail-notes {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.15);
}

body.crm-dark-mode .crm-detail-contact-row:hover,
body.crm-dark-mode .crm-detail-deal-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

body.crm-dark-mode .crm-detail-contact-row,
body.crm-dark-mode .crm-detail-deal-row {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

body.crm-dark-mode .crm-warmpath-row {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.07);
}

body.crm-dark-mode .crm-warmpath-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

body.crm-dark-mode .crm-ai-score-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.07);
}

body.crm-dark-mode .crm-ai-score-header {
    border-bottom-color: rgba(255, 255, 255, 0.07);
}

body.crm-dark-mode .crm-score-criterion {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.07);
}

body.crm-dark-mode .crm-score-criterion:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

body.crm-dark-mode .crm-outreach-draft {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.07);
}

body.crm-dark-mode .crm-outreach-draft-body {
    color: var(--crm-text-muted);
}

body.crm-dark-mode .crm-outreach-draft-actions {
    background: rgba(255, 255, 255, 0.04);
}

body.crm-dark-mode .crm-outreach-draft-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}

/* ════════════════════════════════════════════════════════════
   35. DARK MODE — Accounts General Part 2
════════════════════════════════════════════════════════════ */

body.crm-dark-mode .crm-detail-drawer::before {
    background: rgba(255, 255, 255, 0.12);
}

body.crm-dark-mode .crm-accounts-toolbar-skeleton {
    background: rgba(30, 41, 59, 0.7);
}

body.crm-dark-mode .crm-enrich-progress-wrap {
    background: rgba(139, 92, 246, 0.06);
    border-color: rgba(139, 92, 246, 0.15);
}

body.crm-dark-mode .crm-detail-intelligence .crm-detail-section {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.crm-dark-mode .crm-acc-gkg-badge {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.2);
}

body.crm-dark-mode .crm-acc-dormant-badge {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.25);
}

body.crm-dark-mode .crm-acc-stats-row {
    border-top-color: rgba(255, 255, 255, 0.06);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* ════════════════════════════════════════════════════════════
   36. LIGHT MODE — Accounts Part 2
════════════════════════════════════════════════════════════ */

body:not(.crm-dark-mode) .crm-detail-drawer {
    background: #ffffff;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.14);
}

body:not(.crm-dark-mode) .crm-detail-header {
    background: #ffffff;
}

body:not(.crm-dark-mode) .crm-detail-tabs {
    background: #f8fafc;
}

body:not(.crm-dark-mode) .crm-detail-stat {
    background: #f8fafc;
}

body:not(.crm-dark-mode) .crm-ai-score-card {
    background: #f8fafc;
}

body:not(.crm-dark-mode) .crm-outreach-draft {
    background: #f8fafc;
}

body:not(.crm-dark-mode) .crm-outreach-draft-actions {
    background: #ffffff;
}

body:not(.crm-dark-mode) .crm-score-criterion {
    background: #ffffff;
}

body:not(.crm-dark-mode) .crm-warmpath-row {
    background: #f8fafc;
}

body:not(.crm-dark-mode) .crm-warmpath-row:hover {
    background: #f1f5f9;
}

body:not(.crm-dark-mode) .crm-detail-contact-row:hover,
body:not(.crm-dark-mode) .crm-detail-deal-row:hover {
    background: #f8fafc;
}

/* ════════════════════════════════════════════════════════════
   37. LANDSCAPE MOBILE — Detail Panel
════════════════════════════════════════════════════════════ */

@media (max-width: 768px) and (orientation: landscape) {

    .crm-detail-drawer {
        height: 100%;
        top: 0;
        border-radius: 0;
        width: 90vw;
        transform: translateX(100%);
        border-left: 1px solid var(--crm-border);
    }

    .crm-detail-panel.open .crm-detail-drawer {
        transform: translateX(0);
    }

    .crm-detail-drawer::before { display: none; }

    .crm-detail-header { padding: 10px 16px; }

    .crm-detail-header-main { gap: 8px; }

    .crm-detail-name { font-size: 14px; }
}

/* ════════════════════════════════════════════════════════════
   38. PRINT — Accounts Page
════════════════════════════════════════════════════════════ */

@media print {

    .crm-ai-fab,
    .crm-ai-chat-panel,
    #accountsToolbar,
    #accountsFiltersPanel,
    #accountsPagination,
    .crm-detail-panel,
    .crm-enrich-progress-wrap,
    #crmSidebar,
    #crmHeader { display: none !important; }

    #crmMain, #crmContent { width: 100%; overflow: visible; }

    .crm-accounts-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .crm-account-card { page-break-inside: avoid; }

    body { background: #fff !important; color: #000 !important; }
}

/* ════════════════════════════════════════════════════════════
   39. ACCESSIBILITY
════════════════════════════════════════════════════════════ */

.crm-detail-tab-btn:focus-visible,
.crm-detail-action-btn:focus-visible,
.crm-acc-qa-btn:focus-visible,
.crm-view-mode-btn:focus-visible,
.crm-page-btn:focus-visible,
.crm-tb-btn:focus-visible {
    outline: 2px solid var(--crm-primary);
    outline-offset: 2px;
}

/* iOS zoom prevention (inputs in filters) */
@media (max-width: 768px) {
    .crm-filter-select,
    .crm-tb-select,
    .crm-accounts-search-input {
        font-size: 16px;
    }
    .crm-filter-select:not(:focus),
    .crm-tb-select:not(:focus),
    .crm-accounts-search-input:not(:focus) {
        font-size: 11px;
    }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .crm-detail-drawer,
    .crm-detail-overlay,
    .crm-filters-panel {
        transition: none !important;
    }
    .crm-enrich-progress-bar-fill {
        transition: none !important;
    }
}

/* GPU acceleration */
.crm-detail-drawer,
.crm-account-card,
.crm-kanban-card,
.crm-account-row {
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Touch scrolling */
.crm-detail-body,
.crm-kanban-col-body,
.crm-outreach-draft-body,
.crm-team-members-list {
    -webkit-overflow-scrolling: touch;
}

/* ════════════════════════════════════════════════════════════
   40. MICRO-UTILITIES (Accounts-specific)
════════════════════════════════════════════════════════════ */

/* Drag hover state for kanban cards */
.crm-kanban-card.crm-drag-over {
    border-color: rgba(102, 126, 234, 0.5) !important;
    background: rgba(102, 126, 234, 0.06) !important;
}

/* Account card selected state (when detail panel is open) */
.crm-account-card[data-account-id].selected,
.crm-account-row[data-account-id].selected {
    border-color: rgba(102, 126, 234, 0.4);
    background: rgba(102, 126, 234, 0.04);
}

/* Enrich spinner inside button */
.crm-tb-btn .fa-spinner { animation: crmSpin 0.7s linear infinite; }

/* Toolbar active state */
.crm-filter-badge-btn.active {
    background: rgba(102, 126, 234, 0.1);
    border-color: rgba(102, 126, 234, 0.25);
    color: var(--crm-primary);
}

/* Detail tab animation indicator */
.crm-detail-tab-btn::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--crm-primary);
    border-radius: 2px;
    transition: width 0.25s ease, left 0.25s ease;
}

.crm-detail-tab-btn.active::after {
    width: 100%;
    left: 0;
}

/* Account health badge variants */
.crm-acc-health-badge.strategic { background: rgba(16,185,129,0.12); color: #10b981; border-color: rgba(16,185,129,0.2); }
.crm-acc-health-badge.strong    { background: rgba(102,126,234,0.12); color: #667eea; border-color: rgba(102,126,234,0.2); }
.crm-acc-health-badge.moderate  { background: rgba(245,158,11,0.12);  color: #f59e0b; border-color: rgba(245,158,11,0.2); }
.crm-acc-health-badge.weak      { background: rgba(100,116,139,0.12); color: #64748b; border-color: rgba(100,116,139,0.2); }
.crm-acc-health-badge.dormant   { background: rgba(239,68,68,0.12);   color: #ef4444; border-color: rgba(239,68,68,0.2); }

/* Scrollable list table (horizontal on small screens) */
.crm-accounts-list-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.crm-accounts-list-table::-webkit-scrollbar { height: 4px; }
.crm-accounts-list-table::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
}
body.crm-dark-mode .crm-accounts-list-table::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
}

/* Intelligence section : keep consistent border */
.crm-detail-intelligence .crm-detail-section { border-bottom: 1px solid var(--crm-border); }
.crm-detail-intelligence .crm-detail-section:last-child { border-bottom: none; }

/* Network section : same */
.crm-detail-network .crm-detail-section { border-bottom: 1px solid var(--crm-border); }
.crm-detail-network .crm-detail-section:last-child { border-bottom: none; }

/* ════════════════════════════════════════════════════════════
   END — crm-accounts.css v1.0 (Part 2/2)
   © AlphaVault AI — All rights reserved
   Total: ~700 lines CSS accounts-specific
════════════════════════════════════════════════════════════ */