/* /public_html/assets/css/profile/my-profile.mobile.css
   Mon profil — mobile < 768px + paysage compact iPhone/PWA
*/

@media (max-width: 767px),
  (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  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 > .panel-body {
    width: 100vw !important;
    max-width: none !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
    overflow-x: clip !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)) + 5.65rem)
      .78rem
      calc(var(--edq-safe-area-bottom-effective, env(safe-area-inset-bottom, 0px)) + 1.6rem) !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: calc(var(--edq-safe-area-top-effective, env(safe-area-inset-top, 0px)) + 5.65rem) .78rem 1.6rem;
  }

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

  .my-profile-panel,
  .my-profile-edit {
    max-width: none;
  }

  .my-profile-panel .teacher-view-main {
    align-items: center;
    gap: .92rem;
  }

  .my-profile-panel .teacher-view-avatar {
    width: 76px;
    height: 76px;
    border-radius: 24px;
  }

  .my-profile-panel .teacher-view-details {
    grid-template-columns: 1fr;
    gap: .74rem;
  }

  .my-profile-membership-shell {
    padding: 16px;
  }

  .my-profile-membership-grid,
  .my-profile-membership-meta {
    grid-template-columns: 1fr;
  }

  .my-profile-membership-actions .ui-btn,
  .my-profile-checkout-actions .ui-btn {
    width: 100%;
  }

  .my-profile-checkout-overlay {
    padding: 14px;
  }

  .my-profile-checkout-dialog {
    padding: 18px;
    border-radius: 22px;
  }

  .my-profile-edit .form-vertical {
    gap: .9rem;
  }
}

@media (max-width: 767px) and (orientation: landscape),
  (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-panel-shell {
    padding-inline: max(.82rem, var(--edq-safe-area-left-effective, env(safe-area-inset-left, 0px)))
      max(.82rem, var(--edq-safe-area-right-effective, env(safe-area-inset-right, 0px))) !important;
  }

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

/* V26.2.1 — Mon profil mobile : cartes centrées avec respiration latérale */
@media (max-width: 767px),
  (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  .my-profile-panel {
    --my-profile-read-section-max: 36rem;
    --my-profile-read-section-gutter: clamp(.95rem, 4vw, 1.18rem);
  }
}

@media (max-width: 767px) and (orientation: landscape),
  (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  .my-profile-panel {
    --my-profile-read-section-max: 44rem;
    --my-profile-read-section-gutter: clamp(1rem, 2.2vw, 1.35rem);
  }
}

/* V26.2.2 — Mon profil : centrage optique mobile
   ------------------------------------------------
   Les cartes de lecture sont centrées dans l'écran réel, pas seulement
   dans une zone héritée du dashboard. On retire les paddings globaux
   parasites puis on donne au panel son propre coussin symétrique. */
@media (max-width: 767px),
  (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  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 > .panel-body,
  body.is-dashboard-shell-visible:has(#my-profile-content) #my-profile-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-panel {
    --my-profile-read-panel-max: 36rem;
    --my-profile-read-content-pad: clamp(1rem, 4.6vw, 1.28rem);
    width: min(100%, var(--my-profile-read-panel-max)) !important;
    max-width: min(100%, var(--my-profile-read-panel-max)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--my-profile-read-content-pad) !important;
    padding-right: var(--my-profile-read-content-pad) !important;
    box-sizing: border-box !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-panel .my-profile-membership-block,
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-panel > .student-view-health-block:not(.my-profile-membership-block) {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 767px) and (orientation: landscape),
  (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-panel {
    --my-profile-read-panel-max: 46rem;
    --my-profile-read-content-pad: clamp(1rem, 2.8vw, 1.35rem);
  }
}

/* V26.3.1 — Mon profil : respiration initiale sous navbar mobile
   Le contenu démarre réellement sous la nappe de navbar, y compris
   en iPhone/PWA et en paysage compact. */
@media (max-width: 767px),
  (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  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.15rem) !important;
    scroll-padding-top: calc(var(--edq-safe-area-top-effective, env(safe-area-inset-top, 0px)) + 7.15rem) !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.15rem) !important;
  }
}

@media (max-width: 767px) and (orientation: landscape),
  (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  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)) + 6.45rem) !important;
    scroll-padding-top: calc(var(--edq-safe-area-top-effective, env(safe-area-inset-top, 0px)) + 6.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)) + 6.45rem) !important;
  }
}

/* V26.4.1 — Mon profil : vraie respiration sous navbar + marges édition mobile
   ---------------------------------------------------------------------------
   Le padding du shell peut être neutralisé par certains conteneurs scrollables
   du dashboard. On ajoute donc une respiration directement sur le contenu.
   En édition, le formulaire garde ses marges latérales propres, même lorsque
   les paddings hérités du dashboard sont retirés pour centrer la lecture. */
@media (max-width: 767px),
  (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  body.is-dashboard-shell-visible:has(#my-profile-content) #my-profile-content {
    padding-top: clamp(2.65rem, 9.5vw, 3.45rem) !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.55rem) !important;
    scroll-padding-top: calc(var(--edq-safe-area-top-effective, env(safe-area-inset-top, 0px)) + 8.55rem) !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-edit {
    --my-profile-edit-side-pad: clamp(1rem, 4.8vw, 1.45rem);
    width: min(100%, 42rem) !important;
    max-width: min(100%, 42rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--my-profile-edit-side-pad) !important;
    padding-right: var(--my-profile-edit-side-pad) !important;
    box-sizing: border-box !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-edit .form-vertical {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 767px) and (orientation: landscape),
  (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  body.is-dashboard-shell-visible:has(#my-profile-content) #my-profile-content {
    padding-top: clamp(2.1rem, 5.7vw, 2.85rem) !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)) + 7.75rem) !important;
    scroll-padding-top: calc(var(--edq-safe-area-top-effective, env(safe-area-inset-top, 0px)) + 7.75rem) !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-edit {
    --my-profile-edit-side-pad: max(1rem, var(--edq-safe-area-left-effective, env(safe-area-inset-left, 0px)), var(--edq-safe-area-right-effective, env(safe-area-inset-right, 0px)));
    width: min(100%, 48rem) !important;
  }
}

/* V49.2.17 — Mon profil moderne mobile */
@media (max-width: 767px),
  (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-modern {
    width: min(100%, 42rem) !important;
    max-width: min(100%, 42rem) !important;
    padding-inline: clamp(.75rem, 4vw, 1.1rem) !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-modern-form {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* V49.2.19 — Mon profil : calage mobile sur le profil élève moderne */
@media (max-width: 767px),
  (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  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)) + 4.7rem) !important;
    scroll-padding-top: calc(var(--edq-safe-area-top-effective, env(safe-area-inset-top, 0px)) + 4.7rem) !important;
  }

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

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-modern {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
    gap: .7rem !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-modern > :not(.my-profile-hero):not(.my-profile-control-dock) {
    width: min(100%, calc(100% - 1.5rem)) !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-hero.courses-panel-hero {
    min-height: 0 !important;
    padding: clamp(1.35rem, 5.8vw, 1.85rem) clamp(1rem, 4.5vw, 1.35rem) !important;
    border-radius: 0 0 1.35rem 1.35rem !important;
    border-top: 0 !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-hero__inner.courses-panel-hero__inner {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .my-profile-hero-main {
    align-items: flex-start !important;
    gap: .9rem !important;
  }

  .my-profile-hero.courses-panel-hero .my-profile-hero__avatar.teacher-view-avatar {
    width: 4.15rem !important;
    height: 4.15rem !important;
    border-radius: 1rem !important;
  }

  .my-profile-hero.courses-panel-hero h1 {
    font-size: clamp(2rem, 9.2vw, 2.75rem) !important;
    letter-spacing: -.055em !important;
  }

  .my-profile-hero.courses-panel-hero .my-profile-hero__text {
    margin-top: .42rem !important;
    font-size: .93rem !important;
  }

  .my-profile-hero.courses-panel-hero .my-profile-hero__stats.courses-panel-hero__stats {
    display: none !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-control-dock.courses-control-dock {
    width: min(100%, calc(100% - 1.5rem)) !important;
    margin-top: -.15rem !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: .6rem !important;
  }

  .my-profile-control-dock.courses-control-dock .my-profile-control-dock__chips:empty {
    display: none !important;
  }

  .my-profile-control-dock.courses-control-dock .my-profile-control-dock__hint {
    font-size: .82rem !important;
    padding: .68rem .78rem !important;
  }

  .my-profile-control-dock.courses-control-dock .my-profile-dock-action.courses-control-action.smart-panel-responsive-action {
    width: 3.15rem !important;
    min-width: 3.15rem !important;
    height: 3.15rem !important;
    min-height: 3.15rem !important;
    padding: 0 !important;
    border-radius: 1rem !important;
    justify-content: center !important;
  }

  .my-profile-control-dock.courses-control-dock .my-profile-dock-action .ui-btn__label--full,
  .my-profile-control-dock.courses-control-dock .my-profile-dock-action .ui-btn__label--short {
    display: none !important;
  }
}

/* V49.2.20 — Mon profil mobile : hero collé au haut du panel */
@media (max-width: 767px),
  (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-panel-shell {
    padding: 0 0 max(1.4rem, calc(var(--edq-safe-area-bottom-effective, env(safe-area-inset-bottom, 0px)) + 1.4rem)) !important;
    scroll-padding-top: var(--my-profile-nav-height, var(--courses-panel-nav-height, var(--edq-mobile-navbar-height, 76px))) !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 .7rem !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border-top: 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;
    padding: calc(var(--my-profile-nav-height, var(--courses-panel-nav-height, var(--edq-mobile-navbar-height, 76px))) + .95rem) var(--courses-panel-right, max(1rem, env(safe-area-inset-right, 0px))) 1rem var(--courses-panel-left, max(1rem, env(safe-area-inset-left, 0px))) !important;
  }
}

/* V49.2.20 — marge interne mobile harmonisée avec le Profil élève */
@media (max-width: 767px),
  (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-panel-shell {
    --my-profile-content-left: max(1rem, var(--edq-safe-area-left-effective, env(safe-area-inset-left, 0px)));
    --my-profile-content-right: max(1rem, var(--edq-safe-area-right-effective, env(safe-area-inset-right, 0px)));
  }

  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 — mobile : hero réellement collé au bord haut */
@media (max-width: 767px),
  (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  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 > .panel-body,
  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;
    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;
  }

  @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;
    }
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-modern {
    --my-profile-readable-left: max(1rem, var(--edq-safe-area-left-effective, env(safe-area-inset-left, 0px))) !important;
    --my-profile-readable-right: max(1rem, var(--edq-safe-area-right-effective, env(safe-area-inset-right, 0px))) !important;
    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;
    margin: 0 0 .7rem !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: 100% !important;
    max-width: none !important;
    padding: calc(var(--courses-panel-nav-height, var(--edq-mobile-navbar-height, 76px)) + .95rem)
      var(--my-profile-readable-right)
      1rem
      var(--my-profile-readable-left) !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: calc(100vw - var(--my-profile-readable-left) - var(--my-profile-readable-right)) !important;
    max-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.31 — Mon profil : dock sas responsable lisible mobile
   ======================================================= */
@media (max-width: 767px),
  (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-control-dock.courses-control-dock.has-chips.has-action {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: .55rem !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-control-dock.courses-control-dock.has-chips.has-action .my-profile-control-dock__chips {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-column: 1 !important;
    display: block !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-control-dock.courses-control-dock.has-chips.has-action .my-profile-control-dock__hint {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    align-items: flex-start !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-control-dock.courses-control-dock.has-chips.has-action .my-profile-control-dock__actions {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-column: 1 !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: .55rem !important;
  }
}

/* =========================================================
   V49.2.32 — Mon profil : dock sas responsable adaptatif
   ======================================================= */
@media (max-width: 767px),
  (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-control-dock.courses-control-dock.has-chips.has-action {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    row-gap: .56rem !important;
    min-height: 0 !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-control-dock.courses-control-dock.has-chips.has-action .my-profile-control-dock__chips {
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-control-dock.courses-control-dock.has-chips.has-action .my-profile-control-dock__actions {
    grid-column: 1 !important;
    grid-row: 2 !important;
    order: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: .56rem !important;
    overflow: visible !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-control-dock.courses-control-dock.has-chips.has-action .my-profile-dock-action.courses-control-action.smart-panel-responsive-action {
    --smart-panel-responsive-action-size: 2.78rem !important;
    flex: 0 0 2.78rem !important;
    inline-size: 2.78rem !important;
    width: 2.78rem !important;
    min-inline-size: 2.78rem !important;
    min-width: 2.78rem !important;
    max-inline-size: 2.78rem !important;
    max-width: 2.78rem !important;
    block-size: 2.78rem !important;
    height: 2.78rem !important;
    min-block-size: 2.78rem !important;
    min-height: 2.78rem !important;
    max-block-size: 2.78rem !important;
    max-height: 2.78rem !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: .88rem !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-control-dock.courses-control-dock.has-chips.has-action .my-profile-dock-action.courses-control-action.smart-panel-responsive-action .ui-btn__label--full,
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-control-dock.courses-control-dock.has-chips.has-action .my-profile-dock-action.courses-control-action.smart-panel-responsive-action .ui-btn__label--short {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) and (min-height: 521px) {
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-control-dock.courses-control-dock.has-chips.has-action {
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: .72rem !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-control-dock.courses-control-dock.has-chips.has-action .my-profile-control-dock__actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: .55rem !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-control-dock.courses-control-dock.has-chips.has-action .my-profile-dock-action.courses-control-action.smart-panel-responsive-action {
    --smart-panel-responsive-action-size: 2.78rem !important;
    inline-size: auto !important;
    width: auto !important;
    min-inline-size: 6.85rem !important;
    min-width: 6.85rem !important;
    max-inline-size: 8.2rem !important;
    max-width: 8.2rem !important;
    block-size: 2.78rem !important;
    height: 2.78rem !important;
    min-block-size: 2.78rem !important;
    min-height: 2.78rem !important;
    max-block-size: 2.78rem !important;
    max-height: 2.78rem !important;
    padding-inline: .82rem !important;
    gap: .42rem !important;
    border-radius: .88rem !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-control-dock.courses-control-dock.has-chips.has-action .my-profile-dock-action.courses-control-action.smart-panel-responsive-action .ui-btn__label--full {
    display: none !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-control-dock.courses-control-dock.has-chips.has-action .my-profile-dock-action.courses-control-action.smart-panel-responsive-action .ui-btn__label--short {
    display: inline !important;
  }
}

@media (min-width: 1024px) {
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-control-dock.courses-control-dock.has-chips.has-action .my-profile-control-dock__actions {
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    gap: .62rem !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-control-dock.courses-control-dock.has-chips.has-action .my-profile-dock-action.courses-control-action.smart-panel-responsive-action {
    --smart-panel-responsive-action-size: 2.9rem !important;
    inline-size: auto !important;
    width: auto !important;
    min-inline-size: 8.2rem !important;
    min-width: 8.2rem !important;
    max-inline-size: 11rem !important;
    max-width: 11rem !important;
    block-size: 2.9rem !important;
    height: 2.9rem !important;
    min-block-size: 2.9rem !important;
    min-height: 2.9rem !important;
    max-block-size: 2.9rem !important;
    max-height: 2.9rem !important;
    padding-inline: .95rem !important;
    gap: .45rem !important;
    border-radius: .94rem !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-control-dock.courses-control-dock.has-chips.has-action .my-profile-dock-action.courses-control-action.smart-panel-responsive-action .ui-btn__label--full {
    display: inline !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-control-dock.courses-control-dock.has-chips.has-action .my-profile-dock-action.courses-control-action.smart-panel-responsive-action .ui-btn__label--short {
    display: none !important;
  }
}