/* ========================================================================== */
/* ETHNOS R165 — alignements Invitations, Annuaire et Signalements            */
/* Base : R164. Correctifs ciblés du 4 août 2026.                              */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/* R1 — Messages / Mes invitations : trois filtres strictement sur une ligne. */
/* -------------------------------------------------------------------------- */
html body .memberMessagesDrawer .memberMessageSubfilters{
  box-sizing:border-box !important;
  width:100% !important;
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  align-items:stretch !important;
  gap:8px !important;
  padding:6px 18px 14px !important;
  overflow:visible !important;
}
html body .memberMessagesDrawer .memberMessageSubfilters button{
  box-sizing:border-box !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 8px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  text-align:center !important;
}
@media (max-width:1536px), (max-height:864px){
  html body .memberMessagesDrawer .memberMessageSubfilters{
    gap:6px !important;
    padding:5px 10px 11px !important;
  }
  html body .memberMessagesDrawer .memberMessageSubfilters button{
    min-height:32px !important;
    padding:0 5px !important;
    font-size:9px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* R2 — Annuaire : bandeau lisible, pseudo prioritaire, aucun mot vertical.    */
/* -------------------------------------------------------------------------- */
html body .memberDirectoryShell.isResultsMode .memberDirectoryResult,
html body .bodyContactGrid .memberDirectoryResult{
  grid-template-columns:56px minmax(0,1fr) 30px 50px !important;
  grid-template-areas:
    "avatar identity flag shield"
    "avatar presence presence presence" !important;
  grid-template-rows:auto auto !important;
  align-items:center !important;
  column-gap:10px !important;
  row-gap:2px !important;
}
html body .memberDirectoryShell.isResultsMode .memberDirectoryAvatar,
html body .bodyContactGrid .memberDirectoryAvatar{grid-area:avatar !important}
html body .memberDirectoryShell.isResultsMode .memberDirectoryIdentity,
html body .bodyContactGrid .memberDirectoryIdentity{
  grid-area:identity !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}
html body .memberDirectoryShell.isResultsMode .memberDirectoryIdentity strong,
html body .bodyContactGrid .memberDirectoryIdentity strong{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  white-space:normal !important;
  overflow:visible !important;
  overflow-wrap:break-word !important;
  word-break:normal !important;
  hyphens:none !important;
  text-overflow:clip !important;
}
html body .memberDirectoryShell.isResultsMode .memberDirectoryIdentity small,
html body .bodyContactGrid .memberDirectoryIdentity small{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  white-space:normal !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}
html body .memberDirectoryShell.isResultsMode .memberDirectoryFlag,
html body .bodyContactGrid .memberDirectoryFlag{grid-area:flag !important}
html body .memberDirectoryShell.isResultsMode .memberDirectoryShield,
html body .bodyContactGrid .memberDirectoryShield{grid-area:shield !important}
html body .memberDirectoryShell.isResultsMode .memberDirectoryPresence,
html body .bodyContactGrid .memberDirectoryPresence{
  grid-area:presence !important;
  min-width:0 !important;
  width:auto !important;
  max-width:100% !important;
  justify-self:start !important;
  justify-content:flex-start !important;
  margin-top:2px !important;
  white-space:nowrap !important;
}

@media (max-width:1600px) and (max-height:920px){
  html body .memberDirectoryShell.isResultsMode .memberDirectoryResult,
  html body .bodyContactGrid .memberDirectoryResult{
    min-height:68px !important;
    padding:8px 9px !important;
    grid-template-columns:44px minmax(0,1fr) 23px 37px !important;
    column-gap:7px !important;
    row-gap:1px !important;
  }
  html body .memberDirectoryShell.isResultsMode .memberDirectoryIdentity strong,
  html body .bodyContactGrid .memberDirectoryIdentity strong{
    font-size:11px !important;
    line-height:1.12 !important;
  }
  html body .memberDirectoryShell.isResultsMode .memberDirectoryIdentity small,
  html body .bodyContactGrid .memberDirectoryIdentity small{
    font-size:7px !important;
    line-height:1.2 !important;
  }
  html body .memberDirectoryShell.isResultsMode .memberDirectoryPresence,
  html body .bodyContactGrid .memberDirectoryPresence{
    font-size:7px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* R3 — Signalements : trois compteurs sur la même ligne et le même axe.       */
/* -------------------------------------------------------------------------- */
html body .bodyReportsDrawer .bodyDrawerStats{
  align-items:stretch !important;
}
html body .bodyReportsDrawer .bodyDrawerStats>div{
  height:auto !important;
  display:grid !important;
  grid-template-rows:40px minmax(30px,auto) !important;
  align-content:center !important;
  align-items:start !important;
  justify-items:center !important;
}
html body .bodyReportsDrawer .bodyDrawerStats strong{
  box-sizing:border-box !important;
  width:100% !important;
  height:40px !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  text-align:center !important;
}
html body .bodyReportsDrawer .bodyDrawerStats span{
  box-sizing:border-box !important;
  width:100% !important;
  min-height:30px !important;
  margin:0 !important;
  padding-top:5px !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  text-align:center !important;
}
@media (max-width:1600px) and (max-height:920px){
  html body .bodyReportsDrawer .bodyDrawerStats>div{
    grid-template-rows:34px minmax(26px,auto) !important;
  }
  html body .bodyReportsDrawer .bodyDrawerStats strong{height:34px !important}
  html body .bodyReportsDrawer .bodyDrawerStats span{min-height:26px !important;padding-top:4px !important}
}

/* Le sélecteur R149 ciblait le deuxième div de la sidebar et imposait une seule
   colonne aux invitations. Cette règle plus précise rétablit les 3 pastilles. */
html body .memberMessagesDrawer .memberMessageView[data-message-view="invitations"] .memberMessageSidebar > .memberMessageSubfilters{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  justify-items:stretch !important;
}