/* ═══════════════════════════════════════════════════════════
   DEVICES.CSS — page APPAREILS CONNECTÉS uniquement
   SCOPING : préfixe .pf-v5-c-page__main:has(.signed-in-device-list)
   — cette classe n'existe que sur la page Appareils, donc les
   data-lists des autres onglets (Connexion, Comptes liés) ne
   sont plus impactées.
   ═══════════════════════════════════════════════════════════ */

/* ---- Liste principale ---- */
.signed-in-device-list {
  border: none !important;
}

/* ---- Reset item ---- */
.pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-data-list__item {
  border: none !important;
  background: transparent !important;
}

/* ---- Chaque appareil = card ---- */
.pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-data-list__item-row {
  background-color: transparent !important;
  border-radius: 20px !important;
  border: 1px solid #000000 !important;    /* contour noir */
  box-shadow: none !important;
  margin-bottom: 12px !important;
  padding: 18px 22px !important;
  transition: border-color 0.2s, background-color 0.2s !important;
}

.pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-data-list__item-row:hover {
  border-color: #009cde !important;
  background-color: rgba(0,156,222,0.04) !important;
  box-shadow: none !important;
  transform: none !important;
}

.pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-data-list__cell {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* ---- Titre session (OS / Browser) ---- */
.session-title {
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #1a2a3a !important;
  font-family: "Reckless Neue", sans-serif !important;
}

/* ---- Badge "Session actuelle" ---- */
.pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-label {
  border-radius: 50px !important;
  background-color: #e0f4fd !important;
  color: #009cde !important;
  border: none !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 2px 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-label__content {
  color: #009cde !important;
}

/* ---- Icône appareil ---- */
.pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-data-list__item-row .pf-v5-svg {
  color: #5a7a9a !important;
  width: 18px !important;
  height: 18px !important;
}

/* ---- Grille détails (IP, date...) ---- */
.signed-in-device-grid {
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid #eef5fb !important;
}

.pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-description-list {
  --pf-v5-c-description-list--RowGap: 4px !important;
  --pf-v5-c-description-list--ColGap: 24px !important;
  row-gap: 4px !important;
}

.pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-description-list__group {
  margin-bottom: 0 !important;
  gap: 1px !important;
}

.pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-description-list__term {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #5a7a9a !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-family: "Reckless Neue", sans-serif !important;
  line-height: 1.2 !important;
}

.pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-description-list__description {
  font-size: 12px !important;
  color: #1a2a3a !important;
  font-family: "Reckless Neue", sans-serif !important;
  margin-top: 0 !important;
  line-height: 1.3 !important;
}

/* ---- Grid plus compact ---- */
.pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-l-grid.pf-m-gutter {
  --pf-v5-l-grid--HasGutter--RowGap: 4px !important;
  row-gap: 4px !important;
}

/* ---- Bouton "Se déconnecter de tous les appareils" — noir, hover bleu ---- */
.pf-v5-c-page__main:has(.signed-in-device-list) button.pf-v5-c-button.pf-m-primary {
  border-radius: 50px !important;
  font-family: "Reckless Neue", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 8px 20px !important;
  background-color: #1a2a3a !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  transition: background-color 0.2s !important;
}

.pf-v5-c-page__main:has(.signed-in-device-list) button.pf-v5-c-button.pf-m-primary:hover {
  background-color: #009cde !important;
  color: #ffffff !important;
}

/* ---- Bouton "Déconnexion" individuel — rouge comme Supprimer ---- */
.pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-button.pf-m-secondary {
  border-radius: 50px !important;
  font-family: "Reckless Neue", sans-serif !important;
  font-size: 11px !important;
  padding: 4px 14px !important;
  background-color: transparent !important;
  color: #d93025 !important;
  border: 1.5px solid #f5c6c3 !important;
  transition: all 0.2s !important;
}

.pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-button.pf-m-secondary:hover {
  background-color: #d93025 !important;
  color: #ffffff !important;
  border-color: #d93025 !important;
}

/* Supprimer la double bordure PatternFly sur Déconnexion */
.pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-button.pf-m-secondary,
.pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-button.pf-m-secondary:hover,
.pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-button.pf-m-secondary:focus,
.pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-button.pf-m-secondary:active {
  --pf-v5-c-button--after--BorderColor: transparent !important;
  --pf-v5-c-button--m-secondary--after--BorderColor: transparent !important;
  --pf-v5-c-button--after--BorderWidth: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

.pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-button.pf-m-secondary::after {
  border: none !important;
  display: none !important;
}

/* ---- Bouton Rafraîchir ---- */
.pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-button.pf-m-link {
  color: #009cde !important;
  font-family: "Reckless Neue", sans-serif !important;
  font-size: 12px !important;
  border-radius: 50px !important;
  padding: 5px 14px !important;
  transition: all 0.2s !important;
}

.pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-button.pf-m-link:hover {
  background-color: #e0f4fd !important;
  text-decoration: none !important;
}

/* ---- Titre "Appareils connectés" ---- */
.pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-title {
  font-family: "Reckless Neue", sans-serif !important;
  color: #1a2a3a !important;
  font-weight: 600 !important;
}

/* =============================================
   RESPONSIVE — mobile, scopé Appareils
   ============================================= */
@media (max-width: 768px) {
  /* Empêcher scroll horizontal (global, sans risque) */
  html, body,
  .pf-v5-c-page,
  .pf-v5-c-page__main {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  .pf-v5-c-page__main:has(.signed-in-device-list) section.pf-v5-c-page__main-section {
    padding: 12px !important;
    margin: 8px !important;
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    box-sizing: border-box !important;
  }

  .signed-in-device-list,
  .pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-data-list {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-data-list__item-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    overflow: hidden !important;
  }

  .pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-data-list__item-row .pf-v5-c-data-list__item-content {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-data-list__cell,
  .pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-data-list__item-row .pf-v5-c-data-list__item-action {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    box-sizing: border-box !important;
  }

  .pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-data-list__item-action .pf-v5-c-button,
  .pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-button.pf-m-secondary {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  .pf-v5-c-page__main:has(.signed-in-device-list) button.pf-v5-c-button.pf-m-primary {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 18px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-button.pf-m-link {
    padding: 6px 12px !important;
  }

  .pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-description-list {
    width: 100% !important;
    max-width: 100% !important;
    --pf-v5-c-description-list--ColGap: 12px !important;
  }

  .pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-description-list__group {
    width: 100% !important;
    max-width: 100% !important;
    word-break: break-word !important;
  }

  .session-title {
    width: 100% !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  /* ---- Grid PatternFly en colonne ---- */
  .pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-data-list__item-row .pf-v5-l-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-data-list__item-row .pf-v5-l-grid__item,
  .pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-data-list__item-row .pf-v5-l-grid__item[class*="pf-m-"] {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    text-align: center !important;
  }

  .pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-data-list__item-row .pf-v5-l-grid__item .pf-v5-c-button.pf-m-secondary {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .pf-v5-c-page__main:has(.signed-in-device-list) .pf-v5-c-data-list__item-row .pf-v5-u-text-align-right {
    text-align: center !important;
  }
}