/* ─── ALISRAEL PRIVATE FINANCE — Dashboard réel (Phase B3) ──────────────────
   Peuple #crm-view-accueil (coquille CRM Phase B1/B2). Scopé intégralement
   sous .apf-dash — ne redéfinit AUCUNE règle de checkup.css/crm-shell.css,
   ne touche à rien hors de ce conteneur. Réutilise les variables CSS déjà
   posées sur .crm-shell (--crm-primary, --crm-ink, --crm-border, etc. —
   voir assets/css/crm-shell.css) : ce fichier ne les redéfinit jamais,
   seulement les lit, en restant un enfant DOM de .crm-shell. ─────────────── */

/* Largeur (retour utilisateur réel, même cause/correctif que le Cockpit
   vert) : 1280px laissait de grandes marges inutilisées sur un écran
   large. Remplacé par une marge fixe (padding) plutôt qu'un plafond de
   largeur — la 3ᵉ colonne (cartes bancaires) absorbe l'espace libéré. */
.apf-dash{ padding: 1.75rem; display:flex; flex-direction:column; gap:1.25rem; }
.apf-dash *{ box-sizing: border-box; }

.apf-dash-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.apf-dash-head h2{ font-size:1.25rem; font-weight:700; letter-spacing:-.01em; margin:0; color: var(--crm-ink, #0F172A); }
.apf-dash-refresh{
  background: var(--crm-card, #fff); border:1px solid var(--crm-border, #E4ECFC);
  color: var(--crm-primary-deep, #1D4ED8); font-size:.78rem; font-weight:600;
  border-radius: var(--crm-radius-sm, 10px); padding:.5rem .85rem; cursor:pointer;
}
.apf-dash-refresh:hover{ background: var(--crm-primary-tint, #EFF4FE); }

/* ── Chargement / erreur ─────────────────────────────────────────────────── */
.apf-dash-loading{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.75rem; padding:3rem 1rem; color: var(--crm-ink-faint, #94A3B8); }
.apf-dash-spinner{
  width:28px; height:28px; border-radius:50%; border:3px solid var(--crm-border, #E4ECFC);
  border-top-color: var(--crm-primary, #2563EB); animation: apf-dash-spin .8s linear infinite;
}
@keyframes apf-dash-spin{ to{ transform: rotate(360deg); } }

.apf-dash-error{
  background:#FEF2F2; border:1px solid #FECACA; border-radius: var(--crm-radius, 16px);
  padding:1.25rem 1.5rem; color:#991B1B; display:flex; flex-direction:column; gap:.6rem; max-width:560px;
}
.apf-dash-error strong{ font-size:.95rem; }
.apf-dash-error p{ margin:0; font-size:.85rem; }
.apf-dash-retry{
  align-self:flex-start; background:#fff; border:1px solid #FCA5A5; color:#991B1B;
  font-weight:600; font-size:.8rem; border-radius:8px; padding:.45rem .9rem; cursor:pointer;
}

/* ── Cartes KPI ───────────────────────────────────────────────────────────── */
.apf-kpi-row{ display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem; }
.apf-kpi-card{
  background: var(--crm-card, #fff); border:1px solid var(--crm-border, #E4ECFC);
  border-radius: var(--crm-radius, 16px); padding:1.1rem 1.2rem; display:flex; gap:.85rem; align-items:flex-start;
}
.apf-kpi-icon{
  width:38px; height:38px; flex-shrink:0; border-radius:10px; background: var(--crm-primary-tint, #EFF4FE);
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}
.apf-kpi-value{ font-size:1.5rem; font-weight:700; letter-spacing:-.02em; color: var(--crm-ink, #0F172A); line-height:1.1; }
.apf-kpi-label{ font-size:.78rem; font-weight:600; color: var(--crm-ink-soft, #475569); margin-top:.15rem; }
.apf-kpi-hint{ font-size:.68rem; color: var(--crm-ink-faint, #94A3B8); margin-top:.1rem; }

/* ── Disposition générale : colonne principale (modules existants,
   inchangés) + 3ᵉ colonne latérale (cartes bancaires, nouvelle) ────────── */
.apf-dash-maingrid{ display:grid; grid-template-columns: 1fr 320px; gap:1.25rem; align-items:start; }
.apf-dash-col-main{ display:flex; flex-direction:column; gap:1rem; min-width:0; }
.apf-dash-col-side{ display:flex; flex-direction:column; gap:1rem; min-width:0; }

/* ── Grille 2 colonnes pour les blocs de la colonne principale ───────────── */
.apf-dash-grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap:1rem; align-items:stretch; }

.apf-dash-card{
  background: var(--crm-card, #fff); border:1px solid var(--crm-border, #E4ECFC);
  border-radius: var(--crm-radius, 16px); padding:1.25rem 1.4rem; display:flex; flex-direction:column; gap:.75rem;
  /* Item de grille (.apf-dash-grid) : sans ceci, min-width:auto par défaut
     laisse le contenu non-sécable (libellés/valeurs en white-space:nowrap
     du graphique mensuel) forcer la piste de grille — donc la carte, donc
     la page — plus large que le viewport sur mobile (débordement constaté
     à la vérification croisée de l'intégration B3+C1/C2). */
  min-width: 0;
}
.apf-dash-card h3{ font-size:.92rem; font-weight:700; margin:0; color: var(--crm-ink, #0F172A); }
.apf-dash-note{ font-size:.72rem; color: var(--crm-ink-faint, #94A3B8); margin:0; line-height:1.45; }
.apf-dash-note--warn{ color:#B45309; }
.apf-dash-empty{ font-size:.82rem; color: var(--crm-ink-faint, #94A3B8); margin:.25rem 0; }

/* ── Graphique mensuel (barres maison, sans dépendance externe) ─────────── */
.apf-chart{ display:flex; align-items:flex-end; gap:.6rem; height:170px; padding-top:.5rem; min-width:0; }
.apf-chart-col{ flex:1; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; gap:.3rem; min-width:0; }
.apf-chart-value{ font-size:.66rem; font-weight:700; color: var(--crm-ink-soft, #475569); white-space:nowrap; }
.apf-chart-bar-wrap{ width:100%; flex:1; display:flex; align-items:flex-end; }
.apf-chart-bar{ width:100%; background: linear-gradient(180deg, var(--crm-primary, #2563EB), var(--crm-primary-deep, #1D4ED8)); border-radius:6px 6px 2px 2px; min-height:2px; transition: height .3s ease; }
.apf-chart-label{ font-size:.62rem; font-weight:600; color: var(--crm-ink-faint, #94A3B8); text-transform:uppercase; letter-spacing:.02em; white-space:nowrap; }
.apf-chart-bar-excl{ font-size:.58rem; color:#B45309; white-space:nowrap; }

/* ── Entonnoir 7 phases ───────────────────────────────────────────────────── */
.apf-funnel{ display:flex; flex-direction:column; gap:.55rem; }
.apf-funnel-row{ display:grid; grid-template-columns: 108px 1fr 90px; align-items:center; gap:.6rem; }
.apf-funnel-label{ font-size:.74rem; font-weight:600; color: var(--crm-ink-soft, #475569); }
.apf-funnel-bar-wrap{ background: var(--crm-muted, #F1F5FD); border-radius:999px; height:10px; overflow:hidden; }
.apf-funnel-bar{ height:100%; background: var(--crm-primary, #2563EB); border-radius:999px; transition: width .3s ease; }
.apf-funnel-count{ font-size:.68rem; font-weight:700; color: var(--crm-ink, #0F172A); text-align:right; white-space:nowrap; }

/* ── Cartes bancaires (colonne latérale, ~320px) — même composant que
   l'entonnoir (.apf-funnel/.apf-funnel-row), colonnes resserrées pour
   tenir dans une carte plus étroite : nom de banque tronqué proprement
   (ellipsis) plutôt que de déborder ou de forcer la largeur de la carte. */
.apf-dash-card--banks .apf-funnel-row{ grid-template-columns: 84px 1fr 76px; }
.apf-dash-card--banks .apf-funnel-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.apf-dash-card--banks .apf-funnel-count{ font-size:.64rem; }

/* ── Tâches prioritaires ──────────────────────────────────────────────────── */
.apf-task-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.apf-task-row{ display:flex; align-items:center; gap:.6rem; padding:.5rem .6rem; border-radius: var(--crm-radius-sm, 10px); background: var(--crm-bg, #F8FAFC); }
.apf-task-title{ flex:1; font-size:.8rem; font-weight:600; color: var(--crm-ink, #0F172A); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.apf-task-due{ font-size:.68rem; color: var(--crm-ink-faint, #94A3B8); white-space:nowrap; }
.apf-task-prio{ font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:.18rem .5rem; border-radius:999px; flex-shrink:0; }
.apf-task-prio--urgent{ background:#FEE2E2; color:#B91C1C; }
.apf-task-prio--haute{ background:#FEF3C7; color:#92400E; }
.apf-task-prio--normale{ background: var(--crm-primary-tint, #EFF4FE); color: var(--crm-primary-deep, #1D4ED8); }
.apf-task-prio--faible{ background: var(--crm-muted, #F1F5FD); color: var(--crm-ink-soft, #475569); }

/* ── Tableau des dossiers récents ─────────────────────────────────────────── */
.apf-dossier-table{ width:100%; border-collapse:collapse; font-size:.78rem; }
.apf-dossier-table th{ text-align:left; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color: var(--crm-ink-faint, #94A3B8); padding:.4rem .5rem; border-bottom:1px solid var(--crm-border, #E4ECFC); }
.apf-dossier-table td{ padding:.55rem .5rem; border-bottom:1px solid var(--crm-border, #E4ECFC); color: var(--crm-ink, #0F172A); }
.apf-dossier-row{ cursor:pointer; }
.apf-dossier-row:hover{ background: var(--crm-muted, #F1F5FD); }
.apf-dossier-row:focus-visible{ outline:2px solid var(--crm-primary, #2563EB); outline-offset:-2px; }

.apf-statut-badge{ font-size:.64rem; font-weight:700; padding:.18rem .55rem; border-radius:999px; white-space:nowrap; background: var(--crm-muted, #F1F5FD); color: var(--crm-ink-soft, #475569); }
.apf-statut-badge--en-cours{ background:#DBEAFE; color:#1D4ED8; }
.apf-statut-badge--attente{ background:#FEF3C7; color:#92400E; }
.apf-statut-badge--bloque{ background:#FEE2E2; color:#B91C1C; }
.apf-statut-badge--premier-deblocage{ background:#DCFCE7; color:#166534; }
.apf-statut-badge--termine{ background:#E5E7EB; color:#374151; }
.apf-statut-badge--a-faire{ background: var(--crm-muted, #F1F5FD); color: var(--crm-ink-soft, #475569); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
/* En dessous de 1300px, la 3ᵉ colonne (320px fixes) ne laisse plus assez
   de place à la colonne principale : on repasse en empilement vertical
   (cartes bancaires après les modules existants, jamais à côté). */
@media (max-width: 1300px){
  .apf-dash-maingrid{ grid-template-columns: 1fr; }
  .apf-dash-col-side{ flex-direction:row; flex-wrap:wrap; }
  .apf-dash-col-side .apf-dash-card{ flex:1 1 320px; }
}
@media (max-width: 1100px){
  .apf-kpi-row{ grid-template-columns: repeat(2, 1fr); }
  .apf-dash-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 700px){
  .apf-dash-col-side{ flex-direction:column; }
}
@media (max-width: 560px){
  .apf-dash{ padding:1.1rem; }
  .apf-kpi-row{ grid-template-columns: 1fr; }
  .apf-funnel-row{ grid-template-columns: 90px 1fr 70px; }
  .apf-dash-card--banks .apf-funnel-row{ grid-template-columns: 80px 1fr 64px; }
}