/* style-page.css
 *
 * Extrait de dist/index.html et de dist/app.js, sans retouche : les
 * declarations sont celles d avant, au meme ordre. Blocs 0 a 2 du document, qui etaient AVANT tailwind-static.css.
 *
 * Deplacer du CSS dans un fichier ne change pas la cascade SI ET
 * SEULEMENT SI l ordre des sources reste celui d avant. Ces blocs
 * etaient de part et d autre de tailwind-static.css, d ou deux
 * fichiers et non un seul.
 */

/* --- bloc 0 du document --- */
/* Anti-jump: reserve la place des icones lucide avant leur conversion.
   NE PAS forcer width/height ici : le placeholder doit avoir EXACTEMENT la
   geometrie du <svg> final. createIcons recopie les classes de l'element
   (w-5 h-5, w-4 h-4...) sur le <svg> ; un placeholder fige a 1em casserait
   cette egalite — mesure : placeholder 16px vs svg 20px pour w-5 h-5, soit
   un saut de 4px a chaque re-render. On laisse donc les classes d'utilite
   dimensionner le placeholder comme elles dimensionnent le svg. */
        i[data-lucide] { display:block; line-height:1; }
        svg.lucide { vertical-align: middle; }

/* --- bloc 1 du document --- */
* { font-family: 'Inter', sans-serif; }

        /* ========== WHATSAPP DARK THEME ========== */
        :root {
            --wa-bg-primary: #111b21;
            --wa-bg-secondary: #202c33;
            --wa-bg-card: #1f2c34;
            --wa-bg-hover: #2a3942;
            --wa-bg-input: #2a3942;
            --wa-text-primary: #e9edef;
            --wa-text-secondary: #8696a0;
            --wa-text-muted: #667781;
            --wa-border: #2a3942;
            --wa-accent: #00a884;
            --wa-accent-hover: #06cf9c;
            --wa-success: #25d366;
            --wa-danger: #ea4335;
            --wa-warning: #f59e0b;
        }

        /* Dark theme application */
        html.vendeur-dark,
        html.vendeur-dark body {
            background-color: var(--wa-bg-primary) !important;
            color: var(--wa-text-primary) !important;
        }

        html.vendeur-dark #app {
            background-color: var(--wa-bg-primary) !important;
        }

        /* Sidebar dark */
        html.vendeur-dark .bg-white,
        html.vendeur-dark .bg-slate-50,
        html.vendeur-dark .bg-gray-50 {
            background-color: var(--wa-bg-secondary) !important;
        }

        /* Cards and panels */
        html.vendeur-dark .bg-slate-100,
        html.vendeur-dark .bg-gray-100,
        html.vendeur-dark .bg-emerald-50,
        html.vendeur-dark .bg-green-50,
        html.vendeur-dark .bg-blue-50,
        html.vendeur-dark .bg-amber-50,
        html.vendeur-dark .bg-orange-50,
        html.vendeur-dark .bg-red-50,
        html.vendeur-dark .bg-purple-50,
        html.vendeur-dark .bg-pink-50,
        html.vendeur-dark .bg-indigo-50 {
            background-color: var(--wa-bg-card) !important;
        }

        /* Text colors */
        html.vendeur-dark .text-slate-900,
        html.vendeur-dark .text-slate-800,
        html.vendeur-dark .text-slate-700,
        html.vendeur-dark .text-gray-900,
        html.vendeur-dark .text-gray-800,
        html.vendeur-dark .text-gray-700 {
            color: var(--wa-text-primary) !important;
        }

        html.vendeur-dark .text-slate-600,
        html.vendeur-dark .text-slate-500,
        html.vendeur-dark .text-gray-600,
        html.vendeur-dark .text-gray-500 {
            color: var(--wa-text-secondary) !important;
        }

        html.vendeur-dark .text-slate-400,
        html.vendeur-dark .text-slate-300,
        html.vendeur-dark .text-gray-400,
        html.vendeur-dark .text-gray-300 {
            color: var(--wa-text-muted) !important;
        }

        /* Borders */
        html.vendeur-dark .border-slate-200,
        html.vendeur-dark .border-slate-100,
        html.vendeur-dark .border-gray-200,
        html.vendeur-dark .border-gray-100,
        html.vendeur-dark .border-slate-300,
        html.vendeur-dark .border-gray-300 {
            border-color: var(--wa-border) !important;
        }

        /* Inputs */
        html.vendeur-dark input,
        html.vendeur-dark select,
        html.vendeur-dark textarea {
            background-color: var(--wa-bg-input) !important;
            border-color: var(--wa-border) !important;
            color: var(--wa-text-primary) !important;
        }

        html.vendeur-dark input::placeholder,
        html.vendeur-dark textarea::placeholder {
            color: var(--wa-text-muted) !important;
        }

        html.vendeur-dark input:focus,
        html.vendeur-dark select:focus,
        html.vendeur-dark textarea:focus {
            border-color: var(--wa-accent) !important;
            outline-color: var(--wa-accent) !important;
        }

        /* Buttons */
        html.vendeur-dark .bg-slate-200,
        html.vendeur-dark .bg-gray-200 {
            background-color: var(--wa-bg-hover) !important;
        }

        /* Hover states */
        html.vendeur-dark .hover\:bg-slate-50:hover,
        html.vendeur-dark .hover\:bg-gray-50:hover,
        html.vendeur-dark .hover\:bg-slate-100:hover,
        html.vendeur-dark .hover\:bg-gray-100:hover {
            background-color: var(--wa-bg-hover) !important;
        }

        /* Shadows become subtle */
        html.vendeur-dark .shadow-sm,
        html.vendeur-dark .shadow,
        html.vendeur-dark .shadow-lg,
        html.vendeur-dark .shadow-xl {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
        }

        /* Glass effect for dark */
        html.vendeur-dark .glass {
            background: rgba(32, 44, 51, 0.85) !important;
            border-color: var(--wa-border) !important;
        }

        /* Dividers */
        html.vendeur-dark hr,
        html.vendeur-dark .divide-slate-100 > * + *,
        html.vendeur-dark .divide-slate-200 > * + * {
            border-color: var(--wa-border) !important;
        }

        /* Modal overlays */
        html.vendeur-dark .bg-black\/50,
        html.vendeur-dark .bg-slate-900\/50 {
            background-color: rgba(0, 0, 0, 0.7) !important;
        }

        /* Tables */
        html.vendeur-dark table th {
            background-color: var(--wa-bg-secondary) !important;
            color: var(--wa-text-secondary) !important;
        }

        html.vendeur-dark table td {
            border-color: var(--wa-border) !important;
        }

        html.vendeur-dark table tr:hover {
            background-color: var(--wa-bg-hover) !important;
        }

        /* Scrollbars */
        html.vendeur-dark ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        html.vendeur-dark ::-webkit-scrollbar-track {
            background: var(--wa-bg-primary);
        }

        html.vendeur-dark ::-webkit-scrollbar-thumb {
            background: var(--wa-bg-hover);
            border-radius: 3px;
        }

        html.vendeur-dark ::-webkit-scrollbar-thumb:hover {
            background: var(--wa-text-muted);
        }

        /* Keep accent colors vibrant */
        html.vendeur-dark .text-emerald-600,
        html.vendeur-dark .text-emerald-500,
        html.vendeur-dark .text-green-600,
        html.vendeur-dark .text-green-500 {
            color: var(--wa-accent) !important;
        }

        html.vendeur-dark .bg-emerald-500,
        html.vendeur-dark .bg-emerald-600,
        html.vendeur-dark .bg-green-500,
        html.vendeur-dark .bg-green-600 {
            background-color: var(--wa-accent) !important;
        }

        html.vendeur-dark .border-emerald-500,
        html.vendeur-dark .border-emerald-600 {
            border-color: var(--wa-accent) !important;
        }

        /* Ring colors */
        html.vendeur-dark .ring-slate-100,
        html.vendeur-dark .ring-slate-200 {
            --tw-ring-color: var(--wa-border) !important;
        }

        /* Gradient backgrounds keep their colors */
        html.vendeur-dark .gradient-vendeur {
            background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
        }

        /* ========== END WHATSAPP DARK THEME ========== */

        /* ========== LIVREUR DARK THEME ========== */
        :root {
            --liv-bg-primary: #1a1a2e;
            --liv-bg-secondary: #16213e;
            --liv-bg-card: #1f2937;
            --liv-bg-hover: #374151;
            --liv-bg-input: #374151;
            --liv-text-primary: #f9fafb;
            --liv-text-secondary: #d1d5db;
            --liv-text-muted: #9ca3af;
            --liv-border: #374151;
            --liv-accent: #ef4444;
            --liv-accent-secondary: #f97316;
            --liv-success: #10b981;
        }

        html.livreur-dark,
        html.livreur-dark body {
            background-color: var(--liv-bg-primary) !important;
            color: var(--liv-text-primary) !important;
        }

        html.livreur-dark #app {
            background-color: var(--liv-bg-primary) !important;
        }

        html.livreur-dark .bg-slate-100 {
            background-color: var(--liv-bg-primary) !important;
        }

        html.livreur-dark .bg-white,
        html.livreur-dark .bg-slate-50,
        html.livreur-dark .bg-gray-50 {
            background-color: var(--liv-bg-secondary) !important;
        }

        html.livreur-dark .bg-slate-200,
        html.livreur-dark .bg-gray-100,
        html.livreur-dark .bg-emerald-50,
        html.livreur-dark .bg-green-50,
        html.livreur-dark .bg-blue-50,
        html.livreur-dark .bg-amber-50,
        html.livreur-dark .bg-orange-50,
        html.livreur-dark .bg-red-50,
        html.livreur-dark .bg-purple-50,
        html.livreur-dark .bg-indigo-50,
        html.livreur-dark .bg-teal-50,
        html.livreur-dark .bg-cyan-50 {
            background-color: var(--liv-bg-card) !important;
        }

        /* Gradients spéciaux */
        html.livreur-dark .bg-gradient-to-r.from-amber-50,
        html.livreur-dark .bg-gradient-to-r.from-orange-50,
        html.livreur-dark .bg-gradient-to-r.from-emerald-50,
        html.livreur-dark .bg-gradient-to-r.from-blue-50 {
            background: linear-gradient(to right, var(--liv-bg-card), var(--liv-bg-hover)) !important;
        }

        html.livreur-dark .text-slate-900,
        html.livreur-dark .text-slate-800,
        html.livreur-dark .text-slate-700,
        html.livreur-dark .text-gray-900,
        html.livreur-dark .text-gray-800,
        html.livreur-dark .text-gray-700 {
            color: var(--liv-text-primary) !important;
        }

        html.livreur-dark .text-slate-600,
        html.livreur-dark .text-slate-500,
        html.livreur-dark .text-gray-600,
        html.livreur-dark .text-gray-500 {
            color: var(--liv-text-secondary) !important;
        }

        html.livreur-dark .text-slate-400,
        html.livreur-dark .text-slate-300,
        html.livreur-dark .text-gray-400,
        html.livreur-dark .text-gray-300 {
            color: var(--liv-text-muted) !important;
        }

        html.livreur-dark .border-slate-200,
        html.livreur-dark .border-slate-100,
        html.livreur-dark .border-gray-200,
        html.livreur-dark .border-gray-100,
        html.livreur-dark .border-slate-300 {
            border-color: var(--liv-border) !important;
        }

        html.livreur-dark .border-amber-200,
        html.livreur-dark .border-amber-300,
        html.livreur-dark .border-orange-200 {
            border-color: rgba(245, 158, 11, 0.4) !important;
        }

        html.livreur-dark .border-emerald-200,
        html.livreur-dark .border-emerald-300 {
            border-color: rgba(16, 185, 129, 0.4) !important;
        }

        html.livreur-dark input,
        html.livreur-dark select,
        html.livreur-dark textarea {
            background-color: var(--liv-bg-input) !important;
            border-color: var(--liv-border) !important;
            color: var(--liv-text-primary) !important;
        }

        html.livreur-dark input::placeholder,
        html.livreur-dark textarea::placeholder {
            color: var(--liv-text-muted) !important;
        }

        html.livreur-dark input:focus,
        html.livreur-dark select:focus,
        html.livreur-dark textarea:focus {
            border-color: var(--liv-accent) !important;
        }

        html.livreur-dark .hover\:bg-slate-50:hover,
        html.livreur-dark .hover\:bg-slate-100:hover,
        html.livreur-dark .hover\:bg-gray-50:hover,
        html.livreur-dark .hover\:bg-gray-100:hover {
            background-color: var(--liv-bg-hover) !important;
        }

        html.livreur-dark .shadow-sm,
        html.livreur-dark .shadow,
        html.livreur-dark .shadow-lg,
        html.livreur-dark .shadow-xl,
        html.livreur-dark .shadow-2xl {
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
        }

        /* Garder le gradient livreur vibrant */
        html.livreur-dark .gradient-livreur {
            background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
        }

        /* Badges et accents */
        html.livreur-dark .text-emerald-600,
        html.livreur-dark .text-emerald-700 {
            color: var(--liv-success) !important;
        }

        html.livreur-dark .text-amber-700,
        html.livreur-dark .text-amber-800,
        html.livreur-dark .text-amber-900 {
            color: #fbbf24 !important;
        }

        html.livreur-dark .text-red-600,
        html.livreur-dark .text-red-700 {
            color: var(--liv-accent) !important;
        }

        /* Scrollbars */
        html.livreur-dark ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        html.livreur-dark ::-webkit-scrollbar-track {
            background: var(--liv-bg-primary);
        }

        html.livreur-dark ::-webkit-scrollbar-thumb {
            background: var(--liv-bg-hover);
            border-radius: 3px;
        }

        html.livreur-dark ::-webkit-scrollbar-thumb:hover {
            background: var(--liv-text-muted);
        }

        /* Navigation du bas */
        html.livreur-dark nav.bg-white {
            background-color: var(--liv-bg-secondary) !important;
            border-color: var(--liv-border) !important;
        }

        /* Header */
        html.livreur-dark header.bg-white {
            background-color: var(--liv-bg-secondary) !important;
            border-color: var(--liv-border) !important;
        }

        /* ========== END LIVREUR DARK THEME ========== */

        /* ========== GESTIONNAIRE DARK THEME ========== */
        html.gestionnaire-dark,
        html.gestionnaire-dark body {
            background-color: var(--wa-bg-primary) !important;
            color: var(--wa-text-primary) !important;
        }

        html.gestionnaire-dark #app {
            background-color: var(--wa-bg-primary) !important;
        }

        html.gestionnaire-dark .bg-white,
        html.gestionnaire-dark .bg-slate-50,
        html.gestionnaire-dark .bg-gray-50 {
            background-color: var(--wa-bg-secondary) !important;
        }

        html.gestionnaire-dark .bg-slate-100,
        html.gestionnaire-dark .bg-gray-100,
        html.gestionnaire-dark .bg-amber-50,
        html.gestionnaire-dark .bg-orange-50,
        html.gestionnaire-dark .bg-yellow-50 {
            background-color: var(--wa-bg-card) !important;
        }

        html.gestionnaire-dark .text-slate-900,
        html.gestionnaire-dark .text-slate-800,
        html.gestionnaire-dark .text-slate-700,
        html.gestionnaire-dark .text-gray-900,
        html.gestionnaire-dark .text-gray-800,
        html.gestionnaire-dark .text-gray-700 {
            color: var(--wa-text-primary) !important;
        }

        html.gestionnaire-dark .text-slate-600,
        html.gestionnaire-dark .text-slate-500,
        html.gestionnaire-dark .text-gray-600,
        html.gestionnaire-dark .text-gray-500 {
            color: var(--wa-text-secondary) !important;
        }

        html.gestionnaire-dark .border-slate-200,
        html.gestionnaire-dark .border-slate-100,
        html.gestionnaire-dark .border-gray-200,
        html.gestionnaire-dark .border-gray-100 {
            border-color: var(--wa-border) !important;
        }

        html.gestionnaire-dark input,
        html.gestionnaire-dark select,
        html.gestionnaire-dark textarea {
            background-color: var(--wa-bg-input) !important;
            border-color: var(--wa-border) !important;
            color: var(--wa-text-primary) !important;
        }

        html.gestionnaire-dark .bg-slate-200,
        html.gestionnaire-dark .bg-gray-200 {
            background-color: var(--wa-bg-hover) !important;
        }

        html.gestionnaire-dark .shadow-sm,
        html.gestionnaire-dark .shadow,
        html.gestionnaire-dark .shadow-lg {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
        }

        html.gestionnaire-dark table th {
            background-color: var(--wa-bg-secondary) !important;
            color: var(--wa-text-secondary) !important;
        }

        html.gestionnaire-dark table td {
            border-color: var(--wa-border) !important;
        }

        html.gestionnaire-dark ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        html.gestionnaire-dark ::-webkit-scrollbar-track {
            background: var(--wa-bg-primary);
        }

        html.gestionnaire-dark ::-webkit-scrollbar-thumb {
            background: var(--wa-bg-hover);
            border-radius: 3px;
        }
        /* ========== END GESTIONNAIRE DARK THEME ========== */

        /* ========== MANAGER DARK THEME ========== */
        html.manager-dark,
        html.manager-dark body {
            background-color: var(--wa-bg-primary) !important;
            color: var(--wa-text-primary) !important;
        }

        html.manager-dark #app {
            background-color: var(--wa-bg-primary) !important;
        }

        html.manager-dark .bg-white,
        html.manager-dark .bg-slate-50,
        html.manager-dark .bg-gray-50 {
            background-color: var(--wa-bg-secondary) !important;
        }

        html.manager-dark .bg-slate-100,
        html.manager-dark .bg-gray-100,
        html.manager-dark .bg-sky-50,
        html.manager-dark .bg-blue-50,
        html.manager-dark .bg-cyan-50 {
            background-color: var(--wa-bg-card) !important;
        }

        html.manager-dark .text-slate-900,
        html.manager-dark .text-slate-800,
        html.manager-dark .text-slate-700,
        html.manager-dark .text-gray-900,
        html.manager-dark .text-gray-800,
        html.manager-dark .text-gray-700 {
            color: var(--wa-text-primary) !important;
        }

        html.manager-dark .text-slate-600,
        html.manager-dark .text-slate-500,
        html.manager-dark .text-gray-600,
        html.manager-dark .text-gray-500 {
            color: var(--wa-text-secondary) !important;
        }

        html.manager-dark .border-slate-200,
        html.manager-dark .border-slate-100,
        html.manager-dark .border-gray-200,
        html.manager-dark .border-gray-100 {
            border-color: var(--wa-border) !important;
        }

        html.manager-dark input,
        html.manager-dark select,
        html.manager-dark textarea {
            background-color: var(--wa-bg-input) !important;
            border-color: var(--wa-border) !important;
            color: var(--wa-text-primary) !important;
        }

        html.manager-dark .bg-slate-200,
        html.manager-dark .bg-gray-200 {
            background-color: var(--wa-bg-hover) !important;
        }

        html.manager-dark .shadow-sm,
        html.manager-dark .shadow,
        html.manager-dark .shadow-lg {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
        }

        html.manager-dark table th {
            background-color: var(--wa-bg-secondary) !important;
            color: var(--wa-text-secondary) !important;
        }

        html.manager-dark table td {
            border-color: var(--wa-border) !important;
        }

        html.manager-dark ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        html.manager-dark ::-webkit-scrollbar-track {
            background: var(--wa-bg-primary);
        }

        html.manager-dark ::-webkit-scrollbar-thumb {
            background: var(--wa-bg-hover);
            border-radius: 3px;
        }
        /* ========== END MANAGER DARK THEME ========== */

        /* ========== PDG DARK THEME ========== */
        html.pdg-dark,
        html.pdg-dark body {
            background-color: var(--wa-bg-primary) !important;
            color: var(--wa-text-primary) !important;
        }

        html.pdg-dark #app {
            background-color: var(--wa-bg-primary) !important;
        }

        html.pdg-dark .bg-white,
        html.pdg-dark .bg-slate-50,
        html.pdg-dark .bg-gray-50 {
            background-color: var(--wa-bg-secondary) !important;
        }

        html.pdg-dark .bg-slate-100,
        html.pdg-dark .bg-gray-100,
        html.pdg-dark .bg-amber-50,
        html.pdg-dark .bg-yellow-50,
        html.pdg-dark .bg-indigo-50,
        html.pdg-dark .bg-violet-50 {
            background-color: var(--wa-bg-card) !important;
        }

        html.pdg-dark .text-slate-900,
        html.pdg-dark .text-slate-800,
        html.pdg-dark .text-slate-700,
        html.pdg-dark .text-gray-900,
        html.pdg-dark .text-gray-800,
        html.pdg-dark .text-gray-700 {
            color: var(--wa-text-primary) !important;
        }

        html.pdg-dark .text-slate-600,
        html.pdg-dark .text-slate-500,
        html.pdg-dark .text-gray-600,
        html.pdg-dark .text-gray-500 {
            color: var(--wa-text-secondary) !important;
        }

        html.pdg-dark .border-slate-200,
        html.pdg-dark .border-slate-100,
        html.pdg-dark .border-gray-200,
        html.pdg-dark .border-gray-100 {
            border-color: var(--wa-border) !important;
        }

        html.pdg-dark input,
        html.pdg-dark select,
        html.pdg-dark textarea {
            background-color: var(--wa-bg-input) !important;
            border-color: var(--wa-border) !important;
            color: var(--wa-text-primary) !important;
        }

        html.pdg-dark .bg-slate-200,
        html.pdg-dark .bg-gray-200 {
            background-color: var(--wa-bg-hover) !important;
        }

        html.pdg-dark .shadow-sm,
        html.pdg-dark .shadow,
        html.pdg-dark .shadow-lg {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
        }

        html.pdg-dark table th {
            background-color: var(--wa-bg-secondary) !important;
            color: var(--wa-text-secondary) !important;
        }

        html.pdg-dark table td {
            border-color: var(--wa-border) !important;
        }

        html.pdg-dark ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        html.pdg-dark ::-webkit-scrollbar-track {
            background: var(--wa-bg-primary);
        }

        html.pdg-dark ::-webkit-scrollbar-thumb {
            background: var(--wa-bg-hover);
            border-radius: 3px;
        }

        /* Couleurs d'accent ambrées pour PDG en mode sombre */
        html.pdg-dark .text-amber-600,
        html.pdg-dark .text-amber-500,
        html.pdg-dark .text-amber-700 {
            color: #fbbf24 !important;
        }

        html.pdg-dark .bg-amber-500,
        html.pdg-dark .bg-amber-600 {
            background-color: #f59e0b !important;
        }
        /* ========== END PDG DARK THEME ========== */

        /* Gradients Premium */
        .gradient-pdg { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); }
        .gradient-manager { background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%); }
        .gradient-gestionnaire { background: linear-gradient(135deg, #d97706 0%, #ea580c 100%); }
        .gradient-vendeur { background: linear-gradient(135deg, #059669 0%, #10b981 100%); }
        .gradient-livreur { background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%); }

        /* FIX layout-shift: la geometrie du placeholder doit egaler celle du <svg>.
           Regle consolidee en tete de fichier (bloc 0) — elle porte aussi la
           taille via les classes d'utilite. On ne redefinit plus rien ici :
           deux regles qui decrivent la meme chose finissent par diverger. */

        /* FIX page-bouge: réserve la largeur de la barre de défilement même quand le contenu
           est plus court que l'écran. Sans ça, chaque re-render qui change la hauteur de page
           (filtres, onglets, etc.) fait apparaître/disparaître la scrollbar (~17px sous Windows)
           → TOUTE la page se décale horizontalement à chaque clic. */
        html { scrollbar-gutter: stable; }

        /* Glassmorphism */
        .glass {
            background: rgba(255, 255, 255, 0.72);
            -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
            border: 1px solid rgba(255, 255, 255, 0.55);
        }
        .glass-dark {
            background: rgba(15, 23, 42, 0.55);
            -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
            border: 1px solid rgba(255, 255, 255, 0.12);
        }

        /* Animations pour le panier flottant */
        @keyframes slideInRight {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        @keyframes slideUp {
            from { transform: translateY(100%); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        .slide-in-right {
            animation: slideInRight 0.3s ease-out forwards;
        }
        .slide-up {
            animation: slideUp 0.3s ease-out forwards;
        }

        /* ========== RESPONSIVE MOBILE ADAPTATION ========== */
        /* Sidebar: hidden on mobile, overlay on toggle */
        @media (max-width: 1023px) {
            aside {
                position: fixed !important;
                left: 0; top: 0; bottom: 0;
                z-index: 999 !important;
                transform: translateX(-100%);
                transition: transform 0.3s cubic-bezier(0.4,0,0.2,1) !important;
                width: 280px !important;
                max-width: 85vw !important;
            }
            aside.mobile-open {
                transform: translateX(0) !important;
            }
            .mobile-sidebar-overlay {
                display: none;
                position: fixed;
                inset: 0;
                background: rgba(0,0,0,0.5);
                z-index: 998;
                backdrop-filter: blur(2px);
            }
            .mobile-sidebar-overlay.active {
                display: block;
            }
            /* Hamburger button */
            .mobile-hamburger {
                /* Même raison que .mobile-bottom-nav : pas de `!important`,
                   sinon hideMobileNav() ne peut pas masquer le bouton apres
                   deconnexion. */
                display: flex;
                position: fixed;
                top: 12px; left: 12px;
                z-index: 997;
                width: 44px; height: 44px;
                border-radius: 12px;
                background: linear-gradient(135deg, #1e293b, #334155);
                color: white;
                align-items: center;
                justify-content: center;
                border: none;
                cursor: pointer;
                box-shadow: 0 2px 8px rgba(0,0,0,0.3);
                -webkit-tap-highlight-color: transparent;
            }
            .mobile-hamburger svg { width: 22px; height: 22px; }
            /* Main content: full width on mobile - zero side padding */
            main {
                padding: 0 !important;
                padding-top: 60px !important;
                padding-bottom: 70px !important;
            }
            /* Settings pages full width on mobile */
            main > .space-y-6.fade-in,
            main > .space-y-4,
            main > div > .space-y-6.fade-in,
            main > div {
                padding-left: 0 !important;
                padding-right: 0 !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
            }
            /* Cards use full width */
            main .space-y-6 > div,
            main .space-y-4 > div {
                margin-left: 0 !important;
                margin-right: 0 !important;
            }
            /* Full width buttons and cards - tighter padding on mobile */
            main .p-6 { padding: 12px !important; }
            main .p-8 { padding: 12px !important; }
            main .px-6 { padding-left: 12px !important; padding-right: 12px !important; }
            main .px-8 { padding-left: 12px !important; padding-right: 12px !important; }
            /* Remove excessive border radius for edge-to-edge feel */
            main .rounded-2xl,
            main .rounded-3xl,
            main .rounded-xl {
                border-radius: 8px !important;
            }
            /* Full width grid items with tighter gap */
            main .grid { gap: 8px !important; }
            /* Ensure buttons fill width */
            main button.w-full { width: 100% !important; }
            /* Bottom mobile nav */
            /*
             * PAS de `!important` sur `display`. Il battait le
             * `element.style.display = 'none'` que pose App.logout() pour
             * masquer la barre : la regle de feuille l'emportait sur le style
             * inline, la barre restait donc visible (computed: flex) apres
             * deconnexion, par-dessus la page de connexion.
             *
             * Sans `!important`, le style inline gagne quand il existe (barre
             * masquee apres logout) et la regle s'applique sinon (affichage
             * normal). Meme correctif pour le hamburger et l'overlay.
             */
            .mobile-bottom-nav {
                display: flex;
                position: fixed;
                bottom: 0; left: 0; right: 0;
                z-index: 996;
                background: linear-gradient(to top, #0f172a, #1e293b);
                border-top: 1px solid rgba(255,255,255,0.1);
                padding: 4px 8px;
                padding-bottom: env(safe-area-inset-bottom, 4px);
                justify-content: space-around;
                align-items: center;
                gap: 2px;
            }
            .mobile-bottom-nav button {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 2px;
                padding: 6px 2px;
                border: none;
                background: transparent;
                color: #94a3b8;
                font-size: 9px;
                font-weight: 700;
                cursor: pointer;
                border-radius: 8px;
                transition: all 0.2s;
                -webkit-tap-highlight-color: transparent;
                min-width: 0;
            }
            .mobile-bottom-nav button.active {
                color: #10b981;
                background: rgba(16,185,129,0.1);
            }
            .mobile-bottom-nav button svg,
            .mobile-bottom-nav button i { width: 20px; height: 20px; }
            /* Responsive grids */
            .grid-cols-2 { grid-template-columns: 1fr !important; }
            .grid-cols-3 { grid-template-columns: 1fr !important; }
            .grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
            .grid-cols-5 { grid-template-columns: repeat(2, 1fr) !important; }
            .grid-cols-6 { grid-template-columns: repeat(2, 1fr) !important; }
            /* Fix text overflow */
            .truncate, h1, h2, h3 { overflow-wrap: break-word; word-break: break-word; }
            /* Make tables scrollable */
            table { display: block; overflow-x: auto; }
            /* Fix fixed-right floating buttons */
            .fixed.right-4.bottom-6 { bottom: 70px !important; }
        }
        /* Tablet: handled by mobile overlay mode */
        /* Hide mobile elements on desktop */
        @media (min-width: 1024px) {
            .mobile-hamburger { display: none !important; }
            .mobile-bottom-nav { display: none !important; }
            .mobile-sidebar-overlay { display: none !important; }
        }
        /* Touch-friendly buttons on mobile */
        @media (max-width: 1023px) {
            button, .btn, [onclick] { min-height: 40px; }
            input, select, textarea { font-size: 16px !important; }
        }


        /* --- Pastille de synchronisation ---
           Meme langage visuel que les messages : surface blanche, liseré de
           couleur, pastille d icone. Elle reste en bas a gauche, donc elle ne
           peut jamais croiser les messages qui arrivent en haut a droite. */
        #syncIndicator {
            --pastille-teinte: #2563eb;
            --pastille-fond: #eff6ff;
            --pastille-bord: #bfdbfe;
            position: fixed;
            bottom: 20px;
            left: 20px;
            z-index: 9998;
            display: none;
            align-items: center;
            gap: 10px;
            padding: 9px 14px 9px 12px;
            border-radius: 12px;
            background: #ffffff;
            border: 1px solid var(--pastille-bord);
            box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 28px -10px rgba(15, 23, 42, .22);
            color: #0f172a;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            font-size: 13px;
            font-weight: 550;
            line-height: 1.3;
            overflow: hidden;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity .24s ease, transform .24s cubic-bezier(.22, 1, .36, 1);
            cursor: pointer;
            user-select: none;
            max-width: min(320px, calc(100vw - 32px));
        }
        /* Liseré de couleur à gauche, comme les messages. */
        #syncIndicator::before {
            content: '';
            position: absolute;
            left: 0; top: 0; bottom: 0;
            width: 3px;
            background: var(--pastille-teinte);
        }
        #syncIndicator.visible {
            display: flex;
            opacity: 1;
            transform: translateY(0);
        }
        #syncIndicator .sync-puce {
            flex: 0 0 auto;
            width: 26px;
            height: 26px;
            border-radius: 8px;
            display: grid;
            place-items: center;
            background: var(--pastille-fond);
            color: var(--pastille-teinte);
        }
        #syncIndicator .sync-icon {
            width: 15px;
            height: 15px;
            stroke-width: 2.25;
        }
        #syncIndicator .sync-spinner { animation: syncSpin 1s linear infinite; }
        @keyframes syncSpin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        #syncIndicator .sync-texte {
            flex: 1 1 auto;
            min-width: 0;
            overflow-wrap: anywhere;
        }
        #syncIndicator .sync-time {
            flex: 0 0 auto;
            font-size: 11px;
            font-weight: 500;
            color: #94a3b8;
            margin-left: 8px;
            padding-left: 8px;
            position: relative;
        }
        /* Un discret separateur entre le message et l horodatage. */
        #syncIndicator .sync-time::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            width: 3px;
            height: 3px;
            margin-top: -1.5px;
            border-radius: 50%;
            background: #cbd5e1;
        }
        /* Etats : meme palette que les messages. */
        #syncIndicator.sync-ok { --pastille-teinte: #059669; --pastille-fond: #ecfdf5; --pastille-bord: #a7f3d0; }
        #syncIndicator.sync-err { --pastille-teinte: #dc2626; --pastille-fond: #fef2f2; --pastille-bord: #fecaca; }
        #syncIndicator.sync-conflict { --pastille-teinte: #d97706; --pastille-fond: #fffbeb; --pastille-bord: #fde68a; }
        /* Au-dessus de la barre de navigation du bas, sur petit ecran. */
        @media (max-width: 1023px) {
            #syncIndicator { bottom: 80px; }
        }
        @media (prefers-reduced-motion: reduce) {
            #syncIndicator { transition: none; }
            #syncIndicator .sync-spinner { animation-duration: 2.4s; }
        }

/* --- bloc 2 du document --- */
/* -------------------------------------------------------------------
   RAYA SaaS - Auth & Onboarding Styles
   Adapted from Modules API/js/onboarding-ui.js
   ------------------------------------------------------------------- */

/* ===== AUTH PAGE — refonte 2026-09-28 =====
   Problème : la page de connexion utilisait un dégradé violet générique
   (#667eea → #764ba2) alors que TOUTE l'application est en émeraude/ardoise
   (barre latérale en emerald-900 → slate-950, accent #059669). Le premier
   écran vu par l'utilisateur ne ressemblait pas au produit.
   Refonte : palette alignée sur l'application, hiérarchie de lecture claire,
   panneau de gauche plus sobre (fini le degrade "startup" generique), et
   formulaire plus aere. Aucun ID ni handler touche. */
.auth-page, .auth-page *, .auth-page *::before, .auth-page *::after { box-sizing: border-box; }

.auth-page {
    display: flex;
    min-height: 100vh;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f8fafc;
}

/* ---------- Panneau de gauche ---------- */
.auth-left {
    flex: 1.15;
    display: none;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 3.5rem;
    color: #e2e8f0;
    position: relative;
    background: transparent;   /* le degrade unique est porte par .auth-page::before */
}
.auth-left::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(760px 420px at 18% 8%, rgba(16, 185, 129, .20), transparent 70%);
    pointer-events: none;
}
@media (min-width: 1024px) { .auth-left { display: flex; } }

/* ============================================================
/* ============================================================
   PAGE DE CONNEXION — transition continue + demo produit
   ------------------------------------------------------------
   1. PLUS AUCUNE LIGNE DE SEPARATION
      c'etait precisement la ligne visible que l'utilisateur signalait, et un
      liseré ne peut pas disparaitre, il se voit. On l'a supprime.
      Le principe retenu : UN SEUL degrade pose sur toute la page, du vert
      émeraude a gauche jusqu'au blanc clair a droite. Il n'y a plus deux
      moities a relier, donc plus de frontiere possible. Les halos restent,
      ils vivent dans la zone sombre et adoucissent le degradé.

   2. DEMO PRODUIT ANIMEE (parcours vendeur)
      Une liste de puces ne prouve rien. A la place, un ecran de caisse
      rejoue en boucle le parcours complet :
        caisse -> selection d'un produit -> creation de livraison ->
        assignation d'un livreur -> page Finance.
      Realise en "bande de film" : les 5 scenes sont empilees et la piste
      est translated verticalement. Aucun minuteur JS, donc la boucle est
      parfaitement fluide et ne peut pas se desynchroniser.
   ============================================================ */

/* ---------- 1. Degrade unique, sans couture ---------- */
.auth-page {
    position: relative;
    background: #f8fafc;
    isolation: isolate;
}
.auth-page::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* Rampe etalee sur ~45% de la largeur : le sombre se fond dans le clair
       sans jamais presenter de frontiere perceptible. */
    background: linear-gradient(100deg,
        #065f46 0%,
        #0f172a 20%,
        #0b1220 31%,
        #16233a 40%,
        #1e293b 47%,
        #334155 54%,
        #4b5b6e 60%,
        #6b7a8d 66%,
        #94a3b8 71%,
        #b8c2ce 76%,
        #d7dee6 80%,
        #e9eef3 84%,
        #f4f7fa 88%,
        #f8fafc 93%,
        #f8fafc 100%);
}

.auth-left {
    background: transparent;   /* le degrade est desormais porte par .auth-page */
    isolation: auto;
}

/* Halos derives : ils vivent dans la zone sombre et debordent legerement
   dans la zone claire, sans etre roagnes (un rognage net cree un bord net). */
.auth-aurora {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
    filter: blur(70px);
}
.auth-aurora--a {
    width: 560px;
    height: 560px;
    top: -16%;
    left: -12%;
    background: radial-gradient(circle, rgba(16, 185, 129, .42) 0%, rgba(16, 185, 129, 0) 68%);
    animation: auth-drift-a 27s ease-in-out infinite alternate;
}
.auth-aurora--b {
    width: 480px;
    height: 480px;
    bottom: -20%;
    left: 26%;
    background: radial-gradient(circle, rgba(20, 184, 166, .30) 0%, rgba(245, 158, 11, .12) 46%, rgba(20, 184, 166, 0) 72%);
    animation: auth-drift-b 33s ease-in-out infinite alternate;
}
@keyframes auth-drift-a {
    0%   { transform: translate3d(calc(var(--ax, 0px) * .5), 0, 0) scale(1); }
    50%  { transform: translate3d(calc(80px + var(--ax, 0px) * .5), 40px, 0) scale(1.14); }
    100% { transform: translate3d(calc(150px + var(--ax, 0px) * .5), -22px, 0) scale(.95); }
}
@keyframes auth-drift-b {
    0%   { transform: translate3d(calc(var(--bx, 0px) * .5), 0, 0) scale(1.05); }
    50%  { transform: translate3d(calc(-70px + var(--bx, 0px) * .5), -34px, 0) scale(.93); }
    100% { transform: translate3d(calc(40px + var(--bx, 0px) * .5), 26px, 0) scale(1.16); }
}

/* Halo discret sur la zone claire, juste apres la zone sombre : Unit la
   fin du degrade avec le blanc, sans jamais former de bande. */
.auth-right::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 300px;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(120% 70% at 0% 40%, rgba(16, 185, 129, .10), rgba(16, 185, 129, 0) 70%);
    filter: blur(22px);
    animation: auth-veil 11s ease-in-out infinite alternate;
}
.auth-right > * { position: relative; z-index: 1; }
@keyframes auth-veil {
    0%   { opacity: .7; transform: scaleX(.92); }
    100% { opacity: 1;  transform: scaleX(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .auth-aurora, .auth-right::before { animation: none !important; }
}

/* ============================================================
   2. DEMO ANIMEE
   ============================================================ */

/* ============================================================
   DEMO — reproduction de l ecran REEL du compte vendeur
   Classes et libelles repris de VendeurModule.renderPOS() et
   showAssignDeliveryModal() (app.js). La fenetre est claire
   (comme l application), posee sur le panneau sombre.
   ============================================================ */
/* Demo de la page de connexion : video reelle du compte vendeur.
   Le cadre (barre de titre) reste identique, seul le contenu devient
   une video. muted est obligatoire pour la lecture automatique. */
.auth-demo {
    margin-top: 1.6rem;
    border-radius: 14px;
    overflow: hidden;
    background: #0b1220;
    border: 1px solid rgba(148, 163, 184, .3);
    box-shadow: 0 26px 52px -22px rgba(2, 6, 23, .75);
}
.auth-demo__bar {
    display: flex; align-items: center; gap: .45rem;
    padding: .42rem .6rem;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}
.auth-demo__dots { display: flex; gap: 4px; }
.auth-demo__dots i { width: 7px; height: 7px; border-radius: 50%; background: #cbd5e1; display: block; }
.auth-demo__dots i:first-child { background: #fb7185; }
.auth-demo__dots i:nth-child(2) { background: #fbbf24; }
.auth-demo__dots i:nth-child(3) { background: #34d399; }
.auth-demo__title { font-size: .62rem; font-weight: 800; color: #0f172a; letter-spacing: -.01em; }
.auth-demo__live {
    margin-left: auto; font-size: .5rem; font-weight: 800; letter-spacing: .06em;
    color: #059669; display: flex; align-items: center; gap: .25rem;
}
.auth-demo__live b {
    width: 5px; height: 5px; border-radius: 50%; background: #10b981; display: block;
    animation: auth-blink 1.6s ease-in-out infinite;
}
@keyframes auth-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.auth-demo__screen {
    position: relative;
    aspect-ratio: 1280 / 592;
    background: #0b1220;
    overflow: hidden;
}
.auth-demo__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    background: #0b1220;
}

/* Si l utilisateur limite les animations, on ne lance pas la video :
   l image d apercu reste affichee (voir le script plus bas). */
@media (prefers-reduced-motion: reduce) {
    .auth-demo__live b { animation: none !important; }
}
    .auth-demo__track, .auth-demo__view::after, .auth-demo__rail i::after,
    .dm-card--pick, .dm-qty, .dm-liv--pick, .dm-cta, .dm-progress i, .dm-bars i,
    .auth-demo__cursor, .auth-demo__live b { animation: none !important; }
    .dm-cta { opacity: 1; }
    .dm-qty { opacity: 1; }
    .auth-demo__cursor { display: none; }
    .dm-card--pick, .dm-liv--pick { transform: none; }
}
    .auth-demo__track,
    .auth-demo__view::after,
    .auth-demo__rail i::after,
    .auth-demo__prod--pick,
    .auth-demo__badge,
    .auth-demo__cursor,
    .auth-demo__fill,
    .auth-demo__btn,
    .auth-demo__courier--pick,
    .auth-demo__bars i,
    .auth-demo__live b {
        animation: none !important;
    }
    .auth-demo__fill { width: var(--w, 70%); }
    .auth-demo__badge { opacity: 1; }
    .auth-demo__btn { opacity: 1; }
    .auth-demo__cursor { display: none; }
    .auth-demo__prod--pick,
    .auth-demo__courier--pick { transform: none; }
}

.auth-branding { position: relative; z-index: 1; max-width: 460px; }

.auth-mark {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 2.5rem;
}
.auth-mark-badge {
    width: 44px; height: 44px;
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, #10b981, #065f46);
    box-shadow: 0 10px 24px -10px rgba(16, 185, 129, .7), inset 0 1px 0 rgba(255,255,255,.22);
    flex-shrink: 0;
}
.auth-mark-badge svg { width: 22px; height: 22px; color: #ecfdf5; }
.auth-mark-text { font-size: 1.15rem; font-weight: 800; color: #f8fafc; letter-spacing: -.01em; }
.auth-mark-text span { color: #34d399; }

.auth-branding h1 {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.025em;
    margin: 0 0 1rem;
    color: #f8fafc;
}
.auth-branding p {
    font-size: 1.02rem;
    line-height: 1.65;
    color: #94a3b8;
    margin: 0 0 2.5rem;
    max-width: 42ch;
}

.auth-features { display: flex; flex-direction: column; gap: .9rem; }
.auth-feature {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
}
.auth-feature-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(16, 185, 129, .12);
    border: 1px solid rgba(16, 185, 129, .26);
    flex-shrink: 0;
}
.auth-feature-icon svg { width: 17px; height: 17px; color: #34d399; }
.auth-feature-body { min-width: 0; }
.auth-feature-title { font-size: .93rem; font-weight: 700; color: #e2e8f0; line-height: 1.35; }
.auth-feature-desc { font-size: .82rem; color: #64748b; line-height: 1.45; margin-top: 2px; }

.auth-footnote {
    position: relative; z-index: 1;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(148, 163, 184, .16);
    font-size: .78rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.auth-footnote svg { width: 14px; height: 14px; color: #10b981; flex-shrink: 0; }

/* ---------- Panneau de droite ---------- */
.auth-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    /* Transparent : ne pas recouvrir le degrade unique de .auth-page,
       c est cet aplat opaque qui dessinait la ligne de separation. */
    background: transparent;
    position: relative;
    isolation: isolate;
}
@media (min-width: 1024px) { .auth-right { padding: 3rem 4rem; } }

.auth-container {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 2.25rem 2rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -12px rgba(15, 23, 42, .12);
}

/* ---------- Logo (étapes suivantes) ---------- */
.auth-logo { display: flex; align-items: center; gap: .65rem; margin-bottom: 1.5rem; }
.auth-logo-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, #10b981, #065f46);
    box-shadow: 0 8px 18px -8px rgba(16, 185, 129, .6);
}
.auth-logo-icon svg { color: #ecfdf5; }
.auth-logo-text { font-size: 1.15rem; font-weight: 800; color: #0f172a; letter-spacing: -.01em; }

/* ---------- En-tête ---------- */
.auth-header { margin-bottom: 1.5rem; }
.auth-header h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 .35rem;
    letter-spacing: -.02em;
}
.auth-header p { font-size: .9rem; color: #64748b; margin: 0; }

/* ---------- Onglets ---------- */
.auth-tab-switcher {
    display: flex;
    background: #f1f5f9;
    border-radius: 11px;
    padding: 4px;
    margin-bottom: 1.5rem;
    gap: 4px;
}
.auth-tab-btn {
    flex: 1;
    padding: .6rem 1rem;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
    font-size: .875rem;
    font-family: inherit;
}
.auth-tab-btn:hover { color: #334155; }
.auth-tab-btn.active {
    background: #fff;
    color: #065f46;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}

/* ---------- Boutons sociaux ---------- */
.social-buttons {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: 1.25rem;
}
.btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    width: 100%;
    padding: .75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    font-weight: 600;
    font-size: .9rem;
    font-family: inherit;
    color: #334155;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn-social:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.btn-social svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-social:focus-visible { outline: 2px solid #059669; outline-offset: 2px; }

/* ---------- Séparateur ---------- */
.auth-divider {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 1.25rem 0;
    color: #94a3b8;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

/* ---------- Formulaire ---------- */
.auth-form { display: flex; flex-direction: column; gap: .9rem; }
.form-group { display: flex; flex-direction: column; gap: .35rem; }
.form-group label {
    font-size: .8rem;
    font-weight: 600;
    color: #334155;
    letter-spacing: .01em;
}
.form-input {
    width: 100%;
    padding: .7rem .85rem;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    font-size: .925rem;
    font-family: inherit;
    color: #0f172a;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.form-input::placeholder { color: #94a3b8; }
.form-input:focus {
    outline: none;
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, .13);
}
.form-input.has-icon { padding-right: 2.75rem; }
.input-wrapper { position: relative; display: flex; align-items: center; }
.input-toggle {
    position: absolute;
    right: 6px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 7px;
    padding: 0;
}
.input-toggle:hover { color: #475569; background: #f1f5f9; }
.input-toggle svg { width: 18px; height: 18px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 420px) { .form-row { grid-template-columns: 1fr; } }

/* ---------- Options ---------- */
.form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .1rem;
    flex-wrap: wrap;
}
.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: #475569;
    cursor: pointer;
}
.checkbox-wrapper input { accent-color: #059669; width: 15px; height: 15px; cursor: pointer; }
.link-forgot { font-size: .82rem; color: #059669; text-decoration: none; font-weight: 600; }
.link-forgot:hover { text-decoration: underline; }

/* ---------- Bouton principal ---------- */
.btn-submit {
    width: 100%;
    padding: .8rem 1rem;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #fff;
    font-weight: 700;
    font-size: .925rem;
    font-family: inherit;
    cursor: pointer;
    margin-top: .35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px -8px rgba(5, 150, 105, .8);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(5, 150, 105, .9); filter: brightness(1.04); }
.btn-submit:active { transform: none; }
.btn-submit:focus-visible { outline: 2px solid #065f46; outline-offset: 2px; }
.btn-submit:disabled { opacity: .65; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Erreur ---------- */
.auth-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    padding: .65rem .85rem;
    border-radius: 9px;
    font-size: .82rem;
    margin-bottom: .9rem;
    display: none;
}
.auth-error.show { display: block; }

/* ---------- Code d'invitation (onboarding) ---------- */
/* Conservee depuis l'ancien bloc : utilisee par le champ de code d'activation. */
.input-code {
    font-size: 1.25rem;
    text-align: center;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

/* ---------- Pied ---------- */
.auth-footer {
    text-align: center;
    margin-top: 1.25rem;
    color: #64748b;
    font-size: .85rem;
}
.auth-footer a { color: #059669; font-weight: 600; text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }

/* Pending Screen */
.pending-icon { margin-bottom: 1.5rem; }
.icon-xl { width: 80px; height: 80px; }
.text-warning { color: #f59e0b; }

.pending-info {
    background: #f9fafb;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: #374151;
}

.info-item:last-child { margin-bottom: 0; }

.pending-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* Alert */
.alert {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.alert-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.alert-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #059669;
}

.hidden { display: none !important; }

/* Tenant List */
.tenant-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1.5rem 0;
}

.tenant-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tenant-item:hover {
    border-color: #667eea;
    background: #f9fafb;
}

.tenant-avatar {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
}

.tenant-info { flex: 1; }

.tenant-info h4 {
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 0.25rem;
}

.badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-pdg { background: #ede9fe; color: #7c3aed; }
.badge-manager { background: #dbeafe; color: #2563eb; }
.badge-gestionnaire { background: #d1fae5; color: #059669; }
.badge-vendeur { background: #fef3c7; color: #d97706; }
.badge-livreur { background: #fee2e2; color: #dc2626; }