/* ════════════════════════════════════════════════════════════════
   SWIFTO ERP — Manuel Utilisateur · Design System partagé
   Palette & composants alignés sur le template (devis-vente.html)
   Light + Dark mode
   ════════════════════════════════════════════════════════════════ */

:root {
    --brand-dark:  #5b4dee;
    --brand:       #5b4dee;
    --brand-mid:   #7366fe;
    --brand-light: #867bfe;
    --brand-pale:  #f3f1ff;
    --ink:         #14122b;
    --ink-soft:    #475569;
    --line:        #E2E8F0;
    --surface:     #FFFFFF;
    --bg:          #F8FAFC;
    --bg-soft:     #F1F5F9;
}

html.dark {
    --brand-pale:  #14233b;
    --ink:         #E2E8F0;
    --ink-soft:    #94A3B8;
    --line:        #243244;
    --surface:     #111B2E;
    --bg:          #0B1220;
    --bg-soft:     #16223a;
}

body { -webkit-font-smoothing: antialiased; background: var(--bg); }

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

/* ── Navigation (sidebar) ─────────────────────────────── */
.nav-item { transition: all .18s ease; color: var(--ink-soft); border-left: 2px solid transparent; }
.nav-item:hover { color: var(--brand-mid); background: var(--brand-pale); border-left-color: var(--brand-light); }
.nav-item.active { background: linear-gradient(90deg,#14122b 0%,#7366fe 100%); color:#fff !important; border-left:none; box-shadow:0 4px 12px rgba(37,99,235,.28); border-radius:8px; }
.nav-group-label { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#94A3B8; padding:14px 16px 4px; }
.nav-sub { color: var(--ink-soft); transition: all .15s ease; }
.nav-sub:hover { color: var(--brand-mid); background: var(--brand-pale); }

/* ── Section numbering badge ──────────────────────────── */
.sec-badge { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--brand-pale); color:var(--brand); font-weight:700; font-size:.8rem; border:1px solid #e9e6ff; flex-shrink:0; }
html.dark .sec-badge { border-color:#2b4a6e; color:#bcd4f5; }

/* ── Status badges ────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:4px; font-size:.7rem; font-weight:600; padding:2px 10px; border-radius:999px; }
.badge-brouillon  { background:#F1F5F9; color:#475569; border:1px solid #E2E8F0; }
.badge-opportunite{ background:#f3f1ff; color:#5b4dee; border:1px solid #e9e6ff; }
.badge-approuve   { background:#D1FAE5; color:#065F46; border:1px solid #A7F3D0; }
.badge-rejete     { background:#FEE2E2; color:#991B1B; border:1px solid #FECACA; }
.badge-modifie    { background:#FEF3C7; color:#92400E; border:1px solid #FDE68A; }
.badge-cloture    { background:#E5E7EB; color:#374151; border:1px solid #D1D5DB; }
.badge-soon       { background:#F5F3FF; color:#6D28D9; border:1px solid #DDD6FE; }

/* ── Alert boxes ──────────────────────────────────────── */
.alert { border-left:4px solid; border-radius:12px; padding:14px 18px; }
.alert-info    { background:#f3f1ff; border-color:#867bfe; }
.alert-warning { background:#FEF3C7; border-color:#F59E0B; }
.alert-danger  { background:#FEE2E2; border-color:#EF4444; }
.alert-success { background:#D1FAE5; border-color:#10B981; }
.alert-tip     { background:#F5F3FF; border-color:#8B5CF6; }
html.dark .alert-info    { background:#0e2038; }
html.dark .alert-warning { background:#2a2310; }
html.dark .alert-danger  { background:#2a1414; }
html.dark .alert-success { background:#0c241b; }
html.dark .alert-tip     { background:#1c1733; }

/* ── Buttons pill ─────────────────────────────────────── */
.btn-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; font-size:.75rem; font-weight:600; border:1px solid; }
.btn-primary  { background:#f3f1ff; color:#5b4dee; border-color:#e9e6ff; }
.btn-danger   { background:#FEE2E2; color:#B91C1C; border-color:#FECACA; }
.btn-success  { background:#D1FAE5; color:#065F46; border-color:#A7F3D0; }
.btn-warning  { background:#FEF3C7; color:#92400E; border-color:#FDE68A; }
.btn-neutral  { background:#F1F5F9; color:#475569; border-color:#E2E8F0; }

/* ── Tables ───────────────────────────────────────────── */
.doc-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.doc-table th { background:var(--bg-soft); color:#334155; font-weight:600; padding:10px 14px; text-align:left; border-bottom:2px solid var(--line); }
.doc-table td { padding:9px 14px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink-soft); }
.doc-table tr:last-child td { border-bottom:none; }
.doc-table tr:hover td { background:var(--bg); }
html.dark .doc-table th { color:#cbd5e1; }

/* ── Screen mockup ────────────────────────────────────── */
.screen-mockup { background:var(--bg); border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.06); }
.screen-bar { background:linear-gradient(90deg,#14122b,#7366fe); padding:8px 14px; display:flex; align-items:center; gap:8px; }
.screen-dot { width:9px; height:9px; border-radius:50%; }
.popup-mock { background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.15); overflow:hidden; }
.popup-header { background:linear-gradient(135deg,#14122b 0%,#7366fe 100%); padding:16px 20px; color:#fff; }

/* ── Cards & misc ─────────────────────────────────────── */
.surface-card { background:var(--surface); border:1px solid var(--line); border-radius:16px; }
.shadow-soft { box-shadow:0 4px 20px -2px rgba(26,60,94,.06); }
.shadow-card { box-shadow:0 10px 30px -5px rgba(26,60,94,.08); }
.rule-box { border:1.5px dashed #a9a2fb; background:var(--brand-pale); border-radius:10px; padding:14px 18px; }
.breadcrumb { font-size:.75rem; color:#94A3B8; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.gradient-text { background:linear-gradient(135deg,#5b4dee 0%,#7366fe 50%,#c0398f 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.step-card { position:relative; }
.step-connector::after { content:''; position:absolute; left:19px; top:42px; bottom:-16px; width:2px; background:var(--line); z-index:0; }

/* ── Module tiles (home) ──────────────────────────────── */
.module-tile { background:var(--surface); border:1px solid var(--line); border-radius:18px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.module-tile:hover { transform:translateY(-4px); box-shadow:0 18px 40px -12px rgba(26,60,94,.22); border-color:#e9e6ff; }
.module-icn { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.15rem; color:#fff; }

/* ── Search ───────────────────────────────────────────── */
.search-result mark { background:#FEF08A; color:#713F12; padding:0 2px; border-radius:3px; }
html.dark .search-result mark { background:#854d0e; color:#fde68a; }
#search-results::-webkit-scrollbar { width:6px; }
.kbd { font-family:'JetBrains Mono',monospace; font-size:.68rem; background:var(--bg-soft); border:1px solid var(--line); border-bottom-width:2px; border-radius:6px; padding:1px 6px; color:var(--ink-soft); }

/* ── Animations ───────────────────────────────────────── */
@keyframes fadeInUp { 0%{opacity:0;transform:translateY(12px)} 100%{opacity:1;transform:translateY(0)} }
.animate-fade-in-up { animation: fadeInUp .5s ease-out; }
@keyframes pulseSlow { 0%,100%{opacity:1} 50%{opacity:.4} }
.animate-pulse-slow { animation: pulseSlow 3s cubic-bezier(.4,0,.6,1) infinite; }

/* dot grid bg */
.dot-grid { background-image:radial-gradient(#14122b 1px,transparent 1px); background-size:22px 22px; }
html.dark .dot-grid { background-image:radial-gradient(#867bfe 1px,transparent 1px); }