/* =========================================================================
   GlassLeads CRM — feuille de style unique et partagée.
   Remplace le copier-coller de <style> par page de l'app d'origine (qui avait
   fini par diverger d'une page à l'autre). Sections clairement identifiées
   ci-dessous plutôt qu'un fichier par page.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

/* === Design tokens (thème sombre par défaut + mode clair via .light-mode) === */
:root {
    --primary: #2563EB;
    --primary-dark: #1D4ED8;
    --primary-darker: #1E40AF;
    --primary-light: #60A5FA;
    --accent: #059669;
    --accent-dark: #047857;
    --danger: #DC2626;
    --warning: #D97706;
    --purple: #7C3AED;

    --bg-primary: #090c14;
    --bg-secondary: #131a2c;
    --bg-tertiary: #1e293b;
    --bg-card: rgba(255, 255, 255, 0.045);
    --bg-navbar: rgba(9, 12, 20, 0.85);
    --text-primary: white;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.6);
    --border-color: rgba(255, 255, 255, 0.12);
    --shadow-color: rgba(0, 0, 0, 0.45);
    --card-hover: rgba(255, 255, 255, 0.08);
    --gradient-primary: linear-gradient(135deg, #090c14 0%, #131a2c 50%, #1e293b 100%);
}

.light-mode {
    --bg-primary: #f8fafc;
    --bg-secondary: #f1f5f9;
    --bg-tertiary: #e2e8f0;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-navbar: rgba(255, 255, 255, 0.98);
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --border-color: rgba(0, 7, 78, 0.3);
    --shadow-color: rgba(148, 163, 184, 0.15);
    --card-hover: rgba(255, 255, 255, 1);
    --gradient-primary: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
}

html {
    width: 100%;
    scroll-behavior: smooth;
    background: var(--bg-primary);
    transition: background-color 0.4s ease-in-out;
    min-height: 100vh;
    scrollbar-color: var(--text-primary) transparent;
    scrollbar-width: thin;
}

html {
    /* Empêche le rebond élastique qui laisse voir le fond de la page (au lieu du contenu) quand on
       tire au-delà du haut/bas sur mobile — un des signaux les plus nets de "site web" plutôt
       qu'"app" au toucher. */
    overscroll-behavior-y: none;
}
body {
    font-family: 'Inter', sans-serif;
    background: var(--bg-primary);
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
    color: var(--text-primary);
    position: relative;
    transition: all 0.4s ease-in-out;
    letter-spacing: -0.01em;
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
}

/* Lueur d'ambiance discrète, fixe (ne défile pas), présente sur toutes les pages — même esprit
   que les fonds "mesh gradient" des interfaces SaaS actuelles, dans les couleurs de marque déjà
   utilisées (bleu primaire + violet), jamais une nouvelle couleur. */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(680px 480px at 8% -8%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 60%),
        radial-gradient(560px 420px at 108% 12%, rgba(124, 58, 237, 0.12), transparent 60%),
        radial-gradient(600px 460px at 50% 115%, rgba(5, 150, 105, 0.07), transparent 60%);
}
.light-mode body::before {
    background:
        radial-gradient(680px 480px at 8% -8%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 60%),
        radial-gradient(560px 420px at 108% 12%, rgba(124, 58, 237, 0.06), transparent 60%),
        radial-gradient(600px 460px at 50% 115%, rgba(5, 150, 105, 0.05), transparent 60%);
}

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--text-primary); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

a { color: inherit; text-decoration: none; }

/* Supprime le délai ~300ms avant qu'un tap ne déclenche son clic (l'appareil n'a plus besoin
   d'attendre pour distinguer un tap d'un double-tap de zoom) — la réactivité au toucher est un des
   signaux les plus perceptibles de "vraie app" vs "site web" ouvert dans un navigateur. */
a, button, .btn, input, select, textarea, .fab, .tab-bar a, .navbar-links a, .theme-toggle, .notif-bell {
    touch-action: manipulation;
}

/* Taille par défaut de toute icône produite par icon() (helpers.php) — sans ça un SVG sans
   dimension explicite peut s'afficher à sa taille intrinsèque (énorme) dans certains contextes
   comme un <h3> de modale. Les usages qui veulent une autre taille (cartes stats, badges...)
   la redéfinissent via un sélecteur plus spécifique, qui l'emporte naturellement sur celui-ci. */
svg { width: 18px; height: 18px; flex-shrink: 0; }

/* === Theme toggle button === */
.theme-toggle {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(59, 130, 246, 0.1));
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 18px;
    cursor: pointer;
    padding: 10px;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    box-shadow: 0 4px 12px var(--shadow-color);
}
.theme-toggle:hover { background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(59, 130, 246, 0.2)); }
.theme-icon { display: flex; align-items: center; justify-content: center; }
.theme-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }

/* === Navbar === */
.navbar {
    background: var(--bg-navbar);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 4px 30px var(--shadow-color);
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 100;
    transition: all 0.4s ease-in-out;
    gap: 16px;
}
.navbar-brand { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.navbar-brand-link { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; }
.logo-chip { display: inline-flex; align-items: center; }
/* Logo officiel : deux fichiers PNG (un par thème), bascule 100% CSS, pas de JS. */
.logo-img { height: 42px; width: auto; display: block; }
.logo-img-light { display: none; }
.light-mode .logo-img-dark { display: none; }
.light-mode .logo-img-light { display: block; }
.auth-logo .logo-img, .public-header .logo-img { height: 44px; }
/* Marque carrée (voir assets/images/app-icon.png) utilisée uniquement quand la sidebar est réduite
   à une colonne d'icônes — le logo officiel est un long bandeau texte, illisible/déformé à 76px
   de large. Cachée partout ailleurs. */
.logo-mark { display: none; width: 34px; height: 34px; border-radius: 10px; }
/* Logo personnalisé (voir settings.php, onglet Apparence) : remplace entièrement logo-chip/logo-mark
   quand le client en a envoyé un — une seule image, redimensionnée pour les deux états de la sidebar
   plutôt que de dupliquer la logique clair/sombre du logo officiel (bring-your-own-logo, pas de
   variante par thème à gérer côté client). */
.custom-logo { height: 42px; max-width: 170px; width: auto; object-fit: contain; border-radius: 6px; display: block; }
/* Chip d'initiales (même langage visuel que .navbar-user-avatar) : caché par défaut, ne sert que
   dans le menu réduit desktop (voir @media min-width:901px) — sur mobile le bandeau complet reste
   toujours visible, il n'y a pas d'état "réduit" équivalent là-bas. */
.logo-initials-chip {
    display: none; width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary), var(--purple));
    color: #fff; font-weight: 700; font-size: 13px;
    align-items: center; justify-content: center;
}
@media (min-width: 901px) {
    html.sidebar-collapsed .navbar-brand-link .custom-logo { display: none; }
    html.sidebar-collapsed .navbar-brand-link .logo-initials-chip { display: flex; }
}
/* Bouton "réduire/déplier la sidebar" : n'existe que sur desktop (voir @media min-width:901px) —
   sur mobile .navbar-brand n'a que le logo, ce bouton reste caché. */
.sidebar-toggle { display: none; }
.navbar-links { display: flex; align-items: center; gap: 6px; flex: 1; justify-content: center; flex-wrap: wrap; }
.navbar-links a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 14.5px;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    white-space: nowrap;
}
.navbar-links a svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.75; }
.navbar-links a:hover { background: var(--card-hover); color: var(--text-primary); }
.navbar-links a.active { background: var(--primary); color: white; }
.navbar-links a.active svg { opacity: 1; }
.navbar-actions { display: flex; align-items: center; gap: 10px; }
.navbar-toggle { display: none; background: none; border: none; color: var(--text-primary); font-size: 26px; cursor: pointer; }

/* === Puce identité (nom du compte + déconnexion) : pied de sidebar sur desktop,
   dans le tiroir du menu mobile sinon — voir les deux media queries ci-dessous. */
.navbar-user { display: none; align-items: center; gap: 10px; }
.navbar-user-avatar {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary), var(--purple));
    color: #fff; font-weight: 700; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}
.navbar-user-name {
    flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.navbar-user-logout {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-secondary);
    transition: all 0.2s ease;
}
.navbar-user-logout svg { width: 16px; height: 16px; }
.navbar-user-logout:hover { border-color: var(--danger); color: var(--danger); background: rgba(220, 38, 38, 0.08); }

@media (max-width: 900px) {
    /* Navigation principale = barre d'onglets du bas (.tab-bar) sur mobile ; .navbar-links et
       .navbar-user (tiroir + puce compte) ne servent plus qu'à la sidebar desktop, où ce même DOM
       est réutilisé — voir @media min-width:901px plus bas. */
    .navbar-links, .navbar-user { display: none; }
    /* Barre plus fine : padding réduit + les 3 boutons (thème, cloche, déconnexion) plus petits
       (36px au lieu de 44px), sinon eux seuls dictaient la hauteur de la barre. */
    .navbar { padding: 10px 16px; flex-wrap: wrap; }
    .navbar-toggle {
        display: flex; align-items: center; justify-content: center;
        width: 36px; height: 36px; border-radius: 10px;
        background: var(--bg-card); border: 1px solid var(--border-color);
    }
    .navbar-actions .theme-toggle, .navbar-actions .notif-bell { width: 36px; height: 36px; border-radius: 10px; }
    .navbar-actions .theme-toggle .theme-icon svg { width: 17px; height: 17px; }
    .navbar-actions .notif-bell svg { width: 17px; height: 17px; }
    .navbar-toggle svg { width: 16px; height: 16px; }
    /* Ordre mobile demandé : thème, cloche, puis le bouton déconnexion — au lieu de l'ordre du DOM.
       margin-left:auto sur .navbar-actions absorbe l'espace libre avant tout le groupe de droite. */
    .navbar-actions { order: 1; margin-left: auto; }
    .navbar-actions .theme-toggle { order: -1; }
    .navbar-toggle { order: 2; }
}

/* === Sidebar (desktop >= 901px) ===
   Même DOM que la navbar mobile (.navbar/.navbar-links/.navbar-actions), seule la disposition
   change : colonne fixe à gauche au lieu de barre horizontale. Rien n'est dupliqué en HTML/JS,
   donc le comportement du menu mobile (<900px, déjà validé) reste intact. */
@media (min-width: 901px) {
    html { --sidebar-width: 240px; }
    /* Largeur réduite à une colonne d'icônes — tous les éléments qui référencent déjà la variable
       (.navbar, main.app-main, .notif-dropdown) suivent automatiquement, sans règle dupliquée. */
    html.sidebar-collapsed { --sidebar-width: 76px; }
    .navbar {
        position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width);
        flex-direction: column; align-items: stretch; justify-content: flex-start;
        padding: 22px 14px 18px; gap: 2px;
        border-bottom: none; border-right: 1px solid var(--border-color);
        box-shadow: 8px 0 40px var(--shadow-color);
        transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        /* Pas d'overflow-y:auto ici : la sidebar a un backdrop-filter, ce qui en fait le containing
           block du panneau de notifications en position:fixed (même règle que pour un transform) —
           un overflow non-visible le découperait. La liste de nav (6 liens + pied) tient largement
           dans une fenêtre desktop réaliste, donc pas besoin de défilement interne ici. */
    }
    .navbar-brand { padding: 6px 10px 26px; }
    .sidebar-toggle {
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        width: 28px; height: 28px; border-radius: 9px;
        background: none; border: 1px solid var(--border-color); color: var(--text-secondary);
        cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
    }
    .sidebar-toggle:hover { background: var(--card-hover); color: var(--text-primary); }
    .sidebar-toggle svg { width: 15px; height: 15px; transition: transform 0.2s ease; }
    .navbar-links { flex: initial; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; }
    .navbar-links a { justify-content: flex-start; padding: 11px 13px; font-size: 14.5px; font-weight: 600; }
    .navbar-links a svg { width: 18px; height: 18px; }
    /* Fond teinté plutôt que pastille pleine : plus proche des app shells modernes (état actif
       discret dans une colonne dense), le remplissage plein reste réservé aux CTA (.btn-primary). */
    .navbar-links a.active { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); box-shadow: none; }
    .navbar-links a.active svg { opacity: 1; }
    .navbar-actions {
        margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-color);
        justify-content: flex-start;
    }
    .navbar-user { display: flex; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--border-color); }

    /* === Sidebar réduite === */
    html.sidebar-collapsed .navbar-brand { flex-direction: column; gap: 10px; padding: 6px 0 20px; }
    html.sidebar-collapsed .navbar-brand-link .logo-chip { display: none; }
    /* Sombre par défaut (comme le wordmark logo-img-dark/light) : mode nuit = marque à fond navy,
       mode jour = marque à fond bleu clair — la version navy se fondrait dans le fond très clair du
       mode jour. */
    html.sidebar-collapsed .navbar-brand-link .logo-mark-dark { display: block; }
    html.sidebar-collapsed.light-mode .navbar-brand-link .logo-mark-dark { display: none; }
    html.sidebar-collapsed.light-mode .navbar-brand-link .logo-mark-light { display: block; }
    html.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); }
    html.sidebar-collapsed .navbar-links a { justify-content: center; padding: 11px; }
    html.sidebar-collapsed .navbar-link-label { display: none; }
    html.sidebar-collapsed .navbar-actions { flex-direction: column; align-items: center; }
    html.sidebar-collapsed .navbar-user { flex-direction: column; gap: 8px; }
    html.sidebar-collapsed .navbar-user-name { display: none; }
}

/* === Barre d'onglets (mobile uniquement) ===
   Navigation principale toujours accessible en bas de l'écran plutôt qu'à un tiroir qu'il faut
   ouvrir — le pattern le plus systématiquement associé à "une vraie app" plutôt qu'"un site web"
   sur mobile. Le tiroir ☰ existant reste en place pour Export/Déconnexion, sans rien retirer. */
.tab-bar { display: none; }
@media (max-width: 640px) {
    .tab-bar {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 140;
        background: var(--bg-navbar);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-top: 1px solid var(--border-color);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -4px 24px var(--shadow-color);
    }
    .tab-bar a {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px; min-width: 0; padding: 6px 2px; border-radius: 12px;
        color: var(--text-secondary); font-size: 10.5px; font-weight: 600; letter-spacing: -0.01em;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        transition: color 0.15s ease, transform 0.1s ease;
    }
    .tab-bar a svg { width: 21px; height: 21px; stroke-width: 2; opacity: 0.85; }
    .tab-bar a.active { color: var(--primary-light); }
    .tab-bar a.active svg { opacity: 1; }
    .tab-bar a:active { transform: scale(0.92); }
}

/* === Notification bell === */
.notif-wrapper { position: relative; }
.notif-bell {
    position: relative;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    cursor: pointer;
    color: var(--text-primary);
    transition: background 0.2s ease, transform 0.15s ease;
}
.notif-bell:hover { background: var(--card-hover); }
.notif-bell:active { transform: scale(0.94); }
.notif-bell svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
.notif-badge {
    position: absolute; top: -4px; right: -4px;
    background: var(--danger); color: white;
    font-size: 11px; font-weight: 700;
    min-width: 18px; height: 18px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--bg-navbar);
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.4);
}
.notif-badge.hidden { display: none; }

/* Pastille "documents non lus" sur le lien Documents (sidebar, tiroir mobile, barre d'onglets) —
   même gabarit que .notif-badge sur la cloche, juste ancrée sur l'icône du lien plutôt que sur un
   bouton dédié. */
.nav-icon { position: relative; display: inline-flex; }
.docs-badge {
    position: absolute; top: -6px; right: -8px;
    background: var(--danger); color: white;
    font-size: 10px; font-weight: 700;
    min-width: 16px; height: 16px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
    border: 2px solid var(--bg-navbar);
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.4);
}
.docs-badge.hidden { display: none; }

.notif-backdrop {
    display: none;
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 190;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.notif-dropdown {
    position: absolute; top: calc(100% + 12px); right: 0;
    width: 360px; max-width: 90vw;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 20px 50px var(--shadow-color);
    overflow: hidden;
    z-index: 200;
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-10px) scale(0.97);
    transform-origin: top right;
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
}
.notif-dropdown.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
/* Petite pointe qui relie visuellement le panneau à la cloche, façon bulle de notification native */
.notif-dropdown::before {
    content: ''; position: absolute; top: -6px; right: 16px;
    width: 12px; height: 12px; background: var(--bg-secondary);
    border-left: 1px solid var(--border-color); border-top: 1px solid var(--border-color);
    transform: rotate(45deg); border-radius: 2px 0 0 0;
}

.notif-dropdown-header {
    padding: 14px 16px; display: flex; justify-content: space-between; align-items: center;
    gap: 10px; border-bottom: 1px solid var(--border-color); flex-shrink: 0;
}
.notif-dropdown-header h4 { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; }
.notif-dropdown-header h4 svg { width: 16px; height: 16px; color: var(--primary); }
.notif-mark-all {
    font-size: 12.5px; font-weight: 600; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent);
    border: none; border-radius: 8px; padding: 6px 10px; cursor: pointer; transition: background 0.15s ease;
    white-space: nowrap;
}
.notif-mark-all:hover { background: color-mix(in srgb, var(--primary) 20%, transparent); }
.notif-close-mobile { display: none; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; }
.notif-close-mobile svg { width: 22px; height: 22px; }

.notif-list { max-height: 400px; overflow-y: auto; flex: 1; }
.notif-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease;
    position: relative;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--card-hover); }
.notif-avatar {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; color: white;
}
.notif-body { flex: 1; min-width: 0; }
.notif-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.notif-meta .dot-sep::before { content: '·'; margin-right: 6px; }
.notif-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0; margin-top: 6px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent); }

.notif-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px; text-align: center; color: var(--text-muted); font-size: 13.5px; }
.notif-empty svg { width: 32px; height: 32px; opacity: 0.35; }

.notif-footer {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 12px 16px; font-size: 13px; font-weight: 600; color: var(--primary);
    border-top: 1px solid var(--border-color); flex-shrink: 0; transition: background 0.15s ease;
}
.notif-footer svg { width: 14px; height: 14px; }
.notif-footer:hover { background: var(--card-hover); }

/* Sur mobile, .notif-wrapper n'est pas collé au bord droit de l'écran (le bouton thème le suit
   dans .navbar-actions) : on transforme le panneau en un vrai plateau plein écran ancré sous la
   navbar, avec un fond assombri derrière — plus lisible et plus "app native" qu'un petit encart
   flottant écrasé dans un coin. */
@media (max-width: 640px) {
    .notif-backdrop.open { display: block; opacity: 1; }
    .notif-dropdown {
        position: fixed; top: 74px; left: 12px; right: 12px; width: auto; max-width: none;
        /* -60px de plus qu'avant : laisse la place à la barre d'onglets en bas d'écran, sinon le
           panneau pouvait s'étendre derrière elle. */
        max-height: calc(100vh - 160px);
        transform: translateY(-16px); transform-origin: top center;
    }
    .notif-dropdown.open { transform: translateY(0); }
    .notif-dropdown::before { display: none; }
    .notif-close-mobile { display: block; }
    .notif-list { max-height: none; }
    .notif-item { padding: 14px 16px; }
}

/* Doit rester après la règle de base .notif-dropdown ci-dessus (même piège de cascade que
   main.app-main plus haut) : position:fixed (pas absolute) pour échapper à l'overflow-y:auto
   de la sidebar, sinon le panneau serait rogné au lieu de flotter par-dessus le contenu. */
@media (min-width: 901px) {
    .notif-dropdown { position: fixed; top: auto; bottom: 18px; left: calc(var(--sidebar-width) + 12px); right: auto; }
    .notif-dropdown::before { display: none; }
}

/* === Layout shell === */
main.app-main { max-width: 1280px; margin: 0 auto; padding: 28px 24px 60px; }

/* === Barre admin (pages super admin uniquement) ===
   Barre du haut simple, JAMAIS de sidebar desktop contrairement à .navbar — inutile pour 2-3 boutons,
   et .navbar se transforme en colonne fixe ≥901px, ce qui ne conviendrait pas ici. */
.admin-navbar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 24px; background: var(--bg-navbar);
    backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-color);
    position: sticky; top: 0; z-index: 100;
}
.admin-navbar-actions { display: flex; align-items: center; gap: 10px; }
main.app-main.admin-main { max-width: 1200px; }
@media (min-width: 901px) {
    /* Les pages admin n'ont jamais de sidebar (voir .admin-navbar) : sans ça, .app-main margin-left
       (pensé pour la sidebar cliente) décale tout le contenu vers la droite au lieu de le centrer. */
    main.app-main.admin-main { margin-left: auto; margin-right: auto; }
}
@media (max-width: 640px) {
    /* Les 4 cartes du dashboard admin (Clients, Total leads, Conversion, Bloqués) rendent mieux en
       2x2 qu'en 3+1 (voir .stat-grid plus bas, pensé pour les 3 cartes du dashboard client) — override
       scopé à .admin-main pour ne pas toucher la disposition du dashboard client. */
    .admin-main .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Bandeau "vous visualisez le compte de X" (voir isImpersonating() dans layout_top.php) — affiché
   sur TOUTES les pages clientes tant qu'un super admin "essaie" un compte, pour qu'il n'oublie
   jamais dans quel compte il se trouve avant d'agir (envoyer un email, changer un statut...). */
.impersonation-banner {
    display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
    background: linear-gradient(135deg, var(--purple), var(--primary));
    color: white; padding: 10px 20px; font-size: 13.5px; font-weight: 600;
    position: sticky; top: 0; z-index: 101;
}
.impersonation-banner .btn { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); color: white; }
.impersonation-banner .btn:hover { background: rgba(255,255,255,0.25); }
.page-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.page-header h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.page-header p.subtitle { color: var(--text-secondary); font-size: 14.5px; margin-top: 5px; }
/* Titre de l'accueil uniquement : plus petit que les autres titres de page (Liste des leads,
   Documents...), qui gardent leur taille normale. */
.page-header h1.dashboard-greeting { font-size: 23px; }
/* Titres de section dans une carte (Derniers leads, Google Agenda, Lien de partage...) — remplace
   l'ancien style="font-size:18px" répété inline, pour pouvoir le réduire sur mobile ci-dessous. */
h1.card-title { font-size: 18px; font-weight: 800; }
@media (max-width: 640px) {
    /* Espace en bas pour que la barre d'onglets (et le FAB sur les pages qui l'ont) ne recouvre
       jamais le dernier élément de la page. */
    main.app-main { padding: 18px 14px calc(76px + env(safe-area-inset-bottom, 0px)); }
    .page-header h1 { font-size: 19px; }
    .page-header h1.dashboard-greeting { font-size: 16px; }
    .page-header p.subtitle { font-size: 13px; }
    h1.card-title { font-size: 15.5px; }
}
/* Doit rester après les règles ci-dessus dans le fichier : même spécificité que la règle de base
   main.app-main, seul l'ordre de la cascade tranche entre deux media queries qui ne s'excluent
   pas mutuellement (ex: min-width:901px reste vrai en payage large même hors du bloc 640px). */
@media (min-width: 901px) {
    main.app-main { margin-left: var(--sidebar-width); max-width: none; padding: 36px 44px 60px; }
    main.app-main > * { max-width: 1240px; }
    /* Le plafond ci-dessus vise le CONTENU (cartes, tableaux...) pour rester lisible sur grand
       écran — mais .modal-overlay (#editModal, #rdvModal...) est aussi un enfant direct de
       .app-main, et se retrouvait attrapé par la même règle : le fond assombri plein écran se
       limitait alors à 1240px de large, laissant tout le reste d'un écran large ni assombri ni
       protégé du clic (les boutons de la page dessous restaient cliquables au travers). Un
       plein-écran n'a jamais à être limité en largeur, quelle que soit la largeur de l'écran. */
    main.app-main > .modal-overlay { max-width: none; }
}

/* === Buttons === */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; border-radius: 12px;
    font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em;
    border: 1px solid transparent; cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); white-space: nowrap;
}
.btn:active:not(:disabled) { transform: scale(0.96); }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-color); }
.btn-secondary:hover { background: var(--card-hover); border-color: var(--primary); }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: #B91C1C; }
.btn-accent { background: var(--accent); color: white; }
.btn-accent:hover { background: var(--accent-dark); }

/* === États de focus clavier, cohérents partout (accessibilité + finition) === */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-disabled { opacity: 0.4; pointer-events: none; }
.btn-block { width: 100%; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.pagination-info { color: var(--text-secondary); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Remplace les groupes de boutons stylés inline (display:flex;gap...) qui ne s'enroulaient jamais
   sur petit écran et pouvaient déborder hors du cadre — un seul endroit pour ce pattern. */
.btn-group { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) {
    /* flex-wrap:wrap (hérité de la règle de base) + flex-direction:column démarrerait une nouvelle
       colonne dès que la hauteur manque, au lieu d'empiler en une seule colonne pleine largeur —
       d'où le nowrap explicite ici. */
    .btn-group { flex-direction: column; flex-wrap: nowrap; width: 100%; }
    .btn-group .btn { width: 100%; }
    /* Google Agenda (dashboard) : deux petits boutons carrés icône seule, à côté du titre dans
       l'en-tête de carte, plutôt que des boutons pleine largeur en dessous. */
    .btn-group.btn-group-compact { flex-direction: row; flex-wrap: nowrap; width: auto; flex-shrink: 0; }
    .btn-group.btn-group-compact .btn {
        width: 38px; height: 38px; flex: 0 0 auto; padding: 0; gap: 0; border-radius: 11px;
    }
    .btn-group.btn-group-compact .btn svg { width: 17px; height: 17px; flex-shrink: 0; }
    .btn-group.btn-group-compact .btn .btn-label { display: none; }
}

/* === Cards === */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 24px;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    box-shadow: 0 4px 24px var(--shadow-color);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.stat-card {
    position: relative; overflow: hidden;
}
.stat-card.blue { --accent-color: var(--primary-light); }
.stat-card.purple { --accent-color: var(--purple); }
.stat-card.green { --accent-color: var(--accent); }
.stat-card.red { --accent-color: var(--danger); }
.stat-card { transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease; }
.stat-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent-color, var(--primary)) 35%, var(--border-color)); box-shadow: 0 10px 32px var(--shadow-color); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin-bottom: 26px; }
/* Disposition demandée : légende + chiffre empilés à gauche, icône (grand carré teinté, plat, sans
   halo) alignée à droite et centrée verticalement — plutôt que l'icône au-dessus du chiffre. */
.stat-card { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; }
.stat-card-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stat-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0; }
.stat-icon svg { width: 24px; height: 24px; }
.stat-card.blue .stat-icon { background: rgba(96, 165, 250, 0.15); color: var(--primary-light); }
.stat-card.purple .stat-icon { background: rgba(124, 58, 237, 0.15); color: var(--purple); }
.stat-card.green .stat-icon { background: rgba(5, 150, 105, 0.15); color: var(--accent); }
.stat-card.red .stat-icon { background: rgba(220, 38, 38, 0.15); color: var(--danger); }
.stat-card .stat-value { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.stat-card .stat-label { color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.stat-card.blue .stat-value { color: var(--primary-light); }
.stat-card.green .stat-value { color: var(--accent); }
.stat-card.purple .stat-value { color: var(--purple); }
.stat-card.red .stat-value { color: var(--danger); }

@media (max-width: 640px) {
    .stat-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
    /* Disposition mobile différente du desktop (voir capture mediaglasspro.app référence) : tout
       centré et empilé — icône ronde en haut, puis légende, puis chiffre — plutôt que légende+chiffre
       à gauche et icône à droite comme sur desktop. */
    .stat-card { flex-direction: column; align-items: center; text-align: center; padding: 14px 8px; border-radius: 14px; gap: 6px; }
    .stat-card-info { align-items: center; }
    .stat-icon { order: -1; width: 40px; height: 40px; border-radius: 50%; }
    .stat-icon svg { width: 19px; height: 19px; }
    .stat-card .stat-value { font-size: 19px; }
    .stat-card .stat-label { font-size: 10px; line-height: 1.2; }
    /* Bouton "Voir tout" du dashboard : retiré sur mobile (voir capture de référence), garde sa
       place sur desktop. */
    .dashboard-view-all { display: none; }
}

/* === Icônes inline (voir icon() dans helpers.php) === */
.page-header h1, .card h1, .card h4 { display: flex; align-items: center; gap: 9px; }
.btn svg, .page-header h1 svg, .card h1 svg, .card h4 svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn svg { width: 16px; height: 16px; }
.kanban-card-line svg { width: 14px; height: 14px; flex-shrink: 0; vertical-align: -2px; margin-right: 4px; }

/* === Forms === */
.form-group { margin-bottom: 18px; }
.form-group label { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; font-size: 13.5px; font-weight: 600; color: var(--text-secondary); }
.form-group label svg { width: 15px; height: 15px; flex-shrink: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row > * { min-width: 0; }
.form-group-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.form-group-actions .btn { flex: 1; }
/* Export a déjà sa place dans la sidebar desktop — sur mobile (où elle est réduite au tiroir ☰,
   remplacé par le bouton Déconnexion, voir .navbar-actions), on le rend accessible directement à
   côté de Réinitialiser plutôt que de le supprimer. */
.mobile-export-btn { display: none; }
/* Kanban mobile : pas de place pertinente pour ce bouton à côté du titre (colonnes déjà en swipe
   plein écran juste en dessous) — "Nouveau lead" reste disponible sur la page Liste. */
@media (max-width: 640px) {
    .form-row { grid-template-columns: 1fr; }
    .mobile-export-btn { display: inline-flex; }
    .kanban-new-lead-btn { display: none; }
    /* Carte de filtres de la page Liste : beaucoup trop haute sur mobile (padding pleine taille,
       libellés avec icône, champs de 46px, gros boutons) pour ce qui reste 2 champs + 2 boutons —
       resserré uniquement ici, sans toucher aux formulaires normaux (édition de lead, paramètres...). */
    .leads-filter-card { padding: 14px 16px; }
    .leads-filter-card .form-row { gap: 10px; }
    .leads-filter-card .form-group label { margin-bottom: 4px; font-size: 12px; }
    .leads-filter-card .form-group label svg { width: 13px; height: 13px; }
    /* .card.leads-filter-card (2 classes) plutôt que .leads-filter-card seule : la cible tactile
       générale plus bas dans ce fichier (input[type=...] { min-height:46px }) a la même spécificité
       qu'un sélecteur à 1 classe et la emporterait par simple ordre d'apparition dans le fichier —
       2 classes garantit qu'on gagne, peu importe l'ordre. */
    .card.leads-filter-card input, .card.leads-filter-card select { height: 40px; min-height: 40px; padding: 8px 12px; font-size: 13.5px; }
    .card.leads-filter-card .form-group-actions .btn { min-height: 40px; padding: 8px 14px; font-size: 13px; }
}
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], input[type=url], input[type=date], input[type=time],
select, textarea {
    width: 100%;
    height: 46px;
    padding: 12px 15px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14.5px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
textarea { height: auto; }
/* Un <select> a un rendu natif (chrome du menu déroulant) qui diffère légèrement d'un <input> même
   à padding/hauteur identiques selon le navigateur — d'où le décalage de hauteur avec le champ
   "Rechercher" juste à côté (ex: filtres de la page Liste). On neutralise ce rendu natif et on
   redessine un chevron soi-même pour un alignement pixel-perfect garanti. */
select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
    padding-right: 40px;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

input[type=file] {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px dashed var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 13.5px;
}
input[type=file]::file-selector-button {
    margin-right: 12px;
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    background: var(--primary);
    color: white;
    font-family: inherit;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: var(--primary-dark); }
textarea { resize: vertical; min-height: 90px; }
.checkbox-row { display: flex; align-items: center; gap: 9px; }
.checkbox-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--primary); }
.checkbox-row label { margin: 0; }
.form-hint { font-size: 12.5px; color: var(--text-muted); margin-top: 5px; }

.alert { padding: 13px 16px; border-radius: 10px; font-size: 14px; margin-bottom: 18px; border: 1px solid transparent; }
.alert-error { background: rgba(220, 38, 38, 0.12); border-color: var(--danger); color: #FCA5A5; }
.alert-success { background: rgba(5, 150, 105, 0.12); border-color: var(--accent); color: #6EE7B7; }
.light-mode .alert-error { color: #991B1B; }
.light-mode .alert-success { color: #065F46; }

/* === Table === */
.table-wrap { overflow-x: auto; border-radius: 18px; border: 1px solid var(--border-color); }
/* Variante utilisée pour "Derniers leads" du dashboard : garde le sous-tableau à bords arrondis
   (comme n'importe quel autre .table-wrap, ex: le widget Google Agenda juste en dessous) mais sans
   les lignes de séparation entre chaque ligne de données — seul le liseré sous l'en-tête reste. */
.table-wrap-clean { border: none; }
.table-wrap-clean table.data-table td { border-bottom: none; }
table.data-table { width: 100%; border-collapse: collapse; min-width: 640px; }
table.data-table th {
    text-align: left; padding: 10px 12px; font-size: 12.5px; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--text-muted); background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color); white-space: nowrap;
}
table.data-table th.sortable { cursor: pointer; user-select: none; }
table.data-table th.sortable:hover { color: var(--text-primary); }
table.data-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-color); font-size: 14px; vertical-align: middle; }
table.data-table td.cell-title { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Les colonnes nom/email/ville peuvent contenir des valeurs longues qui, sans limite, forcent tout
   le tableau à déborder horizontalement même avec un padding réduit — la donnée complète reste
   accessible sur la fiche détail (bouton Voir), donc tronquer ici est un compromis correct. */
table.data-table td[data-label="Email"], table.data-table td[data-label="Ville"] {
    max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
table.data-table tbody tr:hover { background: var(--card-hover); }
table.data-table tbody tr:last-child td { border-bottom: none; }

/* Sur mobile, un tableau large qui ne fait que scroller horizontalement est pénible à lire à une
   main : chaque ligne devient une carte, avec le libellé de colonne (attribut data-label posé sur
   chaque <td> côté PHP) affiché devant la valeur — pas de duplication de markup, une seule source
   de vérité pour le contenu. */
@media (max-width: 640px) {
    .table-wrap { overflow-x: visible; border: none; }
    table.data-table { min-width: 0; }
    table.data-table thead { display: none; }
    table.data-table, table.data-table tbody, table.data-table tr, table.data-table td { display: block; width: 100%; }
    table.data-table tbody tr {
        background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px;
        margin-bottom: 12px; overflow: hidden;
    }
    table.data-table tbody tr:last-child { margin-bottom: 0; }
    table.data-table td {
        display: flex; align-items: center; justify-content: space-between; gap: 14px;
        padding: 12px 15px; border-bottom: 1px solid var(--border-color); text-align: right;
        min-height: 24px;
    }
    table.data-table td > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    table.data-table td::before {
        content: attr(data-label); font-size: 11px; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.03em; color: var(--text-muted); text-align: left; flex-shrink: 0;
    }
    table.data-table td[data-label=""]::before { display: none; }
    table.data-table td.cell-title {
        font-size: 16px; font-weight: 700; background: var(--bg-secondary); justify-content: flex-start;
        /* Réinitialise la troncature pensée pour le tableau desktop (voir la règle générale
           .cell-title plus haut) : en vue carte mobile, la largeur dispo est celle de la carte
           entière, pas 170px — sans ça le nom était coupé alors qu'il y a largement la place. */
        max-width: none; overflow: visible; text-overflow: clip; white-space: normal;
    }
    table.data-table td.cell-title::before { display: none; }
    table.data-table td.cell-action { justify-content: stretch; padding: 10px; }
    table.data-table td.cell-action::before { display: none; }
    table.data-table td.cell-action .btn { width: 100%; min-height: 42px; }

    /* Exception : la liste des leads et les "derniers leads" du dashboard restent un tableau
       compact à défilement horizontal même sur mobile plutôt que des cartes empilées — avec
       beaucoup de lignes, les cartes prenaient trop de hauteur et forçaient un défilement
       vertical excessif ; un tableau dense reste plus rapide à parcourir pour ces deux listes. */
    .table-wrap.table-wrap-compact { overflow-x: auto; border: 1px solid var(--border-color); }
    .table-wrap.table-wrap-compact.table-wrap-clean { border: none; }
    table.data-table.compact-mobile { display: table; min-width: 480px; font-size: 12.5px; }
    table.data-table.compact-mobile thead { display: table-header-group; }
    table.data-table.compact-mobile tbody { display: table-row-group; }
    table.data-table.compact-mobile tr {
        display: table-row; background: none; border: none; border-radius: 0; margin-bottom: 0;
    }
    table.data-table.compact-mobile th { padding: 9px 8px; font-size: 10px; }
    /* font-size explicite ici : sans ça, ces cellules héritaient du 14px de la règle desktop
       générale (table.data-table td), plus gros que le nom (12.5px, réglé juste en dessous) — le
       téléphone/email/ville/date paraissaient plus imposants que le nom du prospect. */
    table.data-table.compact-mobile td {
        display: table-cell; text-align: left; padding: 9px 8px; min-height: 0; font-size: 12.5px;
    }
    table.data-table.compact-mobile td::before { content: none; }
    table.data-table.compact-mobile td.cell-title {
        background: none; font-size: 12.5px; font-weight: 600;
        white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis;
    }
    /* Même principe qu'en desktop (voir .badge-prospect_entrant etc.) : largeur fixe pour que tous
       les statuts fassent la même taille de bouton, calée sur "PAS RÉPONSE 2X" à cette échelle. */
    table.data-table.compact-mobile .badge { padding: 3px 8px; font-size: 10.5px; min-width: 108px; justify-content: center; }
    /* Le badge "X documents" (page Documents) n'a pas besoin de la largeur fixe pensée pour aligner
       les statuts (Liste/Kanban) — un texte plus court ici aide la ligne entière (nom + badge + date
       + bouton) à tenir sans s'étaler inutilement. */
    table.data-table.compact-mobile .badge-source { min-width: 0; white-space: nowrap; }
    table.data-table.compact-mobile .doc-indicator svg { width: 12px; height: 12px; }
    table.data-table.compact-mobile td.cell-action { padding: 6px 8px; }
    table.data-table.compact-mobile td.cell-action .btn { width: auto; min-height: 32px; padding: 6px 10px; font-size: 12px; }
    table.data-table.compact-mobile td.cell-action .btn svg { width: 13px; height: 13px; }

    /* Page d'accueil uniquement (voir .table-wrap-clean) : colonnes Email et Date masquées, elles
       forçaient le défilement horizontal dans cette carte de résumé qui n'a que 5 lignes à montrer
       (leads.php garde ses 6 colonnes, c'est une vraie liste consultée pour ces détails). */
    .table-wrap-clean table.data-table.compact-mobile th:nth-child(3),
    .table-wrap-clean table.data-table.compact-mobile td:nth-child(3),
    .table-wrap-clean table.data-table.compact-mobile th:nth-child(6),
    .table-wrap-clean table.data-table.compact-mobile td:nth-child(6) {
        display: none;
    }
    /* Les colonnes restantes (5 au lieu de 7) tiennent dans la largeur de la carte sans le
       min-width:480px pensé pour la liste complète — sinon un scroll horizontal inutile persistait. */
    .table-wrap-clean table.data-table.compact-mobile { min-width: 0; }
}

/* === Status badges === */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: -0.005em; white-space: nowrap; border: none; }
.badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* Couleurs pleines (pas de fond transparent) comme sur le CRM d'origine. */
.badge-prospect_entrant, .badge-non_qualifie, .badge-pas_intéressé, .badge-pas_de_reponse_1x,
.badge-pas_de_reponse_2x, .badge-attente_documents, .badge-rdv_pris {
    text-transform: uppercase;
    /* Taille réduite par rapport au badge de base (padding/police), pour rester au niveau des
       badges "documents reçus" (.badge-source) plutôt que dépasser leur gabarit — sans dupliquer
       .badge en entier, juste les 2 propriétés qui changent. Pas de puce ::before non plus : le
       CRM d'origine affiche ces statuts en pastille pleine, texte seul, sans pastille devant. */
    padding: 4px 10px;
    font-size: 11px;
    gap: 0;
    /* Largeur fixe (calée sur le libellé le plus long, "PAS RÉPONSE 2X" ≈ 113px) + texte centré :
       sans ça chaque statut a une pastille de largeur différente selon son texte, ce qui donne une
       colonne Statut "en escalier" plutôt que des boutons alignés. */
    min-width: 116px;
    justify-content: center;
}
.badge-prospect_entrant::before, .badge-non_qualifie::before, .badge-pas_intéressé::before,
.badge-pas_de_reponse_1x::before, .badge-pas_de_reponse_2x::before, .badge-attente_documents::before,
.badge-rdv_pris::before { content: none; }
.badge-prospect_entrant { background: #3B82F6; color: #fff; }
.badge-non_qualifie { background: #EF4444; color: #fff; }
.badge-pas_intéressé { background: #F59E0B; color: #fff; }
.badge-pas_de_reponse_1x { background: #F59E0B; color: #fff; }
.badge-pas_de_reponse_2x { background: #D97706; color: #fff; }
.badge-attente_documents { background: #8B5CF6; color: #fff; }
.badge-rdv_pris { background: #10B981; color: #fff; }
/* "Documents"/"Upload"/etc. (documents.php, lead-detail.php, cartes kanban) : même traitement que
   les statuts (majuscules, pas de puce devant) demandé explicitement, pour rester cohérent. */
.badge-source { background: var(--bg-tertiary); color: var(--text-primary); text-transform: uppercase; }
.badge-source::before { content: none; }
/* line-height:0 + inline-block (plutôt qu'inline-flex) : un élément inline-flex mêlé à du texte
   calcule sa hauteur de ligne via son propre alignement de baseline flex, qui diverge selon les
   navigateurs (net sur Safari iOS) et pouvait rendre la ligne du tableau plus haute que ses
   voisines rien que par la présence de cette icône, sans rapport avec sa taille réelle (15px/12px). */
.doc-indicator { display: inline-block; line-height: 0; vertical-align: middle; margin-left: 6px; color: var(--primary-light); }
.doc-indicator svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }

/* === Modal === */
.modal-overlay {
    /* inset:0 seul (pas de width/height/max-width en plus) : les cumuler avec top/right/bottom/left
       est redondant et sur-contraint la boîte — une des valeurs doit alors être ignorée selon des
       règles de résolution qui peuvent différer d'un moteur à l'autre. inset:0 sur un élément fixed
       suffit à lui seul à couvrir tout l'écran, sans ambiguïté possible. */
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.6);
    z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s;
    box-sizing: border-box;
}
.modal-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
.modal-box {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: 24px; max-width: 640px; width: 100%; max-height: 90vh; overflow-y: auto;
    padding: 28px; box-shadow: 0 25px 60px rgba(0,0,0,0.4);
    transform: translateY(16px) scale(0.98);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    /* Un enfant flex/grid ne rétrécit pas sous la largeur minimale de son contenu par défaut
       (min-width:auto implicite) — sans ce reset, des champs larges à l'intérieur (ex: inputs
       date/heure côte à côte) peuvent forcer toute la modale, et donc l'overlay plein écran qui
       la contient, à dépasser la largeur de l'écran sur mobile. */
    min-width: 0;
}
.modal-overlay.open .modal-box { transform: translateY(0) scale(1); }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.modal-header h3 { font-size: 19px; font-weight: 800; }
.modal-close {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px;
    background: none; border: none; color: var(--text-muted); font-size: 22px; cursor: pointer; line-height: 1;
    transition: background 0.15s ease;
}
.modal-close:hover { background: var(--card-hover); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }

/* Sur mobile, une modale centrée avec beaucoup de vide autour est moins pratique qu'un panneau qui
   remonte du bas de l'écran (pattern "bottom sheet", plus naturel au pouce et plus proche des
   habitudes des apps mobiles natives) */
@media (max-width: 640px) {
    .modal-overlay { align-items: flex-end; padding: 0; }
    .modal-box {
        max-width: 100%; width: 100%; border-radius: 20px 20px 0 0;
        /* vh se base sur la hauteur de l'écran en supposant la barre d'adresse du navigateur déjà
           masquée — à l'ouverture de la modale, cette barre est encore visible la plupart du temps,
           donc 92vh dépasse l'espace réellement affiché : le haut de la modale (titre, bouton
           fermer) se retrouve sous cette barre, invisible et impossible à toucher. dvh (hauteur
           "dynamique") suit ce qui est vraiment affiché à tout instant ; vh reste en repli pour les
           navigateurs plus anciens qui ne connaissent pas encore dvh (ignoré, donc sans effet, sur
           les autres). */
        max-height: 92vh;
        max-height: 92dvh;
        padding: 14px 18px calc(20px + env(safe-area-inset-bottom, 0px));
        transform: translateY(100%);
    }
    .modal-overlay.open .modal-box { transform: translateY(0); }
    .modal-box::before {
        content: ''; display: block; width: 40px; height: 4px; border-radius: 2px;
        background: var(--border-color); margin: 0 auto 16px;
    }
    .modal-actions { flex-direction: column-reverse; }
    .modal-actions .btn { width: 100%; }
}

/* === Pages publiques non-authentifiées mais plus larges (dépôt de documents) === */
.public-shell {
    min-height: 100vh; padding: 40px 20px; display: flex; flex-direction: column; align-items: center;
    position: relative; overflow: hidden;
}
/* Pare-brise fissuré en filigrane — clin d'œil au métier (vitrage auto), pas une photo (droits
   d'usage incertains pour une page publique) : un motif dessiné à la main, très discret, jamais
   au-dessus du formulaire (voir z-index sur .public-content juste en dessous). Page publique
   toujours en thème clair (voir data-theme-locked dans layout_top.php), pas de variante sombre
   à gérer ici. */
.public-shell::before {
    content: '';
    position: absolute; top: -4%; right: -10%; width: 620px; height: 460px; max-width: 70vw;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%20300%22%20fill%3D%22none%22%20stroke%3D%22%232563EB%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%3Cpath%20d%3D%22M45%20255%20L95%2055%20Q100%2042%20116%2040%20L284%2040%20Q300%2042%20305%2055%20L355%20255%20Q358%20267%20344%20269%20L56%20269%20Q42%20267%2045%20255%20Z%22/%3E%0A%3Ccircle%20cx%3D%22225%22%20cy%3D%22112%22%20r%3D%224.5%22%20fill%3D%22%232563EB%22%20stroke%3D%22none%22/%3E%0A%3Cpath%20d%3D%22M225%20112%20L178%2064%22/%3E%0A%3Cpath%20d%3D%22M225%20112%20L262%2058%22/%3E%0A%3Cpath%20d%3D%22M225%20112%20L148%20132%22/%3E%0A%3Cpath%20d%3D%22M225%20112%20L302%20142%22/%3E%0A%3Cpath%20d%3D%22M225%20112%20L214%20205%22/%3E%0A%3Cpath%20d%3D%22M225%20112%20L276%20222%22/%3E%0A%3Cpath%20d%3D%22M225%20112%20L158%20218%22/%3E%0A%3Cpath%20d%3D%22M225%20112%20L232%20175%22/%3E%0A%3Cpath%20d%3D%22M198%2088%20Q209%2099%20203%20116%22/%3E%0A%3Cpath%20d%3D%22M252%2092%20Q246%20103%20255%20117%22/%3E%0A%3Cpath%20d%3D%22M180%20122%20Q195%20128%20200%20140%22/%3E%0A%3Cpath%20d%3D%22M270%20132%20Q255%20138%20250%20148%22/%3E%0A%3C/svg%3E");
    background-repeat: no-repeat; background-size: contain;
    opacity: 0.08; pointer-events: none; z-index: 0;
}
.public-header { margin-bottom: 26px; position: relative; z-index: 1; }
.public-content { width: 100%; max-width: 640px; padding: 32px; position: relative; z-index: 1; }

/* === Auth pages (login/register) : coquille minimale, pas de navbar === */
.auth-shell {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
    position: relative; overflow: hidden;
}
.auth-card { width: 100%; max-width: 420px; position: relative; z-index: 1; animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.auth-card .card { padding: 34px 30px; }
.auth-logo { display: flex; justify-content: center; margin-bottom: 22px; }
.auth-card h1 { display: block; font-size: 21px; font-weight: 800; text-align: center; margin-bottom: 6px; }
.auth-card p.subtitle { text-align: center; color: var(--text-secondary); font-size: 14px; margin-bottom: 24px; }
.auth-footer-link { text-align: center; margin-top: 18px; font-size: 14px; color: var(--text-secondary); }
.auth-footer-link a { color: var(--primary-light); font-weight: 600; }
/* Sur les pages auth/publiques, ce bouton est un enfant direct de body (avant .auth-shell /
   .public-shell dans le markup, pas dedans) — le cibler comme descendant ne matchait jamais,
   il retombait donc dans le flux normal du document et créait une bande en haut de page. */
body > .theme-toggle { position: fixed; top: 20px; right: 20px; z-index: 2; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
/* will-change fait promouvoir ce bloc dans son propre calque de composition AVANT l'animation :
   le navigateur anime alors un calque déjà rendu (translateY/opacity ne coûtent presque rien)
   au lieu de recalculer le rendu de tout le sous-arbre à chaque frame — sensible surtout sur
   les pages qui affichent des centaines de leads réels (liste, kanban) sans pagination. */
main.app-main { animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity; }

/* === Settings tabs === */
.settings-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-color); margin-bottom: 22px; overflow-x: auto; }
.settings-tab-btn { padding: 11px 18px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary); font-weight: 600; font-size: 14.5px; cursor: pointer; white-space: nowrap; }
.settings-tab-btn:hover { color: var(--text-primary); }
.settings-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.settings-panel { display: none; }
.settings-panel.active { display: block; }

/* === Apparence (settings.php) : logo personnalisé + couleur d'accentuation === */
.logo-preview {
    width: 64px; height: 64px; border-radius: 14px; flex-shrink: 0;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 8px;
}
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.accent-swatches { display: flex; flex-wrap: wrap; gap: 14px; }
.accent-swatch { display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer; }
.accent-swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.accent-swatch-dot {
    width: 38px; height: 38px; border-radius: 50%; border: 3px solid transparent;
    box-shadow: 0 0 0 1px var(--border-color) inset;
    transition: border-color 0.2s ease, transform 0.15s ease;
}
.accent-swatch input:checked + .accent-swatch-dot {
    border-color: var(--text-primary); transform: scale(1.1);
}
.accent-swatch input:focus-visible + .accent-swatch-dot { outline: 2px solid var(--primary); outline-offset: 2px; }
.accent-swatch-label { font-size: 11.5px; color: var(--text-secondary); font-weight: 600; }

/* === Lead detail info grid === */
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.info-item { display: flex; flex-direction: column; gap: 5px; }
.info-label { display: flex; align-items: center; gap: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); font-weight: 600; }
.info-label svg { width: 14px; height: 14px; }
.info-value { font-size: 14.5px; font-weight: 500; }
.info-value svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 3px; }

/* === Historique de statut (lead-detail.php) : timeline verticale simple === */
.lead-history-item { display: flex; gap: 14px; position: relative; padding-bottom: 20px; }
.lead-history-item:last-child { padding-bottom: 0; }
.lead-history-item:not(:last-child)::before {
    content: ''; position: absolute; left: 5px; top: 16px; bottom: 0; width: 2px; background: var(--border-color);
}
.lead-history-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--primary); flex-shrink: 0; margin-top: 4px; }
.lead-history-body { flex: 1; min-width: 0; }
.lead-history-change { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.lead-history-change svg { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
.lead-history-meta { font-size: 12px; color: var(--text-muted); margin-top: 5px; }

/* === Kanban board === */
.kanban-board { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 14px; align-items: flex-start; }
.kanban-column { flex: 0 0 300px; min-width: 0; background: var(--bg-card); backdrop-filter: blur(12px); border: 1px solid var(--border-color); border-radius: 18px; display: flex; flex-direction: column; max-height: calc(100vh - 130px); }
@media (min-width: 901px) {
    .kanban-board { margin-top: 18px; }
    .kanban-column { flex-basis: 340px; }
    /* Le kanban défile déjà horizontalement par nature (overflow-x:auto) — le plafond de largeur
       du contenu (1240px, pensé pour du texte/tableaux) ne fait ici que couper une colonne en deux
       sur les écrans larges au lieu de la laisser scroller. main.app-main > .kanban-board l'emporte
       sur main.app-main > * grâce à sa spécificité plus élevée, peu importe l'ordre dans le fichier. */
    main.app-main > .kanban-board { max-width: none; }
}
.kanban-column-header { display: flex; align-items: center; gap: 9px; padding: 14px 16px; border-bottom: 1px solid var(--border-color); border-top: 3px solid var(--col-color); border-radius: 17px 17px 0 0; }
.kanban-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--col-color); flex-shrink: 0; }
.kanban-col-title { font-weight: 700; font-size: 14px; flex: 1; }
.kanban-col-count { background: var(--bg-tertiary); color: var(--text-secondary); font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.kanban-cards { padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 60px; min-width: 0; transition: background-color 0.15s ease; }
.kanban-cards.drag-over { background: var(--card-hover); border-radius: 0 0 14px 14px; }
.kanban-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 11px; padding: 12px 13px; cursor: grab; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.kanban-card:active { cursor: grabbing; }
.kanban-card.dragging { opacity: 0.4; }
.kanban-card:hover { box-shadow: 0 6px 18px var(--shadow-color); }
.kanban-card-name { font-weight: 700; font-size: 14.5px; margin-bottom: 6px; }
.kanban-card-line { font-size: 12.5px; margin-bottom: 4px; display: flex; align-items: center; }
.kanban-card-line svg { color: var(--text-muted); }
.kanban-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-color); }
.kanban-card-actions { display: flex; gap: 6px; }
.kanban-card-actions .btn-sm { padding: 6px 9px; }
.kanban-card-actions .btn-sm svg { width: 14px; height: 14px; }

/* === Kanban mobile : pastilles de statut + swipe une colonne à la fois === */
.kanban-pills { display: none; }
@media (max-width: 900px) {
    .kanban-pills {
        display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px;
        margin-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .kanban-pills::-webkit-scrollbar { display: none; }
    .kanban-pill {
        flex-shrink: 0; display: flex; align-items: center; gap: 7px;
        padding: 10px 15px; border-radius: 999px; border: 1px solid var(--border-color);
        background: var(--bg-card); color: var(--text-secondary); font-size: 13px; font-weight: 600;
        white-space: nowrap; cursor: pointer; transition: all 0.2s ease; min-height: 40px;
    }
    .kanban-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pill-color); flex-shrink: 0; }
    .kanban-pill-count { opacity: 0.7; font-weight: 700; }
    .kanban-pill.active { background: var(--pill-color); color: white; border-color: transparent; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
    .kanban-pill.active .kanban-pill-dot { background: white; }

    .kanban-board { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 0; }
    .kanban-column { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; max-height: none; }
    .kanban-cards { max-height: calc(100vh - 340px); }
}

/* === Cibles tactiles agrandies sur mobile (confort au pouce, norme ~44px) === */
@media (max-width: 640px) {
    .btn { min-height: 46px; }
    .btn-sm { min-height: 42px; padding: 9px 14px; }
    .kanban-card-actions .btn-sm { min-width: 42px; min-height: 42px; padding: 8px; }
    .kanban-card-actions .btn-sm svg { width: 17px; height: 17px; }
    input[type=checkbox] { width: 22px; height: 22px; }
    .checkbox-row { min-height: 44px; }
    .checkbox-row label { font-size: 15px; }
    select, input[type=text], input[type=email], input[type=tel], input[type=password],
    input[type=number], input[type=url], input[type=date], input[type=time] { min-height: 46px; }
    table.data-table th.sortable { padding: 15px 16px; }
}

/* === Bouton "+ Nouveau lead" (kanban, liste) ===
   Le bouton flottant (FAB) a été retiré : "+ Nouveau lead" reste dans l'en-tête de page, à côté du
   titre, y compris sur mobile — plus de bouton dupliqué à gérer. */
.fab { display: none; }

/* === Utility === */
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
/* .card h1 impose display:flex (pour aligner une icône + du texte), ce qui neutralise text-align
   sur son propre contenu (justify-content, pas text-align, positionne les enfants d'un flex) — même
   piège déjà rencontré sur "Connexion" (page de login). Ici : messages de la page publique d'upload
   (formulaire invalide, transmission réussie), un h1 texte seul sans icône. */
.text-center h1 { display: block; }
.mt-16 { margin-top: 16px; }
.empty-state { text-align: center; padding: 50px 20px; color: var(--text-muted); }
.empty-state svg { width: 48px; height: 48px; margin-bottom: 14px; opacity: 0.5; }

/* === Badge de statut cliquable (Liste, Accueil, Détail lead) — voir initStatusBadges() dans
   app.js et statusBadgeButton()/statusDropdownMenu() dans app/includes/status.php ================= */
.status-badge-btn {
    /* Un <button> garde son chrome natif (fond/ombre/relief du thème OS, surtout visible sur
       Safari) tant qu'on ne le désactive pas explicitement — redéfinir background/border (via
       .badge-*) ne suffit pas à lui seul. Même correctif que celui déjà appliqué à <select> plus
       haut dans ce fichier, pour que le badge reste identique à l'original au repos. */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    margin: 0;
    /* Un <button> n'hérite pas automatiquement la police du body (même correctif déjà appliqué
       ailleurs dans ce fichier à select/textarea/input[type=file]) — UNIQUEMENT font-family ici
       (pas le raccourci "font"), qui aurait aussi écrasé le font-weight:700 et le font-size:11px
       posés par .badge/.badge-<statut> avec ceux du parent : c'était la vraie cause du badge
       visuellement différent une fois cliquable (texte plus grand, moins gras). */
    font-family: inherit;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.status-badge-btn:hover { filter: brightness(1.1); }
.status-badge-btn:active { transform: scale(0.96); }
.status-badge-btn[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 4px var(--primary); }

.status-dropdown-menu {
    position: fixed; z-index: 600; min-width: 210px; max-height: 320px; overflow-y: auto;
    background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 14px;
    padding: 6px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.status-dropdown-menu.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.status-dropdown-item {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px;
    border-radius: 9px; background: none; border: none; text-align: left; cursor: pointer;
    font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-primary);
    transition: background 0.12s ease;
}
.status-dropdown-item:hover { background: var(--card-hover); }
.status-dropdown-item.active { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* === Commentaires d'un lead (lead-detail.php + lead-detail.js) =================================== */
.lead-message-composer { margin-bottom: 20px; }
.lead-message-composer textarea { min-height: 72px; margin-bottom: 10px; }
.lead-message-composer-actions { display: flex; justify-content: flex-end; }
.lead-messages-list { display: flex; flex-direction: column; gap: 16px; }
.lead-message { padding-bottom: 16px; border-bottom: 1px solid var(--border-color); }
.lead-message:last-child { border-bottom: none; padding-bottom: 0; }
.lead-message-text { font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; }
.lead-message-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.lead-message-edit-btn, .lead-message-delete-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 7px; margin-left: 2px;
    background: none; border: none; color: var(--text-muted); cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.lead-message-edit-btn:hover { background: var(--card-hover); color: var(--primary); }
.lead-message-delete-btn:hover { background: rgba(220, 38, 38, 0.12); color: var(--danger); }
.lead-message-edit-btn svg, .lead-message-delete-btn svg { width: 13px; height: 13px; }
.lead-message-date-form { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.lead-message-date-form.hidden { display: none; }
.lead-message-date-form input[type=date], .lead-message-date-form input[type=time] { width: auto; height: 38px; padding: 6px 10px; font-size: 13px; }

@media (max-width: 640px) {
    .lead-message-composer-actions .btn { width: 100%; }
    .lead-message-date-form input[type=date], .lead-message-date-form input[type=time] { flex: 1; min-width: 118px; }
}