/* =====================================================================
   Factoura — thème admin (Bootstrap 5)
   ===================================================================== */
:root{
    --fa-primary:#4f46e5;
    --fa-primary-dark:#4338ca;
    --fa-primary-rgb:79,70,229;
    --fa-sidebar-bg:#0f172a;
    --fa-sidebar-bg-2:#0b1222;
    --fa-sidebar-text:#cbd5e1;
    --fa-sidebar-muted:#64748b;
    --fa-body-bg:#f1f5f9;
    --fa-card-radius:14px;
    --fa-shadow:0 1px 2px rgba(15,23,42,.06),0 8px 24px -12px rgba(15,23,42,.18);
    /* Bootstrap overrides */
    --bs-primary:#4f46e5;
    --bs-primary-rgb:79,70,229;
    --bs-link-color:#4f46e5;
    --bs-link-hover-color:#4338ca;
}

body{
    background:var(--fa-body-bg);
    color:#1e293b;
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}

/* ---- Buttons / links recolor ---- */
.btn-primary{
    --bs-btn-bg:var(--fa-primary); --bs-btn-border-color:var(--fa-primary);
    --bs-btn-hover-bg:var(--fa-primary-dark); --bs-btn-hover-border-color:var(--fa-primary-dark);
    --bs-btn-active-bg:var(--fa-primary-dark); --bs-btn-active-border-color:var(--fa-primary-dark);
    --bs-btn-disabled-bg:var(--fa-primary); --bs-btn-disabled-border-color:var(--fa-primary);
}
.btn-outline-primary{
    --bs-btn-color:var(--fa-primary); --bs-btn-border-color:var(--fa-primary);
    --bs-btn-hover-bg:var(--fa-primary); --bs-btn-hover-border-color:var(--fa-primary);
    --bs-btn-active-bg:var(--fa-primary); --bs-btn-active-border-color:var(--fa-primary);
}
a{ color:var(--fa-primary); }

/* ---- App shell ---- */
.app-shell{ min-height:100vh; }
.app-sidebar{
    position:fixed; top:0; left:0; bottom:0; width:256px; z-index:1040;
    background:linear-gradient(180deg,var(--fa-sidebar-bg),var(--fa-sidebar-bg-2));
    color:var(--fa-sidebar-text); display:flex; flex-direction:column;
    transition:transform .25s ease;
}
.app-body{ margin-left:256px; min-height:100vh; display:flex; flex-direction:column; }
@media (max-width:991.98px){
    .app-sidebar{ transform:translateX(-100%); }
    .app-shell.sidebar-open .app-sidebar{ transform:translateX(0); }
    .app-body{ margin-left:0; }
}

/* brand */
.sidebar-brand{ padding:20px 20px 14px; }
.brand-link{ display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; font-weight:700; font-size:1.25rem; letter-spacing:.3px; }
.brand-mark{
    width:38px; height:38px; border-radius:10px; flex:none;
    display:inline-flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--fa-primary),#7c3aed); color:#fff; font-size:1.15rem;
    box-shadow:0 6px 16px -6px rgba(124,58,237,.7);
}

/* nav */
.sidebar-nav{ flex:1; overflow-y:auto; padding:8px 12px 20px; }
.nav-section{ text-transform:uppercase; font-size:.68rem; letter-spacing:.12em; color:var(--fa-sidebar-muted); padding:16px 12px 6px; font-weight:600; }
.nav-item{
    display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px;
    color:var(--fa-sidebar-text); text-decoration:none; font-size:.93rem; font-weight:500;
    margin-bottom:2px; transition:background .15s,color .15s;
}
.nav-item i{ font-size:1.1rem; width:22px; text-align:center; opacity:.9; }
.nav-item:hover{ background:rgba(148,163,184,.12); color:#fff; }
.nav-item.active{ background:rgba(var(--fa-primary-rgb),.20); color:#fff; box-shadow:inset 3px 0 0 var(--fa-primary); }
.nav-item.disabled{ opacity:.55; cursor:default; }
.nav-item.disabled:hover{ background:transparent; color:var(--fa-sidebar-text); }
.nav-item .soon{ margin-left:auto; font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; background:rgba(148,163,184,.18); color:#94a3b8; padding:2px 7px; border-radius:999px; }
.sidebar-footer{ padding:14px 20px; border-top:1px solid rgba(148,163,184,.12); }

/* backdrop (mobile) */
.app-backdrop{ position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:1035; opacity:0; visibility:hidden; transition:opacity .2s; }
.app-shell.sidebar-open .app-backdrop{ opacity:1; visibility:visible; }
@media (min-width:992px){ .app-backdrop{ display:none; } }

/* topbar */
.app-topbar{
    position:sticky; top:0; z-index:1020; height:64px; background:#fff;
    border-bottom:1px solid #e2e8f0; display:flex; align-items:center; gap:14px; padding:0 22px;
}
.topbar-title{ font-size:1.05rem; font-weight:600; margin:0; color:#0f172a; }
.topbar-spacer{ flex:1; }
.btn-icon{ border:none; background:transparent; font-size:1.4rem; line-height:1; color:#475569; padding:4px 8px; cursor:pointer; }
.user-menu{ display:flex; align-items:center; gap:10px; border:1px solid #e2e8f0; background:#fff; border-radius:999px; padding:5px 14px 5px 6px; font-weight:500; color:#334155; cursor:pointer; }
.user-menu:hover{ background:#f8fafc; }
.user-menu::after{ margin-left:2px; }
.user-avatar{ width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--fa-primary),#7c3aed); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:600; font-size:.85rem; flex:none; }

/* content */
.app-content{ padding:26px 22px 40px; flex:1; }
.page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.page-title{ font-size:1.5rem; font-weight:700; margin:0; color:#0f172a; }
.page-subtitle{ color:#64748b; margin:4px 0 0; font-size:.95rem; }

/* kpi cards */
.kpi-card{ background:#fff; border-radius:var(--fa-card-radius); box-shadow:var(--fa-shadow); padding:18px 20px; display:flex; align-items:center; gap:16px; height:100%; }
.kpi-icon{ width:52px; height:52px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center; font-size:1.5rem; flex:none; }
.kpi-indigo{ background:rgba(79,70,229,.12); color:#4f46e5; }
.kpi-amber{ background:rgba(245,158,11,.14); color:#d97706; }
.kpi-rose{ background:rgba(244,63,94,.12); color:#e11d48; }
.kpi-emerald{ background:rgba(16,185,129,.14); color:#059669; }
.kpi-value{ font-size:1.5rem; font-weight:700; color:#0f172a; line-height:1.1; }
.kpi-label{ color:#64748b; font-size:.85rem; margin-top:2px; }

/* panels */
.card.panel{ border:none; border-radius:var(--fa-card-radius); box-shadow:var(--fa-shadow); }
.panel-title{ font-size:1.05rem; font-weight:600; margin-bottom:6px; color:#0f172a; }
.roadmap{ list-style:none; padding:0; margin:14px 0 0; }
.roadmap li{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px dashed #e2e8f0; color:#475569; font-size:.93rem; }
.roadmap li:last-child{ border-bottom:none; }
.roadmap li i{ font-size:1.05rem; color:#cbd5e1; flex:none; }
.roadmap li.done{ color:#0f172a; font-weight:500; }
.roadmap li.done i{ color:#10b981; }
.roadmap li .badge{ margin-left:auto; }

/* ---- Auth pages (style illustration, fond clair) ---- */
.auth-body{
    min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
    font-family:'Plus Jakarta Sans',system-ui,-apple-system,"Segoe UI",sans-serif;
    color:#1e293b;
    background:
        radial-gradient(900px 500px at 0% 0%,rgba(124,92,255,.07),transparent),
        radial-gradient(900px 500px at 100% 100%,rgba(168,85,247,.08),transparent),
        #ffffff;
}
.auth-container{ width:100%; max-width:1000px; }

/* split card */
.auth-card{
    display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:28px;
    background:#fff; border-radius:26px; padding:30px 44px;
    box-shadow:0 40px 90px -40px rgba(49,46,129,.4);
}

/* illustration panel */
.auth-aside{ display:flex; align-items:center; justify-content:center; }
.auth-illu{ max-width:100%; max-height:440px; width:auto; height:auto; }

/* form panel */
.auth-main{ padding:18px 6px 18px 14px; display:flex; flex-direction:column; justify-content:center; }
.auth-logo{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.brand-mark{
    width:44px; height:44px; border-radius:13px; flex:none;
    display:inline-flex; align-items:center; justify-content:center; color:#fff;
    background:linear-gradient(135deg,#6d5cf5,#a855f7);
    box-shadow:0 10px 22px -8px rgba(124,92,255,.7);
}
.brand-mark svg{ width:22px; height:22px; }
.auth-name{ font-weight:800; font-size:1.2rem; color:#0f172a; letter-spacing:-.2px; }
.auth-tag{ color:#64748b; font-size:.8rem; font-weight:500; }
.auth-title{ font-size:2rem; font-weight:800; letter-spacing:-.5px; margin:0 0 6px; color:#1b2a52; }
.auth-sub{ color:#64748b; font-size:.92rem; margin-bottom:26px; }

/* custom alerts */
.auth-alert{ border-radius:12px; padding:12px 14px; font-size:.88rem; margin-bottom:16px; font-weight:500; }
.auth-alert.is-error{ background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }
.auth-alert.is-ok{ background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }

/* inputs with leading icon */
.field-icon{ position:relative; margin-bottom:16px; }
.field-icon .fld-i{
    position:absolute; left:16px; top:50%; transform:translateY(-50%);
    width:20px; height:20px; color:#94a3b8; pointer-events:none; z-index:4;
    transition:color .15s;
}
.auth-input{
    width:100%; height:54px; border:1.6px solid #e6e9f2; border-radius:14px;
    padding:0 16px 0 46px; font-size:.95rem; font-family:inherit; color:#0f172a;
    background:#fff; outline:none; transition:border-color .15s,box-shadow .15s;
}
.auth-input::placeholder{ color:#9aa6c2; }
.auth-input:focus{ border-color:#7c5cff; box-shadow:0 0 0 4px rgba(124,92,255,.15); }
.field-icon:focus-within .fld-i{ color:#7c5cff; }

/* remember / forgot row */
.auth-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 24px; }
.auth-check{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; color:#475569; font-size:.88rem; font-weight:500; margin:0; }
.auth-check input{
    appearance:none; -webkit-appearance:none; width:18px; height:18px; flex:none;
    border:1.6px solid #cbd5e1; border-radius:6px; cursor:pointer; position:relative; transition:.15s;
}
.auth-check input:checked{ background:#7c5cff; border-color:#7c5cff; }
.auth-check input:checked::after{
    content:""; position:absolute; left:5px; top:1.5px; width:5px; height:9px;
    border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.auth-forgot{ font-size:.88rem; color:#7c5cff; text-decoration:none; font-weight:600; }
.auth-forgot:hover{ text-decoration:underline; }

/* gradient login button */
.btn-login{
    width:100%; height:54px; font-family:inherit; font-weight:700; font-size:1rem; letter-spacing:.2px;
    color:#fff; border:0; border-radius:14px; cursor:pointer;
    background:linear-gradient(90deg,#6d5cf5,#a855f7);
    box-shadow:0 16px 30px -12px rgba(124,92,255,.75); transition:.18s;
}
.btn-login:hover{ background:linear-gradient(90deg,#5b4ae6,#9333ea); transform:translateY(-1px); box-shadow:0 20px 34px -12px rgba(124,92,255,.85); }
.btn-login:active{ transform:translateY(0); }

/* password show/hide */
.pw-wrap{ position:relative; }
.pw-toggle{
    position:absolute; top:0; right:0; height:100%; width:50px; z-index:5;
    border:0; background:transparent; color:#94a3b8; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
}
.pw-toggle svg{ width:20px; height:20px; }
.pw-toggle:hover{ color:#7c5cff; }
.pw-toggle .ico-off{ display:none; }
.pw-wrap.revealed .pw-toggle .ico-on{ display:none; }
.pw-wrap.revealed .pw-toggle .ico-off{ display:block; }
.pw-wrap .auth-input{ padding-right:50px; }

@media (max-width:767.98px){
    .auth-container{ max-width:430px; }
    .auth-card{ grid-template-columns:1fr; padding:30px 26px; border-radius:22px; }
    .auth-aside{ margin-bottom:6px; }
    .auth-illu{ max-width:330px; }
    .auth-main{ padding:0; }
    .auth-title{ font-size:1.7rem; }
}

/* ---- Sidebar search ---- */
.sidebar-search{ padding:2px 16px 12px; }
.sidebar-search .ss-wrap{ position:relative; }
.sidebar-search input{ width:100%; background:rgba(148,163,184,.12); border:1px solid rgba(148,163,184,.18); color:#e2e8f0; border-radius:10px; padding:9px 12px 9px 34px; font-size:.85rem; }
.sidebar-search input::placeholder{ color:#64748b; }
.sidebar-search input:focus{ outline:none; border-color:rgba(var(--fa-primary-rgb),.6); background:rgba(148,163,184,.18); box-shadow:0 0 0 3px rgba(var(--fa-primary-rgb),.18); }
.sidebar-search .ss-wrap > input{ position:relative; }
.sidebar-search .ss-icon{ position:absolute; left:8px; top:19px; transform:translateY(-50%); color:#64748b; font-size:.9rem; border:0; background:transparent; padding:4px 6px; cursor:pointer; line-height:1; z-index:2; }
.sidebar-search .ss-icon:hover{ color:#e2e8f0; }

/* ---- Recherche rapide : panneau déroulant ---- */
.qs-panel{
    position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:1060;
    background:#fff; border:1px solid #e5e9f0; border-radius:12px;
    box-shadow:0 16px 36px rgba(15,23,42,.28);
    padding:6px; max-height:60vh; overflow-y:auto; text-align:left;
}
.qs-group{ font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#94a3b8; padding:8px 10px 4px; }
.qs-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; text-decoration:none; color:#334155; }
.qs-item:hover,.qs-item.active{ background:#eef2f7; color:var(--fa-primary); }
.qs-item-icon{ width:30px; height:30px; flex:none; border-radius:8px; display:grid; place-items:center; background:#e9eef5; color:var(--fa-primary); font-size:.95rem; }
.qs-item.active .qs-item-icon{ background:var(--fa-primary); color:#fff; }
.qs-item-txt{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.qs-item-label{ font-weight:600; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qs-item-sub{ font-size:.74rem; color:#8190a5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qs-empty{ padding:18px 10px; text-align:center; color:#94a3b8; font-size:.85rem; }
.qs-all{ display:block; text-align:center; padding:9px 10px; margin-top:4px; border-top:1px solid #eef2f7; color:var(--fa-primary); text-decoration:none; font-size:.82rem; font-weight:600; border-radius:0 0 8px 8px; }
.qs-all:hover,.qs-all.active{ background:#eef2f7; }

/* ---- Lists / tables ---- */
.content-card{ background:#fff; border-radius:var(--fa-card-radius); box-shadow:var(--fa-shadow); overflow:hidden; }
.table-toolbar{ display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:16px 18px; border-bottom:1px solid #eef2f7; }
.content-card .table{ margin-bottom:0; }
.content-card .table thead th{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:#64748b; font-weight:600; background:#f8fafc; border-bottom:1px solid #eef2f7; }
.content-card .table td{ border-color:#f1f5f9; }
.btn-light{ --bs-btn-bg:#f1f5f9; --bs-btn-border-color:#e2e8f0; --bs-btn-hover-bg:#e2e8f0; --bs-btn-hover-border-color:#cbd5e1; }

/* ---- Detail lists (fiche) ---- */
.detail-list dt{ font-weight:500; color:#64748b; padding-bottom:.55rem; }
.detail-list dd{ color:#0f172a; padding-bottom:.55rem; }

/* ---- Pagination ---- */
.pagination{ --bs-pagination-color:var(--fa-primary); --bs-pagination-active-bg:var(--fa-primary); --bs-pagination-active-border-color:var(--fa-primary); --bs-pagination-hover-color:var(--fa-primary-dark); margin-bottom:0; }

/* ---- Situation financière (fiche client) ---- */
.fin-stat{ background:#f8fafc; border:1px solid #eef2f7; border-radius:12px; padding:12px 14px; height:100%; }
.fin-label{ color:#64748b; font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; }
.fin-value{ font-size:1.15rem; font-weight:700; color:#0f172a; margin-top:2px; }
.text-rose{ color:#e11d48 !important; }
.fac-filter .btn.active{ background:var(--fa-primary); border-color:var(--fa-primary); color:#fff; }

/* ---- Stock (fiche article) ---- */
.stock-big{ font-size:1.9rem; font-weight:700; color:#0f172a; line-height:1.1; }
.stock-unit{ color:#64748b; font-size:.95rem; font-weight:500; }
code{ color:#4338ca; background:#eef2ff; padding:1px 6px; border-radius:6px; font-size:.82rem; }

/* ---- Documents (devis/factures) : lignes & totaux ---- */
.lignes-table th{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:#64748b; font-weight:600; background:#f8fafc; }
.lignes-table td{ vertical-align:middle; }
.totals-box{ min-width:270px; }
.totals-box td{ padding:6px 12px; color:#475569; }
.totals-box tr.ttc td{ font-weight:700; font-size:1.05rem; border-top:2px solid #e2e8f0; color:#0f172a; padding-top:10px; }

/* ===== Sidebar — rafraîchissement + mode replié (icônes) ===== */
.app-sidebar{ box-shadow:1px 0 0 rgba(148,163,184,.08); transition:width .22s ease, transform .25s ease; }
.app-body{ transition:margin-left .22s ease; }
.sidebar-brand{ padding:18px 18px 12px; }
.brand-link{ overflow:hidden; white-space:nowrap; }
.brand-text{ transition:opacity .15s ease; }

.nav-section{ font-size:.66rem; letter-spacing:.14em; color:#64748b; padding:15px 12px 5px; }
.nav-item{ position:relative; gap:13px; }
.nav-item i{ transition:transform .15s ease; }
.nav-item:hover{ background:rgba(148,163,184,.10); }
.nav-item:hover i{ transform:translateX(2px); }
.nav-item.active{ background:linear-gradient(90deg, rgba(var(--fa-primary-rgb),.30), rgba(124,58,237,.16)); color:#fff; box-shadow:none; }
.nav-item.active::before{ content:""; position:absolute; left:-12px; top:7px; bottom:7px; width:3px; border-radius:0 3px 3px 0; background:linear-gradient(180deg,#818cf8,#7c3aed); }
.nav-item.active i{ color:#c7d2fe; opacity:1; }

/* Bouton repli dans la topbar */
[data-sidebar-collapse]{ transition:color .15s; }
[data-sidebar-collapse]:hover{ color:var(--fa-primary); }

/* Mode replié : barre d'icônes (desktop uniquement) */
@media (min-width:992px){
    .sb-collapsed .app-sidebar{ width:76px; }
    .sb-collapsed .app-body{ margin-left:76px; }
    .sb-collapsed .brand-text{ opacity:0; width:0; }
    .sb-collapsed .brand-link{ justify-content:center; gap:0; }
    .sb-collapsed .sidebar-search{ display:none; }
    .sb-collapsed .sidebar-nav{ padding-left:10px; padding-right:10px; }
    .sb-collapsed .nav-item{ justify-content:center; padding:11px 0; gap:0; }
    .sb-collapsed .nav-item > span{ display:none; }
    .sb-collapsed .nav-item i{ width:auto; font-size:1.25rem; }
    .sb-collapsed .nav-item.active::before{ left:-10px; }
    .sb-collapsed .nav-section{ height:2px; margin:12px 14px; padding:0; overflow:hidden; color:transparent; background:rgba(148,163,184,.16); border-radius:2px; }
    .sb-collapsed .sidebar-footer{ display:none; }
}

/* ===== Sidebar — alignement vertical (haut / bas) ===== */
.app-sidebar{ overflow:hidden; }                 /* le défilement se fait dans .sidebar-nav */
.sidebar-brand{ height:64px; padding:0 18px; display:flex; align-items:center; border-bottom:1px solid rgba(148,163,184,.10); }
.sidebar-search{ padding:14px 16px 4px; }
.sidebar-nav{ padding-top:6px; }
.sidebar-nav .nav-section:first-child{ padding-top:8px; }
.sidebar-footer{ padding:12px 20px; border-top:1px solid rgba(148,163,184,.10); text-align:center; }
@media (min-width:992px){
    .sb-collapsed .sidebar-brand{ padding:0; justify-content:center; }
}

/* ===== Sidebar — défilement vertical fiable + barre visible ===== */
.sidebar-nav{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; }
.sidebar-nav{ scrollbar-width:thin; scrollbar-color:rgba(148,163,184,.45) transparent; }
.sidebar-nav::-webkit-scrollbar{ width:8px; }
.sidebar-nav::-webkit-scrollbar-track{ background:transparent; }
.sidebar-nav::-webkit-scrollbar-thumb{ background:rgba(148,163,184,.35); border-radius:8px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover{ background:rgba(148,163,184,.6); }