/* Asset Vault — Module Réglages à VOLET LATÉRAL (lot #4, correctif #3).
   Modale large et haute avec, à gauche, un volet listant les sections
   (onglets verticaux) et, à droite, le panneau de détail de la section active.
   Sous ~720px, le volet passe en barre HAUTE d'onglets scrollables horizontaux
   et le panneau prend toute la largeur en dessous.

   Règle projet : AUCUNE couleur en dur — uniquement des tokens var(--av-*).
   Aucun style inline (CSP). Le composant réutilise .card, .btn--*, .pklist,
   .verlist, .badge, .field, .msg définis dans app.css. */

/* ==========================================================================
   Modale conteneur (surcharge de .dialog pour la variante réglages)
   ========================================================================== */

.dialog--settings {
  /* (#4) Taille FIXE/stable, indépendante de la section affichée : la modale ne
     doit PLUS sauter selon le contenu. L'en-tête et le volet latéral restent
     fixes ; seul le panneau de détail scrolle en interne (voir .settings__panel).
     Voir la version mobile (plein écran) plus bas. */
  width: min(920px, 94vw);
  /* La base `.dialog` pose `max-width: 440px` (modales étroites) ; sans cette
     surcharge, le modale réglages large serait rabaissée à 440px et le panneau
     de détail deviendrait exigu à côté du volet de 236px. On relève la borne à
     94vw pour que la largeur cible min(920px, 94vw) s'applique réellement. */
  max-width: 94vw;
  height: min(660px, 88vh);
  overflow: hidden;
  /* (#5a) Empêche le scroll interne de se propager au document en dessous. */
  overscroll-behavior: contain;
}

.settings {
  display: flex;
  flex-direction: column;
  /* Épouse la hauteur fixe de la modale ; la structure interne gère le scroll. */
  height: 100%;
  overflow: hidden;
}

/* --- En-tête (titre + fermeture) --- */

.settings__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--av-space-3);
  padding: var(--av-space-4) var(--av-space-4) var(--av-space-3);
  border-bottom: 1px solid var(--av-border);
}

/* --- Corps : volet latéral + panneau --- */

.settings__layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

/* ==========================================================================
   Volet latéral (desktop : onglets verticaux)
   ========================================================================== */

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: var(--av-space-1);
  padding: var(--av-space-3);
  border-right: 1px solid var(--av-border);
  background: var(--av-surface-2);
  overflow-y: auto;
  min-height: 0;
}

.settings-nav__item {
  display: flex;
  align-items: center;
  gap: var(--av-space-2);
  width: 100%;
  min-height: 44px;
  padding: var(--av-space-2) var(--av-space-3);
  border: 1px solid transparent;
  border-radius: var(--av-radius-sm);
  background: transparent;
  color: var(--av-text-secondary);
  font-family: var(--av-font);
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.settings-nav__item:hover:not(.is-active) {
  background: var(--av-surface-3);
  color: var(--av-text);
}

.settings-nav__item.is-active {
  background: var(--av-surface);
  border-color: var(--av-border);
  color: var(--av-text);
  box-shadow: var(--av-shadow-sm);
}

.settings-nav__item:focus-visible {
  outline: none;
  box-shadow: var(--av-focus-ring);
}

.settings-nav__item--danger {
  color: var(--av-negative);
}

.settings-nav__item--danger:hover:not(.is-active),
.settings-nav__item--danger.is-active {
  color: var(--av-negative);
}

.settings-nav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: currentColor;
}

.settings-nav__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   Panneau de détail
   ========================================================================== */

.settings__panel {
  min-width: 0;
  min-height: 0;
  padding: var(--av-space-4);
  overflow-y: auto;
  overflow-x: hidden;
  /* (#5a) Le panneau de détail est le conteneur scrollable : on borne la
     propagation du scroll pour qu'aucune section (vide comme pleine) ne fasse
     défiler la page en dessous. */
  overscroll-behavior: contain;
  background: var(--av-surface);
}

.settings__panel:focus-visible {
  outline: none;
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--av-space-3);
}

.settings-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--av-space-3);
}

.settings-section__title {
  font-family: var(--av-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--av-text);
}

/* Point de montage pour renderImport : neutralise les marges du conteneur. */
.settings-section__mount {
  min-width: 0;
}

/* Groupe de boutons (exports) : empilé, plein largeur sur étroit. */
.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--av-space-2);
}

.settings-actions .btn {
  flex: 1 1 160px;
  min-height: 44px;
}

/* Le contenu importé (import.js) et les listes ne débordent jamais. */
.settings__panel .card {
  min-width: 0;
}

.settings__panel .verlist {
  max-height: none;
}

/* ==========================================================================
   Sécurité (lot #6) : passphrase, passkeys, sauvegarde/rappel, intégrité
   Chaque bloc est monté dans un .sec-mount et réutilise .card / .btn / .field /
   .check / .msg / .pklist / .badge. Ces styles n'ajoutent que la mise en forme
   propre aux nouvelles sections. AUCUNE couleur en dur — tokens var(--av-*).
   ========================================================================== */

.sec-mount {
  min-width: 0;
}

/* --- Formulaire repliable (changer la passphrase) --- */

.sec-form {
  display: flex;
  flex-direction: column;
  gap: var(--av-space-3);
  padding: var(--av-space-3);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius);
  background: var(--av-surface-2);
}

.sec-form[hidden] {
  display: none;
}

.sec-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--av-space-2);
}

.sec-form__actions .btn {
  flex: 1 1 auto;
  min-height: 44px;
}

/* --- Sauvegarde de secours : statut + rappel discret --- */

.sec-backup__status-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--av-space-2);
}

.sec-backup__status {
  font-size: 0.9rem;
  color: var(--av-text-secondary);
}

.sec-backup__status strong {
  color: var(--av-text);
}

.sec-backup__date {
  color: var(--av-text-tertiary);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Aperçu du gain de compactage de l'historique (avant clic). */
.sec-compact__preview {
  font-size: 0.85rem;
  color: var(--av-text-secondary);
  margin: var(--av-space-2) 0 var(--av-space-3);
  font-variant-numeric: tabular-nums;
}

.sec-compact__preview.is-gain {
  font-weight: 700;
  color: var(--av-text);
}

/* Rappel « > 30 jours » — bandeau discret, ton avertissement (tokens). */
.sec-backup__reminder {
  display: inline-flex;
  align-items: center;
  gap: var(--av-space-2);
  padding: var(--av-space-2) var(--av-space-3);
  border: 1px solid var(--av-warning);
  border-radius: var(--av-radius-sm);
  background: var(--av-warning-soft);
  color: var(--av-warning);
  font-size: 0.85rem;
  font-weight: 600;
}

/* --- Intégrité (canari) : empreinte + détail repliable --- */

.sec-integrity {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--av-space-2) var(--av-space-3);
  padding: var(--av-space-3);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius);
  background: var(--av-surface-2);
}

.sec-integrity[hidden] {
  display: none;
}

.sec-integrity__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--av-text-secondary);
}

.sec-integrity__print {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--av-text);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  word-break: break-all;
}

.sec-integrity__details {
  font-size: 0.85rem;
  color: var(--av-text-secondary);
}

.sec-integrity__details[hidden] {
  display: none;
}

.sec-integrity__details > summary {
  cursor: pointer;
  padding: var(--av-space-2) 0;
  font-weight: 600;
  color: var(--av-text-secondary);
}

.sec-integrity__details > summary:focus-visible {
  outline: none;
  box-shadow: var(--av-focus-ring);
  border-radius: var(--av-radius-sm);
}

.sec-integrity__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--av-space-1);
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sec-integrity__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--av-space-3);
  padding: var(--av-space-1) 0;
  border-bottom: 1px solid var(--av-border);
}

.sec-integrity__item:last-child {
  border-bottom: none;
}

.sec-integrity__path {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--av-text);
}

.sec-integrity__hash {
  flex: 0 0 auto;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--av-text-tertiary);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   Mobile (~720px) : volet latéral → barre d'onglets HAUTE scrollable
   ========================================================================== */

@media (max-width: 720px) {
  .dialog--settings {
    /* (#4) Plein écran STABLE : taille fixe aussi sur mobile (on annule le
       height desktop au profit d'une hauteur pleine bornée à 92vh). */
    width: 100vw;
    max-width: 100vw;
    height: 92vh;
    /* Ancre en bas de l'écran : plein-largeur, sommet arrondi. */
    border-radius: var(--av-radius-lg) var(--av-radius-lg) 0 0;
  }

  .settings {
    height: 100%;
  }

  .settings__head {
    padding: var(--av-space-3) var(--av-space-3) var(--av-space-2);
  }

  .settings__layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .settings-nav {
    flex-direction: row;
    gap: var(--av-space-2);
    padding: var(--av-space-2) var(--av-space-3);
    border-right: none;
    border-bottom: 1px solid var(--av-border);
    overflow-x: auto;
    overflow-y: hidden;
    /* Défilement horizontal fluide, sans barre visible intrusive. */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .settings-nav__item {
    width: auto;
    flex: 0 0 auto;
    min-height: 44px;
    padding: var(--av-space-2) var(--av-space-3);
    white-space: nowrap;
    border-radius: var(--av-radius-pill);
  }

  .settings-nav__label {
    white-space: nowrap;
  }

  .settings__panel {
    padding: var(--av-space-3);
  }

  .settings-actions .btn {
    flex: 1 1 100%;
  }

  /* Sécurité : boutons de formulaire pleine largeur, empreinte lisible. */
  .sec-form__actions .btn {
    flex: 1 1 100%;
  }

  .sec-integrity {
    flex-direction: column;
    align-items: flex-start;
  }

  .sec-integrity__item {
    flex-wrap: wrap;
    gap: var(--av-space-1);
  }
}

/* Très étroit (≤ 400px) : masquer le libellé texte des onglets serait trop
   agressif ; on réduit plutôt la police pour garder les 6 sections lisibles. */
@media (max-width: 400px) {
  .settings-nav__item {
    font-size: 0.85rem;
    padding-inline: var(--av-space-2);
  }
}

/* ==========================================================================
   Zone de danger — conteneur unique cerclé de rouge, une entrée par action
   (icône + descriptif + bouton aligné), message d'état en pleine largeur.
   ========================================================================== */
.danger-zone__intro {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--av-text-secondary);
  margin-bottom: var(--av-space-3);
}

.danger-zone {
  border: 1px solid color-mix(in srgb, var(--av-negative) 45%, var(--av-border));
  border-radius: var(--av-radius);
  overflow: hidden;
  background: color-mix(in srgb, var(--av-negative) 3%, var(--av-surface));
}

.danger-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--av-space-3);
  padding: var(--av-space-4);
}

.danger-item + .danger-item {
  border-top: 1px solid color-mix(in srgb, var(--av-negative) 22%, var(--av-border));
}

.danger-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: var(--av-radius-sm);
  color: var(--av-negative);
  background: var(--av-negative-soft);
}

.danger-item__body {
  min-width: 0;
}

.danger-item__title {
  font-family: var(--av-font-display);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--av-text);
  margin-bottom: 4px;
}

.danger-item__desc {
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--av-text-secondary);
}

.danger-item__action {
  align-self: center;
  flex: 0 0 auto;
}

.danger-item__msg {
  grid-column: 1 / -1;
  margin: 0;
}

.danger-item__msg:empty {
  display: none;
}

/* Étroit : icône + texte gardent leur ligne, le bouton passe en pleine largeur
   sous le descriptif. */
@media (max-width: 560px) {
  .danger-item {
    grid-template-columns: auto 1fr;
    row-gap: var(--av-space-3);
  }

  .danger-item__action {
    grid-column: 1 / -1;
    align-self: stretch;
  }

  .danger-item__action .btn {
    width: 100%;
  }
}