/* ============================================================
   Easygestium — feuille de style
   Pour rebrander : modifier les variables ci-dessous (ou les
   surcharger depuis les réglages plus tard).
   ============================================================ */
:root {
    --ink:        #1a2230;
    --ink-soft:   #283449;
    --bg:         #f3f5f9;
    --surface:    #ffffff;
    --line:       #e4e8f0;
    --muted:      #6b7686;
    --text:       #222a36;

    --brand:      #2b5ce6;
    --brand-700:  #1e46b8;
    --accent:     #e0a43b;   /* touche chaude : marchandise / validation */
    --danger:     #d6492f;
    --ok:         #1f9d6b;

    --radius:     12px;
    --radius-sm:  8px;
    --shadow:     0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.05);
    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
code { background: #eef1f6; padding: 1px 6px; border-radius: 6px; font-size: .88em; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }

/* ---------- Boutons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: 10px 16px; border-radius: var(--radius-sm);
    border: 1px solid transparent; font: inherit; font-weight: 600;
    cursor: pointer; transition: .15s ease; white-space: nowrap;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-700); }
.btn-ghost { background: transparent; color: var(--muted); border-color: var(--line); }
.btn-ghost:hover { color: var(--text); background: #fff; }
.btn-block { width: 100%; }

/* ---------- Mode épuré (login / install) ---------- */
.is-bare { display: grid; place-items: center; min-height: 100dvh; padding: 24px;
    background: radial-gradient(1200px 600px at 50% -10%, #fff, var(--bg)); }
.bare-wrap { width: 100%; max-width: 420px; }

.auth-card, .install-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px;
}
.install-card { max-width: 560px; margin: 0 auto; }
.auth-head { text-align: center; margin-bottom: 24px; }
.auth-head h1 { margin: 12px 0 2px; font-size: 22px; }
.auth-sub { margin: 0; color: var(--muted); font-size: 14px; }
.auth-mark, .brand-mark, .install-mark {
    display: inline-grid; place-items: center; width: 48px; height: 48px;
    border-radius: 12px; background: var(--ink); color: #fff;
    font-weight: 700; font-size: 22px;
}

/* ---------- Formulaires ---------- */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
input, select, textarea {
    font: inherit; padding: 11px 12px; border: 1px solid var(--line);
    border-radius: var(--radius-sm); background: #fff; color: var(--text);
    width: 100%;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(43,92,230,.15);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- Alertes ---------- */
.alert { padding: 11px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 14px; }
.alert-error { background: #fdecea; color: #a3271a; border: 1px solid #f3c2bb; }
.alert-ok { background: #e9f7f0; color: #15704c; border: 1px solid #b9e6d2; }

/* ---------- Coque application ---------- */
.app-shell { display: grid; grid-template-columns: 252px 1fr; min-height: 100dvh; }

.sidebar {
    background: var(--ink); color: #c4cdda; padding: 18px 14px;
    display: flex; flex-direction: column; gap: 4px;
    position: sticky; top: 0; height: 100dvh; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 18px; }
.brand-name { color: #fff; font-weight: 700; font-size: 16px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-section {
    font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
    color: #6f7d92; margin: 14px 10px 4px;
}
.nav-item {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px;
    border-radius: 8px; color: #c4cdda; font-size: 14px; font-weight: 500;
}
.nav-item:hover { background: var(--ink-soft); color: #fff; }
.nav-item.active { background: var(--brand); color: #fff; }
.nav-ico { width: 18px; text-align: center; opacity: .9; }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 24px; background: var(--surface); border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 5;
}
.page-title { margin: 0; font-size: 18px; flex: 1; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.user-chip { display: flex; flex-direction: column; line-height: 1.2; text-align: right; }
.user-name { font-weight: 600; font-size: 14px; }
.user-role { font-size: 12px; color: var(--muted); text-transform: capitalize; }
.menu-toggle { display: none; background: none; border: none; font-size: 22px; cursor: pointer; }

.content { padding: 24px; display: grid; gap: 20px; align-content: start; }

/* ---------- Cartes / stats ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.stat-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 18px 20px; box-shadow: var(--shadow); display: grid; gap: 6px;
    border-left: 3px solid var(--brand);
}
.stat-label { font-size: 13px; color: var(--muted); }
.stat-value { font-size: 30px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 20px 22px; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.panel-head h2 { margin: 0; font-size: 16px; }
.panel-hint { font-size: 13px; color: var(--muted); }

/* ---------- Tableaux ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.table tbody tr:hover { background: #fafbfd; }
.warn { color: var(--danger); font-weight: 600; }

/* ---------- États vides ---------- */
.empty-state { text-align: center; padding: 32px 16px; display: grid; gap: 14px; justify-items: center; }
.empty-state p { margin: 0; color: var(--muted); max-width: 460px; }

/* ---------- Installeur : étapes ---------- */
.steps { display: flex; gap: 8px; margin-bottom: 24px; }
.step { flex: 1; height: 4px; border-radius: 4px; background: var(--line); }
.step.done { background: var(--brand); }
.install-head { text-align: center; margin-bottom: 20px; }
.install-head h1 { margin: 12px 0 4px; font-size: 20px; }
.check-list { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.check-list li { display: flex; justify-content: space-between; padding: 9px 12px;
    border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.badge-ok { color: var(--ok); font-weight: 600; }
.badge-no { color: var(--danger); font-weight: 600; }
.cred-box { background: #f6f8fb; border: 1px dashed var(--line); border-radius: 8px;
    padding: 14px 16px; margin: 14px 0; font-size: 14px; }

/* ---------- Responsive / mobile ---------- */
@media (max-width: 860px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed; left: 0; top: 0; z-index: 40; width: 252px;
        transform: translateX(-100%); transition: transform .2s ease;
    }
    .sidebar.open { transform: translateX(0); }
    .menu-toggle { display: block; }
    .field-row { grid-template-columns: 1fr; }
    .user-chip { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ============================================================
   Composants des modules (produits, tiers, documents, stock…)
   ============================================================ */

/* Barre d'actions de page */
.page-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.page-actions .search { flex: 1; max-width: 420px; }
.actions-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.actions-group form { margin: 0; }

/* Boutons additionnels */
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-danger { background: #fff; color: var(--danger); border-color: #f0c4bc; }
.btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* Panneau étroit (formulaires) */
.panel-narrow { max-width: 640px; }

/* Cases à cocher */
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.check input { width: auto; }

/* Tags & badges */
.tag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #eef1f6; color: var(--muted); margin-left: 6px; }
.tag-soft { background: #eaf0fb; color: var(--brand-700); margin: 0; }
.badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.badge-draft  { background: #fdf3e2; color: #9a6a16; }
.badge-ok2    { background: #e8f6ef; color: #15734e; }
.badge-cancel { background: #fdecea; color: #a3271a; }

/* Onglets de filtre */
.filter-tabs { display: flex; gap: 4px; }
.tab { padding: 7px 14px; border-radius: 8px; font-size: 14px; color: var(--muted); font-weight: 500; }
.tab:hover { background: #fff; }
.tab.active { background: var(--ink); color: #fff; }

/* Lignes inactives */
.row-inactive { opacity: .55; }

/* Stat accent */
.stat-accent { border-left-color: var(--accent); }
.stat-accent .stat-value { font-size: 22px; }

/* Colonnes du dashboard */
.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .dash-cols { grid-template-columns: 1fr; } }

/* Accès rapides */
.quick-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.quick { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--line);
    border-radius: 10px; color: var(--text); font-weight: 500; transition: .15s; }
.quick:hover { border-color: var(--brand); background: #fafbff; }
.quick-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
    background: var(--ink); color: #fff; }

/* Formulaire document */
.doc-form { display: grid; gap: 20px; }
.lines-table th, .lines-table td { padding: 6px 8px; vertical-align: top; }
.lines-table input, .lines-table select { padding: 8px 9px; }
.line-product { margin-bottom: 4px; }
.line-total { padding-top: 16px; font-weight: 600; }
.btn-remove { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 8px; }
.btn-remove:hover { color: var(--danger); }

/* Totaux */
.totals { width: 300px; margin-left: auto; margin-top: 16px; }
.totals-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 14px; }
.total-ttc { border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 12px; font-size: 17px; }

/* Pied de formulaire */
.form-footer { display: flex; justify-content: flex-start; gap: 10px; }

/* En-tête de document */
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
    margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.doc-head h2 { margin: 0; }
.doc-number { color: var(--brand); font-weight: 700; }
.doc-head-right { text-align: right; display: grid; gap: 10px; justify-items: end; }
.party-box { text-align: right; font-size: 14px; }
.notes-box { margin-top: 14px; font-size: 14px; padding: 12px 14px; background: #fafbfd; border-radius: 8px; }

/* Ajustement de stock */
.adjust-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.adjust-form select, .adjust-form input { width: auto; flex: 1; min-width: 140px; }

@media (max-width: 860px) {
    .totals { width: 100%; }
    .doc-head { flex-direction: column; }
    .doc-head-right, .party-box { text-align: left; justify-items: start; }
    .lines-table { font-size: 13px; }
}

/* Badge neutre (rupture / état non-alarmant) */
.badge-muted { background: #eef1f6; color: #6b7686; }

/* ============================================================
   Scanner de code-barres
   ============================================================ */
.scan-overlay { position: fixed; inset: 0; background: rgba(16,22,30,.72); z-index: 100;
    display: grid; place-items: center; padding: 16px; }
.scan-box { background: var(--surface); border-radius: 14px; width: 100%; max-width: 420px;
    overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.scan-head { display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--line); font-weight: 600; }
.scan-close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--muted); }
.scan-body { position: relative; background: #000; min-height: 240px; display: grid; place-items: center; }
.scan-body video { width: 100%; max-height: 320px; object-fit: cover; display: block; }
.scan-reticle { position: absolute; inset: 22% 12%; border: 3px solid rgba(255,255,255,.9);
    border-radius: 10px; box-shadow: 0 0 0 9999px rgba(0,0,0,.25); pointer-events: none; }
.scan-msg { color: #fff; padding: 28px 22px; text-align: center; font-size: 14px; margin: 0; }
.scan-manual { display: flex; gap: 8px; padding: 14px 16px; }
.scan-manual input { flex: 1; }

/* Bouton scan dans les barres d'action */
.btn-scan { display: inline-flex; align-items: center; gap: 6px; }

/* Actions sous les lignes de document */
.lines-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================
   Correctifs responsive / anti-débordement horizontal
   ============================================================ */
html, body { max-width: 100%; overflow-x: hidden; }
.main, .content, .panel, .stat-card { min-width: 0; }

/* Les longues chaînes (numéros, e-mails, codes) ne débordent plus */
.table td, .table th, .stat-value, .party-box, .doc-number,
.user-name, .brand-name, .quick { overflow-wrap: anywhere; word-break: break-word; }

/* Les tableaux larges défilent DANS leur panneau au lieu de pousser la page */
.table { max-width: 100%; }
.table-scroll, .lines-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 860px) {
    /* Chaque panneau encaisse le défilement horizontal de son contenu */
    .panel { overflow-x: auto; }
    .content { padding: 14px; gap: 14px; }
    .topbar { padding: 12px 14px; gap: 10px; }
    .page-title { font-size: 16px; }
    .page-actions { gap: 8px; }
    .page-actions .search { max-width: 100%; flex: 1 1 100%; }
    .actions-group { flex: 1 1 100%; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat-card { padding: 14px; }
    .stat-value { font-size: 22px; }
    .totals { width: 100%; }
    .form-footer { flex-direction: column-reverse; }
    .form-footer .btn { width: 100%; }
    .lines-actions { width: 100%; }
    .lines-actions .btn { flex: 1; }
    .adjust-form { flex-direction: column; align-items: stretch; }
    .adjust-form select, .adjust-form input { min-width: 0; width: 100%; }
    .filter-tabs { width: 100%; overflow-x: auto; }
}

@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr; }
    .content { padding: 12px; }
}

/* Bouton d'installation PWA */
.btn-install { white-space: nowrap; }
@media (max-width: 600px) { .btn-install { font-size: 13px; padding: 8px 10px; } }

/* ============================================================
   Rapports : période + barres
   ============================================================ */
.period-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.period-form .field { gap: 6px; }
.period-form input { width: auto; }
.bars { display: grid; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 1fr; gap: 4px; }
.bar-label { font-size: 14px; }
.bar-track { background: #eef1f6; border-radius: 6px; height: 10px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--brand); border-radius: 6px; }
.bar-fill-2 { background: var(--accent); }
.bar-value { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .period-form { gap: 8px; } .period-form .field { flex: 1; } }

/* ============================================================
   Direction droite-à-gauche (arabe)
   ============================================================ */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .stat-card { border-left: none; border-right: 3px solid var(--brand); }
[dir="rtl"] .stat-accent { border-right-color: var(--accent); }
[dir="rtl"] .nav-section { text-align: right; }
[dir="rtl"] .table th, [dir="rtl"] .table td { text-align: right; }
[dir="rtl"] .table .num, [dir="rtl"] .num { text-align: left; }  /* chiffres restent alignés à gauche */
[dir="rtl"] .totals { margin-left: 0; margin-right: auto; }
[dir="rtl"] .party-box, [dir="rtl"] .doc-head-right { text-align: left; }
[dir="rtl"] .auth-sub, [dir="rtl"] .install-head { text-align: center; }

/* La barre latérale passe à droite (la grille en dir=rtl place
   automatiquement la 1re colonne à droite, donc rien à réordonner) */
[dir="rtl"] .nav-ico { transform: scaleX(-1); }  /* flèches inversées */

@media (max-width: 860px) {
    [dir="rtl"] .sidebar { left: auto; right: 0; transform: translateX(100%); }
    [dir="rtl"] .sidebar.open { transform: translateX(0); }
}

/* Indicateur hors-ligne / file d'attente */
.offline-badge { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.offline-badge.is-offline { background: #fdecea; color: #a3271a; }
.offline-badge.is-pending { background: #fdf3e2; color: #9a6a16; }
@media (max-width: 600px) { .offline-badge { font-size: 11px; padding: 4px 8px; } }

/* Bouton de téléchargement de l'app Android */
.quick-apk { border-color: var(--brand); background: #f4f7ff; }
.quick-apk .quick-ico { background: var(--brand); }

/* ============================================================
   Page d'authentification (v2) — connexion / mot de passe oublié
   ============================================================ */
.is-bare {
    background:
        radial-gradient(900px 500px at 15% -10%, rgba(43,92,230,.18), transparent 60%),
        radial-gradient(800px 500px at 110% 10%, rgba(224,164,59,.14), transparent 55%),
        linear-gradient(180deg, #f7f9fc, #eef1f7);
}
.auth-card-v2 {
    padding: 30px 30px 26px;
    border: 1px solid rgba(228,232,240,.9);
    box-shadow: 0 24px 60px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.05);
    position: relative; overflow: hidden;
}
.auth-card-v2::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
}
.auth-top { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 18px; }
.auth-logo { width: 40px; height: 40px; border-radius: 10px; }
.auth-app { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.auth-welcome { text-align: center; margin-bottom: 20px; }
.auth-welcome h1 { margin: 0 0 4px; font-size: 21px; color: var(--ink); }
.auth-welcome .auth-sub { margin: 0; color: var(--muted); font-size: 14px; }

.pwd-wrap { position: relative; display: block; }
.pwd-wrap input { padding-right: 44px; }
.pwd-toggle { position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; font-size: 16px; opacity: .5; padding: 4px; }
.pwd-toggle.on { opacity: 1; }
[dir="rtl"] .pwd-wrap input { padding-right: 12px; padding-left: 44px; }
[dir="rtl"] .pwd-toggle { right: auto; left: 8px; }

.auth-forgot { display: block; text-align: center; margin-top: 16px; font-size: 14px; }
.auth-footer { text-align: center; margin: 18px 0 0; font-size: 12px; color: var(--muted); }
.auth-footer strong { color: var(--ink-soft); }

/* ============================================================
   Mise en page « application » : en-tête fixe, contenu défilant
   ============================================================ */
.app-shell { height: 100vh; height: 100dvh; overflow: hidden; }
.main { height: 100vh; height: 100dvh; overflow: hidden; }
.topbar { position: static; flex-shrink: 0; }
.content { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }

/* En-tête mobile épuré : on masque le titre du module */
@media (max-width: 860px) {
    .page-title { display: none; }
    .topbar { justify-content: space-between; }
}

/* ============================================================
   Tableaux responsives : en cartes empilées sur mobile
   ============================================================ */
@media (max-width: 700px) {
    /* Plus besoin de défilement horizontal : les tableaux deviennent des cartes */
    .panel { overflow-x: visible; }

    /* --- Tableaux de liste (tout sauf la grille de saisie) --- */
    .table:not(.lines-table) { display: block; }
    .table:not(.lines-table) thead { display: none; }
    .table:not(.lines-table) tbody { display: block; }
    .table:not(.lines-table) tr {
        display: block; background: var(--surface);
        border: 1px solid var(--line); border-radius: 12px;
        padding: 6px 14px; margin-bottom: 12px;
    }
    .table:not(.lines-table) td {
        display: flex; align-items: center; justify-content: space-between;
        gap: 14px; padding: 9px 0; border: none; text-align: right;
    }
    .table:not(.lines-table) tr td + td { border-top: 1px solid #f0f2f6; }
    .table:not(.lines-table) td::before {
        content: attr(data-label); font-weight: 600; color: var(--muted);
        font-size: 13px; text-align: left; white-space: nowrap;
    }
    .table:not(.lines-table) td[data-label=""]::before { content: ""; }
    /* La cellule d'actions prend toute la largeur, bouton aligné à droite */
    .table:not(.lines-table) td.cell-actions { justify-content: flex-end; }
    .table:not(.lines-table) td.cell-actions .btn { width: 100%; text-align: center; }

    /* --- Grille de saisie des lignes (formulaire document) --- */
    .lines-table thead { display: none; }
    .lines-table, .lines-table tbody, .lines-table tr, .lines-table td { display: block; width: 100%; }
    .lines-table tr {
        border: 1px solid var(--line); border-radius: 12px;
        padding: 12px 14px; margin-bottom: 14px; background: #fafbfd;
    }
    .lines-table td { padding: 6px 0; border: none; }
    .lines-table td::before {
        content: attr(data-label); display: block;
        font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px;
    }
    .lines-table .line-total { text-align: right; font-size: 15px; padding-top: 8px; }
    .lines-table .btn-remove { width: 100%; border: 1px dashed #f0c4bc; border-radius: 8px; padding: 8px; color: var(--danger); }
}

/* RTL : libellés des cartes alignés à droite */
[dir="rtl"] .table:not(.lines-table) td { text-align: left; }
[dir="rtl"] .table:not(.lines-table) td::before { text-align: right; }

/* ── Mises à jour par site ── */
.alert-update {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: #eef2ff; border: 1px solid #c7d2fe; color: #3730a3;
    padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; flex-wrap: wrap;
}
.alert-update .update-info { flex: 1; min-width: 220px; }
.alert-update form { margin: 0; flex-shrink: 0; }
.badge-pending { background: #fdf3e2; color: #9a6a16; }

/* ============================================================
   Correctifs design (v2.2)
   - Connexion : carte centrée + fond plein écran (plus de coupure)
   - Mobile : défilement naturel et fluide des panneaux
   ============================================================ */
html { min-height: 100%; }
body.is-bare {
    min-height: 100dvh;
    display: flex; align-items: center; justify-content: center;
    padding: 28px 16px;
    background: linear-gradient(160deg, #eef2fb 0%, #f4f7fc 48%, #eef3f8 100%);
}
.bare-wrap { width: 100%; max-width: 430px; margin: auto; }
.auth-card-v2 { width: 100%; }

@media (max-width: 860px) {
    .app-shell, .main { height: auto; min-height: 100dvh; overflow: visible; }
    .content { height: auto; overflow: visible; }
    .topbar { position: sticky; top: 0; z-index: 30; }
    .sidebar { height: 100dvh; }
}

/* ============================================================
   Easygestium — barre latérale blanche, connexion blanche, menu mobile
   ============================================================ */
.brand { padding: 4px 6px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.brand-logo { width: 36px; height: 36px; border-radius: 9px; display: block; }

.sidebar { background: #ffffff; color: var(--text); border-right: 1px solid var(--line); }
[dir="rtl"] .sidebar { border-right: none; border-left: 1px solid var(--line); }
.nav-section { color: var(--muted); }
.nav-item { color: #3a4250; font-weight: 500; }
.nav-item .nav-ico { opacity: .6; }
.nav-item:hover { background: #eef2fb; color: var(--ink); }
.nav-item:hover .nav-ico { opacity: 1; }
.nav-item.active { background: #eaf0fb; color: var(--brand-700); box-shadow: none; }
.nav-item.active .nav-ico { opacity: 1; }
.nav-badge { background: var(--accent); color: #1a2230; }

body.is-bare { background: #ffffff; }

.sidebar-backdrop { position: fixed; inset: 0; background: rgba(15,18,28,.45);
    opacity: 0; visibility: hidden; transition: opacity .2s ease; z-index: 35; }
.sidebar-backdrop.show { opacity: 1; visibility: visible; }
@media (min-width: 1025px) { .sidebar-backdrop { display: none; } }
@media (max-width: 860px) { .sidebar { box-shadow: 0 0 40px rgba(15,18,28,.20); } }

.sidebar .nav { padding-top: 12px; }

/* ============================================================
   Menu mobile défilable + bouton « remonter en haut »
   ============================================================ */
/* La barre latérale défile (utile quand il y a beaucoup de modules) */
.sidebar { overflow-y: auto; scrollbar-width: thin; }
.sidebar::-webkit-scrollbar { width: 7px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(100,110,130,.35); border-radius: 4px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(100,110,130,.55); }
.nav { padding-bottom: 28px; }

@media (max-width: 860px) {
    .sidebar { height: 100dvh; -webkit-overflow-scrolling: touch; }
}

/* Bouton flottant : remonter tout en haut */
.scroll-top {
    position: fixed; bottom: 20px; right: 20px; z-index: 60;
    width: 48px; height: 48px; border: none; border-radius: 50%;
    background: var(--brand); color: #fff; cursor: pointer;
    font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 22px rgba(15,18,28,.30);
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.scroll-top.show { opacity: 1; visibility: visible; transform: none; }
.scroll-top:hover { filter: brightness(1.07); }
[dir="rtl"] .scroll-top { right: auto; left: 20px; }

/* Plus d'espace sous le dernier élément du menu (surtout en mobile) */
.nav { padding-bottom: 48px; }
@media (max-width: 860px) {
    .nav { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   Performance scroll mobile — fluidité + espace bas du menu
   ============================================================ */
@media (max-width: 860px) {
    /* Hauteurs STABLES : 100dvh se recalcule pendant le scroll (saccades). 100vh ne bouge pas. */
    .app-shell, .main { min-height: 100vh; }
    /* Aucun effet qui repeint pendant le scroll tactile (survol « collant ») */
    .stat-card, .quick, .panel, .card { transition: none !important; }
    .stat-card:hover, .quick:hover, .card:hover, .panel:hover { transform: none !important; box-shadow: 0 1px 3px rgba(16,24,40,.06) !important; }
    .table tbody tr:hover { background: transparent !important; }
    .btn:hover, .nav-item:hover, .tab:hover { transition: none !important; }
    /* Espace généreux sous le dernier élément du menu */
    .nav { padding-bottom: 96px; }
}

/* ============================================================
   REDESIGN « GStock » (v3.0)
   Thème bleu, sidebar bleue, topbar (accueil + recherche + icônes),
   cartes KPI, connexion, barre d'onglets mobile. Balisage inchangé.
   ============================================================ */
:root{
    --brand:#2563eb; --brand-700:#1d4ed8; --brand-50:#eef4ff;
    --sidebar:#2f6bed;
    --bg:#f4f6fa; --surface:#ffffff; --line:#e6eaf1;
    --ink:#1f2733; --ink-soft:#2b3648; --text:#2a3342; --muted:#7a8699;
    --ok:#16a34a; --accent:#f59e0b; --danger:#ef4444;
    --radius:16px; --radius-sm:10px;
    --shadow:0 1px 2px rgba(20,30,55,.05), 0 6px 20px rgba(20,30,55,.06);
}
body{ background:var(--bg); }

/* ---- Sidebar bleue ---- */
.sidebar{ background:var(--sidebar); color:rgba(255,255,255,.9); border:none !important; }
.brand{ border-bottom:1px solid rgba(255,255,255,.18); gap:10px; }
.brand-name,.brand-logo-text{ color:#fff; font-weight:800; letter-spacing:-.01em; }
.nav-section{ color:rgba(255,255,255,.55); }
.nav-item{ color:rgba(255,255,255,.85); font-weight:500; }
.nav-item .nav-ico{ opacity:.9; }
.nav-item:hover{ background:rgba(255,255,255,.15); color:#fff; }
.nav-item:hover .nav-ico{ opacity:1; }
.nav-item.active{ background:#fff; color:var(--brand-700); box-shadow:0 3px 8px rgba(15,30,70,.14); }
.nav-item.active .nav-ico{ opacity:1; color:var(--brand); }
.sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.3); }

/* ---- Logo « mark » ---- */
.brand-mark{ width:36px;height:36px;border-radius:10px;display:inline-grid;place-items:center;
    font-weight:800;font-size:18px;flex:none;line-height:1; }
.sidebar .brand-mark{ background:rgba(255,255,255,.2); color:#fff; }

/* ---- Topbar : accueil + recherche + icônes ---- */
.topbar{ background:var(--surface); border-bottom:1px solid var(--line); gap:14px; }
.topbar-greeting{ display:flex; flex-direction:column; line-height:1.2; flex:none; }
.topbar-greeting .tg-hi{ font-size:11px; color:var(--muted); }
.topbar-greeting .tg-name{ font-size:16px; font-weight:700; color:var(--ink); }
.topbar-search{ flex:1; max-width:440px; position:relative; }
.topbar-search input{ width:100%; padding:9px 14px 9px 38px; border:1px solid var(--line);
    border-radius:999px; background:#f6f8fc; font-size:14px; }
.topbar-search input:focus{ outline:none; border-color:var(--brand); background:#fff; }
.topbar-search .ts-ico{ position:absolute; inset-inline-start:13px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:15px; }
.topbar-icons{ display:flex; align-items:center; gap:4px; }
.topbar-ico{ width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
    color:var(--muted);background:transparent;border:none;cursor:pointer;font-size:17px;position:relative;text-decoration:none; }
.topbar-ico:hover{ background:#eef2f9; color:var(--ink); }
.topbar-ico .dot{ position:absolute; top:8px; inset-inline-end:9px; width:7px;height:7px;border-radius:50%;background:var(--danger); }
.avatar{ width:36px;height:36px;border-radius:50%;background:var(--brand-50);color:var(--brand-700);
    display:grid;place-items:center;font-weight:700;font-size:14px;flex:none; }

/* ---- Cartes KPI ---- */
.stats-grid{ gap:18px; }
.stat-card{ border:1px solid var(--line) !important; border-radius:16px; padding:18px 20px;
    box-shadow:var(--shadow); position:relative; overflow:hidden; }
.stat-label{ font-size:13px; color:var(--muted); font-weight:500; }
.stat-value{ font-size:28px; color:var(--ink); }
.stat-ico{ position:absolute; top:16px; inset-inline-end:16px; width:42px;height:42px;border-radius:12px;
    display:grid;place-items:center; background:var(--brand-50); color:var(--brand); font-size:19px; }
.stat-trend{ font-size:12px; font-weight:700; }
.stat-trend.up{ color:var(--ok); } .stat-trend.down{ color:var(--danger); }
.stat-accent .stat-value{ font-size:22px; }
.stat-accent .stat-ico{ background:#e7f6ee; color:var(--ok); }
.stat-warn{ background:#fff8ec; border-color:#f6e2bd !important; }
.stat-warn .stat-ico{ background:#fdecc8; color:#b7791f; }

/* ---- Panneaux / tables / onglets ---- */
.panel{ border-radius:16px; }
.panel-head h2{ font-size:15px; font-weight:700; }
.table th{ background:#fafbff; }
.tab.active{ background:var(--brand); color:#fff; }
.badge-ok2{ background:#e7f6ee; color:#15734e; }
.quick-ico{ background:var(--brand-50) !important; color:var(--brand) !important; }
.quick:hover{ border-color:var(--brand); background:#f7f9ff; }
.bar-fill{ background:var(--brand); } .bar-fill-2{ background:var(--ok); }

/* ---- Connexion « GStock » ---- */
body.is-bare{
    background:
        radial-gradient(1100px 520px at 50% -8%, #ffffff, transparent 62%),
        linear-gradient(180deg, #eaf0fb 0%, #f3f6fc 55%, #eef2f9 100%);
}
.auth-card-v2{ border-radius:18px; box-shadow:0 20px 55px rgba(20,35,80,.12); }
.auth-card-v2::before{ background:var(--brand); height:5px; }
.auth-brand{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:4px; }
.auth-brand .brand-mark{ background:var(--brand); color:#fff; }
.auth-brand .auth-app{ font-size:22px; font-weight:800; color:var(--ink); letter-spacing:-.02em; }
.auth-welcome h1{ font-size:20px; }
.auth-title{ text-align:center; font-size:16px; font-weight:700; color:var(--ink); margin:2px 0 18px; }
.btn-primary{ background:var(--brand); }
.btn-primary:hover{ background:var(--brand-700); }
[dir="rtl"] .auth-forgot{ text-align:center; }

/* ---- Barre d'onglets mobile (bottom nav) ---- */
.bottom-nav{ display:none; }
@media (max-width:860px){
    .bottom-nav{
        display:flex; position:fixed; left:0; right:0; bottom:0; z-index:45;
        background:#fff; border-top:1px solid var(--line);
        padding:5px 2px calc(5px + env(safe-area-inset-bottom,0px));
        box-shadow:0 -2px 14px rgba(20,30,55,.06);
    }
    .bn-item{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
        font-size:10.5px; color:var(--muted); padding:4px 0; text-decoration:none; }
    .bn-item .bn-ico{ font-size:19px; line-height:1; }
    .bn-item.active{ color:var(--brand); font-weight:600; }
    .content{ padding-bottom:74px !important; }
    /* le titre du module revient sous forme d'accueil compact déjà géré par la topbar */
}
@media (min-width:861px){ .bottom-nav{ display:none !important; } }

/* Topbar responsive (GStock) */
@media (max-width:860px){
    .topbar-greeting{ display:none; }
    .topbar-search{ max-width:none; }
    .topbar-ico{ width:34px; height:34px; }
}

/* ============================================================
   Ajustements (v3.1)
   - header mobile sans recherche
   - menu mobile : espace scrollable en bas (comme l'agence de voyage)
   - fond de connexion « entrepôt / gestion de stock »
   ============================================================ */
@media (max-width:860px){
    .topbar-search{ display:none !important; }   /* plus de recherche dans l'en-tête mobile */
    .sidebar .nav{ padding-bottom: 150px; }        /* espace généreux + défilement sous le dernier item */
}

body.is-bare{
    background:
        radial-gradient(780px 540px at 50% 46%, rgba(246,249,253,.94), rgba(240,244,251,.6) 58%, rgba(236,242,251,.32) 100%),
        url("../img/login-bg.svg") center center / cover no-repeat fixed;
    background-color:#eef3fb;
}
@media (max-width:860px){
    body.is-bare{ background-attachment:scroll; }
}

/* ============================================================
   Ajustements (v3.2)
   - champs de connexion (icône + placeholder, façon mockup)
   - menu mobile réellement scrollable + barre du bas masquée quand ouvert
   - bouton « remonter » relevé au-dessus de la barre d'onglets
   - matrice de permissions
   ============================================================ */

/* Champs de connexion */
.auth-form{ display:grid; gap:14px; margin-top:4px; }
.auth-field{ position:relative; display:flex; align-items:center; }
.auth-field .af-ico{ position:absolute; inset-inline-start:14px; display:grid; place-items:center; color:#9aa6b8; pointer-events:none; }
.auth-field input{
    width:100%; height:50px; padding:0 44px 0 44px;
    border:1px solid var(--line); border-radius:12px; background:#f7f9fc;
    font-size:15px; color:var(--ink);
}
[dir="rtl"] .auth-field input{ padding:0 44px 0 44px; }
.auth-field input:focus{ outline:none; border-color:var(--brand); background:#fff; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.auth-field .af-eye{
    position:absolute; inset-inline-end:8px; width:36px; height:36px; border:none; background:transparent;
    color:#9aa6b8; cursor:pointer; display:grid; place-items:center; border-radius:8px;
}
.auth-field .af-eye:hover{ color:var(--brand); background:#eef2f9; }
.auth-field .af-eye.on{ color:var(--brand); }
.auth-form .auth-forgot{ display:block; text-align:end; margin:-2px 2px 4px; color:var(--brand); font-size:13.5px; text-decoration:none; }
.auth-form .auth-forgot:hover{ text-decoration:underline; }
.auth-form .btn-block{ height:50px; border-radius:12px; font-size:15px; }

/* Matrice de permissions */
.perm-table th, .perm-table td{ text-align:center; vertical-align:middle; }
.perm-table td input[type="checkbox"]{ width:18px; height:18px; accent-color:var(--brand); cursor:pointer; }
.table-wrap{ overflow-x:auto; }

/* Menu mobile : scroll fiable + barre du bas masquée quand le menu est ouvert */
@media (max-width:860px){
    .topbar-search{ display:none !important; }
    .sidebar{
        top:0; bottom:0; height:auto; max-height:none;
        overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    }
    .sidebar .nav{ padding-bottom:120px; }
    .sidebar.open ~ .bottom-nav{ display:none !important; }
    .scroll-top{ bottom:calc(18px + env(safe-area-inset-bottom,0px)) !important; }
}

/* ============================================================
   Connexion (v3.3)
   - carte parfaitement centrée (desktop ET mobile), comme l'agence de voyage
   - fond photo « entrepôt » plein écran, sans trait de séparation
   - dépose assets/img/login-bg.jpg pour utiliser TA propre photo
   ============================================================ */
body.is-bare{
    min-height:100dvh;
    display:flex; align-items:center; justify-content:center;
    padding:24px 16px;
    background:
        linear-gradient(180deg, rgba(12,22,44,.30), rgba(12,22,44,.44)) center/cover no-repeat,
        url("../img/login-bg.jpg") center/cover no-repeat,
        url("../img/login-bg.svg") center/cover no-repeat !important;
    background-color:#c3ccdb !important;
    background-attachment:scroll !important;
}
.bare-wrap{ width:100%; max-width:420px; margin:auto; }
.auth-card-v2{ box-shadow:0 26px 70px rgba(8,18,40,.38); }

/* Permissions dans le formulaire utilisateur */
.perms-block{ border-top:1px solid var(--line); margin-top:6px; padding-top:8px; }
.perm-group{ margin:10px 0 4px; }
.perm-group-title{ font-size:12.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.02em; margin-bottom:6px; }
.perm-group-items{ display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; }
@media (max-width:560px){ .perm-group-items{ grid-template-columns:1fr; } }
.perm-group-items .check{ font-size:13.5px; }
.perm-group-items .check input{ accent-color:var(--brand); }

/* ============================================================
   Connexion « StockPro » (v3.5) — split écran + photo entrepôt
   Dépose assets/img/login-photo.jpg pour utiliser TA photo (panneau droit).
   ============================================================ */
.sp-login{
    position:fixed; inset:0; z-index:200;
    display:flex; align-items:center; justify-content:center;
    background:#eef1f5; overflow-y:auto; padding:20px;
}
.sp-left{ position:absolute; top:0; bottom:0; left:0; right:50%;
    background:#eef1f5 url("../img/login-blueprint.svg") center/cover no-repeat; }
.sp-right{ position:absolute; top:0; bottom:0; left:50%; right:0;
    background-image:
        linear-gradient(180deg, rgba(18,28,50,.08), rgba(18,28,50,.22)),
        url("../img/login-photo.jpg"),
        url("../img/login-warehouse.svg");
    background-size:cover; background-position:center; background-repeat:no-repeat; }

.sp-brand{ position:absolute; top:30px; left:42px; display:flex; align-items:center; gap:12px; z-index:3; }
.sp-brandtext{ font-size:30px; font-weight:800; letter-spacing:-.02em; color:#22345c; }

.sp-card{ position:relative; z-index:4; margin:auto;
    width:min(520px,94vw); background:#fff; border-radius:16px;
    box-shadow:0 30px 80px rgba(12,26,54,.30); padding:36px 40px; }
.sp-title{ text-align:center; font-size:26px; line-height:1.22; font-weight:800; color:#22345c; margin:0 0 8px; }
.sp-sub{ text-align:center; font-size:14.5px; color:#7c8698; margin:0 0 22px; }
.sp-form .alert{ margin-bottom:14px; }
.sp-label{ display:block; font-size:13.5px; font-weight:600; color:#2c3a52; margin:14px 0 7px; }
.sp-field{ position:relative; display:flex; align-items:center; }
.sp-field .sp-ico{ position:absolute; inset-inline-start:0; top:0; bottom:0; width:46px;
    display:grid; place-items:center; color:#9aa6b8; border-inline-end:1px solid #e6eaf1; }
.sp-field input{ width:100%; height:50px; padding:0 46px; border:1px solid #dfe4ec; border-radius:10px;
    background:#f7f9fc; font-size:15px; color:#22345c; }
.sp-field input:focus{ outline:none; border-color:#2b5ca5; background:#fff; box-shadow:0 0 0 3px rgba(43,92,165,.12); }
.sp-eye{ position:absolute; inset-inline-end:6px; width:38px; height:38px; border:none; background:transparent;
    color:#9aa6b8; cursor:pointer; display:grid; place-items:center; border-radius:8px; }
.sp-eye:hover{ color:#2b5ca5; background:#eef2f9; }
.sp-eye.on{ color:#2b5ca5; }
.sp-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:16px 0 20px; }
.sp-remember{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:#55617a; cursor:pointer; }
.sp-remember input{ width:16px; height:16px; accent-color:#2b5ca5; }
.sp-forgot{ color:#2b5ca5; font-size:13.5px; text-decoration:none; }
.sp-forgot:hover{ text-decoration:underline; }
.sp-submit{ width:100%; height:52px; border:none; border-radius:10px; background:#2b5ca5; color:#fff;
    font-size:16px; font-weight:700; cursor:pointer; transition:background .15s; }
.sp-submit:hover{ background:#244f8e; }
.sp-nocount{ text-align:center; margin:18px 0 0; font-size:13.5px; color:#7c8698; }
.sp-nocount .sp-link{ color:#2b5ca5; font-weight:600; }
.sp-footer{ position:absolute; left:0; right:0; bottom:16px; text-align:center; z-index:3;
    font-size:12.5px; color:#8a94a6; }
.sp-sep{ margin:0 6px; color:#c0c8d4; }
.sp-foot-link{ color:#6b7688; text-decoration:none; }
.sp-foot-link:hover{ text-decoration:underline; }

@media (max-width:820px){
    .sp-left{ display:none; }
    .sp-right{ left:0; right:0; }
    .sp-right::after{ content:""; position:absolute; inset:0; background:rgba(16,26,48,.38); }
    .sp-brand{ display:none; }
    .sp-card{ width:min(440px,94vw); padding:28px 22px; }
    .sp-title{ font-size:22px; }
    .sp-footer{ color:#e7ecf5; }
    .sp-foot-link{ color:#dfe6f2; }
}

/* ============================================================
   DESIGN « STOCKPRO » (v3.6) — en-tête navy + nav horizontale + thème turquoise
   ============================================================ */
:root{
    --brand:#12b0bd; --brand-700:#0e909b; --brand-50:#e4f6f8;
    --navy:#16233f; --navy-2:#1d2d4d;
    --bg:#eef1f6; --surface:#ffffff; --line:#e6eaf1;
    --ink:#1f2b45; --muted:#7c8698;
    --ok:#22c55e; --accent:#f59e0b; --danger:#ef4444;
}
body.is-app{ background:var(--bg); }

/* ---- En-tête navy ---- */
.topnav{ position:sticky; top:0; z-index:120; background:linear-gradient(90deg,var(--navy),var(--navy-2));
    color:#fff; box-shadow:0 2px 14px rgba(10,20,45,.18); }
.tn-inner{ max-width:1360px; margin:0 auto; display:flex; align-items:center; gap:14px; padding:0 18px; height:64px; }
.tn-brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:none; }
.tn-brandtext{ display:flex; flex-direction:column; line-height:1.15; }
.tn-brandtext b{ color:#fff; font-size:17px; font-weight:800; letter-spacing:.01em; }
.tn-brandtext small{ color:#9fb0cf; font-size:10.5px; }
.tn-menu{ display:flex; align-items:center; gap:2px; flex:1; overflow:visible; }
.tn-link{ display:inline-flex; align-items:center; gap:7px; padding:0 13px; height:64px;
    color:#cdd7ea; font-size:13.5px; font-weight:500; text-decoration:none; background:none; border:none; cursor:pointer;
    border-bottom:3px solid transparent; white-space:nowrap; font-family:inherit; }
.tn-link .tn-ico{ font-size:15px; opacity:.9; }
.tn-link:hover{ color:#fff; background:rgba(255,255,255,.06); }
.tn-link.active{ color:#fff; border-bottom-color:var(--brand); background:rgba(18,176,189,.14); }
.caret{ font-size:10px; opacity:.8; }
.tn-drop{ position:relative; }
.tn-drop-menu{ display:none; position:absolute; top:60px; inset-inline-start:0; min-width:210px;
    background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 16px 40px rgba(15,30,60,.18);
    padding:6px; z-index:130; }
.tn-drop.open .tn-drop-menu{ display:block; }
.tn-drop-menu a{ display:block; padding:10px 12px; border-radius:8px; color:var(--ink); font-size:13.5px; text-decoration:none; }
.tn-drop-menu a:hover{ background:var(--brand-50); color:var(--brand-700); }
.tn-right{ display:flex; align-items:center; gap:10px; flex:none; }
.offline-badge{ background:#fde8e8; color:#b42318; font-size:11px; padding:3px 8px; border-radius:20px; }
.btn-install{ background:var(--brand); color:#fff; border:none; padding:8px 12px; border-radius:9px; font-size:12.5px; font-weight:600; cursor:pointer; }
.btn-install:hover{ background:var(--brand-700); }
.tn-user{ position:relative; }
.tn-user-btn{ display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
    color:#fff; padding:5px 10px 5px 5px; border-radius:30px; cursor:pointer; font-family:inherit; }
.tn-avatar{ width:30px; height:30px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; font-weight:700; font-size:13px; }
.tn-user-name{ font-size:13px; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tn-user-menu{ display:none; position:absolute; top:52px; inset-inline-end:0; min-width:210px; background:#fff;
    border:1px solid var(--line); border-radius:12px; box-shadow:0 16px 40px rgba(15,30,60,.2); padding:8px; z-index:130; }
.tn-user.open .tn-user-menu{ display:block; }
.tn-user-head{ padding:8px 10px 10px; border-bottom:1px solid var(--line); margin-bottom:6px; display:flex; flex-direction:column; }
.tn-user-head b{ color:var(--ink); font-size:14px; }
.tn-user-head small{ color:var(--muted); font-size:12px; }
.tn-user-menu a{ display:block; padding:10px 12px; border-radius:8px; color:var(--ink); text-decoration:none; font-size:13.5px; }
.tn-user-menu a:hover{ background:#f2f4f8; }
.tn-burger{ display:none; background:none; border:none; color:#fff; font-size:24px; cursor:pointer; margin-inline-start:auto; }
.tn-mobile-only{ display:none; }

/* ---- Contenu pleine largeur ---- */
.content.wide{ max-width:1360px; margin:0 auto; height:auto; overflow:visible;
    padding:22px 18px 44px; display:grid; gap:20px; align-content:start; }

/* ---- Boutons/onglets/badges recolorés turquoise (héritent de --brand) ---- */
.btn-sm{ padding:7px 12px; font-size:12.5px; }

/* ============================================================
   Tableau de bord STOCKPRO
   ============================================================ */
.dash{ display:flex; flex-direction:column; gap:16px; }
.dash .panel{ background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 1px 2px rgba(20,30,55,.05),0 6px 18px rgba(20,30,55,.05); padding:18px 20px; }
.dash .panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.dash .panel-head h2{ font-size:15px; font-weight:700; color:var(--ink); margin:0; }

/* Aperçu du stock */
.ov-body{ display:flex; align-items:center; gap:34px; flex-wrap:wrap; }
.donut-wrap{ position:relative; width:150px; height:150px; flex:none; }
.donut-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.donut-center span{ font-size:11px; color:var(--muted); }
.donut-center b{ font-size:26px; font-weight:800; color:var(--ink); }
.ov-legend{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.ov-legend li{ display:flex; align-items:center; gap:10px; font-size:14px; color:#48546c; }
.ov-legend .dot{ width:12px; height:12px; border-radius:3px; display:inline-block; }
.ov-legend b{ margin-inline-start:auto; color:var(--ink); }

/* KPI */
.dash-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.kpi{ position:relative; background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px;
    box-shadow:0 1px 2px rgba(20,30,55,.05),0 6px 18px rgba(20,30,55,.05); overflow:hidden; }
.kpi-ico{ position:absolute; top:14px; inset-inline-end:14px; width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-size:18px; background:var(--brand-50); color:var(--brand); }
.kpi-ico.teal{ background:#e4f6f8; color:#0e909b; } .kpi-ico.red{ background:#fde8e8; color:#d6492f; }
.kpi-ico.amber{ background:#fdf0d8; color:#b7791f; }
.kpi-label{ display:block; font-size:13px; color:var(--muted); }
.kpi-value{ display:block; font-size:28px; font-weight:800; color:var(--ink); margin-top:4px; }
.kpi-sub{ display:block; font-size:12px; color:var(--muted); margin-top:4px; }
.kpi-list{ list-style:none; margin:8px 0 0; padding:0; }
.kpi-list li{ font-size:13px; color:#48546c; padding:2px 0; border-inline-start:3px solid var(--danger); padding-inline-start:8px; margin-bottom:3px; }
.kpi-list li.more{ border:none; color:var(--muted); font-size:12px; }

/* Rangée basse : 3 panneaux */
.dash-grid{ display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:16px; align-items:start; }

/* Barres */
.bars{ display:flex; align-items:flex-end; gap:14px; height:200px; padding-top:14px; }
.bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; min-width:0; }
.bar-val{ font-size:11px; color:var(--muted); font-weight:600; }
.bar{ width:100%; max-width:44px; background:linear-gradient(180deg,#19bcc9,#12a0ac); border-radius:6px 6px 0 0; }
.bar-label{ font-size:11px; color:#55617a; text-align:center; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Badges statut */
.badge2{ font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:20px; display:inline-block; }
.badge2.b-red{ background:#fde8e8; color:#c0392b; } .badge2.b-orange{ background:#fdeccf; color:#b7791f; }
.badge2.b-green{ background:#e7f6ee; color:#15734e; }

/* Activités */
.activity{ list-style:none; margin:0; padding:0; }
.activity li{ display:flex; gap:11px; padding:9px 0; border-bottom:1px solid #f0f2f6; }
.activity li:last-child{ border-bottom:none; }
.act-dot{ width:9px; height:9px; border-radius:50%; margin-top:6px; flex:none; }
.act-dot.in{ background:var(--ok); } .act-dot.out{ background:var(--accent); }
.act-body{ flex:1; min-width:0; }
.act-text{ font-size:13px; color:#3f4a60; line-height:1.4; }
.act-time{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.empty{ color:var(--muted); font-size:13.5px; padding:14px 2px; }

/* ---- Responsive : menu mobile déroulant ---- */
@media (max-width:1024px){
    .topnav{ position:fixed; left:0; right:0; }
    body.is-app{ padding-top:64px; }
    .tn-burger{ display:block; order:-1; margin:0; }
    .tn-right{ margin-inline-start:auto; }
    .tn-user-name{ display:none; }
    .tn-menu{ display:none; position:fixed; top:64px; bottom:0; inset-inline-start:0; width:min(82vw,300px); flex-direction:column; align-items:stretch;
        background:var(--navy-2); padding:8px 8px 24px; gap:2px; box-shadow:8px 16px 36px rgba(10,20,45,.42);
        border-end-end-radius:16px; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; z-index:125; }
    .tn-menu.open{ display:flex; }
    .tn-link{ height:auto; padding:12px 14px; border-bottom:none; border-radius:8px; }
    .tn-link.active{ background:rgba(18,176,189,.2); }
    .tn-mobile-only{ display:flex; }
    .tn-drop{ display:flex; flex-direction:column; }
    .tn-drop-btn{ pointer-events:none; opacity:.7; font-size:12px; text-transform:uppercase; letter-spacing:.03em; }
    .tn-drop-btn .caret{ display:none; }
    .tn-drop-menu{ display:block; position:static; background:none; border:none; box-shadow:none; padding:0 0 4px 10px; min-width:0; }
    .tn-drop-menu a{ color:#cdd7ea; padding:9px 12px; }
    .tn-drop-menu a:hover{ background:rgba(255,255,255,.08); color:#fff; }
}
@media (max-width:900px){
    .dash-grid{ grid-template-columns:1fr; }
    .dash-kpis{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
    .dash-kpis{ grid-template-columns:1fr 1fr; }
    .tn-inner{ padding:0 12px; gap:8px; }
    .tn-brandtext small{ display:none; }
    .ov-body{ gap:20px; justify-content:center; }
    .content.wide{ padding:16px 12px 40px; }
}

/* Modal de scan par douchette (USB / Bluetooth) */
.scan-guide{ padding:24px 20px 8px; text-align:center; }
.scan-ico{ font-size:30px; letter-spacing:2px; color:var(--brand); margin-bottom:12px; font-family:monospace; }
.scan-guide p{ font-size:14px; color:var(--ink); line-height:1.55; margin:0; }
.scan-guide .muted{ font-size:12.5px; color:var(--muted); }
.scan-manual input{ height:46px; border:1px solid var(--line); border-radius:9px; padding:0 12px; font-size:16px; }
.scan-manual input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(18,176,189,.14); }

/* Menu mobile : verrouille le défilement de la PAGE quand le menu est ouvert
   (seul le menu défile), et place le fond assombri sous le menu. */
html.menu-open, body.menu-open{ overflow:hidden; overscroll-behavior:none; }
.sidebar-backdrop{ z-index:110; }

/* Barre de défilement verticale visible dans le menu mobile */
.tn-menu{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.35) transparent; }
.tn-menu::-webkit-scrollbar{ width:7px; }
.tn-menu::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.35); border-radius:4px; }
.tn-menu::-webkit-scrollbar-track{ background:transparent; }

/* Logo téléversé + aperçu dans les réglages */
.tn-logo-img{ display:block; width:auto; max-width:190px; object-fit:contain; }
.brand-preview{ display:flex; align-items:center; gap:14px; margin:6px 0 10px; padding:10px 12px; background:#16233f; border-radius:10px; }
.brand-preview img{ height:42px; width:auto; }
.brand-preview .check{ color:#dfe6f2; }

/* Indicateur de défilement personnalisé du menu mobile (visible partout) */
.tn-scrollthumb{ display:none; position:fixed; width:5px; border-radius:3px;
    background:rgba(255,255,255,.6); z-index:130; pointer-events:none; }

/* Le modal d'aide/installation et de scan doit passer AU-DESSUS de l'en-tête fixe */
.scan-overlay{ z-index:500; }
/* Indicateur de défilement du menu mobile — plus visible */
.tn-scrollthumb{ width:6px; background:rgba(255,255,255,.72); box-shadow:0 0 0 1px rgba(0,0,0,.12); }

/* ---- Sélecteur de langue (en-tête + connexion) ---- */
.lang-select{ background:#1d2b4f; color:#fff; border:1px solid #35507f; border-radius:8px;
    padding:6px 8px; font-size:13px; font-weight:600; cursor:pointer; }
.lang-select:focus{ outline:2px solid #5ec9d6; }
.sp-lang{ position:absolute; top:14px; inset-inline-end:16px; z-index:5; }
.sp-lang .lang-select{ background:rgba(255,255,255,.92); color:#22386a; border-color:#c8d4ea; }
@media (max-width:1000px){ .tn-right .lang-select{ font-size:12px; padding:5px 6px; } }