/* Aglcongo PAY — feuille de style applicative (bleu bic / blanc / rouge) */
:root{
  --agl-blue:#1d4ed8;
  --agl-blue-dark:#1e3a8a;
  --agl-red:#dc2626;
}
*{-webkit-font-smoothing:antialiased}
body{font-family:'Inter',system-ui,sans-serif}

/* Scrollbar */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px}
.dark ::-webkit-scrollbar-thumb{background:#334155}

/* Transitions douces façon Next.js */
.page-enter{animation:fadeUp .35s cubic-bezier(.22,1,.36,1) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.agl-card{ @apply bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl; }

/* Toasts */
#toast-zone{position:fixed;top:18px;right:18px;z-index:9999;display:flex;flex-direction:column;gap:10px}
.toast{display:flex;gap:10px;align-items:flex-start;min-width:280px;max-width:380px;padding:13px 15px;border-radius:14px;
  background:#fff;border:1px solid #e2e8f0;box-shadow:0 18px 40px rgba(15,23,42,.16);animation:slideIn .3s cubic-bezier(.22,1,.36,1)}
.dark .toast{background:#0f172a;border-color:#1e293b;color:#e2e8f0}
.toast.out{animation:slideOut .25s ease forwards}
.toast-success{border-left:4px solid #059669}
.toast-error{border-left:4px solid var(--agl-red)}
.toast-info{border-left:4px solid var(--agl-blue)}
.toast-warning{border-left:4px solid #d97706}
@keyframes slideIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes slideOut{to{opacity:0;transform:translateX(30px)}}

/* Overlay de chargement */
#loader-overlay{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;
  background:rgba(15,23,42,.45);backdrop-filter:blur(4px)}
#loader-overlay.show{display:flex}
.spinner{width:54px;height:54px;border-radius:50%;border:4px solid rgba(255,255,255,.25);border-top-color:#fff;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Bouton chargement */
.btn-loading{position:relative;pointer-events:none;opacity:.75}
.btn-loading::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .8s linear infinite}
.btn-loading > *{visibility:hidden}

/* Skeleton */
.skel{background:linear-gradient(90deg,#eef2f7 25%,#e2e8f0 37%,#eef2f7 63%);background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:8px}
.dark .skel{background:linear-gradient(90deg,#1e293b 25%,#334155 37%,#1e293b 63%);background-size:400% 100%}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* Sidebar */
.nav-link{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;font-size:14px;font-weight:500;
  color:#475569;transition:.18s}
.dark .nav-link{color:#94a3b8}
.nav-link:hover{background:#eff6ff;color:var(--agl-blue)}
.dark .nav-link:hover{background:#1e293b;color:#93c5fd}
.nav-link.active{background:linear-gradient(135deg,var(--agl-blue),var(--agl-blue-dark));color:#fff;box-shadow:0 10px 22px rgba(29,78,216,.32)}
.dark .nav-link.active{color:#fff}

/* Steps onboarding */
.step-dot{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;
  background:#e2e8f0;color:#64748b;transition:.25s}
.step-dot.active{background:var(--agl-blue);color:#fff;box-shadow:0 8px 18px rgba(29,78,216,.35)}
.step-dot.done{background:#059669;color:#fff}
.step-pane{display:none}
.step-pane.active{display:block;animation:fadeUp .3s ease both}