/* assets/pipeline.css - V4 RESPONSIVE & ICONS */

/* --- STRUCTURE KANBAN RESPONSIVE --- */
.pipeline-container {
    display: flex;
    gap: 20px;
    height: calc(100vh - 200px); /* Ajusté pour la barre de stats */
    overflow-x: auto; /* Scroll si l'écran est vraiment trop petit */
    padding-bottom: 20px;
}

.kanban-column {
    background: #F5F5F7;
    /* RESPONSIVE : On enlève le width fixe */
    flex: 1;             /* S'étire pour remplir l'espace */
    min-width: 280px;    /* Ne devient jamais plus petit que ça */
    max-width: 400px;    /* (Optionnel) pour ne pas être trop large sur les écrans géants */
    
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #E5E5E5;
    flex-shrink: 0; /* Sécurité anti-disparition */
}

/* Le reste du CSS reste identique à la V3, je le remets pour être complet */
.column-header { padding: 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.03); }
.column-title { font-weight: 700; font-size: 14px; color: var(--text-main); display: flex; align-items: center; gap: 8px; }
.column-count { background: rgba(0,0,0,0.05); padding: 2px 8px; border-radius: 12px; font-size: 11px; color: var(--text-muted); }
.kanban-body { padding: 12px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }

/* --- CARTES DEALS --- */
.deal-card { background: white; padding: 16px; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.02); border: 1px solid #EAEAEA; cursor: grab; transition: transform 0.2s, box-shadow 0.2s; position: relative; }
.deal-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); border-color: var(--accent); }
.deal-card:active { cursor: grabbing; }
.deal-tags { display: flex; gap: 6px; margin-bottom: 10px; }
.tag { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; }
.tag-web { background: #E1F0FF; color: #0071E3; } .tag-ads { background: #E1FFEB; color: #007030; } .tag-studio { background: #FFE5E5; color: #D32F2F; }
.deal-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; line-height: 1.4; }
.deal-client { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.deal-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid #F5F5F7; }
.deal-value { font-weight: 700; font-size: 14px; }
.deal-footer-right { display: flex; align-items: center; gap: 10px; }

/* --- AI SCORE & ASSIGNEES --- */
.ai-score { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 20px; background: linear-gradient(135deg, #F4E1FF 0%, #FFFFFF 100%); color: #AF52DE; border: 1px solid #E9D5FF; transition: 0.3s; }
.assignee-stack { display: flex; align-items: center; margin-right: 5px; }
.deal-assignee { width: 26px; height: 26px; border-radius: 50%; background: #F0F0F0; border: 2px solid white; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: white; cursor: pointer; transition: transform 0.2s; margin-left: -8px; position: relative; }
.deal-assignee:first-child { margin-left: 0; }
.deal-assignee:hover { transform: translateY(-3px); z-index: 10; }
.btn-add-assignee { width: 26px; height: 26px; border-radius: 50%; background: #F5F5F7; border: 1px dashed #CCC; display: flex; align-items: center; justify-content: center; color: #888; cursor: pointer; font-size: 14px; margin-left: -5px; z-index: 0; transition: 0.2s; }
.btn-add-assignee:hover { background: #E1F0FF; color: var(--accent); border-color: var(--accent); }
.av-k { background: #f43f5e; } .av-s { background: #10b981; } .av-t { background: #3b82f6; }

/* --- STATS BAR --- */
.pipeline-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 20px; }
.stat-mini-card { background: white; padding: 15px 20px; border-radius: 14px; border: 1px solid #E5E5E5; display: flex; align-items: center; gap: 15px; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.stat-mini-card:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); border-color: var(--accent); }
.stat-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bg-blue-light { background: #E1F0FF; color: #0071E3; } .bg-purple-light { background: #F4E1FF; color: #AF52DE; } .bg-green-light { background: #E1FFEB; color: #007030; } .bg-orange-light { background: #FFF4E5; color: #F59E0B; }
.stat-content { display: flex; flex-direction: column; }
.stat-label { font-size: 12px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.stat-number { font-size: 20px; font-weight: 700; color: var(--text-main); margin-top: 2px; }

/* --- POPUP & TOAST --- */
.user-selector-popup { display: none; position: absolute; background: white; border: 1px solid #E5E5E5; border-radius: 12px; padding: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); z-index: 100; width: 160px; animation: fadeIn 0.2s; }
.user-option { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; transition: 0.2s; }
.user-option:hover { background: #F5F5F7; }
.deal-list-item { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-bottom: 1px solid #F5F5F7; transition: 0.2s; } .deal-list-item:hover { background: #FAFAFA; border-radius: 8px; } .deal-info h4 { margin: 0; font-size: 14px; color: var(--text-main); } .deal-info p { margin: 2px 0 0 0; font-size: 12px; color: var(--text-muted); } .deal-amount { font-weight: 700; font-size: 14px; }
.toast-container { position: fixed; bottom: 30px; right: 30px; display: flex; flex-direction: column; gap: 10px; z-index: 2000; pointer-events: none; }
.toast { background: white; border-left: 4px solid var(--accent); padding: 16px 20px; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 15px; width: 320px; animation: slideInRight 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); pointer-events: auto; }
.toast-icon { width: 32px; height: 32px; background: #E1F0FF; border-radius: 50%; color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.toast-content h4 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-main); } .toast-content p { margin: 2px 0 0 0; font-size: 12px; color: var(--text-muted); }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes fadeOut { to { opacity: 0; transform: translateY(10px); } }