/* ═══════════════════════════════════════════════════════════
   SECURITY.CSS — page CONNEXION / SIGNING-IN uniquement
   OPTION B "blocs groupes" : chaque methode et ses credentials
   forment UN SEUL bloc visuel — en-tete (titre + Configurer)
   + lignes credentials attachees dessous sur fond legerement
   grise. Plus de cadres empiles ni de pointilles vides.
   Technique : le bloc methode (.pf-v5-l-split) et la data-list
   sont des FRERES dans le DOM -> radius asymetriques
   (20px 20px 0 0 / 0 0 20px 20px) pour simuler le groupage.
   SCOPING : prefixe .pf-v5-c-page__main:has(.cred-title).
   ═══════════════════════════════════════════════════════════ */

/* ---- Section categorie interne (2FA, Sans mot de passe) ---- */
.pf-v5-c-page__main:has(.cred-title) 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 categorie ---- */
.pf-v5-c-page__main:has(.cred-title) .pf-v5-c-title.pf-m-xl {
  font-family: "Reckless Neue", sans-serif !important;
  color: #1a2a3a !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin-bottom: 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #1a2a3a !important;
  background: transparent !important;
}

/* =============================================
   BLOC GROUPE — partie 1 : EN-TETE methode
   (.pf-v5-l-split avec mt-lg ET mb-lg = header ;
   le split interne des credentials n'a que mb-lg)
   ============================================= */
.pf-v5-c-page__main:has(.cred-title) .pf-v5-l-split.pf-v5-u-mt-lg.pf-v5-u-mb-lg {
  margin-top: 24px !important;
  margin-bottom: 0 !important;              /* colle a la data-list dessous */
  padding: 16px 20px !important;
  background: transparent !important;
  border: 1px solid #1a2a3a !important;
  border-radius: 20px 20px 0 0 !important;  /* arrondi haut seulement */
  border-bottom: none !important;           /* la data-list ferme le bloc */
}

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

/* ---- Description methode ---- */
.pf-v5-c-page__main:has(.cred-title) span[data-testid$="/help-text"] {
  font-size: 12px !important;
  color: #5a7a9a !important;
  font-family: "Reckless Neue", sans-serif !important;
}

/* =============================================
   BLOC GROUPE — partie 2 : DATA-LIST credentials
   attachee sous l'en-tete, fond legerement grise
   ============================================= */
.pf-v5-c-page__main:has(.cred-title) .pf-v5-c-data-list {
  border: 1px solid #1a2a3a !important;
  border-radius: 0 0 20px 20px !important;  /* arrondi bas seulement */
  margin-bottom: 0 !important;
  background-color: #f6f9fc !important;     /* zone credentials teintee */
  overflow: hidden !important;
}

/* Lignes credentials : plus de cadre individuel, filet interne */
.pf-v5-c-page__main:has(.cred-title) .pf-v5-c-data-list__item {
  border: none !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.pf-v5-c-page__main:has(.cred-title) .pf-v5-c-data-list__item + .pf-v5-c-data-list__item {
  border-top: 1px solid #d8e4ee !important; /* separateur entre credentials */
}

.pf-v5-c-page__main:has(.cred-title) .pf-v5-c-data-list__item-row {
  border: none !important;
  box-shadow: none !important;
  padding: 12px 20px !important;
  background-color: transparent !important;
}

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

/* ---- Date creation ---- */
.pf-v5-c-page__main:has(.cred-title) .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-page__main:has(.cred-title) .pf-v5-c-data-list__cell[data-testrole="created-at"] strong {
  color: #5a7a9a !important;
  font-weight: 500 !important;
}

/* ---- Ligne vide "Aucune ... configuree" : texte discret,
   PLUS de cadre pointille ---- */
.pf-v5-c-page__main:has(.cred-title) .pf-v5-c-data-list__cell[data-testid$="/not-set-up"] {
  font-size: 12px !important;
  color: #8aa3b8 !important;
  font-family: "Reckless Neue", sans-serif !important;
  text-align: center !important;
  font-style: italic !important;
}

.pf-v5-c-page__main:has(.cred-title) .pf-v5-c-data-list__item.pf-v5-u-align-items-center {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

/* =============================================
   BOUTON "Configurer..." — noir arrondi, taille unique
   (cible robuste par data-testid + fallback classes)
   ============================================= */
.pf-v5-c-page__main:has(.cred-title) button.pf-v5-c-button[data-testid$="/create"],
.pf-v5-c-page__main:has(.cred-title) button.pf-v5-c-button.pf-m-link.pf-v5-u-display-inline-flex-on-lg,
.pf-v5-c-page__main:has(.cred-title) 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;
}

.pf-v5-c-page__main:has(.cred-title) button.pf-v5-c-button[data-testid$="/create"]:hover,
.pf-v5-c-page__main:has(.cred-title) button.pf-v5-c-button.pf-m-link.pf-v5-u-display-inline-flex-on-lg:hover,
.pf-v5-c-page__main:has(.cred-title) 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;
}

/* ---- Kebab (3 points) — doublon mobile du bouton "Configurer",
   deja affiche en dur -> cache ---- */
.pf-v5-c-page__main:has(.cred-title) button.pf-v5-c-menu-toggle.pf-m-plain {
  display: none !important;
}

/* ---- Bouton Supprimer : toujours visible, toutes largeurs ---- */
.pf-v5-c-page__main:has(.cred-title) .pf-v5-c-data-list__item-action,
.pf-v5-c-page__main:has(.cred-title) .pf-v5-c-data-list__item-action.pf-v5-u-display-none,
.pf-v5-c-page__main:has(.cred-title) .pf-v5-c-data-list__item-action[class*="pf-m-hidden"] {
  display: inline-flex !important;
  visibility: visible !important;
}

.pf-v5-c-page__main:has(.cred-title) button.pf-v5-c-button.pf-m-danger,
.pf-v5-c-page__main:has(.cred-title) button[data-testrole="remove"] {
  display: inline-flex !important;
  visibility: visible !important;
  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: 1px solid #d93025 !important;
  transition: all 0.2s !important;
}

.pf-v5-c-page__main:has(.cred-title) button.pf-v5-c-button.pf-m-danger:hover,
.pf-v5-c-page__main:has(.cred-title) button[data-testrole="remove"]:hover {
  background-color: #d93025 !important;
  color: #ffffff !important;
  border-color: #d93025 !important;
}

/* =============================================
   RESPONSIVE — mobile (max-width 768px), scope
   ============================================= */
@media (max-width: 768px) {
  .pf-v5-c-page__main:has(.cred-title) .pf-v5-l-split.pf-v5-u-mt-lg.pf-v5-u-mb-lg {
    padding: 12px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .pf-v5-c-page__main:has(.cred-title) .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;
  }

  .pf-v5-c-page__main:has(.cred-title) button.pf-v5-c-button[data-testid$="/create"],
  .pf-v5-c-page__main:has(.cred-title) button.pf-v5-c-button.pf-m-link.pf-v5-u-display-inline-flex-on-lg,
  .pf-v5-c-page__main:has(.cred-title) 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;
  }

  .cred-title {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  .pf-v5-c-page__main:has(.cred-title) span[data-testid$="/help-text"] {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  /* ---- FIX Supprimer : item-row en colonne ----
     item-action est un FRERE de item-content. Row en flex horizontal
     + content force a 100% = bouton pousse hors card et rogne par
     l'overflow:hidden. En colonne, l'action passe dessous. */
  .pf-v5-c-page__main:has(.cred-title) .pf-v5-c-data-list__item-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .pf-v5-c-page__main:has(.cred-title) .pf-v5-c-data-list__item-row > .pf-v5-c-data-list__item-action {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ---- Reordonnancement card credential ---- */
  .pf-v5-c-page__main:has(.cred-title) .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;
  }

  .pf-v5-c-page__main:has(.cred-title) .pf-v5-c-data-list .pf-v5-c-data-list__item-content > * {
    width: 100% !important;
    max-width: 100% !important;
    grid-column: unset !important;
  }

  .pf-v5-c-page__main:has(.cred-title) .pf-v5-c-data-list .pf-v5-c-data-list__item-content .pf-v5-c-data-list__cell[data-testrole="label"] {
    order: 1 !important;
  }

  .pf-v5-c-page__main:has(.cred-title) .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;
  }

  .pf-v5-c-page__main:has(.cred-title) .pf-v5-c-data-list .pf-v5-c-data-list__item-content .pf-v5-c-data-list__cell {
    order: 2 !important;
  }

  .pf-v5-c-page__main:has(.cred-title) .pf-v5-c-data-list .pf-v5-c-data-list__item-content .pf-v5-c-data-list__item-action,
  .pf-v5-c-page__main:has(.cred-title) .pf-v5-c-data-list .pf-v5-c-data-list__item-row > .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;
  }

  .pf-v5-c-page__main:has(.cred-title) .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;
  }
}