/* =============================================
   PAGE APPAREILS CONNECTÉS — Redesign épuré
   ============================================= */

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

/* ---- Reset item ---- */
.pf-v5-c-data-list__item {
  border: none !important;
  background: transparent !important;
}

/* ---- Chaque appareil = card ---- */
.pf-v5-c-data-list__item-row {
  background-color: #ffffff !important;
  border-radius: 14px !important;
  border: 1.5px solid #ddeef8 !important;
  box-shadow: none !important;
  margin-bottom: 12px !important;
  padding: 18px 22px !important;
  transition: border-color 0.2s !important;
}

.pf-v5-c-data-list__item-row:hover {
  border-color: #009cde !important;
  box-shadow: none !important;
  transform: none !important;
}

.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-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-label__content {
  color: #009cde !important;
}

/* ---- Icône appareil ---- */
.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-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-description-list__group {
  margin-bottom: 0 !important;
  gap: 1px !important;
}

.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-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-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" — fond noir, hover bleu ---- */
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;
}

button.pf-v5-c-button.pf-m-primary:hover {
  background-color: #009cde !important;
  color: #ffffff !important;
}

/* ---- Bouton "Déconnexion" individuel — même style que Supprimer ---- */
.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-button.pf-m-secondary:hover {
  background-color: #d93025 !important;
  color: #ffffff !important;
  border-color: #d93025 !important;
}

/* ---- Bouton Rafraîchir ---- */
.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-button.pf-m-link:hover {
  background-color: #e0f4fd !important;
  text-decoration: none !important;
}

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

/* Supprimer double border PatternFly sur Déconnexion */
.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-secondary:hover,
.pf-v5-c-button.pf-m-secondary:focus,
.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-button.pf-m-secondary::after {
    border: none !important;
    display: none !important;
}

/* =============================================
   RESPONSIVE — Mobile (page liste appareils)
   ============================================= */
   @media (max-width: 768px) {
    /* Empêcher scroll horizontal sur toute la page */
    html, body,
    .pf-v5-c-page,
    .pf-v5-c-page__main {
      overflow-x: hidden !important;
      max-width: 100% !important;
    }
  
    /* Section wrapper - largeur contrôlée */
    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;
    }
  
    /* La liste device prend toute la largeur */
    .signed-in-device-list,
    .pf-v5-c-data-list {
      width: 100% !important;
      max-width: 100% !important;
      overflow: hidden !important;
    }
  
    /* Chaque card device en colonne */
    .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;
    }
  
    /* Le row interne PatternFly aussi en colonne */
    .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;
    }
  
    /* Forcer cellules + actions en pleine largeur */
    .pf-v5-c-data-list__cell,
    .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;
    }
  
    /* Bouton "Déconnexion" individuel - pleine largeur, pas tronqué */
    .pf-v5-c-data-list__item-action .pf-v5-c-button,
    .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;
    }
  
    /* Bouton "Se déconnecter de tous les appareils" */
    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;
    }
  
    /* Bouton Rafraîchir */
    .pf-v5-c-button.pf-m-link {
      padding: 6px 12px !important;
    }
  
    /* Description list (IP, dates) en pleine largeur */
    .pf-v5-c-description-list {
      width: 100% !important;
      max-width: 100% !important;
      --pf-v5-c-description-list--ColGap: 12px !important;
    }
  
    .pf-v5-c-description-list__group {
      width: 100% !important;
      max-width: 100% !important;
      word-break: break-word !important;
    }
  
    /* Titre session en pleine largeur sans coupure */
    .session-title {
      width: 100% !important;
      font-size: 13px !important;
      line-height: 1.3 !important;
      word-break: break-word !important;
      white-space: normal !important;
    }
  }

  @media (max-width: 768px) {
    /* La grid PatternFly passe en colonne sur mobile */
    .pf-v5-c-data-list__item-row .pf-v5-l-grid {
      display: flex !important;
      flex-direction: column !important;
      gap: 12px !important;
    }
  
    /* Tous les items grid prennent 100% de largeur */
    .pf-v5-c-data-list__item-row .pf-v5-l-grid__item,
    .pf-v5-c-data-list__item-row .pf-v5-l-grid__item.pf-m-1-col,
    .pf-v5-c-data-list__item-row .pf-v5-l-grid__item.pf-m-3-col-on-sm,
    .pf-v5-c-data-list__item-row .pf-v5-l-grid__item.pf-m-2-col-on-md,
    .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;
    }
  
    /* Bouton Déconnexion en pleine largeur */
    .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;
    }
  
    /* Override de l'alignement à droite sur mobile */
    .pf-v5-c-data-list__item-row .pf-v5-u-text-align-right {
      text-align: center !important;
    }
  }