/* ============================================================================
   QZR vNext — Centre de notifications (feed regroupé en sections)
   ----------------------------------------------------------------------------
   Le feed (notifications.js → dialog2_ .dialog-box-notifications, contenu dans
   #notificationsGroups) est rendu en sections (Quêtes & Récompenses / Social /
   Système) de cartes vNext : icône FA teal + titre + message + heure + actions.
   Les crochets fonctionnels sont préservés (data-notifid, .delete-notification,
   .notification-message--collapsible, .btn-contact-express-from-notif,
   .join-session-on-the-fly, .join-competition-room-from-notif).
   Chargé APRÈS crs__front.css.
   ============================================================================ */

/* ── Rayon vNext PERMANENT ────────────────────────────────────────────────
   Le rayon etait code en dur (24px) et n'existait qu'en haut : la feuille
   avait le bas carre. Il vient desormais du jeton --qz-r-screen et vaut sur
   les QUATRE coins par defaut ; seule la variante ancree en bas aplatit ses
   deux coins inferieurs, parce qu'ils touchent le bord de l'ecran. */
.qzr-ntf-sheet .modal-content {
  border-radius: var(--qz-r-screen, 30px) !important;
  max-height: 90vh;
  overflow: hidden;
}

/* Meme largeur que le menu principal sur grand ecran : les deux modales
   sortent du meme bouton de barre, une largeur commune evite qu'elles
   paraissent appartenir a deux applications. */
.qzr-ntf-sheet.modal-dialog {
  max-width: 380px;
}

/* ── Bottom-sheet : SUR MOBILE UNIQUEMENT ─────────────────────────────────
   L'ancrage en bas s'appliquait a toutes les tailles, y compris sur un large
   ecran ou une feuille collee au bord bas n'a pas de sens. Au-dela de 768 px
   la modale reprend son centrage Bootstrap, en gardant son rayon. */
@media (max-width: 767.98px) {
  .qzr-ntf-sheet.modal-dialog {
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    bottom: 0 !important; top: auto !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 620px !important;
    /* .modal-dialog-centered CENTRE verticalement dans un dialogue qui fait
       toute la hauteur : la feuille flottait au milieu de l'ecran au lieu de
       reposer sur le bord bas. On l'aligne a la fin. */
    align-items: flex-end !important;
    min-height: 0 !important;
  }
  .qzr-ntf-sheet .modal-content {
    border-radius: var(--qz-r-screen, 30px) var(--qz-r-screen, 30px) 0 0 !important;
  }
  /* Poignee de prehension, en haut de la feuille */
  .qzr-ntf-sheet .modal-content::before {
    content: "";
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 5px; border-radius: 999px;
    background: var(--qz-line-strong, #C7E3D8);
    z-index: 5;
  }
}

/* ── Chrome de la modale ─────────────────────────────────────────────────────── */
.dialog-box-notifications .modal-content {
  background: var(--qz-screen, #F1FAF6) !important;
  border: 0 !important;
}
.dialog-box-notifications .modal-header {
  background: transparent !important;
  border: 0 !important;
}
.dialog-box-notifications .modal-header,
.dialog-box-notifications .modal-title,
.dialog-box-notifications .modal-header * {
  color: var(--qz-text, #06342A) !important;
  font-family: inherit !important;
}
#notificationsGroups { color: var(--qz-text, #06342A); text-align: left; }
#notificationsGroups .qzr-ntf-card,
#notificationsGroups .qzr-ntf-section,
#notificationsGroups .qzr-ntf-main { text-align: left; }

/* ── Barre haute : « Tout lire » + engrenage paramètres ─────────────────────── */
.qzr-ntf-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 2px 12px;
}
.qzr-ntf-readall {
  margin-right: auto;
  background: transparent;
  border: 0;
  color: var(--qz-accent-ink, #0F6E56);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 10px;
}
.qzr-ntf-readall:hover { background: var(--qz-accent-soft, #E1F5EE); }
.qzr-ntf-readall:disabled { color: var(--qz-muted, #5E8A7C); opacity: .7; cursor: default; }
.qzr-ntf-settings {
  width: 34px; height: 34px;
  border-radius: var(--qz-r-pill);
  border: 1px solid var(--qz-line, #DCEFE8);
  background: var(--qz-surface, #FFFFFF);
  color: var(--qz-muted, #5E8A7C);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.qzr-ntf-settings:hover { background: var(--qz-accent-soft, #E1F5EE); color: var(--qz-accent-ink, #0F6E56); }

/* Engrenage dans le header (entre .modal-title et .btn-close) */
.dialog-box-notifications .modal-header .qzr-ntf-settings--header {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  margin: 0 8px 0 auto;   /* auto → poussé à droite, juste avant la croix */
  padding: 0;
  border-radius: var(--qz-r-pill);
  border: 1px solid var(--qz-line, #DCEFE8);
  background: var(--qz-surface, #FFFFFF);
  color: var(--qz-muted, #5E8A7C) !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  cursor: pointer;
}
/* Le header force font-weight:800 → casse le glyphe FA (solid = 900). On rétablit. */
.dialog-box-notifications .modal-header .qzr-ntf-settings--header i {
  color: inherit !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
}
.dialog-box-notifications .modal-header .qzr-ntf-settings--header:hover {
  background: var(--qz-accent-soft, #E1F5EE);
  color: var(--qz-accent-ink, #0F6E56) !important;
}

/* ── Sections ────────────────────────────────────────────────────────────────── */
.qzr-ntf-section { margin-bottom: 22px; }
.qzr-ntf-section-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--qz-muted, #5E8A7C);
}

/* ── Carte de notification ──────────────────────────────────────────────────── */
.qzr-ntf-card {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--qz-surface, #FFFFFF);
  border: 1px solid var(--qz-line, #DCEFE8);
  border-radius: 16px;
  padding: 14px 40px 14px 14px;   /* place à droite pour la croix de suppression */
  margin-bottom: 10px;
}
.qzr-ntf-ico {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--qz-accent-soft, #E1F5EE);
  color: var(--qz-accent, #16A87A);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.qzr-ntf-main { flex: 1 1 auto; min-width: 0; }
.qzr-ntf-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--qz-text, #06342A);
  line-height: 1.3;
}
.qzr-ntf-text {
  margin-top: 3px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--qz-muted, #5E8A7C);
  line-height: 1.45;
  word-break: break-word;
  cursor: pointer;
}
.qzr-ntf-text.is-collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qzr-ntf-text.is-expanded { -webkit-line-clamp: unset; overflow: visible; }
.qzr-ntf-metarow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.qzr-ntf-time { font-size: 12px; color: var(--qz-muted, #5E8A7C); }

/* Actions préservées → pilules teal */
.qzr-ntf-actions { display: inline-flex; align-items: center; gap: 8px; }
.qzr-ntf-actions .btn-contact-express-from-notif,
.qzr-ntf-actions .join-session-on-the-fly,
.qzr-ntf-actions .join-competition-room-from-notif {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--qz-accent-soft, #E1F5EE) !important;
  color: var(--qz-accent-ink, #0F6E56) !important;
  border: 0 !important;
  border-radius: var(--qz-r-pill);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.qzr-ntf-actions .btn-contact-express-from-notif small,
.qzr-ntf-actions .join-session-on-the-fly small,
.qzr-ntf-actions .join-competition-room-from-notif small {
  all: unset;
  font-size: 12px; font-weight: 600;
}
.qzr-ntf-actions .btn-contact-express-from-notif:hover,
.qzr-ntf-actions .join-session-on-the-fly:hover,
.qzr-ntf-actions .join-competition-room-from-notif:hover {
  background: var(--qz-accent-mid, #5DCAA5) !important;
  color: #FFFFFF !important;
}

/* Croix de suppression → discrète, coin haut-droit */
.qzr-ntf-card .delete-notification {
  position: absolute;
  top: 12px; right: 12px;
  color: var(--qz-muted, #5E8A7C) !important;
  opacity: .5;
  font-size: 14px;
  text-decoration: none;
  line-height: 1;
}
.qzr-ntf-card .delete-notification:hover { opacity: 1; color: var(--qz-error, #E24B4A) !important; }
.qzr-ntf-card .delete-notification .fas,
.qzr-ntf-card .delete-notification .text-danger { color: inherit !important; }

.qzr-ntf-card--read { opacity: .78; }

/* État vide : mascotte + bulle contextuelle */
#notificationsGroups .qzr-ntf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 34px 20px 26px;
}
.qzr-ntf-empty-bubble {
  position: relative;
  max-width: 82%;
  margin-bottom: 14px;
  background: var(--qz-accent-soft, #E1F5EE);
  border: 1px solid var(--qz-line-strong, #CDE7DC);
  border-radius: 16px 16px 16px 6px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--qz-text, #06342A);
  line-height: 1.4;
}
.qzr-ntf-empty-mascot { width: 118px; height: 140px; }
.qzr-ntf-empty-mascot .qzr-mascot-svg { width: 100%; height: 100%; }

/* ============================================================================
   Vue « Paramètres de notifications » (2e vue de la modale, engrenage → back)
   ============================================================================ */
#notificationsGroups .qzr-nset { text-align: left; }
.qzr-nset-topbar { display: flex; align-items: center; gap: 12px; padding: 0 2px 16px; }
.qzr-nset-back {
  width: 34px; height: 34px;
  border-radius: var(--qz-r-pill);
  border: 1px solid var(--qz-line, #DCEFE8);
  background: var(--qz-surface, #FFFFFF);
  color: var(--qz-muted, #5E8A7C);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.qzr-nset-back:hover { background: var(--qz-accent-soft, #E1F5EE); color: var(--qz-accent-ink, #0F6E56); }
.qzr-nset-topbar-title { font-size: 16px; font-weight: 600; color: var(--qz-text, #06342A); }

.qzr-nset-section {
  background: var(--qz-surface, #FFFFFF);
  border: 1px solid var(--qz-line, #DCEFE8);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.qzr-nset-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.qzr-nset-ico {
  width: 30px; height: 30px;
  border-radius: 9px;
  flex: 0 0 auto;
  background: var(--qz-accent-soft, #E1F5EE);
  color: var(--qz-accent, #16A87A);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.qzr-nset-secttitle { margin: 0; font-size: 15px; font-weight: 700; color: var(--qz-text, #06342A); }

.qzr-nset-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 2px;
  margin: 0;
  cursor: pointer;
}
.qzr-nset-row + .qzr-nset-row { border-top: 1px solid var(--qz-line, #DCEFE8); }
.qzr-nset-label { font-size: 14.5px; font-weight: 400; color: var(--qz-text, #06342A); }
.qzr-nset-label--muted { color: var(--qz-muted, #5E8A7C); }
.qzr-nset-value { font-size: 14.5px; font-weight: 600; color: var(--qz-accent-ink, #0F6E56); }
.qzr-nset-row--value { cursor: default; }

/* Un bouton d'action tient sur UNE ligne. Passer a la ligne ne le rend pas plus
   clair, seulement plus gros — et c'est alors le libelle qu'il faut raccourcir,
   pas la largeur qu'il faut trouver. `nowrap` transforme un debordement
   silencieux en quelque chose qui se voit tout de suite.

   DEUX SELECTEURS, PARCE QUE LES BOUTONS NE SONT PAS TOUS AU MEME ENDROIT.
   `.qzr-nset-save` est l'enveloppe habituelle, mais « Enregistrer » (apparence)
   et « Organiser mes cartes » vivent hors d'elle : mesure faite, ils tenaient
   deja sur une ligne, mais ils n'etaient couverts par AUCUN filet — et un filet
   qui laisse passer la moitie des cas donne surtout l'illusion d'en avoir un. */
.qzr-nset-save .btn-ux,
.profile-settings-accordion .accordion-body .btn-ux { white-space: nowrap; }

/* Heures de silence. Le champ natif porte son propre fond et sa propre encre :
   sans les redefinir, il reste blanc sur blanc en mode sombre — le contrôle est
   la, lisible nulle part. */
.qzr-nset-time {
  font-size: 14.5px; font-weight: 600;
  color: var(--qz-accent-ink, #0F6E56);
  background: var(--qz-surface-2, #F2F9F6);
  border: 1px solid var(--qz-line, #DCEFE8);
  border-radius: var(--qz-r-sm, 8px);
  padding: 6px 10px;
  font-variant-numeric: tabular-nums;
  min-width: 104px;
}
.qzr-nset-time:focus-visible { outline: 2px solid var(--qz-accent-ink, #0F6E56); outline-offset: 2px; }

/* Toggle vNext teal */
.qzr-nset-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; }
.qzr-nset-input { position: absolute; opacity: 0; width: 0; height: 0; }
.qzr-nset-slider {
  position: absolute; inset: 0;
  border-radius: var(--qz-r-pill);
  background: var(--qz-line-strong, #CDE7DC);
  transition: background var(--qz-dur-ui) ease;
  cursor: pointer;
}
.qzr-nset-slider::before {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: transform var(--qz-dur-ui) ease;
  box-shadow: 0 1px 3px rgba(6, 52, 42, .25);
}
.qzr-nset-input:checked + .qzr-nset-slider { background: var(--qz-accent, #16A87A); }
.qzr-nset-input:checked + .qzr-nset-slider::before { transform: translateX(20px); }
.qzr-nset-input:focus-visible + .qzr-nset-slider { box-shadow: 0 0 0 3px rgba(22, 168, 122, .25); }

/* ============================================================================
   Account settings (#userSettingsAccordion) reuse the notifications settings
   fluid layout (.qzr-nset-*). These extras cover the controls the notifications
   modal doesn't have: selects, text/time fields, the sound range + segmented.
   (2026-07-18 — profile #account modernization; Apparence section keeps its own.)
   ============================================================================ */
#userSettingsAccordion .accordion-body { padding: 14px 16px 18px; }
#userSettingsAccordion .qzr-nset { text-align: left; }
#userSettingsAccordion .qzr-nset-section:last-of-type { margin-bottom: 6px; }
/* Some rows carry a helper hint line under the label */
.qzr-nset-rowtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qzr-nset-hint { font-size: 12px; font-weight: 400; color: var(--qz-muted, #5E8A7C); line-height: 1.3; }

/* Inline select on the right of a row */
.qzr-nset-select {
  flex: 0 1 auto; max-width: 58%; min-width: 120px;
  font-size: 14px; font-weight: 600; line-height: 1.2;
  color: var(--qz-text, #06342A);
  background: var(--qz-screen, #F1FAF6);
  border: 1px solid var(--qz-line, #DCEFE8);
  border-radius: var(--qz-r-control, 11px);
  padding: 8px 12px;
}
.qzr-nset-select:focus-visible { outline: none; border-color: var(--qz-accent-mid, #5DCAA5); box-shadow: var(--qz-focus-ring); }

/* Stacked row: label on top, a wide control below */
.qzr-nset-row--stack { flex-direction: column; align-items: stretch; gap: 9px; cursor: default; }
.qzr-nset-row--stack .qzr-nset-select { max-width: none; width: 100%; }

/* Text / email / password / time / code fields */
.qzr-nset-field {
  width: 100%; font-size: 14.5px; line-height: 1.3;
  color: var(--qz-text, #06342A);
  background: var(--qz-screen, #F1FAF6);
  border: 1px solid var(--qz-line, #DCEFE8);
  border-radius: var(--qz-r-control, 11px);
  padding: 11px 13px;
}
.qzr-nset-field::placeholder { color: var(--qz-muted, #5E8A7C); }
/* Discreet placeholders across every field in the account settings (incl. the
   verification-code .form-control that is not a .qzr-nset-field) */
#userSettingsAccordion ::placeholder { color: var(--qz-muted, #5E8A7C); opacity: .65; }
.qzr-nset-field:focus-visible { outline: none; border-color: var(--qz-accent-mid, #5DCAA5); box-shadow: var(--qz-focus-ring); }
.qzr-nset-field:disabled { opacity: .6; cursor: not-allowed; }

/* Two side-by-side fields (e.g. quiet-hours start/end) */
.qzr-nset-duo { display: flex; gap: 10px; }
.qzr-nset-duo > div { flex: 1; display: flex; flex-direction: column; gap: 3px; }

/* Segmented control (Niveau des sons) — reuse token surfaces */
.qzr-nset-seg { display: flex; gap: 6px; }
.qzr-nset-seg .qzr-nset-seg-btn {
  flex: 1; padding: 9px 8px; font-size: 13.5px; font-weight: 600;
  border-radius: var(--qz-r-control, 11px);
  border: 1px solid var(--qz-line, #DCEFE8);
  background: var(--qz-screen, #F1FAF6);
  color: var(--qz-text, #06342A);
  cursor: pointer; transition: background var(--qz-dur-ui), border-color var(--qz-dur-ui), color var(--qz-dur-ui);
}
.qzr-nset-seg .qzr-nset-seg-btn.active {
  background: var(--qz-accent, #16A87A);
  border-color: var(--qz-accent, #16A87A);
  color: var(--qz-on-accent, #FFFFFF);
}

/* Range (volume) */
.qzr-nset-range { width: 100%; accent-color: var(--qz-accent, #16A87A); }

/* Photo uploader block sits in its own centered section */
.qzr-nset-photo { display: flex; justify-content: center; padding: 4px 0 2px; }

/* Section save button — full-width primary, flush to the bottom of the sheet */
.qzr-nset-save { display: flex; justify-content: center; margin-top: 4px; }
.qzr-nset-save .btn-ux { width: 100%; }