/* /public_html/assets/css/profile/my-profile.desktop.css
   Mon profil — PC >= 1024px
*/

@media (min-width: 1024px) {
  body.is-dashboard-shell-visible:has(#my-profile-content) {
    --my-profile-navbar-action-left: max(.86rem, calc(var(--edq-safe-area-left-effective, env(safe-area-inset-left, 0px)) + .72rem));
    --edq-navbar-edge-left-current: var(--my-profile-navbar-action-left) !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .mobile-shell-navbar__left {
    left: var(--my-profile-navbar-action-left) !important;
    gap: .42rem !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) #dashboard-view,
  body.is-dashboard-shell-visible:has(#my-profile-content) #dashboard-view > .panel-body {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-panel-shell {
    min-height: 100vh;
    padding: calc(var(--edq-safe-area-top-effective, env(safe-area-inset-top, 0px)) + 6.7rem)
      clamp(1.35rem, 2vw, 2.4rem)
      calc(var(--edq-safe-area-bottom-effective, env(safe-area-inset-bottom, 0px)) + 2.4rem) !important;
  }

  @supports (min-height: 100dvh) {
    body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-panel-shell {
      min-height: 100dvh;
    }
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-loader-host {
    min-height: calc(100vh - var(--edq-safe-area-top-effective, env(safe-area-inset-top, 0px)) - 6rem);
    padding-top: calc(var(--edq-safe-area-top-effective, env(safe-area-inset-top, 0px)) + 6.7rem);
  }

  .my-profile-panel,
  .my-profile-edit {
    max-width: min(68rem, 100%);
  }

  .my-profile-panel .teacher-view-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 3rem;
  }

  .my-profile-edit .form-vertical {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .my-profile-edit .form-field:has(textarea),
  .my-profile-edit .form-field:has(#me-password),
  .my-profile-edit .form-field:has(#me-password-confirm),
  .my-profile-edit .form-field:has(#me-avatar-file),
  .my-profile-edit #me-error {
    grid-column: 1 / -1;
  }
}

/* V23.1.7 — stabilisation PC formulaire Profil */
@media (min-width: 1024px) {
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-edit {
    max-width: min(76rem, 100%) !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-edit .form-vertical {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(18rem, 1fr)) !important;
    gap: 1.05rem 1.35rem !important;
    align-items: start !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-edit .form-field {
    min-width: 0 !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-edit .form-field > .ui-input,
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-edit .form-field > textarea,
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-edit .form-field > select {
    width: 100% !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-edit .form-field:has(textarea),
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-edit .form-field:has(#me-avatar-file),
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-edit #me-error {
    grid-column: 1 / -1 !important;
  }
}

/* V26.3.1 — Mon profil : respiration initiale sous navbar PC */
@media (min-width: 1024px) {
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-panel-shell {
    padding-top: calc(var(--edq-safe-area-top-effective, env(safe-area-inset-top, 0px)) + 7.45rem) !important;
    scroll-padding-top: calc(var(--edq-safe-area-top-effective, env(safe-area-inset-top, 0px)) + 7.45rem) !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-loader-host {
    padding-top: calc(var(--edq-safe-area-top-effective, env(safe-area-inset-top, 0px)) + 7.45rem) !important;
  }
}

/* V26.4.1 — Mon profil : respiration sous navbar PC */
@media (min-width: 1024px) {
  body.is-dashboard-shell-visible:has(#my-profile-content) #my-profile-content {
    padding-top: clamp(1.45rem, 1.8vw, 2.15rem) !important;
    box-sizing: border-box !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-panel-shell {
    padding-top: calc(var(--edq-safe-area-top-effective, env(safe-area-inset-top, 0px)) + 8.35rem) !important;
    scroll-padding-top: calc(var(--edq-safe-area-top-effective, env(safe-area-inset-top, 0px)) + 8.35rem) !important;
  }
}

/* V49.2.17 — Mon profil moderne : neutralise l'ancien layout grille forcé */
@media (min-width: 1024px) {
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-modern {
    max-width: min(78rem, 100%) !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-modern-form {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(1rem, 2vw, 1.25rem) !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-modern-form .my-profile-form-grid,
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-modern-form .my-profile-address-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-modern-form .my-profile-field--wide {
    grid-column: 1 / -1 !important;
  }
}

/* V49.2.19 — Mon profil : PC aligné sur les panels modernes */
@media (min-width: 1024px) {
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-modern {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-modern > :not(.my-profile-hero):not(.my-profile-control-dock),
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-control-dock.courses-control-dock {
    width: min(78rem, calc(100% - clamp(1.4rem, 3.8vw, 3rem))) !important;
    max-width: 78rem !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-hero.courses-panel-hero {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* V49.2.20 — Mon profil PC : hero bord à bord dans la zone utile */
@media (min-width: 1024px) {
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-panel-shell {
    padding: 0 0 calc(var(--edq-safe-area-bottom-effective, env(safe-area-inset-bottom, 0px)) + 2.4rem) !important;
    scroll-padding-top: var(--my-profile-nav-height, var(--courses-panel-nav-height, var(--app-header-safe-height, 64px))) !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-hero.courses-panel-hero {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 clamp(.9rem, 1.5vw, 1.2rem) !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-hero__inner.courses-panel-hero__inner {
    width: min(78rem, 100%) !important;
    max-width: 78rem !important;
    padding: calc(var(--my-profile-nav-height, var(--courses-panel-nav-height, var(--app-header-safe-height, 64px))) + clamp(1.15rem, 2.4vw, 2.45rem)) var(--courses-panel-content-right, 2rem) clamp(1.4rem, 3vw, 2.8rem) var(--courses-panel-content-left, 2rem) !important;
  }
}

/* V49.2.20 — marge interne PC harmonisée */
@media (min-width: 1024px) {
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-panel-shell {
    --my-profile-content-left: clamp(1.4rem, 4.8vw, 5.4rem);
    --my-profile-content-right: clamp(1.4rem, 4.8vw, 5.4rem);
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-hero__inner.courses-panel-hero__inner {
    padding-left: var(--my-profile-content-left) !important;
    padding-right: var(--my-profile-content-right) !important;
  }
}

/* V49.2.21 — PC : hero full viewport + contenu calé comme les panels modernes */
@media (min-width: 1024px) {
  body.is-dashboard-shell-visible:has(#my-profile-content) #app-root,
  body.is-dashboard-shell-visible:has(#my-profile-content) #dashboard-app-shell,
  body.is-dashboard-shell-visible:has(#my-profile-content) .dashboard-app-main,
  body.is-dashboard-shell-visible:has(#my-profile-content) #dashboard-view,
  body.is-dashboard-shell-visible:has(#my-profile-content) #dashboard-view.section,
  body.is-dashboard-shell-visible:has(#my-profile-content) #my-profile-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
    overflow-x: visible !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) #dashboard-view > .my-profile-panel-shell.my-profile-panel-root {
    position: fixed !important;
    inset: 0 !important;
    z-index: 12 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: var(--color-bg, #020617) !important;
  }

  @supports (min-height: 100dvh) {
    body.is-dashboard-shell-visible:has(#my-profile-content) #dashboard-view > .my-profile-panel-shell.my-profile-panel-root {
      min-height: 100dvh !important;
    }
  }

  html[data-theme="light"] body.is-dashboard-shell-visible:has(#my-profile-content) #dashboard-view > .my-profile-panel-shell.my-profile-panel-root,
  body[data-theme="light"].is-dashboard-shell-visible:has(#my-profile-content) #dashboard-view > .my-profile-panel-shell.my-profile-panel-root {
    background: #f7fafc !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-modern {
    --my-profile-readable-width: 78rem;
    --my-profile-readable-left: var(--courses-panel-content-left, calc(var(--dashboard-shell-content-left, 6rem) + 2rem));
    --my-profile-readable-right: var(--courses-panel-content-right, max(1rem, env(safe-area-inset-right, 0px)));
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-modern > .my-profile-hero.courses-panel-hero {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: clamp(14rem, 26vh, 19rem) !important;
    margin: 0 0 clamp(.9rem, 1.5vw, 1.2rem) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-hero__inner.courses-panel-hero__inner {
    width: 100% !important;
    max-width: none !important;
    min-height: inherit !important;
    margin: 0 !important;
    padding: calc(var(--courses-panel-nav-height, var(--app-header-safe-height, 64px)) + clamp(1rem, 2.4vw, 2.45rem))
      var(--my-profile-readable-right)
      clamp(1.25rem, 3vw, 2.8rem)
      var(--my-profile-readable-left) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr) !important;
    align-items: center !important;
    gap: clamp(1rem, 3vw, 3rem) !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-modern > :not(.my-profile-hero):not(.my-profile-control-dock),
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-control-dock.courses-control-dock {
    width: min(var(--my-profile-readable-width), calc(100vw - var(--my-profile-readable-left) - var(--my-profile-readable-right))) !important;
    max-width: min(var(--my-profile-readable-width), calc(100vw - var(--my-profile-readable-left) - var(--my-profile-readable-right))) !important;
    margin-left: var(--my-profile-readable-left) !important;
    margin-right: var(--my-profile-readable-right) !important;
  }
}


/* V49.2.22 — Mon profil PC : contact en colonne pour champs plus longs */
@media (min-width: 1024px) {
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-modern-form .my-profile-form-section--contact .my-profile-form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}