/* =========================================================
   ADMIN.CSS — back-office administrateur
   Chargé uniquement par le gabarit tpl-admin
   ========================================================= */

/* Hauteur intrinsèque (shrink-to-fit) : pas de fonctionnalité façon chat
   côté admin (juste des tableaux), donc pas besoin d'une hauteur figée
   comme sur "Messages" ailleurs — le shell fait simplement la hauteur de
   son contenu, sans vide en dessous quand un panneau a peu de contenu. */
.admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 0; }
.admin-sidebar { background: #0d0d1f; display: flex; flex-direction: column; overflow: hidden; }
/* Scroll isolé sur .as-nav-scroll (juste la liste de nav), pas sur
   .admin-sidebar elle-même — même correctif que .prs-nav-scroll dans
   css/dashboard-pro.css (bug de peinture Chromium/Edge sur fond sombre +
   overflow:auto + contenu rempli par JS après le premier paint). */
.as-nav-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; }
.as-logo { padding: 1.25rem 1.5rem; font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 900; color: #fff; border-bottom: 1px solid rgba(255,255,255,.05); }
.as-logo span { color: var(--orange); }
.as-logo, .as-logo:hover, .as-logo:visited { text-decoration: none; display: block; }
.as-logo-badge { font-size: 13px; background: var(--orange); color: #fff; border-radius: 6px; padding: 1px 6px; margin-left: 4px; }
.as-logo .as-logo-badge { color: #fff; }
.as-user { padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,.05); display: flex; align-items: center; gap: 10px; }
.as-av { width: 40px; height: 40px; border-radius: 50%; background: var(--orange); display: flex; align-items: center; justify-content: center; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 900; color: #fff; }
.as-name { font-size: 15px; font-weight: 700; color: #fff; }
.as-role { font-size: 13px; color: rgba(255,255,255,.3); }
.as-sec { padding: .875rem 1.5rem .3rem; font-size: 13px; color: rgba(255,255,255,.2); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
/* ── LES ONGLETS SONT DE VRAIS BOUTONS ────────────────────────────────
   C'etaient des <div onclick>. La migration hors du HTML les a rendus
   natifs : Entree et Espace fonctionnent desormais sans code, et un
   lecteur d'ecran les annonce comme des commandes.

   Un <button> arrive avec un fond gris, une bordure, une police et un
   centrage qui lui sont propres. Sans les neutraliser ici, le menu
   changerait d'aspect. L'ordre compte : `border: none` doit preceder
   `border-left`, sinon il l'effacerait. */
.as-item { display: flex; align-items: center; gap: 10px; padding: 10px 1.5rem; font-size: 13px; color: rgba(255,255,255,.4); cursor: pointer; background: none; border: none; font-family: inherit; width: 100%; text-align: left; border-left: 2px solid transparent; transition: all .15s; }
.as-item:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.as-item:hover { background: rgba(255,255,255,.04); color: rgba(255,255,255,.8); }
.as-item.on { color: var(--orange); border-left-color: var(--orange); background: rgba(255,107,53,.07); }
.as-badge { margin-left: auto; background: var(--orange); color: #fff; font-size: 13px; padding: 2px 7px; border-radius: 100px; }
.admin-main { background: var(--gray-50); display: flex; flex-direction: column; overflow-y: auto; }
.admin-topbar { background: #fff; border-bottom: 1px solid var(--gray-100); padding: .875rem 1.5rem; display: flex; justify-content: space-between; align-items: center; }
/* Bouton ☰ + fond assombri du tiroir mobile — cachés en desktop, activés
   sous 768px (même bug/même correctif que .pro-sidebar/.dash-sidebar). */
.admin-mobile-toggle { display: none; background: #fff; color: var(--navy); border: 1.5px solid var(--gray-200); border-radius: 9px; padding: 8px 11px; font-size: 16px; cursor: pointer; font-family: inherit; margin-right: 10px; }
.admin-mobile-backdrop { display: none; position: fixed; inset: 0; background: rgba(15,15,35,.5); z-index: 890; }
.admin-mobile-backdrop.show { display: block; }
.at-title { font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 900; }
.at-actions { display: flex; gap: 10px; align-items: center; }
.at-notif { width: 36px; height: 36px; background: none; font-family: inherit; color: inherit; padding: 0; border: 1.5px solid var(--gray-200); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; position: relative; }
.at-notif:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.at-notif-dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; background: var(--orange); border-radius: 50%; }
.admin-content { padding: 1.5rem; flex: 1; }
.adm-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 1.5rem; }
.adm-kpi { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--radius-lg); padding: 1.25rem; }
.adm-kpi.accent { border-left: 3px solid var(--orange); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
/* ── LES INDICATEURS QUI MENENT QUELQUE PART ──────────────────────────
   Trois des quatre cartes sont des <button>. Un bouton apporte
   gratuitement Entree, Espace et le focus clavier ; il apporte aussi son
   style par defaut, qu'on remet donc a plat pour que rien ne change a
   l'oeil par rapport au <div> d'origine.
   La main de clic ne se pose QUE sur .adm-kpi-clic : « Revenu du mois »
   n'a aucune page correspondante, un curseur main y promettrait une
   navigation inexistante. */
.adm-kpi-clic {
  font: inherit; color: inherit; text-align: left; width: 100%;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.adm-kpi-clic:hover {
  border-color: var(--orange);
  box-shadow: 0 6px 18px rgba(255,107,53,.12);
  transform: translateY(-2px);
}
.adm-kpi-clic:focus-visible {
  outline: 2px solid var(--navy); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .adm-kpi-clic { transition: none; }
  .adm-kpi-clic:hover { transform: none; }
}

/* ── MODALE D'INVITATION D'UN PROFESSIONNEL ─────────────────────────── */
.adm-modal-fond {
  position: fixed; inset: 0; background: rgba(10,10,30,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem; z-index: 200;
}
.adm-modal {
  background: #fff; border-radius: var(--radius-lg);
  width: min(100%, 520px); max-height: 90vh; overflow: auto; padding: 1.5rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.adm-modal h3 { font-family: 'DM Sans', sans-serif; font-size: 19px; font-weight: 900; color: var(--navy); margin-bottom: 4px; }
.adm-modal .adm-modal-sous { font-size: 13px; color: var(--gray-400); margin-bottom: 1.25rem; }
.adm-champ { margin-bottom: 14px; }
.adm-champ label { display: block; font-size: 14px; font-weight: 700; color: var(--gray-600); margin-bottom: 5px; }
.adm-champ input, .adm-champ select {
  width: 100%; border: 1.5px solid var(--gray-200); border-radius: 9px;
  padding: 10px 12px; font-size: 14px; font-family: inherit; color: var(--navy);
}
.adm-champ input:focus, .adm-champ select:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.adm-erreur { display: none; font-size: 14px; color: #dc2626; margin-top: 4px; }
.adm-erreur.on { display: block; }
.adm-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 1.25rem; }
.adm-modal-bilan { font-size: 13px; margin-top: 12px; padding: 10px 12px; border-radius: 9px; display: none; }
.adm-modal-bilan.on { display: block; }
.adm-modal-bilan.ok { background: #ecfdf5; color: #065f46; }
.adm-modal-bilan.attention { background: #fffbeb; color: #92400e; }
.adm-modal-bilan.ko { background: #fef2f2; color: #991b1b; }

.ak-label { font-size: 14px; color: var(--gray-400); margin-bottom: 6px; }
.ak-value { font-family: 'DM Sans', sans-serif; font-size: 26px; font-weight: 900; }
.ak-delta { font-size: 13px; margin-top: 5px; }
.adm-charts { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-bottom: 1.5rem; }
.adm-panel { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--radius-lg); padding: 1.25rem; }
.ap-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.ap-title { font-size: 14px; font-weight: 700; }
.ap-link { font-size: 14px; color: var(--orange); cursor: pointer; background: none; border: none; padding: 0; font-family: inherit; }
.ap-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.chart-svg { width: 100%; height: 160px; }
.adm-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 1.5rem; }
.bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.bar-label { font-size: 13px; color: var(--gray-400); width: 80px; flex-shrink: 0; }
.bar-track { flex: 1; height: 8px; background: var(--gray-100); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; }
.bar-val { font-size: 13px; color: var(--gray-600); width: 35px; text-align: right; font-weight: 600; }
.pro-art-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--gray-50); }
.pro-art-row:last-child { border: none; }
.par-av { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.par-av img { width: 100%; height: 100%; object-fit: cover; }
.par-name { font-size: 13px; font-weight: 700; }
.par-meta { font-size: 13px; color: var(--gray-400); }
.par-right { margin-left: auto; text-align: right; }
.par-note { font-size: 13px; font-weight: 700; color: var(--orange); }
.par-jobs { font-size: 13px; color: var(--gray-400); }
.adm-table { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--radius-lg); padding: 1.25rem; }
.dtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.dtable th { text-align: left; font-size: 14px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: .06em; padding: 0 0 10px; border-bottom: 1px solid var(--gray-100); }
.dtable td { padding: 10px 0; border-bottom: 1px solid var(--gray-50); color: var(--gray-800); vertical-align: middle; }
.dtable tr:last-child td { border: none; }
.act-btn { border: 1.5px solid var(--gray-200); border-radius: 7px; padding: 4px 10px; font-size: 13px; font-weight: 600; cursor: pointer; background: #fff; color: var(--gray-600); font-family: inherit; }

/* États "aucune donnée réelle disponible" à l'intérieur des panneaux admin
   (graphique de revenus vide, aucun métier publié, aucune demande, aucun
   pro avec avis...) — même classe .fp-empty que FacturePro (voir
   js/toast.js apiErrorBlock()), mais celle-ci n'était jusqu'ici stylée
   que sous #pg-facturation (css/facturation.css) : sans cette copie
   scopée à #pg-admin, ces blocs s'affichaient sans aucune mise en forme
   dans le tableau de bord admin. */
#pg-admin .fp-empty { text-align: center; padding: 2.5rem 1rem; color: var(--gray-400); }
#pg-admin .fp-empty-icon { font-size: 34px; margin-bottom: .6rem; }
#pg-admin .fp-empty-title { font-size: 13px; font-weight: 700; color: var(--gray-600); margin-bottom: 4px; }
#pg-admin .fp-empty-sub { font-size: 14px; }

.at-notif:hover { border-color: var(--orange); }
.ap-link:hover { text-decoration: underline; }

.adm-filter-btn { border: 1.5px solid var(--gray-200); background: #fff; color: var(--gray-600); border-radius: 100px; padding: 6px 14px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .15s; }
.adm-filter-btn:hover { border-color: var(--orange); color: var(--orange); }
.adm-filter-btn.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.adm-row-del { border: 1.5px solid var(--gray-200); border-radius: 7px; padding: 4px 10px; font-size: 13px; font-weight: 600; cursor: pointer; background: #fff; color: #dc2626; font-family: inherit; }
.adm-row-del:hover { background: #dc2626; color: #fff; border-color: #dc2626; }

/* ── Listes bornées (défilement interne) ──
   Avant : ces tableaux grandissaient indéfiniment avec la page entière —
   viable avec peu de données de démo, mais avec beaucoup de pros/clients
   inscrits en réel, un panneau "Professionnels" ou "Clients" de plusieurs
   centaines de lignes rendrait toute la page interminable à parcourir.
   Plafonné à 60vh avec défilement interne (voir base.css pour le style de
   barre grise appliqué à ces mêmes ids). */
#admDemandesTable, #admProsTable, #admClientsTable,
#admReviewsTable, #admSubsTable, #admNotifList {
  max-height: 60vh;
  overflow-y: auto;
}

@media (max-width: 768px) {
  .admin-shell { grid-template-columns: 1fr; }
  /* Tiroir mobile : voir .pro-sidebar dans css/dashboard-pro.css pour le
     même principe. .admin-shell est en hauteur intrinsèque (pas de
     height:100vh comme pro/client — voir commentaire plus haut), donc la
     sidebar en position:fixed précise elle-même sa hauteur à 100vh. */
  .admin-sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 240px; z-index: 900; transform: translateX(-100%); transition: transform .25s ease; }
  .admin-sidebar.mobile-open { transform: translateX(0); }
  .admin-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .adm-kpis { grid-template-columns: repeat(2,1fr); }
  .adm-charts { grid-template-columns: 1fr; }
  .adm-2col { grid-template-columns: 1fr; }
}

/* ── Propositions de métier ─────────────────────────────────────────────
   Décision explicite : un sélecteur de classement sans valeur par défaut
   utile, un métier cible, un motif. L'encart « entrée catalogue » est un
   texte à copier, pas un bouton « publier ». */
.adm-prop-filtres { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-prop-filtre { background: #fff; border: 1.5px solid var(--gray-200); border-radius: 100px; padding: 4px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--gray-600); cursor: pointer; }
.adm-prop-filtre.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.adm-prop-filtre:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.adm-prop-note { font-size: 13px; line-height: 1.55; color: var(--gray-600); margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid var(--orange); background: var(--gray-50); border-radius: 0 8px 8px 0; }
.adm-prop-carte { border: 1px solid var(--gray-100); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.adm-prop-tete { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.adm-prop-libelle { font-size: 15px; font-weight: 700; color: var(--navy); }
.adm-prop-meta { font-size: 13px; color: var(--gray-400); }
.adm-prop-desc { font-size: 13px; line-height: 1.5; color: var(--gray-600); margin: 6px 0 0; white-space: pre-wrap; }
.adm-prop-sugg { font-size: 13px; color: var(--gray-600); margin-top: 6px; }
.adm-prop-sugg code { background: var(--gray-50); padding: 1px 5px; border-radius: 4px; }
.adm-prop-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin-top: 10px; align-items: end; }
.adm-prop-form label { display: block; font-size: 13px; font-weight: 700; color: var(--gray-400); text-transform: uppercase; margin-bottom: 4px; }
.adm-prop-form select, .adm-prop-form input { width: 100%; border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 7px 9px; font-size: 13px; font-family: inherit; background: #fff; }
.adm-prop-form select:focus-visible, .adm-prop-form input:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.adm-prop-boutons { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.adm-prop-btn { border: none; border-radius: 8px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; color: #fff; background: var(--navy); }
.adm-prop-btn.refus { background: #b91c1c; }
.adm-prop-btn:disabled { opacity: .6; cursor: default; }
.adm-prop-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.adm-prop-resultat { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--navy); }
.adm-prop-resultat.erreur { color: #b91c1c; }
.adm-prop-resultat:empty { display: none; }
.adm-prop-entree { margin-top: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; white-space: pre-wrap; background: var(--gray-50); border: 1px dashed var(--gray-200); border-radius: 8px; padding: 10px 12px; color: var(--navy); }
.adm-prop-etat { font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 100px; background: var(--gray-100); color: var(--gray-600); }
.adm-prop-etat.en_attente { background: #fff7ed; color: #c2410c; }
.adm-prop-etat.approuvee { background: #ecfdf5; color: #047857; }
.adm-prop-etat.rattachee { background: #eff6ff; color: #1d4ed8; }
.adm-prop-etat.refusee { background: #fef2f2; color: #b91c1c; }
.as-badge[hidden] { display: none; }

/* ── Comptes actifs sans formule determinable (Mission 10, lot 2) ── */
.adm-anomalies { margin-bottom: 16px; }
.adm-anomalies .adm-note { font-size: 13px; color: var(--gray-600, #4b5563); margin: 0 0 8px; line-height: 1.5; }
.adm-anomalies .dtable { margin-bottom: 12px; }

/* ── Avis & notes (mission 16, lot 2) : états, motif de masquage ── */
.adm-avis-compteurs { font-size: 13px; color: var(--gray-500); margin-bottom: 10px; }
.adm-avis-texte { max-width: 280px; }
.adm-avis-detail { font-size: 13px; color: var(--gray-500); margin-top: 4px; }
.adm-avis-statut { display: inline-block; font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 100px; background: var(--gray-100); color: var(--gray-600); }
.adm-avis-signale { background: #fef3c7; color: #92400e; }
.adm-avis-masque { background: var(--gray-200); color: var(--gray-600); }
.adm-avis-actions { white-space: nowrap; }
.adm-row-btn { border: 1.5px solid var(--gray-200); border-radius: 7px; padding: 4px 10px; font-size: 13px; font-weight: 600; cursor: pointer; background: #fff; color: var(--navy); font-family: inherit; margin-right: 6px; }
.adm-row-btn:hover { border-color: var(--navy); }
.adm-row-btn:focus-visible, .adm-row-del:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.adm-avis-masquage { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; white-space: normal; }
.adm-avis-masquage[hidden] { display: none; }
.adm-avis-label { flex-basis: 100%; font-size: 13px; color: var(--gray-500); }
.adm-avis-motif { flex: 1 1 180px; border: 1.5px solid var(--gray-200); border-radius: 7px; padding: 5px 8px; font: inherit; font-size: 13px; }
.adm-avis-motif:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }