/* ============================================================
   Arc CRM — Couche UX/UI premium (animations, micro-interactions)
   Additive : n'altère aucune logique existante. Tout est dégradable
   et respecte prefers-reduced-motion.
   Marque : primary #39B54A · secondary #0b1029 · accent #06b6d4
   ============================================================ */

:root{
  --ux-ease: cubic-bezier(.22,1,.36,1);
  --ux-ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ux-grad: linear-gradient(135deg,#39B54A 0%,#06b6d4 100%);
  --ux-grad-dark: linear-gradient(135deg,#0b1029 0%,#1e293b 100%);
  --ux-shadow-soft: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.18);
  --ux-shadow-lift: 0 12px 32px -8px rgba(11,16,41,.22), 0 4px 12px -6px rgba(11,16,41,.14);
  --ux-glow: 0 0 0 3px rgba(57,181,74,.15);
}

/* ── Réglages globaux de confort ─────────────────────────── */
html{ scroll-behavior:smooth; }
::selection{ background:rgba(57,181,74,.22); }
*{ -webkit-tap-highlight-color: transparent; }

/* Scrollbar premium (override doux d'app.css) */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:linear-gradient(#cbd5e1,#94a3b8); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(#94a3b8,#64748b); background-clip:padding-box; }

/* Focus ring de marque (accessibilité + style) */
input:focus, select:focus, textarea:focus{
  box-shadow: var(--ux-glow);
  border-color:#39B54A !important;
  transition: box-shadow .2s var(--ux-ease), border-color .2s var(--ux-ease);
}

/* ── Entrée de page (le <main> apparaît en douceur) ──────── */
/* Opacité seule : pas de transform, pour ne jamais devenir le bloc
   conteneur des modales `position:fixed` rendues à l'intérieur de <main>. */
@keyframes uxPageIn{ from{opacity:0;} to{opacity:1;} }
main{ animation: uxPageIn .45s var(--ux-ease) both; }

/* ── Révélation au défilement (cartes) ───────────────────── */
/* L'état masqué est ajouté par JS : sans JS, tout reste visible. */
.ux-reveal{ opacity:0; transform:translateY(16px);
  transition: opacity .55s var(--ux-ease) var(--ux-delay,0ms),
              transform .55s var(--ux-ease) var(--ux-delay,0ms); }
.ux-reveal.ux-in{ opacity:1; transform:none; }

/* ── Cartes : survol qui « soulève » ─────────────────────── */
main .bg-white.rounded-xl,
main .bg-white.rounded-2xl{
  transition: box-shadow .3s var(--ux-ease), transform .3s var(--ux-ease);
}
main .bg-white.rounded-xl:hover,
main .bg-white.rounded-2xl:hover{
  box-shadow: var(--ux-shadow-lift);
  transform: translateY(-3px);
}

/* ── Boutons : lift + pression + brillance sur primary ───── */
button, a.inline-flex, .btn{
  transition: transform .18s var(--ux-ease), box-shadow .25s var(--ux-ease), filter .2s var(--ux-ease);
}
button:not(:disabled):hover, a.inline-flex:hover, .btn:hover{ transform: translateY(-1px); }
button:not(:disabled):active, a.inline-flex:active, .btn:active{ transform: translateY(0) scale(.97); }
button:disabled{ cursor: not-allowed; }

/* Brillance qui traverse les boutons d'action primaires/secondaires */
button.bg-primary, a.bg-primary, button.bg-secondary, a.bg-secondary,
button.bg-accent, a.bg-accent{
  position: relative; overflow: hidden;
}
button.bg-primary::after, a.bg-primary::after,
button.bg-secondary::after, a.bg-secondary::after,
button.bg-accent::after, a.bg-accent::after{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg); transition:left .6s var(--ux-ease); pointer-events:none;
}
button.bg-primary:hover::after, a.bg-primary:hover::after,
button.bg-secondary:hover::after, a.bg-secondary:hover::after,
button.bg-accent:hover::after, a.bg-accent:hover::after{ left:140%; }

/* Effet d'encre (ripple) injecté par ux.js */
.ux-ripple-ink{
  position:absolute; border-radius:50%; transform:scale(0);
  background:rgba(255,255,255,.45); pointer-events:none;
  animation: uxRipple .6s var(--ux-ease) forwards; mix-blend-mode:overlay;
}
@keyframes uxRipple{ to{ transform:scale(2.6); opacity:0; } }

/* ── Barre supérieure : ombre à l'apparition au scroll ───── */
header.sticky{ transition: box-shadow .3s var(--ux-ease), backdrop-filter .3s; }
header.sticky.ux-scrolled{
  box-shadow: 0 4px 20px -8px rgba(11,16,41,.25);
  backdrop-filter: saturate(1.4) blur(6px);
  background: rgba(255,255,255,.85);
}

/* ── Sidebar : entrée échelonnée + survol qui glisse ─────── */
#sidebar nav a{ transition: background-color .2s var(--ux-ease), padding-left .2s var(--ux-ease), color .2s; position:relative; }
#sidebar nav a:hover{ background:rgba(255,255,255,.06); padding-left:1.4rem; }
#sidebar nav a::before{
  content:""; position:absolute; left:0; top:18%; bottom:18%; width:3px; border-radius:0 3px 3px 0;
  background:#39B54A; transform:scaleY(0); transform-origin:center; transition:transform .25s var(--ux-ease-spring);
}
#sidebar nav a:hover::before{ transform:scaleY(1); }

@keyframes uxNavIn{ from{opacity:0; transform:translateX(-12px);} to{opacity:1; transform:none;} }
#sidebar nav a{ animation: uxNavIn .4s var(--ux-ease) both; }
#sidebar nav a:nth-child(1){animation-delay:.02s} #sidebar nav a:nth-child(2){animation-delay:.05s}
#sidebar nav a:nth-child(3){animation-delay:.08s} #sidebar nav a:nth-child(4){animation-delay:.11s}
#sidebar nav a:nth-child(5){animation-delay:.14s} #sidebar nav a:nth-child(6){animation-delay:.17s}
#sidebar nav a:nth-child(7){animation-delay:.20s} #sidebar nav a:nth-child(8){animation-delay:.23s}
#sidebar nav a:nth-child(n+9){animation-delay:.26s}

/* Logo de marque : léger halo pulsé */
#sidebar .bg-primary.rounded-lg{ box-shadow:0 0 0 0 rgba(57,181,74,.5); animation: uxLogoGlow 3.2s ease-in-out infinite; }
@keyframes uxLogoGlow{ 0%,100%{ box-shadow:0 0 0 0 rgba(57,181,74,.45);} 50%{ box-shadow:0 0 0 8px rgba(57,181,74,0);} }

/* Icônes header : petit zoom au survol */
header a > i.fas, header button > i.fas{ transition: transform .2s var(--ux-ease-spring); }
header a:hover > i.fas, header button:hover > i.fas{ transform: scale(1.18); }

/* Badges (cloche / messagerie) : anneau + apparition ressort */
#notifBadge, #msgBadge{ box-shadow:0 0 0 2px #fff; animation: uxBadgePop .35s var(--ux-ease-spring); }
@keyframes uxBadgePop{ from{ transform:scale(0);} to{ transform:scale(1);} }

/* ── Avatar header : anneau dégradé au survol ────────────── */
header .rounded-full{ transition: transform .2s var(--ux-ease); }
header button:hover .rounded-full{ transform: scale(1.05); }

/* ── Dropdowns header : apparition fluide ────────────────── */
header .absolute.rounded-lg, header .absolute.shadow-lg{
  animation: uxDropIn .18s var(--ux-ease) both; transform-origin: top right;
}
@keyframes uxDropIn{ from{opacity:0; transform:translateY(-6px) scale(.97);} to{opacity:1; transform:none;} }

/* ── Modale de confirmation : pop + fond fondu ───────────── */
#confirmModal:not(.hidden){ animation: uxFadeIn .22s ease both; }
#confirmModal:not(.hidden) > div{ animation: uxModalPop .42s var(--ux-ease-spring) both; }
@keyframes uxFadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes uxModalPop{ from{opacity:0; transform:translateY(18px) scale(.92);} to{opacity:1; transform:none;} }
.ux-modal-card{ animation: uxModalPop .42s var(--ux-ease-spring) both; }

/* ── Flash serveur : entrée glissée ──────────────────────── */
.ux-flash-in{ animation: uxFlashIn .5s var(--ux-ease-spring) both; }
@keyframes uxFlashIn{ from{opacity:0; transform:translateY(-14px);} to{opacity:1; transform:none;} }

/* ── Toast premium (override JS de showToast) ────────────── */
#toastContainer{ gap:.6rem; }
.ux-toast{
  --bar:#39B54A;
  display:flex; align-items:flex-start; gap:.7rem; position:relative;
  min-width:280px; max-width:380px; padding:.85rem 2.4rem .85rem .85rem;
  border-radius:14px; overflow:hidden;
  color:#0f172a; background:rgba(255,255,255,.86);
  backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: 0 10px 30px -8px rgba(11,16,41,.35), 0 2px 8px rgba(0,0,0,.08);
  border:1px solid rgba(255,255,255,.6); border-left:4px solid var(--bar);
  opacity:0; transform:translateX(115%);
  transition: opacity .35s var(--ux-ease), transform .45s var(--ux-ease-spring);
}
.ux-toast.ux-toast--in{ opacity:1; transform:none; }
.ux-toast.ux-toast--out{ opacity:0; transform:translateX(115%); }
.ux-toast__icon{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:15px; background:var(--bar);
  box-shadow:0 4px 12px -3px var(--bar);
}
.ux-toast__body{ flex:1; padding-top:2px; }
.ux-toast__msg{ font-size:13.5px; line-height:1.45; font-weight:500; }
.ux-toast__close{
  position:absolute; top:8px; right:10px; color:#94a3b8; font-size:12px;
  background:none; border:none; cursor:pointer; transition:color .15s, transform .15s;
}
.ux-toast__close:hover{ color:#0f172a; transform:rotate(90deg); }
.ux-toast__bar{ position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--bar); opacity:.8; }
.ux-toast--success{ --bar:#16a34a; } .ux-toast--success .ux-toast__icon{ background:linear-gradient(135deg,#22c55e,#15803d);}
.ux-toast--error{   --bar:#dc2626; } .ux-toast--error .ux-toast__icon{   background:linear-gradient(135deg,#ef4444,#b91c1c);}
.ux-toast--warning{ --bar:#d97706; } .ux-toast--warning .ux-toast__icon{ background:linear-gradient(135deg,#f59e0b,#b45309);}
.ux-toast--info{    --bar:#0b1029; } .ux-toast--info .ux-toast__icon{    background:var(--ux-grad-dark);}

/* ── Barre de progression de navigation (haut d'écran) ───── */
#uxProgress{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:100000;
  background:linear-gradient(90deg,#39B54A,#06b6d4,#39B54A);
  box-shadow:0 0 12px rgba(6,182,212,.7); opacity:0;
  transition: width .2s var(--ux-ease), opacity .3s; border-radius:0 3px 3px 0;
}

/* ── Skeleton shimmer (utilitaire pour chargements) ──────── */
.ux-skeleton{
  background:linear-gradient(100deg,#eef2f7 30%,#e2e8f0 50%,#eef2f7 70%);
  background-size:200% 100%; animation: uxShimmer 1.3s infinite; border-radius:8px;
}
@keyframes uxShimmer{ from{background-position:200% 0;} to{background-position:-200% 0;} }

/* ── Tooltip léger (data-tip) ────────────────────────────── */
[data-tip]{ position:relative; }
[data-tip]:hover::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:#0b1029; color:#fff; font-size:11px; white-space:nowrap; padding:5px 9px; border-radius:7px;
  box-shadow:0 6px 18px -6px rgba(11,16,41,.5); z-index:60; animation: uxDropIn .15s var(--ux-ease) both; pointer-events:none;
}

/* ── Confettis (canvas plein écran, non interactif) ──────── */
#uxConfetti{ position:fixed; inset:0; pointer-events:none; z-index:99999; }

/* ── Pastille « live » & utilitaires d'apparition ────────── */
.ux-fade-in{ animation: uxFadeIn .4s var(--ux-ease) both; }
.ux-pop{ animation: uxModalPop .4s var(--ux-ease-spring) both; }

/* ── Aurore animée (fond de connexion) ───────────────────── */
.ux-aurora{ position:fixed; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.ux-aurora span{
  position:absolute; display:block; border-radius:50%;
  filter:blur(70px); opacity:.45; will-change:transform;
}
.ux-aurora span:nth-child(1){ width:42vw; height:42vw; left:-8vw; top:-10vw;  background:#39B54A; animation:uxFloat1 17s ease-in-out infinite; }
.ux-aurora span:nth-child(2){ width:38vw; height:38vw; right:-6vw; top:8vh;   background:#06b6d4; animation:uxFloat2 21s ease-in-out infinite; }
.ux-aurora span:nth-child(3){ width:34vw; height:34vw; left:18vw; bottom:-14vw; background:#6366f1; opacity:.32; animation:uxFloat3 19s ease-in-out infinite; }
@keyframes uxFloat1{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(6vw,4vh) scale(1.12);} }
@keyframes uxFloat2{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-5vw,6vh) scale(1.08);} }
@keyframes uxFloat3{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(4vw,-6vh) scale(1.15);} }
.ux-auth-card{ animation: uxModalPop .6s var(--ux-ease-spring) both; }
@media (prefers-reduced-motion: reduce){ .ux-aurora span{ animation:none !important; } }

/* ── Respect de l'accessibilité (mouvement réduit) ───────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .ux-reveal{ opacity:1 !important; transform:none !important; }
  main{ animation:none !important; }
}

/* ── Popups / modales : jamais plus grandes que l'écran ────────────────────
   Toute modale centrée (overlay .fixed.inset-0 + .justify-center) voit son
   panneau blanc borné à la hauteur du viewport, avec défilement interne si le
   contenu (formulaire long) dépasse. Évite qu'un formulaire soit coupé hors
   écran, boutons compris. L'overlay latéral mobile (sans justify-center) n'est
   pas affecté. */
.fixed.inset-0.justify-center > .bg-white,
.fixed.inset-0.justify-center > form.bg-white {
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ── Images importées dans les rapports (graphiques / diagrammes) ──────────
   Responsives partout : édition (éditeur riche) ET pages d'affichage seul du
   rapport (qui ne chargent pas le partial éditeur). */
.rapport-content img, .rich-editor img { max-width: 100%; height: auto; }

/* ── Rendu du contenu des rapports HORS éditeur (modales, pages de lecture) ──
   Les styles .rapport-content vivaient seulement dans le partial éditeur (chargé
   sur les pages d'édition). Ici on les rend disponibles partout : tableaux,
   titres, listes, citations s'affichent correctement en lecture seule. */
.rapport-content { font-family: Arial, sans-serif; line-height: 1.75; color: #374151; }
.rapport-content table { border-collapse: collapse; width: 100%; margin: .5rem 0; }
.rapport-content td, .rapport-content th { border: 1px solid #d1d5db; padding: 5px 9px; }
.rapport-content th { background: #f3f4f6; font-weight: 600; }
.rapport-content tr:nth-child(even) td { background: #f9fafb; }
.rapport-content ul { list-style: disc; padding-left: 1.5rem; margin: .4rem 0; }
.rapport-content ol { list-style: decimal; padding-left: 1.5rem; margin: .4rem 0; }
.rapport-content p { margin-bottom: .4rem; }
.rapport-content h1 { font-size: 1.3rem; font-weight: 700; margin: .75rem 0 .25rem; }
.rapport-content h2 { font-size: 1.1rem; font-weight: 700; margin: .6rem 0 .25rem; }
.rapport-content h3 { font-size: 1rem;   font-weight: 700; margin: .5rem 0 .2rem; }
.rapport-content blockquote { border-left: 3px solid #39B54A; padding-left: .75rem; color: #6b7280; margin: .5rem 0; }