/* =============================================
   PAGE CONNEXION / SIGNING-IN — Account Console
   ============================================= */

/* ---- Fond page ---- */
.pf-v5-c-page__main {
  background-color: #cee7fa !important;
}

/* ---- Section wrapper externe — card blanche ---- */
section.pf-v5-c-page__main-section.pf-m-light:not(.pf-v5-u-px-0) {
  background-color: #ffffff !important;
  border-radius: 16px !important;
  border: 1.5px solid #ddeef8 !important;
  box-shadow: 0 4px 18px rgba(0,156,222,0.06) !important;
  padding: 24px !important;
  margin: 16px !important;
}

/* ---- Section catégorie interne (2FA, Sans mot de passe) ---- */
section.pf-v5-c-page__main-section.pf-m-light.pf-v5-u-px-0 {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 24px !important;
}

/* ---- Titre catégorie ---- */
.pf-v5-c-title.pf-m-xl {
  font-family: "Reckless Neue", sans-serif !important;
  color: #1a2a3a !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 1.5px solid #eef5fb !important;
}

/* ---- Bloc méthode (email, TOTP, passkey) ---- */
.pf-v5-l-split.pf-v5-u-mt-lg.pf-v5-u-mb-lg {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  padding: 16px !important;
  background: #f9fcfe !important;
  border-radius: 12px !important;
  border: 1.5px solid #eef5fb !important;
  transition: border-color 0.2s !important;
}

.pf-v5-l-split.pf-v5-u-mt-lg.pf-v5-u-mb-lg:hover {
  border-color: #009cde !important;
}

/* ---- Titre méthode ---- */
.cred-title {
  font-family: "Reckless Neue", sans-serif !important;
  color: #1a2a3a !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}

/* ---- Description méthode ---- */
span[data-testid$="/help-text"] {
  font-size: 12px !important;
  color: #5a7a9a !important;
  font-family: "Reckless Neue", sans-serif !important;
}

/* =============================================
   BOUTON "Configurer..." — visible partout (desktop + mobile)
   ============================================= */

/* Bouton "Configurer" - style noir arrondi (desktop + mobile) */
button.pf-v5-c-button.pf-m-link.pf-v5-u-display-inline-flex-on-lg,
button.pf-v5-c-button.pf-m-link.pf-v5-u-display-none.pf-v5-u-display-inline-flex-on-lg {
  display: inline-flex !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  border-radius: 50px !important;
  padding: 6px 18px !important;
  border: none !important;
  background-color: #1a2a3a !important;
  font-family: "Reckless Neue", sans-serif !important;
  transition: background-color 0.2s !important;
}

button.pf-v5-c-button.pf-m-link.pf-v5-u-display-inline-flex-on-lg:hover,
button.pf-v5-c-button.pf-m-link.pf-v5-u-display-none.pf-v5-u-display-inline-flex-on-lg:hover {
  background-color: #009cde !important;
  color: #ffffff !important;
}

/* ---- DataList credentials ---- */
.pf-v5-c-data-list.pf-v5-u-mb-xl {
  margin-bottom: 12px !important;
}

.pf-v5-c-data-list__item {
  border: 1.5px solid #ddeef8 !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
  background-color: #ffffff !important;
  overflow: hidden !important;
}

.pf-v5-c-data-list__item-row {
  border: none !important;
  box-shadow: none !important;
  padding: 12px 16px !important;
  background-color: transparent !important;
}

/* ---- Nom credential ---- */
.pf-v5-c-data-list__cell[data-testrole="label"] {
  font-weight: 600 !important;
  color: #1a2a3a !important;
  font-family: "Reckless Neue", sans-serif !important;
  font-size: 13px !important;
}

/* ---- Date création ---- */
.pf-v5-c-data-list__cell[data-testrole="created-at"] {
  font-size: 11px !important;
  color: #5a7a9a !important;
  font-family: "Reckless Neue", sans-serif !important;
}

.pf-v5-c-data-list__cell[data-testrole="created-at"] strong {
  color: #5a7a9a !important;
  font-weight: 500 !important;
}

/* ---- Message "Aucune ... configurée" ---- */
.pf-v5-c-data-list__cell[data-testid$="/not-set-up"] {
  font-size: 13px !important;
  color: #5a7a9a !important;
  font-family: "Reckless Neue", sans-serif !important;
  text-align: center !important;
}

/* ---- Empty row style ---- */
.pf-v5-c-data-list__item.pf-v5-u-align-items-center {
  background-color: #f9fcfe !important;
  border: 1.5px dashed #b8d9f0 !important;
  border-radius: 12px !important;
}

/* ---- Bouton Supprimer ---- */
button.pf-v5-c-button.pf-m-danger {
  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;
}

button.pf-v5-c-button.pf-m-danger:hover {
  background-color: #d93025 !important;
  color: #ffffff !important;
  border-color: #d93025 !important;
}

/* ---- Menu toggle mobile (3 points) — caché car on affiche le bouton complet partout ---- */
button.pf-v5-c-menu-toggle.pf-m-plain {
  display: none !important;
}

/* ---- Sidebar navigation ---- */
.pf-v5-c-nav__link {
  font-family: "Reckless Neue", sans-serif !important;
  font-size: 13px !important;
  color: #5a7a9a !important;
  border-radius: 8px !important;
  transition: all 0.2s !important;
}

.pf-v5-c-nav__link:hover {
  color: #009cde !important;
  background-color: #e0f4fd !important;
}

.pf-v5-c-nav__link.pf-m-current {
  color: #009cde !important;
  font-weight: 600 !important;
  background-color: #e0f4fd !important;
}

/* =============================================
   RESPONSIVE — ajustements mobile (max-width 768px)
   ============================================= */
@media (max-width: 768px) {
  /* Padding réduit du wrapper */
  section.pf-v5-c-page__main-section.pf-m-light:not(.pf-v5-u-px-0) {
    padding: 16px !important;
    margin: 8px !important;
  }

  /* Bloc méthode (Configurer email/TOTP/passkey) passe en colonne sur mobile */
  .pf-v5-l-split.pf-v5-u-mt-lg.pf-v5-u-mb-lg {
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  /* Forcer les sous-éléments du split à prendre toute la largeur */
  .pf-v5-l-split.pf-v5-u-mt-lg.pf-v5-u-mb-lg > .pf-v5-l-split__item {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Bouton "Configurer" - centré, pleine largeur, padding raisonnable */
  button.pf-v5-c-button.pf-m-link.pf-v5-u-display-inline-flex-on-lg,
  button.pf-v5-c-button.pf-m-link.pf-v5-u-display-none.pf-v5-u-display-inline-flex-on-lg {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }

  /* Titre méthode - plus compact */
  .cred-title {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  /* Description méthode - plus compacte */
  span[data-testid$="/help-text"] {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  /* =============================================
     FIX MOBILE — data-list credential card
     - Passe en flex column (pas grid) pour pouvoir
       réordonner les éléments avec `order`
     - Ordre voulu : Titre → Date → Bouton Supprimer
     ============================================= */
  body .pf-v5-c-data-list .pf-v5-c-data-list__item-content {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    width: 100% !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  /* Tous les enfants en pleine largeur */
  body .pf-v5-c-data-list .pf-v5-c-data-list__item-content > * {
    width: 100% !important;
    max-width: 100% !important;
    grid-column: unset !important;
  }

  /* === ORDRE des éléments dans la card credential === */

  /* 1. Titre (email/nom credential) */
  body .pf-v5-c-data-list .pf-v5-c-data-list__item-content .pf-v5-c-data-list__cell[data-testrole="label"] {
    order: 1 !important;
  }

  /* 2. Date "Créé le..." */
  body .pf-v5-c-data-list .pf-v5-c-data-list__item-content .pf-v5-c-data-list__cell[data-testrole="created-at"] {
    order: 2 !important;
  }

  /* Toutes autres cellules au milieu */
  body .pf-v5-c-data-list .pf-v5-c-data-list__item-content .pf-v5-c-data-list__cell {
    order: 2 !important;
  }

  /* 3. Action (bouton Supprimer) en DERNIER */
  body .pf-v5-c-data-list .pf-v5-c-data-list__item-content .pf-v5-c-data-list__item-action {
    order: 99 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Bouton Supprimer en pleine largeur */
  body .pf-v5-c-data-list__item-action button.pf-v5-c-button.pf-m-danger {
    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;
    display: block !important;
    text-align: center !important;
  }
}