/* ─── ALISRAEL PRIVATE FINANCE — Coquille CRM (sidebar + navigation) ──────────
   Phase B1/B2 — préparation du nouveau design validé :
   https://claude.ai/code/artifact/29dc7d2c-87a4-432d-a8ac-95d9844d978f

   Portée STRICTEMENT limitée à cette étape :
     - nouveau système graphique (tokens blanc/bleu/pastel) ;
     - sidebar + navigation 5 rubriques ;
     - recherche universelle (réutilise CU_STATE/cuApplyFilter existants).
   Ce fichier ne redéfinit AUCUNE règle de checkup.css — il n'ajoute qu'une
   enveloppe autour du contenu existant. Rien dans checkup.css/.cu-* n'est
   modifié ni dupliqué ici. Tout est scopé sous .crm-shell pour ne jamais
   déborder sur une autre page qui ne le chargerait pas.

   Les 4 rubriques Accueil/Clients/Tâches/Agenda sont des ESPACES RÉSERVÉS
   explicites (« Bientôt disponible ») — aucune donnée, fictive ou réelle,
   n'y est affichée avant leur raccordement (phases B3+, à autoriser
   séparément). La rubrique Dossiers contient l'intégralité du Check-up
   actuel, strictement inchangé. ───────────────────────────────────────── */

.crm-shell{
  --crm-bg:            #F8FAFC;
  --crm-card:          #FFFFFF;
  --crm-border:        #E4ECFC;
  --crm-muted:         #F1F5FD;
  --crm-ink:           #0F172A;
  --crm-ink-soft:      #475569;
  --crm-ink-faint:     #94A3B8;
  --crm-primary:       #2563EB;
  --crm-primary-deep:  #1D4ED8;
  --crm-primary-tint:  #EFF4FE;
  --crm-radius:        16px;
  --crm-radius-sm:     10px;

  display: grid;
  grid-template-columns: 236px 1fr;
  min-height: 100vh;
  background: var(--crm-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--crm-ink);
}
.crm-shell *{ box-sizing: border-box; }
.crm-shell button{ font-family: inherit; cursor: pointer; }

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.crm-sidebar{
  background: var(--crm-card);
  border-right: 1px solid var(--crm-border);
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.crm-brand{ display:flex; align-items:center; gap:.65rem; padding: 0 .4rem; }
.crm-brand-mark{
  width: 32px; height: 32px; border-radius: 9px; background: var(--crm-primary);
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-weight:700; font-size:.76rem; flex-shrink:0;
}
.crm-brand-name{ font-weight:700; font-size:.9rem; letter-spacing:-.01em; }
.crm-brand-name span{ display:block; font-size:.625rem; font-weight:500; color:var(--crm-ink-faint); letter-spacing:.08em; margin-top:1px; }

.crm-nav{ display:flex; flex-direction:column; gap:.2rem; }
.crm-nav-item{
  display:flex; align-items:center; gap:.75rem; padding:.65rem .75rem;
  border-radius: var(--crm-radius-sm); color: var(--crm-ink-soft);
  background:none; border:none; font-size:.85rem; font-weight:600; text-align:left; width:100%;
}
.crm-nav-item svg{ flex-shrink:0; stroke: var(--crm-ink-faint); }
.crm-nav-item:hover{ background: var(--crm-muted); }
.crm-nav-item.crm-nav-item--active{ background: var(--crm-primary-tint); color: var(--crm-primary-deep); }
.crm-nav-item.crm-nav-item--active svg{ stroke: var(--crm-primary-deep); }
.crm-nav-item--soon{ position: relative; }
.crm-nav-item--soon .crm-nav-soon-tag{
  margin-left:auto; font-size:.58rem; font-weight:700; letter-spacing:.03em;
  color: var(--crm-ink-faint); background: var(--crm-muted); border-radius:999px; padding:1px 6px;
  text-transform: uppercase; flex-shrink:0;
}

.crm-sidebar-foot{ margin-top:auto; padding:.9rem .4rem 0; border-top:1px solid var(--crm-border); display:flex; flex-direction:column; gap:.75rem; }
.crm-cockpit-link{ display:flex; align-items:center; gap:.5rem; font-size:.78rem; font-weight:600; color: var(--crm-ink-soft); text-decoration:none; padding:.3rem .35rem; }
.crm-cockpit-link:hover{ color: var(--crm-primary-deep); }

/* ── Zone principale ─────────────────────────────────────────────────── */
.crm-shell-main{ min-width:0; }

.crm-topbar{
  background: var(--crm-card);
  border-bottom: 1px solid var(--crm-border);
  padding: 0 1.75rem;
  height: 64px;
  display:flex; align-items:center; gap:1.25rem;
  position: sticky; top: 0; z-index: 20;
}
.crm-topbar-title{ font-size:1.05rem; font-weight:700; letter-spacing:-.01em; margin-right:auto; flex-shrink:0; }
.crm-search-wrap{ position:relative; flex:1; min-width:180px; max-width:420px; }
.crm-search{
  display:flex; align-items:center; gap:.6rem; background: var(--crm-bg);
  border:1px solid var(--crm-border); border-radius: var(--crm-radius-sm); padding:.55rem .85rem;
}
.crm-search:focus-within{ border-color: var(--crm-primary); background: var(--crm-card); }
.crm-search svg{ stroke: var(--crm-ink-faint); flex-shrink:0; }
.crm-search input{ border:none; outline:none; background:none; font-size:.82rem; width:100%; color: var(--crm-ink); font-family:inherit; }
.crm-search-hint{ font-size:.68rem; color: var(--crm-ink-faint); flex-shrink:0; white-space:nowrap; }

/* ── Vues (une seule visible à la fois) ──────────────────────────────── */
.crm-view{ display:none; }
.crm-view.crm-view--active{ display:block; }

/* La vue "Dossiers" encapsule l'intégralité du Check-up existant, non
   modifié — seule la largeur disponible change (colonne de droite de la
   grille au lieu de la pleine largeur). */
.crm-view--dossiers{ min-height: calc(100vh - 64px); }

/* ── Espaces réservés (Accueil / Clients / Tâches / Agenda) ─────────────
   Explicitement "Bientôt disponible" — jamais de chiffre, jamais de
   donnée fictive présentée comme réelle, tant que le raccordement (phase
   B3+) n'a pas été autorisé séparément. */
.crm-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:.6rem; min-height: calc(100vh - 64px); padding: 2rem;
}
.crm-placeholder-icon{
  width:52px; height:52px; border-radius:14px; background: var(--crm-primary-tint);
  color: var(--crm-primary-deep); display:flex; align-items:center; justify-content:center;
}
.crm-placeholder h2{ font-size:1.05rem; margin:.5rem 0 0; color: var(--crm-ink); }
.crm-placeholder p{ font-size:.82rem; color: var(--crm-ink-faint); margin:0; max-width:360px; }

/* ── Responsive — sidebar repliée en icônes sous 900px, comme la maquette
   validée ────────────────────────────────────────────────────────────── */
@media (max-width: 900px){
  .crm-shell{ grid-template-columns: 72px 1fr; }
  .crm-nav-label, .crm-brand-name span, .crm-cockpit-label{ display:none; }
  .crm-nav-item--soon .crm-nav-soon-tag{ display:none; }
  .crm-sidebar-foot{ align-items:center; }
  .crm-topbar{ padding: 0 1rem; gap:.75rem; }
  .crm-topbar-title{ display:none; }
}
@media (max-width: 560px){
  .crm-search-hint{ display:none; }
}