/* Styles partagés par les pages de "Mon espace" (tableau de bord, module
   Gentleman, mes annonces) — extrait le 26/08 de gentleman.html et
   dashboard_user.html, qui définissaient chacun leur propre <style> local
   avec des classes utilisées par l'AUTRE template sans jamais être
   chargées (bug latent : score-card/gentleman-hint non stylés sur
   dashboard_user.html, badges non stylés là où ils étaient réutilisés).
   Centralisé ici pour que toutes les pages de "Mon espace" (désormais
   scindées en plusieurs pages, demande explicite de Jeff : "une page
   rien que pour le wallet (...) c'est pas parlant, c'est pas
   intelligible") partagent un rendu cohérent sans dupliquer le CSS. */

/* Menu "Mon tableau de bord" (templates/partials/espace_nav.html) —
   reskin du 27/08 : un <select> natif "c'est moche" (Jeff, testant en
   vrai) — remplacé par un vrai bouton + panneau, comme un menu de compte
   sur n'importe quel site. Deux habillages du déclencheur (page blanche
   vs navbar sombre), un seul panneau. */
.espace-menu { position: relative; display: inline-block; margin: 0 0 1.5rem; }
/* Dans la navbar (flex, align-items:center), la marge basse ci-dessus
   (pensée pour l'espacement en haut des pages de contenu) grandissait la
   boîte du bouton et le décalait par rapport aux autres liens de la
   banderole — signalé par Jeff le 28/08 : "mon tableau de bord n'est pas
   aligné avec les autres liens dans le header". Réinitialisée et
   recentrée verticalement ici, sans toucher à l'usage en page. */
.navbar-links .espace-menu { margin: 0; display: flex; align-items: center; }
.espace-menu-trigger {
    appearance: none; -webkit-appearance: none; border: 1px solid #E5E7EB; background: white;
    color: #1F2937; padding: 0.5rem 0.9rem; border-radius: 8px; font: inherit;
    font-size: var(--vaz-text-sm, 0.875rem); font-weight: 600; cursor: pointer;
}
.espace-menu-trigger:hover { background: #F9FAFB; }
.espace-menu-caret { display: inline-block; transition: transform 0.15s ease; }
.espace-menu.open .espace-menu-caret { transform: rotate(180deg); }

/* Déclencheur dans la navbar (fond sombre var(--vaz-forest-900)) — même
   habillage texte que les autres liens de la navbar (.nav-link), pas de
   fond blanc qui jurerait. */
.espace-menu-trigger-navbar {
    background: transparent; border: none; color: var(--vaz-paper); padding: 0;
    font-size: inherit; font-weight: normal;
}
.espace-menu-trigger-navbar:hover { background: transparent; color: var(--vaz-sage-300); }

.espace-menu-panel {
    display: none; position: absolute; top: 100%; right: 0; margin-top: 0.5rem;
    background: white; border: 1px solid #E5E7EB; border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); min-width: 260px; z-index: 1000;
    padding: 0.5rem 0; text-align: left;
}
.espace-menu.open .espace-menu-panel { display: block; }
.espace-menu-heading {
    margin: 0.6rem 0 0.2rem; padding: 0 1rem; font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em; color: #4B5563;
}
/* Liens illisibles signalés par Jeff le 27/08 : dans la navbar,
   `.navbar-links a { color: var(--vaz-paper) }` (style.css) est plus
   spécifique que `.espace-menu-item` seul et repeignait les liens du
   panneau en blanc sur fond blanc. Sélecteur `.espace-menu-panel a`
   ci-dessous (spécificité 0,2,1) force la couleur sombre du panneau,
   quel que soit l'endroit où le composant est inclus (navbar ou en
   page — voir templates/partials/espace_nav.html, variant="navbar"). */
.espace-menu-panel a.espace-menu-item {
    display: block; width: 100%; box-sizing: border-box; text-align: left;
    padding: 0.45rem 1rem; color: #1F2937; text-decoration: none; font-size: 0.875rem;
    background: none; border: none; font: inherit; cursor: pointer;
}
.espace-menu-item {
    display: block; width: 100%; box-sizing: border-box; text-align: left;
    padding: 0.45rem 1rem; color: #1F2937; text-decoration: none; font-size: 0.875rem;
    background: none; border: none; font: inherit; cursor: pointer;
}
.espace-menu-item:hover, .espace-menu-panel a.espace-menu-item:hover { background: #F3F4F6; color: #111827; }
.espace-menu-item.active, .espace-menu-panel a.espace-menu-item.active { color: #16A34A; font-weight: 600; }
.espace-menu-separator { border: none; border-top: 1px solid #E5E7EB; margin: 0.5rem 0; }
/* Badge rouge "à traiter" — demande explicite de Jeff, 28/08 : "il
   faudrait l'infobulle avec trois en rouge (...) quelque chose de
   flagrant". Sur le déclencheur ET sur chaque entrée concernée du
   panneau (voir templates/partials/espace_nav.html, pending.*). */
.espace-menu-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.3em; height: 1.3em; padding: 0 0.35em; margin-left: 0.4em;
    background: #DC2626; color: white; border-radius: 999px;
    font-size: 0.75rem; font-weight: 700; line-height: 1;
    vertical-align: middle;
}
/* Compteur informatif noir "(N)" — distinct du badge rouge ci-dessus :
   demande explicite de Jeff, 28/08 : "annonces en ligne il y en a deux
   là, tu pourrais mettre parenthèse 2 (...) noir quand c'est en cours
   (...) et que c'est traité" — un total (annonces en ligne, brouillons,
   vendues, évaluations, paiements d'abonnement) n'est pas une alerte à
   traiter, donc pas de badge rouge : juste le texte du lien, atténué. */
.espace-menu-count { color: #6B7280; font-weight: 400; }
.espace-menu-item.active .espace-menu-count { color: #16A34A; }
/* Même format "(N)" que le compteur noir ci-dessus, mais en ROUGE — demande
   explicite de Jeff, 30/08, venant de publier une annonce sans caution :
   "il faudrait le chiffre entre parenthèses à côté des cautions qui passe
   en rouge (...) qu'il y a une nouvelle annonce pour laquelle il n'y a pas
   de caution". Distinct du badge rond .espace-menu-badge (pastille) :
   Jeff décrit ici explicitement un "(N)" entre parenthèses, pas une
   pastille — seule la couleur doit changer par rapport à .espace-menu-count. */
.espace-menu-count-alert { color: #DC2626; font-weight: 600; }
.espace-menu-logout-form { margin: 0; }
.espace-menu-logout { color: #991B1B; }

.gentleman-scores { display: flex; gap: 1.5rem; margin: 2rem 0 3rem; flex-wrap: wrap; }
.score-card {
    flex: 1; min-width: 140px; background: white; border: 1px solid #E5E7EB;
    border-radius: 12px; padding: 1.25rem; text-align: center;
}
.score-value { display: block; font-size: 2rem; font-weight: bold; color: #16A34A; }
.score-label { display: block; font-size: 0.85rem; color: #4B5563; margin-top: 0.25rem; }

.gentleman-section { margin-bottom: 2.5rem; text-align: left; }
.gentleman-section h2 { font-size: 1.15rem; margin-bottom: 1rem; }
/* Contraste corrigé le 26/08 (demande explicite de Jeff : « les montants
   s'écrivent en gris clair sur fond blanc, c'est presque illisible »). */
.gentleman-hint { font-size: 0.85rem; color: #374151; margin: 0.35rem 0 0.75rem; }
.gentleman-item {
    background: white; border: 1px solid #E5E7EB; border-radius: 10px;
    padding: 1rem 1.25rem; margin-bottom: 0.75rem;
}
.gentleman-item p { margin: 0 0 0.6rem; }
.gentleman-item-litige { border-color: #FCA5A5; background: #FEF2F2; }
/* Verdict personnalisé (relatif à l'utilisateur connecté, voir
   catalog.views_gentleman.espace_litiges::l.verdict_perso) — demande
   explicite de Jeff, 29/08 : "je veux que le litige ne soit plus en
   rouge, mais en vert (...) et en orange, quand il a été clôturé en
   faveur de l'autre (...) il faut que ce soit visuel". Rouge par défaut
   (règle .gentleman-item-litige ci-dessus) = toujours en cours ; ces deux
   variantes ne s'appliquent qu'une fois résolu. */
.gentleman-item-litige-gagne { border-color: #6EE7B7; background: #ECFDF5; }
.gentleman-item-litige-perdu { border-color: #FDBA74; background: #FFF7ED; }

/* Rendez-vous "menacé" (voir RendezVous.reservation_menacee) — demande
   explicite de Jeff, 29/08 : "son rdv devient incertain, encadré en
   orange" — quand un autre acheteur a payé une réservation sur le même
   véhicule mais que CE rendez-vous n'a pas encore été annulé (il n'est
   pas antérieur au créneau payé, voir court_circuiter_creneaux_anterieurs).
   Distinct du rouge "annulé" (gentleman-statut-annule_priorite) : ici le
   rendez-vous reste valide, juste plus protégé. */
.gentleman-item-rdv-menace { border-color: #FDBA74; background: #FFFBEB; }

.gentleman-statut {
    display: inline-block; padding: 0.15em 0.6em; border-radius: 999px;
    font-size: 0.75rem; font-weight: 600; background: #E5E7EB; color: #374151;
}
.gentleman-statut-contacte, .gentleman-statut-confirme, .gentleman-statut-termine { background: #D1FAE5; color: #065F46; }
.gentleman-statut-sans_suite, .gentleman-statut-decline, .gentleman-statut-litige_ouvert, .gentleman-statut-ouvert, .gentleman-statut-refusee, .gentleman-statut-annule_vendu, .gentleman-statut-non_honore, .gentleman-statut-annule_priorite { background: #FEE2E2; color: #991B1B; }
.gentleman-statut-en_attente, .gentleman-statut-propose, .gentleman-statut-en_attente_autorisation { background: #FEF3C7; color: #92400E; }
/* Dénouement d'un rendez-vous (RendezVous.issue_affichage) — demande
   explicite de Jeff, 28/08 : "en vert (...) honoré, en orange que le
   rendez-vous n'a pas été honoré [pas encore tranché], et en rouge (...)
   confirmé par le modérateur (...) empoche la caution". Orange distinct
   du jaune "en attente" ci-dessus (sémantique différente : ici quelque
   chose s'est mal passé, pas juste "pas encore traité"). */
.gentleman-statut-honore { background: #D1FAE5; color: #065F46; }
.gentleman-statut-en_litige { background: #FFEDD5; color: #9A3412; }
/* Annulation gracieuse (préavis, RendezVous.declarer_absence_avec_preavis)
   — demande explicite de Jeff, 30/08 : « à côté de non honoré, il
   faudrait mettre annulé par moi-même ou par le vendeur, un truc qui
   rend la chose plus intelligible ». Gris neutre — volontairement NI
   rouge (aucun manquement, prévenir n'est pas une faute) NI vert
   (personne n'a honoré le rendez-vous, ce n'est pas un succès non plus). */
.gentleman-statut-annule { background: #E5E7EB; color: #374151; }
.gentleman-statut-shield { background: #1F2937; color: white; }
/* Verdict personnalisé d'un litige résolu, voir gentleman-item-litige-*
   ci-dessus — même vert/orange, appliqué ici au petit badge "En votre
   faveur"/"En faveur de l'autre partie" (catalog.views_gentleman.
   espace_litiges::l.verdict_perso, partials/litige_item.html). Un litige
   sans verdict (encore OUVERT/EN_ATTENTE_COMPLEMENT) retombe sur
   gentleman-statut-ouvert/en_attente_complement ci-dessus, déjà rouge. */
.gentleman-statut-gagne { background: #D1FAE5; color: #065F46; }
.gentleman-statut-perdu { background: #FFEDD5; color: #9A3412; }

.gentleman-dispo-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 1rem; }
.gentleman-dispo-form select, .gentleman-dispo-form input { padding: 0.35rem 0.5rem; border: 1px solid #E5E7EB; border-radius: 6px; }
.gentleman-cgv { margin-top: 0.5rem; }
.gentleman-cgv summary { cursor: pointer; font-size: 0.8rem; color: #374151; font-weight: 600; }
.gentleman-cgv p { font-size: 0.8rem; line-height: 1.6; color: #374151; margin: 0.5rem 0 0; max-width: 640px; }

.vaz-dash-table { width: 100%; max-width: 640px; border-collapse: collapse; font-size: 0.85rem; }
.vaz-dash-table td { padding: 0.35rem 0.5rem; border-bottom: 1px solid #E5E7EB; }
.vaz-dash-positive { color: #16A34A; font-weight: 600; }
.vaz-dash-negative { color: #DC2626; font-weight: 600; }

.vaz-dash-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.vaz-dash-header-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.vaz-dash-section { margin-bottom: 2rem; }
.vaz-dash-count { color: var(--vaz-ink-dim, #6B7280); font-weight: normal; font-size: var(--vaz-text-sm, 0.875rem); }

/* "Mon tableau de bord" (/mon-compte/) — purement des liens depuis le
   27/08 (demande explicite de Jeff : « je ne veux pas (...) une vue
   d'ensemble où tout le dashboard tient sur une page, trop
   d'informations (...) les gens vont être perdus ») — aucune donnée
   agrégée, juste les mêmes activités que le menu déroulant de la navbar,
   en tuiles toujours visibles (utile en secours sans survol/clic sur un
   menu, notamment mobile). */
.vaz-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.vaz-tile {
    display: block; padding: 1.25rem 1.5rem; background: white; border: 1px solid #E5E7EB;
    border-radius: 12px; color: #1F2937; text-decoration: none; font-weight: 600;
    font-size: var(--vaz-text-sm, 0.875rem);
}
.vaz-tile:hover { border-color: #16A34A; background: #F0FDFA; }
.vaz-tile-primary { background: #16A34A; color: white; border-color: #16A34A; }
.vaz-tile-primary:hover { background: #15803D; }

.gentleman-vendu-badge {
    display: inline-block; padding: 0.15em 0.7em; border-radius: 999px;
    background: #16A34A; color: white; font-size: var(--vaz-text-xs, 0.75rem); font-weight: 600;
}
.gentleman-brouillon-badge {
    display: inline-block; padding: 0.15em 0.7em; border-radius: 999px;
    background: #92400E; color: white; font-size: var(--vaz-text-xs, 0.75rem); font-weight: 600;
}