/* /public_html/assets/css/smart-panel-layout.css
   EDQ V46.2.9 — Smart Panel Layout : grille commune cartes.
   Ce fichier centralise la grille validée depuis le panel Cours pour éviter
   les clones CSS panel par panel. */

.smart-panel-grid.smart-panel-grid--cards {
  --smart-panel-grid-gap: clamp(.95rem, 1.55vw, 1.35rem);
  --smart-panel-card-min: 22rem;
  --smart-panel-card-max: 25.5rem;
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--smart-panel-card-min)), var(--smart-panel-card-max))) !important;
  justify-content: center !important;
  justify-items: stretch !important;
  align-items: stretch !important;
  gap: var(--smart-panel-grid-gap) !important;
}

.smart-panel-grid.smart-panel-grid--cards > .ui-accent-card,
.smart-panel-grid.smart-panel-grid--cards > .dashboard-card,
.smart-panel-grid.smart-panel-grid--cards > .course-card,
.smart-panel-grid.smart-panel-grid--cards > .course-add-card,
.smart-panel-grid.smart-panel-grid--cards > .student-card,
.smart-panel-grid.smart-panel-grid--cards > .students-add-card {
  width: 100% !important;
  max-width: var(--smart-panel-card-max) !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}

.smart-panel-grid.smart-panel-grid--cards > .courses-empty-state,
.smart-panel-grid.smart-panel-grid--cards > .students-empty-state {
  grid-column: 1 / -1;
  width: 100%;
  max-width: min(100%, 34rem);
  justify-self: center;
}

.smart-panel-grid.smart-panel-grid--courses {
  --smart-panel-card-min: var(--courses-card-column-min, 23rem);
  --smart-panel-card-max: var(--courses-card-column-max, 25.5rem);
}

.smart-panel-grid.smart-panel-grid--students {
  --smart-panel-card-min: var(--students-card-column-min, 22rem);
  --smart-panel-card-max: var(--students-card-column-max, 25.5rem);
}

/* Adaptateur Élèves : ces règles gagnent sur les anciennes règles dashboard-students
   chargées avant ce fichier, sans modifier le dock/Smartbar déjà validés. */
.students-list-clean-root .students-panel-list {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}

.students-list-clean-root .students-card-grid.smart-panel-grid--students.smart-panel-grid--cards {
  --students-card-column-min: 22rem;
  --students-card-column-max: 25.5rem;
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--students-card-column-min)), var(--students-card-column-max))) !important;
  justify-content: center !important;
  justify-items: stretch !important;
  align-items: stretch !important;
}

.students-list-clean-root .students-card-grid.smart-panel-grid--students.smart-panel-grid--cards > .ui-accent-card,
.students-list-clean-root .students-card-grid.smart-panel-grid--students.smart-panel-grid--cards > .student-card,
.students-list-clean-root .students-card-grid.smart-panel-grid--students.smart-panel-grid--cards > .students-add-card {
  width: 100% !important;
  max-width: var(--students-card-column-max) !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}

.students-list-clean-root .student-card--accent.ui-accent-card,
.students-list-clean-root .students-add-card.ui-accent-card {
  height: 100%;
  min-height: clamp(10.75rem, 13vw, 12.25rem) !important;
}

.students-list-clean-root .student-card--accent.ui-accent-card .ui-accent-card__inner,
.students-list-clean-root .students-add-card.ui-accent-card .ui-accent-card__inner {
  height: 100%;
}

.students-list-clean-root .student-card--accent.ui-accent-card .ui-accent-card__content,
.students-list-clean-root .students-add-card.ui-accent-card .ui-accent-card__content {
  min-height: 100%;
}

.students-list-clean-root .students-add-card.ui-accent-card {
  display: block;
  text-align: left;
}

.students-list-clean-root .students-add-card .student-card-create-header {
  height: 100%;
}

@media (min-width: 1181px) {
  .students-list-clean-root .students-card-grid.smart-panel-grid--students.smart-panel-grid--cards {
    --students-card-column-min: 22rem;
    --students-card-column-max: 25.5rem;
  }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .smart-panel-grid.smart-panel-grid--cards {
    --smart-panel-grid-gap: clamp(.85rem, 1.35vw, 1.1rem);
  }

  .students-list-clean-root .students-card-grid.smart-panel-grid--students.smart-panel-grid--cards {
    --students-card-column-min: 19.25rem;
    --students-card-column-max: 23rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .smart-panel-grid.smart-panel-grid--cards,
  .students-list-clean-root .students-card-grid.smart-panel-grid--students.smart-panel-grid--cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
  }

  .smart-panel-grid.smart-panel-grid--cards > .ui-accent-card,
  .smart-panel-grid.smart-panel-grid--cards > .dashboard-card,
  .smart-panel-grid.smart-panel-grid--cards > .course-card,
  .smart-panel-grid.smart-panel-grid--cards > .course-add-card,
  .smart-panel-grid.smart-panel-grid--cards > .student-card,
  .smart-panel-grid.smart-panel-grid--cards > .students-add-card,
  .students-list-clean-root .students-card-grid.smart-panel-grid--students.smart-panel-grid--cards > .ui-accent-card,
  .students-list-clean-root .students-card-grid.smart-panel-grid--students.smart-panel-grid--cards > .student-card,
  .students-list-clean-root .students-card-grid.smart-panel-grid--students.smart-panel-grid--cards > .students-add-card {
    max-width: none !important;
  }
}

@media (max-width: 767px) {
  .smart-panel-grid.smart-panel-grid--cards,
  .students-list-clean-root .students-card-grid.smart-panel-grid--students.smart-panel-grid--cards {
    --smart-panel-grid-gap: .85rem;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
  }

  .smart-panel-grid.smart-panel-grid--cards > .ui-accent-card,
  .smart-panel-grid.smart-panel-grid--cards > .dashboard-card,
  .smart-panel-grid.smart-panel-grid--cards > .course-card,
  .smart-panel-grid.smart-panel-grid--cards > .course-add-card,
  .smart-panel-grid.smart-panel-grid--cards > .student-card,
  .smart-panel-grid.smart-panel-grid--cards > .students-add-card,
  .students-list-clean-root .students-card-grid.smart-panel-grid--students.smart-panel-grid--cards > .ui-accent-card,
  .students-list-clean-root .students-card-grid.smart-panel-grid--students.smart-panel-grid--cards > .student-card,
  .students-list-clean-root .students-card-grid.smart-panel-grid--students.smart-panel-grid--cards > .students-add-card {
    max-width: none !important;
  }

  .students-list-clean-root .student-card--accent.ui-accent-card,
  .students-list-clean-root .students-add-card.ui-accent-card {
    min-height: 9.75rem !important;
  }
}

/* EDQ V46.2.10 — convergence carte ajout + espacement liste Élèves.
   Le panel Élèves réutilise strictement le modèle visuel de la carte d'ajout Cours. */
.students-list-clean-root .students-panel-content--list.courses-panel-content {
  padding-top: 0 !important;
}

.students-list-clean-root .students-card-grid.smart-panel-grid--students.smart-panel-grid--cards > .students-add-card.course-add-card.ui-accent-card {
  max-width: var(--smart-panel-card-max) !important;
}

.students-list-clean-root .students-add-card.course-add-card.ui-accent-card {
  display: grid !important;
  text-align: left !important;
}

.students-list-clean-root .students-add-card.course-add-card.ui-accent-card .ui-accent-card__body {
  display: flex !important;
}

.students-list-clean-root .students-add-card.course-add-card.ui-accent-card .ui-accent-card__footer,
.students-list-clean-root .students-add-card.course-add-card.ui-accent-card .ui-accent-card__header {
  display: none !important;
}

.students-list-clean-root .students-card-grid.smart-panel-grid--students.smart-panel-grid--cards[data-card-count="1"] {
  justify-content: center !important;
}

.students-list-clean-root .students-card-grid.smart-panel-grid--students.smart-panel-grid--cards[data-card-count="0"].has-empty-state {
  justify-content: center !important;
}

/* Ajustement final V46.2.10 : dimensions exactes du modèle d'ajout Cours. */
.students-list-clean-root .students-add-card.course-add-card.ui-accent-card {
  min-height: 178px !important;
}

.students-list-clean-root .students-add-card.course-add-card.ui-accent-card .ui-accent-card__body {
  min-height: 150px !important;
}

/* EDQ V46.2.11 — convergence stricte liste Élèves : espacement + carte d'ajout.
   Le dock, la grille et la carte d'ajout doivent suivre le comportement validé du panel Cours. */
.students-list-clean-root .students-panel-list {
  padding-top: 0 !important;
}

.students-list-clean-root .students-card-grid.smart-panel-grid--students.smart-panel-grid--cards {
  margin-top: 0 !important;
}

.students-list-clean-root .students-add-card.course-add-card.ui-accent-card {
  --ui-accent-card-color: var(--theme-primary, #38bdf8) !important;
  --ui-accent-card-aura-blur: 30px;
  --ui-accent-card-shadow-rest: 0 0 0 rgba(0,0,0,0);
  min-height: 178px !important;
  border-style: dashed !important;
  border-radius: 1.55rem !important;
  display: grid !important;
  place-items: center !important;
  text-align: left !important;
  cursor: pointer !important;
  opacity: 1 !important;
  box-shadow: var(--ui-accent-card-shadow-rest) !important;
  filter: none !important;
  transform: none !important;
}

.students-list-clean-root .students-add-card.course-add-card.ui-accent-card .ui-accent-card__rail {
  background: var(--ui-accent-card-rail-off) !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.students-list-clean-root .students-add-card.course-add-card.ui-accent-card .ui-accent-card__rail::before {
  background: var(--ui-accent-card-rail-on) !important;
  box-shadow: none !important;
  filter: none !important;
}

.students-list-clean-root .students-add-card.course-add-card.ui-accent-card .ui-accent-card__body {
  width: 100% !important;
  min-height: 150px !important;
  padding: clamp(1rem, 1.8vw, 1.2rem) clamp(1rem, 1.8vw, 1.2rem) clamp(1rem, 1.8vw, 1.2rem) clamp(1.55rem, 2vw, 1.8rem) !important;
  display: flex !important;
  align-items: center !important;
  gap: .9rem !important;
}

.students-list-clean-root .students-add-card.course-add-card.ui-accent-card .course-add-card__icon {
  width: 2.8rem !important;
  height: 2.8rem !important;
  flex: 0 0 2.8rem !important;
}

.students-list-clean-root .students-add-card.course-add-card.ui-accent-card .course-add-card__copy {
  display: grid !important;
  gap: .16rem !important;
  min-width: 0 !important;
}

.students-list-clean-root .students-add-card.course-add-card.ui-accent-card .course-add-card__copy strong {
  font-size: 1.02rem !important;
  font-weight: 950 !important;
}

.students-list-clean-root .students-add-card.course-add-card.ui-accent-card .course-add-card__copy span {
  font-size: .84rem !important;
  font-weight: 800 !important;
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .students-list-clean-root .students-add-card.course-add-card.ui-accent-card:hover,
  .students-list-clean-root .students-add-card.course-add-card.ui-accent-card:focus-visible {
    transform: none !important;
    filter: none !important;
  }

  .students-list-clean-root .students-add-card.course-add-card.ui-accent-card:hover .ui-accent-card__rail::before,
  .students-list-clean-root .students-add-card.course-add-card.ui-accent-card:focus-visible .ui-accent-card__rail::before,
  .students-list-clean-root .students-add-card.course-add-card.ui-accent-card.is-courses-desktop-current .ui-accent-card__rail::before,
  .students-list-clean-root .students-add-card.course-add-card.ui-accent-card.is-selected .ui-accent-card__rail::before {
    transform: scaleY(1) !important;
  }

  .students-list-clean-root .students-add-card.course-add-card.ui-accent-card.is-courses-desktop-current,
  .students-list-clean-root .students-add-card.course-add-card.ui-accent-card.is-selected {
    outline: none !important;
    border-color: var(--ui-accent-card-border-active) !important;
    box-shadow:
      var(--ui-accent-card-shadow-rest),
      inset 0 0 0 1px var(--ui-accent-card-selection-ring) !important;
  }
}

@media (max-width: 1023px), (hover: none), (pointer: coarse) {
  .students-list-clean-root .students-add-card.course-add-card.ui-accent-card,
  .students-list-clean-root .students-add-card.course-add-card.ui-accent-card:hover,
  .students-list-clean-root .students-add-card.course-add-card.ui-accent-card:focus-visible,
  .students-list-clean-root .students-add-card.course-add-card.ui-accent-card:active {
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

/* EDQ V46.2.12 — composant commun SmartPanelAddCard + sélection cartes à rail.
   Ces règles déplacent le modèle d'ajout validé depuis Cours vers le moteur commun,
   puis alignent la sélection des cartes Élèves sur le comportement Cours. */
.smart-panel-add-card.course-add-card.ui-accent-card {
  --ui-accent-card-color: var(--theme-primary, #38bdf8);
  --ui-accent-card-aura-blur: 30px;
  --ui-accent-card-shadow-rest: 0 0 0 rgba(0,0,0,0);
  display: grid !important;
  place-items: stretch !important;
  min-height: clamp(10.75rem, 13vw, 12.25rem) !important;
  border-style: dashed !important;
  border-radius: 1.55rem !important;
  border-color: var(--ui-accent-card-border-rest) !important;
  box-shadow: var(--ui-accent-card-shadow-rest) !important;
  filter: none !important;
  transform: none !important;
  text-align: left !important;
  cursor: pointer !important;
  opacity: 1 !important;
  color: inherit !important;
  font: inherit !important;
}

.smart-panel-add-card.course-add-card.ui-accent-card .ui-accent-card__rail {
  background: var(--ui-accent-card-rail-off) !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.smart-panel-add-card.course-add-card.ui-accent-card .ui-accent-card__rail::before {
  background: var(--ui-accent-card-rail-on) !important;
  box-shadow: none !important;
  filter: none !important;
}

.smart-panel-add-card.course-add-card.ui-accent-card .ui-accent-card__header,
.smart-panel-add-card.course-add-card.ui-accent-card .ui-accent-card__footer {
  display: none !important;
}

.smart-panel-add-card.course-add-card.ui-accent-card .ui-accent-card__body {
  width: 100% !important;
  min-height: 100% !important;
  padding: clamp(1rem, 1.8vw, 1.2rem) clamp(1rem, 1.8vw, 1.2rem) clamp(1rem, 1.8vw, 1.2rem) clamp(1.55rem, 2vw, 1.8rem) !important;
  display: flex !important;
  align-items: center !important;
  gap: .9rem !important;
}

.smart-panel-add-card.course-add-card.ui-accent-card .course-add-card__icon {
  width: 2.8rem !important;
  height: 2.8rem !important;
  flex: 0 0 2.8rem !important;
  display: inline-grid !important;
  place-items: center !important;
}

.smart-panel-add-card.course-add-card.ui-accent-card .course-add-card__copy {
  display: grid !important;
  gap: .16rem !important;
  min-width: 0 !important;
}

.smart-panel-add-card.course-add-card.ui-accent-card .course-add-card__copy strong {
  font-size: 1.02rem !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
}

.smart-panel-add-card.course-add-card.ui-accent-card .course-add-card__copy span {
  font-size: .84rem !important;
  font-weight: 800 !important;
  line-height: 1.22 !important;
}

.students-list-clean-root .student-card--accent.ui-accent-card,
.students-list-clean-root .students-add-card.smart-panel-add-card.ui-accent-card {
  --ui-accent-card-aura-blur: 30px;
  --ui-accent-card-shadow-rest: 0 0 0 rgba(0,0,0,0);
  border-color: var(--ui-accent-card-border-rest) !important;
  box-shadow: var(--ui-accent-card-shadow-rest) !important;
  outline: none !important;
  filter: none !important;
  transform: none !important;
}

.students-list-clean-root .student-card--accent.ui-accent-card .ui-accent-card__rail,
.students-list-clean-root .students-add-card.smart-panel-add-card.ui-accent-card .ui-accent-card__rail {
  background: var(--ui-accent-card-rail-off) !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.students-list-clean-root .student-card--accent.ui-accent-card .ui-accent-card__rail::before,
.students-list-clean-root .students-add-card.smart-panel-add-card.ui-accent-card .ui-accent-card__rail::before {
  background: var(--ui-accent-card-rail-on) !important;
  box-shadow: none !important;
  filter: none !important;
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .students-list-clean-root .student-card--accent.ui-accent-card:hover,
  .students-list-clean-root .student-card--accent.ui-accent-card:focus-visible,
  .students-list-clean-root .students-add-card.smart-panel-add-card.ui-accent-card:hover,
  .students-list-clean-root .students-add-card.smart-panel-add-card.ui-accent-card:focus-visible,
  .smart-panel-add-card.course-add-card.ui-accent-card:hover,
  .smart-panel-add-card.course-add-card.ui-accent-card:focus-visible {
    transform: none !important;
    filter: none !important;
  }

  .students-list-clean-root .student-card--accent.ui-accent-card:hover .ui-accent-card__rail::before,
  .students-list-clean-root .student-card--accent.ui-accent-card:focus-visible .ui-accent-card__rail::before,
  .students-list-clean-root .student-card--accent.ui-accent-card.is-courses-desktop-current .ui-accent-card__rail::before,
  .students-list-clean-root .student-card--accent.ui-accent-card.is-selected .ui-accent-card__rail::before,
  .students-list-clean-root .student-card--accent.ui-accent-card[aria-selected="true"] .ui-accent-card__rail::before,
  .students-list-clean-root .students-add-card.smart-panel-add-card.ui-accent-card:hover .ui-accent-card__rail::before,
  .students-list-clean-root .students-add-card.smart-panel-add-card.ui-accent-card:focus-visible .ui-accent-card__rail::before,
  .students-list-clean-root .students-add-card.smart-panel-add-card.ui-accent-card.is-courses-desktop-current .ui-accent-card__rail::before,
  .students-list-clean-root .students-add-card.smart-panel-add-card.ui-accent-card.is-selected .ui-accent-card__rail::before,
  .students-list-clean-root .students-add-card.smart-panel-add-card.ui-accent-card[aria-selected="true"] .ui-accent-card__rail::before,
  .smart-panel-add-card.course-add-card.ui-accent-card:hover .ui-accent-card__rail::before,
  .smart-panel-add-card.course-add-card.ui-accent-card:focus-visible .ui-accent-card__rail::before,
  .smart-panel-add-card.course-add-card.ui-accent-card.is-courses-desktop-current .ui-accent-card__rail::before,
  .smart-panel-add-card.course-add-card.ui-accent-card.is-selected .ui-accent-card__rail::before,
  .smart-panel-add-card.course-add-card.ui-accent-card[aria-selected="true"] .ui-accent-card__rail::before {
    transform: scaleY(1) !important;
  }

  .students-list-clean-root .student-card--accent.ui-accent-card.is-courses-desktop-current,
  .students-list-clean-root .student-card--accent.ui-accent-card.is-selected,
  .students-list-clean-root .student-card--accent.ui-accent-card[aria-selected="true"],
  .students-list-clean-root .students-add-card.smart-panel-add-card.ui-accent-card.is-courses-desktop-current,
  .students-list-clean-root .students-add-card.smart-panel-add-card.ui-accent-card.is-selected,
  .students-list-clean-root .students-add-card.smart-panel-add-card.ui-accent-card[aria-selected="true"],
  .smart-panel-add-card.course-add-card.ui-accent-card.is-courses-desktop-current,
  .smart-panel-add-card.course-add-card.ui-accent-card.is-selected,
  .smart-panel-add-card.course-add-card.ui-accent-card[aria-selected="true"] {
    outline: none !important;
    border-color: var(--ui-accent-card-border-active) !important;
    box-shadow:
      var(--ui-accent-card-shadow-rest),
      inset 0 0 0 1px var(--ui-accent-card-selection-ring) !important;
  }
}

@media (max-width: 1023px), (hover: none), (pointer: coarse) {
  .smart-panel-add-card.course-add-card.ui-accent-card,
  .smart-panel-add-card.course-add-card.ui-accent-card:hover,
  .smart-panel-add-card.course-add-card.ui-accent-card:focus-visible,
  .smart-panel-add-card.course-add-card.ui-accent-card:active,
  .students-list-clean-root .student-card--accent.ui-accent-card,
  .students-list-clean-root .student-card--accent.ui-accent-card:hover,
  .students-list-clean-root .student-card--accent.ui-accent-card:focus-visible,
  .students-list-clean-root .student-card--accent.ui-accent-card:active {
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}


/* EDQ V46.2.14 — SmartPanelAddCard : état hover/sélection réellement commun.
   La carte d'ajout ne doit plus dépendre de classes historiques type .students-add-card.
   On cible le composant commun directement pour que Cours/Élèves partagent le même rail,
   le même hover et le même état de sélection. */
.smart-panel-grid.smart-panel-grid--cards > .smart-panel-add-card.course-add-card.ui-accent-card,
.students-list-clean-root .students-card-grid.smart-panel-grid--students.smart-panel-grid--cards > .smart-panel-add-card.course-add-card.ui-accent-card {
  width: 100% !important;
  max-width: var(--smart-panel-card-max) !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}

.smart-panel-add-card.course-add-card.ui-accent-card,
.students-list-clean-root .smart-panel-add-card.course-add-card.ui-accent-card {
  --ui-accent-card-color: var(--theme-primary, #38bdf8) !important;
  --ui-accent-card-aura-blur: 30px;
  --ui-accent-card-shadow-rest: 0 0 0 rgba(0,0,0,0);
  min-height: 178px !important;
  border-style: dashed !important;
  border-width: 1.5px !important;
  border-radius: 1.55rem !important;
  border-color: color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 58%, transparent) !important;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 9%, transparent), transparent 48%),
    color-mix(in srgb, var(--color-bg, #020617) 92%, transparent) !important;
  box-shadow: var(--ui-accent-card-shadow-rest) !important;
  display: grid !important;
  place-items: center !important;
  text-align: left !important;
  cursor: pointer !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

html[data-theme="light"] .smart-panel-add-card.course-add-card.ui-accent-card,
body[data-theme="light"] .smart-panel-add-card.course-add-card.ui-accent-card,
html[data-theme="light"] .students-list-clean-root .smart-panel-add-card.course-add-card.ui-accent-card,
body[data-theme="light"] .students-list-clean-root .smart-panel-add-card.course-add-card.ui-accent-card {
  border-color: color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 50%, rgba(15,23,42,.14)) !important;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 8%, transparent), transparent 48%),
    rgba(255,255,255,.34) !important;
}

.smart-panel-add-card.course-add-card.ui-accent-card .ui-accent-card__rail,
.students-list-clean-root .smart-panel-add-card.course-add-card.ui-accent-card .ui-accent-card__rail {
  opacity: 1 !important;
  background: var(--ui-accent-card-rail-off) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.smart-panel-add-card.course-add-card.ui-accent-card .ui-accent-card__rail::before,
.students-list-clean-root .smart-panel-add-card.course-add-card.ui-accent-card .ui-accent-card__rail::before {
  background: var(--ui-accent-card-rail-on) !important;
  box-shadow: none !important;
  filter: none !important;
}

.smart-panel-add-card.course-add-card.ui-accent-card .ui-accent-card__body,
.students-list-clean-root .smart-panel-add-card.course-add-card.ui-accent-card .ui-accent-card__body {
  width: 100% !important;
  min-height: 150px !important;
  padding: clamp(1rem, 1.8vw, 1.2rem) clamp(1rem, 1.8vw, 1.2rem) clamp(1rem, 1.8vw, 1.2rem) clamp(1.55rem, 2vw, 1.8rem) !important;
  display: flex !important;
  align-items: center !important;
  gap: .9rem !important;
}

.smart-panel-add-card.course-add-card.ui-accent-card .course-add-card__icon,
.students-list-clean-root .smart-panel-add-card.course-add-card.ui-accent-card .course-add-card__icon,
.smart-panel-add-card.course-add-card.ui-accent-card .course-card-add-icon,
.students-list-clean-root .smart-panel-add-card.course-add-card.ui-accent-card .course-card-add-icon {
  width: 2.8rem !important;
  height: 2.8rem !important;
  flex: 0 0 2.8rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 1rem !important;
  border: 1px solid color-mix(in srgb, var(--theme-primary, #38bdf8) 48%, transparent) !important;
  background: color-mix(in srgb, var(--theme-primary, #38bdf8) 16%, transparent) !important;
  color: var(--theme-primary, #38bdf8) !important;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--theme-primary, #38bdf8) 14%, transparent) !important;
}

.smart-panel-add-card.course-add-card.ui-accent-card:hover,
.smart-panel-add-card.course-add-card.ui-accent-card:focus-visible,
.smart-panel-add-card.course-add-card.ui-accent-card.is-courses-desktop-current,
.smart-panel-add-card.course-add-card.ui-accent-card.is-selected,
.smart-panel-add-card.course-add-card.ui-accent-card[aria-selected="true"],
.students-list-clean-root .smart-panel-add-card.course-add-card.ui-accent-card:hover,
.students-list-clean-root .smart-panel-add-card.course-add-card.ui-accent-card:focus-visible,
.students-list-clean-root .smart-panel-add-card.course-add-card.ui-accent-card.is-courses-desktop-current,
.students-list-clean-root .smart-panel-add-card.course-add-card.ui-accent-card.is-selected,
.students-list-clean-root .smart-panel-add-card.course-add-card.ui-accent-card[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 74%, transparent) !important;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 13%, transparent), transparent 48%),
    color-mix(in srgb, var(--color-bg, #020617) 88%, transparent) !important;
  box-shadow:
    var(--ui-accent-card-shadow-rest),
    inset 0 0 0 1px var(--ui-accent-card-selection-ring) !important;
  outline: none !important;
  transform: none !important;
  filter: none !important;
}

html[data-theme="light"] .smart-panel-add-card.course-add-card.ui-accent-card:hover,
body[data-theme="light"] .smart-panel-add-card.course-add-card.ui-accent-card:hover,
html[data-theme="light"] .smart-panel-add-card.course-add-card.ui-accent-card:focus-visible,
body[data-theme="light"] .smart-panel-add-card.course-add-card.ui-accent-card:focus-visible,
html[data-theme="light"] .smart-panel-add-card.course-add-card.ui-accent-card.is-courses-desktop-current,
body[data-theme="light"] .smart-panel-add-card.course-add-card.ui-accent-card.is-courses-desktop-current,
html[data-theme="light"] .smart-panel-add-card.course-add-card.ui-accent-card[aria-selected="true"],
body[data-theme="light"] .smart-panel-add-card.course-add-card.ui-accent-card[aria-selected="true"] {
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 11%, transparent), transparent 48%),
    rgba(255,255,255,.48) !important;
}

.smart-panel-add-card.course-add-card.ui-accent-card:hover .ui-accent-card__rail::before,
.smart-panel-add-card.course-add-card.ui-accent-card:focus-visible .ui-accent-card__rail::before,
.smart-panel-add-card.course-add-card.ui-accent-card.is-courses-desktop-current .ui-accent-card__rail::before,
.smart-panel-add-card.course-add-card.ui-accent-card.is-selected .ui-accent-card__rail::before,
.smart-panel-add-card.course-add-card.ui-accent-card[aria-selected="true"] .ui-accent-card__rail::before,
.students-list-clean-root .smart-panel-add-card.course-add-card.ui-accent-card:hover .ui-accent-card__rail::before,
.students-list-clean-root .smart-panel-add-card.course-add-card.ui-accent-card:focus-visible .ui-accent-card__rail::before,
.students-list-clean-root .smart-panel-add-card.course-add-card.ui-accent-card.is-courses-desktop-current .ui-accent-card__rail::before,
.students-list-clean-root .smart-panel-add-card.course-add-card.ui-accent-card.is-selected .ui-accent-card__rail::before,
.students-list-clean-root .smart-panel-add-card.course-add-card.ui-accent-card[aria-selected="true"] .ui-accent-card__rail::before,
.students-list-clean-root .student-card--accent.ui-accent-card:hover .ui-accent-card__rail::before,
.students-list-clean-root .student-card--accent.ui-accent-card:focus-visible .ui-accent-card__rail::before,
.students-list-clean-root .student-card--accent.ui-accent-card.is-courses-desktop-current .ui-accent-card__rail::before,
.students-list-clean-root .student-card--accent.ui-accent-card.is-selected .ui-accent-card__rail::before,
.students-list-clean-root .student-card--accent.ui-accent-card[aria-selected="true"] .ui-accent-card__rail::before {
  transform: scaleY(1) !important;
}

.students-list-clean-root .student-card--accent.ui-accent-card.is-courses-desktop-current,
.students-list-clean-root .student-card--accent.ui-accent-card.is-selected,
.students-list-clean-root .student-card--accent.ui-accent-card[aria-selected="true"] {
  border-color: var(--ui-accent-card-border-active) !important;
  box-shadow:
    var(--ui-accent-card-shadow-rest),
    inset 0 0 0 1px var(--ui-accent-card-selection-ring) !important;
}

/* ======================================================================
   V46.3.2 — Smart Panel : boutons d'autorisation communs
   ====================================================================== */

.smart-panel-consent-grid--choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.85rem, 1.5vw, 1rem);
}

.smart-panel-consent-field {
  display: block;
  min-width: 0;
}

.smart-panel-consent-choice {
  width: 100%;
  min-height: 5.25rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .9rem;
  padding: .82rem .95rem;
  border-radius: 1.16rem;
  border: 1px solid color-mix(in srgb, currentColor 28%, var(--color-border-subtle, #cbd5e1) 72%);
  background:
    radial-gradient(circle at 16% 18%, color-mix(in srgb, currentColor 16%, transparent), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.58), rgba(255,255,255,.20)),
    color-mix(in srgb, var(--color-surface-soft, #f8fafc) 88%, transparent);
  color: var(--color-text-main, #0f172a);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 .72rem 1.55rem color-mix(in srgb, currentColor 10%, transparent);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    filter .16s ease;
}

.smart-panel-consent-choice:hover,
.smart-panel-consent-choice:focus-visible {
  transform: translateY(-1px);
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.44),
    0 0 0 3px color-mix(in srgb, currentColor 13%, transparent),
    0 .9rem 1.9rem color-mix(in srgb, currentColor 14%, transparent);
}

.smart-panel-consent-choice.is-allowed {
  color: #22c55e;
}

.smart-panel-consent-choice.is-denied {
  color: #ef4444;
}

.smart-panel-consent-choice__icon {
  width: 3.05rem;
  height: 3.05rem;
  display: inline-grid;
  place-items: center;
  border-radius: 1.05rem;
  background:
    radial-gradient(circle at 28% 16%, rgba(255,255,255,.46), transparent 42%),
    color-mix(in srgb, currentColor 20%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 .45rem 1rem color-mix(in srgb, currentColor 18%, transparent);
  flex: 0 0 auto;
}

.smart-panel-consent-choice__icon .bi {
  font-size: 1.5rem;
  line-height: 1;
}

.smart-panel-consent-choice__text {
  min-width: 0;
  color: var(--color-text-main, #0f172a);
  font-size: .98rem;
  font-weight: 830;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

html[data-theme="dark"] .smart-panel-consent-choice {
  background:
    radial-gradient(circle at 16% 18%, color-mix(in srgb, currentColor 13%, transparent), transparent 44%),
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.015)),
    color-mix(in srgb, var(--color-surface, #0f172a) 84%, #020617 16%);
  border-color: color-mix(in srgb, currentColor 30%, var(--color-border-subtle, #334155) 70%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 .82rem 1.7rem rgba(0,0,0,.24);
}

html[data-theme="dark"] .smart-panel-consent-choice:hover,
html[data-theme="dark"] .smart-panel-consent-choice:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 0 3px color-mix(in srgb, currentColor 12%, transparent),
    0 .95rem 1.95rem rgba(0,0,0,.32);
}

html[data-theme="dark"] .smart-panel-consent-choice__text {
  color: color-mix(in srgb, var(--color-text-main, #f8fafc) 94%, currentColor 6%);
}

@media (max-width: 767px), (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  .smart-panel-consent-grid--choices {
    grid-template-columns: 1fr;
  }
}

/* EDQ V46.5.1 — SmartPanelInteractionRules : base souris/tactile commune.
   Les champs texte et Smartbars restent volontairement sélectionnables. */
.smart-panel-native-guard,
[data-smart-panel-native-guard="true"] {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.smart-panel-native-guard :is(input, textarea, select, option, [contenteditable="true"], [contenteditable=""], [role="textbox"], [data-native-selection="true"], [data-allow-native-selection="true"], .ui-smartbar, .smartbar, .smart-panel-smartbar),
[data-smart-panel-native-guard="true"] :is(input, textarea, select, option, [contenteditable="true"], [contenteditable=""], [role="textbox"], [data-native-selection="true"], [data-allow-native-selection="true"], .ui-smartbar, .smartbar, .smart-panel-smartbar) {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
  -webkit-tap-highlight-color: initial;
}

[data-smart-panel-interaction-rules="true"] :is(img, svg, .ui-accent-card, .course-card, .student-card, .dashboard-card) {
  -webkit-user-drag: none;
}

.course-student-context-menu.is-smart-menu-flipped-x,
.course-student-context-menu.is-smart-menu-flipped-y {
  will-change: left, top, transform;
}

@media (hover: none), (pointer: coarse), (max-width: 1023px) {
  [data-smart-panel-interaction-rules="true"] .is-smart-panel-frame-active :is(.ui-accent-card__rail, .student-profile-section__rail, .student-profile-section-rail),
  [data-smart-panel-interaction-rules="true"] .is-smart-panel-card-hovered :is(.ui-accent-card__rail) {
    opacity: 1;
  }
}


/* EDQ V46.5.2 — intégration progressive des règles souris/tactile sur Élèves et sous-panels. */
[data-smart-panel-interaction-rules="true"] :is(.student-card, .students-add-card, .student-profile-course-card, .student-profile-course-add-card, .student-courses-panel-card, .student-guardian-card, .student-guardian-add-card, .student-guardian-picker-card, .smart-panel-consent-choice) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

[data-smart-panel-interaction-rules="true"] :is(.is-smart-panel-frame-active, .is-smart-panel-frame-hovered) > :is(.ui-accent-card__rail, .student-courses-panel-card__rail),
[data-smart-panel-interaction-rules="true"] :is(.is-smart-panel-card-hovered, .is-selected, [data-selected="1"], [data-menu-open="true"]) :is(.ui-accent-card__rail, .student-courses-panel-card__rail) {
  opacity: 1;
}

[data-smart-panel-interaction-rules="true"] .is-smart-panel-card-hovered:is(.student-courses-panel-card, .student-profile-course-card),
[data-smart-panel-interaction-rules="true"] .is-smart-panel-card-hovered:is(.student-card, .student-guardian-card, .student-guardian-picker-card) {
  outline-color: color-mix(in srgb, var(--student-course-accent, var(--ui-accent-card-color, #38bdf8)) 42%, transparent);
}

@media (hover: none), (pointer: coarse), (max-width: 1023px) {
  [data-smart-panel-interaction-rules="true"] :is(.student-courses-panel-card__rail, .ui-accent-card__rail) {
    opacity: 1;
  }
}

/* ========================================================================== 
   EDQ V46.6.6 — SmartPanelInteractionRules : rail de cadre vivant
   --------------------------------------------------------------------------
   État repos  : lame courte centrée verticalement, calée sur la bordure repos.
   État actif  : déploiement lent depuis le centre vers les extrémités,
                 calé sur la bordure active avec intensité et glow progressifs.
   Les cartes/items gardent leur comportement piloté par leurs propres rails.
   ========================================================================== */

[data-smart-panel-interaction-rules="true"] {
  --smart-panel-frame-rail-scale-rest: .20;
  --smart-panel-frame-rail-scale-active: 1;
  --smart-panel-frame-rail-width: 5px;
  --smart-panel-frame-rail-mask:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0,0,0,0) 9%,
      rgba(0,0,0,.55) 18%,
      #000 34%,
      #000 66%,
      rgba(0,0,0,.55) 82%,
      rgba(0,0,0,0) 91%,
      transparent 100%
    );
  --smart-panel-frame-rail-rest-opacity: .64;
  --smart-panel-frame-rail-active-opacity: 1;
  --smart-panel-frame-rail-rest-glow: .38rem;
  --smart-panel-frame-rail-active-glow: 1.18rem;
  --smart-panel-frame-rail-rest-color:
    var(--ui-accent-card-border-rest,
      color-mix(in srgb, var(--card-accent, var(--ui-accent-card-color, #38bdf8)) 34%, rgba(148, 163, 184, .22) 66%));
  --smart-panel-frame-rail-active-color:
    var(--ui-accent-card-border-active,
      color-mix(in srgb, var(--card-accent, var(--ui-accent-card-color, #38bdf8)) 72%, rgba(255,255,255,.18) 28%));
  --smart-panel-frame-rail-rest:
    linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 0%, transparent) 12%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 24%, transparent) 24%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 72%, transparent) 38%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 100%, white 5%) 50%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 72%, transparent) 62%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 24%, transparent) 76%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 0%, transparent) 88%,
      transparent 100%
    );
  --smart-panel-frame-rail-active:
    linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 0%, transparent) 10%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 28%, transparent) 20%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 80%, transparent) 36%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 100%, white 7%) 50%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 80%, transparent) 64%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 28%, transparent) 80%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 0%, transparent) 90%,
      transparent 100%
    );
}

html:not([data-theme="dark"]) [data-smart-panel-interaction-rules="true"] {
  --smart-panel-frame-rail-rest-opacity: .54;
  --smart-panel-frame-rail-active-opacity: .94;
  --smart-panel-frame-rail-rest-glow: .30rem;
  --smart-panel-frame-rail-active-glow: .95rem;
}

/* EDQ V46.6.8 — la couleur ET les gradients du rail sont calculés sur le cadre.
   Point important : un gradient stocké sur la racine peut conserver les variables
   de la racine au lieu de récupérer la couleur locale du cadre. On redéfinit donc
   aussi `--smart-panel-frame-rail-rest` et `--smart-panel-frame-rail-active` sur
   chaque `.smart-panel-frame`, juste à côté de son accent local. */
[data-smart-panel-interaction-rules="true"] .smart-panel-frame {
  --smart-panel-frame-local-accent: var(--card-accent, var(--student-course-accent, var(--ui-accent-card-color, #38bdf8)));
  --smart-panel-frame-rail-rest-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 34%, rgba(148, 163, 184, .22) 66%);
  --smart-panel-frame-rail-active-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 72%, rgba(255,255,255,.18) 28%);
  --smart-panel-frame-rail-rest:
    linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 0%, transparent) 12%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 24%, transparent) 24%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 72%, transparent) 38%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 100%, white 5%) 50%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 72%, transparent) 62%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 24%, transparent) 76%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 0%, transparent) 88%,
      transparent 100%
    );
  --smart-panel-frame-rail-active:
    linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 0%, transparent) 10%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 28%, transparent) 20%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 80%, transparent) 36%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 100%, white 7%) 50%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 80%, transparent) 64%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 28%, transparent) 80%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 0%, transparent) 90%,
      transparent 100%
    );
}

html:not([data-theme="dark"]) [data-smart-panel-interaction-rules="true"] .smart-panel-frame {
  --smart-panel-frame-rail-rest-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 28%, rgba(15, 23, 42, .16) 72%);
  --smart-panel-frame-rail-active-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 64%, rgba(15, 23, 42, .12) 36%);
}

/* Cadres basés sur ui-accent-card : profil élève, futurs panels, blocs communs. */
[data-smart-panel-interaction-rules="true"] .smart-panel-frame.ui-accent-card > .ui-accent-card__rail {
  width: var(--smart-panel-frame-rail-width) !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  overflow: hidden !important;
}

[data-smart-panel-interaction-rules="true"] .smart-panel-frame.ui-accent-card > .ui-accent-card__rail::before {
  background: var(--smart-panel-frame-rail-rest) !important;
  -webkit-mask-image: var(--smart-panel-frame-rail-mask) !important;
  mask-image: var(--smart-panel-frame-rail-mask) !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  opacity: var(--smart-panel-frame-rail-rest-opacity) !important;
  transform: scaleY(var(--smart-panel-frame-rail-scale-rest)) !important;
  transform-origin: 50% 50% !important;
  filter: drop-shadow(0 0 var(--smart-panel-frame-rail-rest-glow) color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 42%, transparent)) !important;
  transition:
    transform 620ms cubic-bezier(.16, 1, .3, 1),
    opacity 560ms ease,
    filter 620ms ease,
    background 560ms ease !important;
}

[data-smart-panel-interaction-rules="true"] .smart-panel-frame.ui-accent-card:is(.is-smart-panel-frame-hovered, .is-smart-panel-frame-active, :focus-within) > .ui-accent-card__rail::before {
  background: var(--smart-panel-frame-rail-active) !important;
  opacity: var(--smart-panel-frame-rail-active-opacity) !important;
  transform: scaleY(var(--smart-panel-frame-rail-scale-active)) !important;
  filter: drop-shadow(0 0 var(--smart-panel-frame-rail-active-glow) color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 56%, transparent)) !important;
}

@media (hover: none), (pointer: coarse), (max-width: 1023px) {
  [data-smart-panel-interaction-rules="true"] .smart-panel-frame.ui-accent-card > .ui-accent-card__rail::before {
    background: var(--smart-panel-frame-rail-active) !important;
    opacity: var(--smart-panel-frame-rail-active-opacity) !important;
    transform: scaleY(var(--smart-panel-frame-rail-scale-active)) !important;
    filter: drop-shadow(0 0 .75rem color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 44%, transparent)) !important;
    transition: none !important;
  }
}

/* Cadres sans rail DOM dédié mais avec pseudo-rail local, notamment l'éditeur élève. */
[data-smart-panel-interaction-rules="true"] .smart-panel-frame.student-editor-section::before {
  width: var(--smart-panel-frame-rail-width) !important;
  background: var(--smart-panel-frame-rail-rest) !important;
  -webkit-mask-image: var(--smart-panel-frame-rail-mask) !important;
  mask-image: var(--smart-panel-frame-rail-mask) !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  opacity: var(--smart-panel-frame-rail-rest-opacity) !important;
  transform: scaleY(var(--smart-panel-frame-rail-scale-rest)) !important;
  transform-origin: 50% 50% !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 var(--smart-panel-frame-rail-rest-glow) color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 42%, transparent)) !important;
  transition:
    transform 620ms cubic-bezier(.16, 1, .3, 1),
    opacity 560ms ease,
    filter 620ms ease,
    background 560ms ease !important;
}

[data-smart-panel-interaction-rules="true"] .smart-panel-frame.student-editor-section:is(.is-smart-panel-frame-hovered, .is-smart-panel-frame-active, :focus-within)::before {
  background: var(--smart-panel-frame-rail-active) !important;
  opacity: var(--smart-panel-frame-rail-active-opacity) !important;
  transform: scaleY(var(--smart-panel-frame-rail-scale-active)) !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 var(--smart-panel-frame-rail-active-glow) color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 56%, transparent)) !important;
}

@media (hover: none), (pointer: coarse), (max-width: 1023px) {
  [data-smart-panel-interaction-rules="true"] .smart-panel-frame.student-editor-section::before {
    background: var(--smart-panel-frame-rail-active) !important;
    opacity: var(--smart-panel-frame-rail-active-opacity) !important;
    transform: scaleY(var(--smart-panel-frame-rail-scale-active)) !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 .75rem color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 44%, transparent)) !important;
    transition: none !important;
  }
}


/* EDQ V46.6.9 — rail de cadre épaissi et extrémités plus fondues.
   Le masque alphabétique complète le gradient : la couleur ET le halo disparaissent
   progressivement en haut/bas au lieu de former une barre coupée. */

@media (prefers-reduced-motion: reduce) {
  [data-smart-panel-interaction-rules="true"] .smart-panel-frame.ui-accent-card > .ui-accent-card__rail::before,
  [data-smart-panel-interaction-rules="true"] .smart-panel-frame.student-editor-section::before {
    transition: none !important;
  }
}

/* ==========================================================================
   EDQ V46.6.11 — Profil élève : rails communs cadres + cartes internes
   --------------------------------------------------------------------------
   Le profil élève contient des cadres ui-accent-card, puis des cartes internes
   issues de plusieurs générations CSS. Cette passe force le même rail commun :
   mini lame à 20 % au repos, déploiement complet au hover/focus/sélection/menu,
   couleur locale et extrémités fondues.
   ========================================================================== */

#dashboard-view [data-smart-panel-interaction-rules="true"].student-profile-course-root .smart-panel-frame.ui-accent-card > .ui-accent-card__rail {
  width: var(--smart-panel-frame-rail-width) !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  overflow: hidden !important;
}

#dashboard-view [data-smart-panel-interaction-rules="true"].student-profile-course-root .smart-panel-frame.ui-accent-card > .ui-accent-card__rail::before {
  background: var(--smart-panel-frame-rail-rest) !important;
  -webkit-mask-image: var(--smart-panel-frame-rail-mask) !important;
  mask-image: var(--smart-panel-frame-rail-mask) !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  opacity: var(--smart-panel-frame-rail-rest-opacity) !important;
  transform: scaleY(var(--smart-panel-frame-rail-scale-rest)) !important;
  transform-origin: 50% 50% !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 var(--smart-panel-frame-rail-rest-glow) color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 42%, transparent)) !important;
  transition:
    transform 620ms cubic-bezier(.16, 1, .3, 1),
    opacity 560ms ease,
    filter 620ms ease,
    background 560ms ease !important;
}

#dashboard-view [data-smart-panel-interaction-rules="true"].student-profile-course-root .smart-panel-frame.ui-accent-card:is(.is-smart-panel-frame-hovered, .is-smart-panel-frame-active, :focus-within, .is-student-guardian-menu-active) > .ui-accent-card__rail::before {
  background: var(--smart-panel-frame-rail-active) !important;
  opacity: var(--smart-panel-frame-rail-active-opacity) !important;
  transform: scaleY(var(--smart-panel-frame-rail-scale-active)) !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 var(--smart-panel-frame-rail-active-glow) color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 56%, transparent)) !important;
}

#dashboard-view [data-smart-panel-interaction-rules="true"].student-profile-course-root :is(
  .student-profile-course-card.ui-accent-card,
  .student-profile-course-add-card.ui-accent-card,
  .student-profile-card--guardians .student-guardian-card.ui-accent-card,
  .student-profile-card--guardians .student-guardian-add-card.ui-accent-card
) {
  --smart-panel-frame-local-accent: var(--course-style-color, var(--student-course-accent, var(--card-accent, var(--ui-accent-card-color, #38bdf8))));
  --smart-panel-frame-rail-rest-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 34%, rgba(148, 163, 184, .22) 66%);
  --smart-panel-frame-rail-active-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 72%, rgba(255,255,255,.18) 28%);
  --smart-panel-frame-rail-rest:
    linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 0%, transparent) 12%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 24%, transparent) 24%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 72%, transparent) 38%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 100%, white 5%) 50%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 72%, transparent) 62%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 24%, transparent) 76%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 0%, transparent) 88%,
      transparent 100%
    );
  --smart-panel-frame-rail-active:
    linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 0%, transparent) 10%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 28%, transparent) 20%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 80%, transparent) 36%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 100%, white 7%) 50%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 80%, transparent) 64%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 28%, transparent) 80%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 0%, transparent) 90%,
      transparent 100%
    );
}

html:not([data-theme="dark"]) #dashboard-view [data-smart-panel-interaction-rules="true"].student-profile-course-root :is(
  .student-profile-course-card.ui-accent-card,
  .student-profile-course-add-card.ui-accent-card,
  .student-profile-card--guardians .student-guardian-card.ui-accent-card,
  .student-profile-card--guardians .student-guardian-add-card.ui-accent-card
) {
  --smart-panel-frame-rail-rest-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 28%, rgba(15, 23, 42, .16) 72%);
  --smart-panel-frame-rail-active-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 64%, rgba(15, 23, 42, .12) 36%);
}

#dashboard-view [data-smart-panel-interaction-rules="true"].student-profile-course-root :is(
  .student-profile-course-card.ui-accent-card,
  .student-profile-course-add-card.ui-accent-card,
  .student-profile-card--guardians .student-guardian-card.ui-accent-card,
  .student-profile-card--guardians .student-guardian-add-card.ui-accent-card
) > .ui-accent-card__rail {
  width: var(--smart-panel-frame-rail-width) !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  overflow: hidden !important;
}

#dashboard-view [data-smart-panel-interaction-rules="true"].student-profile-course-root :is(
  .student-profile-course-card.ui-accent-card,
  .student-profile-course-add-card.ui-accent-card,
  .student-profile-card--guardians .student-guardian-card.ui-accent-card,
  .student-profile-card--guardians .student-guardian-add-card.ui-accent-card
) > .ui-accent-card__rail::before {
  background: var(--smart-panel-frame-rail-rest) !important;
  -webkit-mask-image: var(--smart-panel-frame-rail-mask) !important;
  mask-image: var(--smart-panel-frame-rail-mask) !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  opacity: var(--smart-panel-frame-rail-rest-opacity) !important;
  transform: scaleY(var(--smart-panel-frame-rail-scale-rest)) !important;
  transform-origin: 50% 50% !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 var(--smart-panel-frame-rail-rest-glow) color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 42%, transparent)) !important;
  transition:
    transform 620ms cubic-bezier(.16, 1, .3, 1),
    opacity 560ms ease,
    filter 620ms ease,
    background 560ms ease !important;
}

#dashboard-view [data-smart-panel-interaction-rules="true"].student-profile-course-root :is(
  .student-profile-course-card.ui-accent-card,
  .student-profile-course-add-card.ui-accent-card,
  .student-profile-card--guardians .student-guardian-card.ui-accent-card,
  .student-profile-card--guardians .student-guardian-add-card.ui-accent-card
):is(:hover, :focus-visible, .is-smart-panel-card-hovered, .is-courses-desktop-current, .is-selected, .is-student-guardian-menu-active, [aria-selected="true"], [data-selected="true"], [data-selected="1"], [data-menu-open="true"]) > .ui-accent-card__rail::before {
  background: var(--smart-panel-frame-rail-active) !important;
  opacity: var(--smart-panel-frame-rail-active-opacity) !important;
  transform: scaleY(var(--smart-panel-frame-rail-scale-active)) !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 var(--smart-panel-frame-rail-active-glow) color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 56%, transparent)) !important;
}

#dashboard-view [data-smart-panel-interaction-rules="true"].student-profile-course-root .student-profile-gala-card {
  --smart-panel-frame-local-accent: var(--student-gala-color, #38bdf8);
  --smart-panel-frame-rail-rest-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 34%, rgba(148, 163, 184, .22) 66%);
  --smart-panel-frame-rail-active-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 72%, rgba(255,255,255,.18) 28%);
  --smart-panel-frame-rail-rest:
    linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 0%, transparent) 12%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 24%, transparent) 24%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 72%, transparent) 38%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 100%, white 5%) 50%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 72%, transparent) 62%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 24%, transparent) 76%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 0%, transparent) 88%,
      transparent 100%
    );
  --smart-panel-frame-rail-active:
    linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 0%, transparent) 10%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 28%, transparent) 20%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 80%, transparent) 36%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 100%, white 7%) 50%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 80%, transparent) 64%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 28%, transparent) 80%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 0%, transparent) 90%,
      transparent 100%
    );
}

html:not([data-theme="dark"]) #dashboard-view [data-smart-panel-interaction-rules="true"].student-profile-course-root .student-profile-gala-card {
  --smart-panel-frame-rail-rest-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 28%, rgba(15, 23, 42, .16) 72%);
  --smart-panel-frame-rail-active-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 64%, rgba(15, 23, 42, .12) 36%);
}

#dashboard-view [data-smart-panel-interaction-rules="true"].student-profile-course-root .student-profile-gala-card::before {
  inset: .8rem auto .8rem .55rem !important;
  width: var(--smart-panel-frame-rail-width) !important;
  border-radius: 999px !important;
  background: var(--smart-panel-frame-rail-rest) !important;
  -webkit-mask-image: var(--smart-panel-frame-rail-mask) !important;
  mask-image: var(--smart-panel-frame-rail-mask) !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  opacity: var(--smart-panel-frame-rail-rest-opacity) !important;
  transform: scaleY(var(--smart-panel-frame-rail-scale-rest)) !important;
  transform-origin: 50% 50% !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 var(--smart-panel-frame-rail-rest-glow) color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 42%, transparent)) !important;
  transition:
    transform 620ms cubic-bezier(.16, 1, .3, 1),
    opacity 560ms ease,
    filter 620ms ease,
    background 560ms ease !important;
}

#dashboard-view [data-smart-panel-interaction-rules="true"].student-profile-course-root .student-profile-gala-card:is(:hover, :focus-visible, .is-smart-panel-card-hovered, .is-selected, [data-menu-open="true"])::before {
  background: var(--smart-panel-frame-rail-active) !important;
  opacity: var(--smart-panel-frame-rail-active-opacity) !important;
  transform: scaleY(var(--smart-panel-frame-rail-scale-active)) !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 var(--smart-panel-frame-rail-active-glow) color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 56%, transparent)) !important;
}

@media (hover: none), (pointer: coarse), (max-width: 1023px) {
  #dashboard-view [data-smart-panel-interaction-rules="true"].student-profile-course-root .smart-panel-frame.ui-accent-card > .ui-accent-card__rail::before,
  #dashboard-view [data-smart-panel-interaction-rules="true"].student-profile-course-root :is(
    .student-profile-course-card.ui-accent-card,
    .student-profile-course-add-card.ui-accent-card,
    .student-profile-card--guardians .student-guardian-card.ui-accent-card,
    .student-profile-card--guardians .student-guardian-add-card.ui-accent-card
  ) > .ui-accent-card__rail::before,
  #dashboard-view [data-smart-panel-interaction-rules="true"].student-profile-course-root .student-profile-gala-card::before {
    background: var(--smart-panel-frame-rail-active) !important;
    opacity: var(--smart-panel-frame-rail-active-opacity) !important;
    transform: scaleY(var(--smart-panel-frame-rail-scale-active)) !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 .75rem color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 44%, transparent)) !important;
    transition: none !important;
  }
}

/* ==========================================================================
   EDQ V46.6.12 — Panel Élèves : cartes alignées sur le rail commun
   --------------------------------------------------------------------------
   Les cartes de la liste Élèves utilisent le composant ui-accent-card mais
   avaient encore le rail historique des cartes. On applique ici le rail commun
   validé : lame à 20 % au repos, teinte locale, déploiement complet et
   extrémités fondues. La règle reste limitée au panel Élèves principal.
   ========================================================================== */

#dashboard-view [data-smart-panel-interaction-rules="true"].students-list-clean-root :is(
  .students-card-grid .student-card--accent.ui-accent-card,
  .students-card-grid .smart-panel-add-card.course-add-card.ui-accent-card
) {
  --smart-panel-frame-local-accent: var(--card-accent, var(--student-course-accent, var(--ui-accent-card-color, var(--theme-primary, #38bdf8))));
  --smart-panel-frame-rail-rest-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 34%, rgba(148, 163, 184, .22) 66%);
  --smart-panel-frame-rail-active-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 72%, rgba(255,255,255,.18) 28%);
  --smart-panel-frame-rail-rest:
    linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 0%, transparent) 12%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 24%, transparent) 24%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 72%, transparent) 38%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 100%, white 5%) 50%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 72%, transparent) 62%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 24%, transparent) 76%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 0%, transparent) 88%,
      transparent 100%
    );
  --smart-panel-frame-rail-active:
    linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 0%, transparent) 10%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 28%, transparent) 20%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 80%, transparent) 36%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 100%, white 7%) 50%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 80%, transparent) 64%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 28%, transparent) 80%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 0%, transparent) 90%,
      transparent 100%
    );
}

html:not([data-theme="dark"]) #dashboard-view [data-smart-panel-interaction-rules="true"].students-list-clean-root :is(
  .students-card-grid .student-card--accent.ui-accent-card,
  .students-card-grid .smart-panel-add-card.course-add-card.ui-accent-card
) {
  --smart-panel-frame-rail-rest-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 28%, rgba(15, 23, 42, .16) 72%);
  --smart-panel-frame-rail-active-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 64%, rgba(15, 23, 42, .12) 36%);
}

#dashboard-view [data-smart-panel-interaction-rules="true"].students-list-clean-root :is(
  .students-card-grid .student-card--accent.ui-accent-card,
  .students-card-grid .smart-panel-add-card.course-add-card.ui-accent-card
) > .ui-accent-card__rail {
  width: var(--smart-panel-frame-rail-width) !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  overflow: hidden !important;
}

#dashboard-view [data-smart-panel-interaction-rules="true"].students-list-clean-root :is(
  .students-card-grid .student-card--accent.ui-accent-card,
  .students-card-grid .smart-panel-add-card.course-add-card.ui-accent-card
) > .ui-accent-card__rail::before {
  background: var(--smart-panel-frame-rail-rest) !important;
  -webkit-mask-image: var(--smart-panel-frame-rail-mask) !important;
  mask-image: var(--smart-panel-frame-rail-mask) !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  opacity: var(--smart-panel-frame-rail-rest-opacity) !important;
  transform: scaleY(var(--smart-panel-frame-rail-scale-rest)) !important;
  transform-origin: 50% 50% !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 var(--smart-panel-frame-rail-rest-glow) color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 42%, transparent)) !important;
  transition:
    transform 620ms cubic-bezier(.16, 1, .3, 1),
    opacity 560ms ease,
    filter 620ms ease,
    background 560ms ease !important;
}

#dashboard-view [data-smart-panel-interaction-rules="true"].students-list-clean-root :is(
  .students-card-grid .student-card--accent.ui-accent-card,
  .students-card-grid .smart-panel-add-card.course-add-card.ui-accent-card
):is(:hover, :focus-visible, .is-smart-panel-card-hovered, .is-courses-desktop-current, .is-selected, [aria-selected="true"], [data-selected="true"], [data-selected="1"], [data-menu-open="true"]) > .ui-accent-card__rail::before {
  background: var(--smart-panel-frame-rail-active) !important;
  opacity: var(--smart-panel-frame-rail-active-opacity) !important;
  transform: scaleY(var(--smart-panel-frame-rail-scale-active)) !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 var(--smart-panel-frame-rail-active-glow) color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 56%, transparent)) !important;
}

@media (hover: none), (pointer: coarse), (max-width: 1023px) {
  #dashboard-view [data-smart-panel-interaction-rules="true"].students-list-clean-root :is(
    .students-card-grid .student-card--accent.ui-accent-card,
    .students-card-grid .smart-panel-add-card.course-add-card.ui-accent-card
  ) > .ui-accent-card__rail::before {
    background: var(--smart-panel-frame-rail-active) !important;
    opacity: var(--smart-panel-frame-rail-active-opacity) !important;
    transform: scaleY(var(--smart-panel-frame-rail-scale-active)) !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 .75rem color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 44%, transparent)) !important;
    transition: none !important;
  }
}

/* ==========================================================================
   EDQ V46.6.13 — Responsables disponibles : rail commun + sélection
   --------------------------------------------------------------------------
   Le sélecteur de responsables reprend la même lame lumineuse que les cartes
   Élèves et Profil élève : 20 % au repos, teinte locale, extrémités fondues,
   puis déploiement complet au survol, focus ou sélection.
   ========================================================================== */

#dashboard-view [data-smart-panel-interaction-rules="true"].student-guardian-picker-root .student-guardian-picker-card.ui-accent-card {
  --smart-panel-frame-local-accent: var(--card-accent, var(--student-course-accent, var(--ui-accent-card-color, #38bdf8)));
  --smart-panel-frame-rail-rest-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 34%, rgba(148, 163, 184, .22) 66%);
  --smart-panel-frame-rail-active-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 72%, rgba(255,255,255,.18) 28%);
  --smart-panel-frame-rail-rest:
    linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 0%, transparent) 12%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 24%, transparent) 24%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 72%, transparent) 38%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 100%, white 5%) 50%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 72%, transparent) 62%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 24%, transparent) 76%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 0%, transparent) 88%,
      transparent 100%
    );
  --smart-panel-frame-rail-active:
    linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 0%, transparent) 10%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 28%, transparent) 20%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 80%, transparent) 36%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 100%, white 7%) 50%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 80%, transparent) 64%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 28%, transparent) 80%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 0%, transparent) 90%,
      transparent 100%
    );
}

html:not([data-theme="dark"]) #dashboard-view [data-smart-panel-interaction-rules="true"].student-guardian-picker-root .student-guardian-picker-card.ui-accent-card {
  --smart-panel-frame-rail-rest-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 28%, rgba(15, 23, 42, .16) 72%);
  --smart-panel-frame-rail-active-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 64%, rgba(15, 23, 42, .12) 36%);
}

#dashboard-view [data-smart-panel-interaction-rules="true"].student-guardian-picker-root .student-guardian-picker-card.ui-accent-card > .ui-accent-card__rail {
  width: var(--smart-panel-frame-rail-width) !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  overflow: hidden !important;
}

#dashboard-view [data-smart-panel-interaction-rules="true"].student-guardian-picker-root .student-guardian-picker-card.ui-accent-card > .ui-accent-card__rail::before {
  background: var(--smart-panel-frame-rail-rest) !important;
  -webkit-mask-image: var(--smart-panel-frame-rail-mask) !important;
  mask-image: var(--smart-panel-frame-rail-mask) !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  opacity: var(--smart-panel-frame-rail-rest-opacity) !important;
  transform: scaleY(var(--smart-panel-frame-rail-scale-rest)) !important;
  transform-origin: 50% 50% !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 var(--smart-panel-frame-rail-rest-glow) color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 42%, transparent)) !important;
  transition:
    transform 620ms cubic-bezier(.16, 1, .3, 1),
    opacity 560ms ease,
    filter 620ms ease,
    background 560ms ease !important;
}

#dashboard-view [data-smart-panel-interaction-rules="true"].student-guardian-picker-root .student-guardian-picker-card.ui-accent-card:is(:hover, :focus-visible, .is-smart-panel-card-hovered, .is-selected, [aria-selected="true"], [data-selected="true"], [data-selected="1"], [data-menu-open="true"]) > .ui-accent-card__rail::before {
  background: var(--smart-panel-frame-rail-active) !important;
  opacity: var(--smart-panel-frame-rail-active-opacity) !important;
  transform: scaleY(var(--smart-panel-frame-rail-scale-active)) !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 var(--smart-panel-frame-rail-active-glow) color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 56%, transparent)) !important;
}

#dashboard-view [data-smart-panel-interaction-rules="true"].student-guardian-picker-root .student-guardian-picker-card.ui-accent-card:is(.is-selected, [aria-selected="true"], [data-selected="true"], [data-selected="1"]) {
  border-color: var(--ui-accent-card-border-active) !important;
  box-shadow:
    var(--ui-accent-card-shadow-rest),
    inset 0 0 0 1px var(--ui-accent-card-selection-ring) !important;
}

@media (hover: none), (pointer: coarse), (max-width: 1023px) {
  #dashboard-view [data-smart-panel-interaction-rules="true"].student-guardian-picker-root .student-guardian-picker-card.ui-accent-card > .ui-accent-card__rail::before {
    background: var(--smart-panel-frame-rail-active) !important;
    opacity: var(--smart-panel-frame-rail-active-opacity) !important;
    transform: scaleY(var(--smart-panel-frame-rail-scale-active)) !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 .75rem color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 44%, transparent)) !important;
    transition: none !important;
  }
}

/* ========================================================================== 
   EDQ V46.6.18 — Panel Cours : rails alignés sur la lame commune validée
   --------------------------------------------------------------------------
   Le panel Cours était la base historique du composant ui-accent-card. Après
   validation du nouveau rail commun sur le panel Élèves, on réinjecte ici le
   même comportement sans toucher au profil élève, déjà isolé par ses règles.
   ========================================================================== */

body.courses-panel-active .courses-panel-root:not(.student-profile-course-root) {
  --smart-panel-frame-rail-scale-rest: .20;
  --smart-panel-frame-rail-scale-active: 1;
  --smart-panel-frame-rail-width: 5px;
  --smart-panel-frame-rail-mask:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0,0,0,0) 9%,
      rgba(0,0,0,.55) 18%,
      #000 34%,
      #000 66%,
      rgba(0,0,0,.55) 82%,
      rgba(0,0,0,0) 91%,
      transparent 100%
    );
  --smart-panel-frame-rail-rest-opacity: .64;
  --smart-panel-frame-rail-active-opacity: 1;
  --smart-panel-frame-rail-rest-glow: .38rem;
  --smart-panel-frame-rail-active-glow: 1.18rem;
}

html:not([data-theme="dark"]) body.courses-panel-active .courses-panel-root:not(.student-profile-course-root) {
  --smart-panel-frame-rail-rest-opacity: .54;
  --smart-panel-frame-rail-active-opacity: .94;
  --smart-panel-frame-rail-rest-glow: .30rem;
  --smart-panel-frame-rail-active-glow: .95rem;
}

body.courses-panel-active .courses-panel-root:not(.student-profile-course-root) :is(
  .course-card.course-card--accent.ui-accent-card,
  .course-add-card.ui-accent-card,
  .course-student-card.ui-accent-card,
  .course-student-picker-card.ui-accent-card,
  .course-choreo-card.ui-accent-card
) {
  --smart-panel-frame-local-accent: var(--card-accent, var(--course-style-color, var(--student-course-accent, var(--ui-accent-card-color, #38bdf8))));
  --smart-panel-frame-rail-rest-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 34%, rgba(148, 163, 184, .22) 66%);
  --smart-panel-frame-rail-active-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 72%, rgba(255,255,255,.18) 28%);
  --smart-panel-frame-rail-rest:
    linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 0%, transparent) 12%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 24%, transparent) 24%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 72%, transparent) 38%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 100%, white 5%) 50%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 72%, transparent) 62%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 24%, transparent) 76%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 0%, transparent) 88%,
      transparent 100%
    );
  --smart-panel-frame-rail-active:
    linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 0%, transparent) 10%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 28%, transparent) 20%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 80%, transparent) 36%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 100%, white 7%) 50%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 80%, transparent) 64%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 28%, transparent) 80%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 0%, transparent) 90%,
      transparent 100%
    );
}

html:not([data-theme="dark"]) body.courses-panel-active .courses-panel-root:not(.student-profile-course-root) :is(
  .course-card.course-card--accent.ui-accent-card,
  .course-add-card.ui-accent-card,
  .course-student-card.ui-accent-card,
  .course-student-picker-card.ui-accent-card,
  .course-choreo-card.ui-accent-card
) {
  --smart-panel-frame-rail-rest-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 28%, rgba(15, 23, 42, .16) 72%);
  --smart-panel-frame-rail-active-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 64%, rgba(15, 23, 42, .12) 36%);
}

body.courses-panel-active .courses-panel-root:not(.student-profile-course-root) :is(
  .course-card.course-card--accent.ui-accent-card,
  .course-add-card.ui-accent-card,
  .course-student-card.ui-accent-card,
  .course-student-picker-card.ui-accent-card,
  .course-choreo-card.ui-accent-card
) > .ui-accent-card__rail {
  width: var(--smart-panel-frame-rail-width) !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  overflow: hidden !important;
}

body.courses-panel-active .courses-panel-root:not(.student-profile-course-root) :is(
  .course-card.course-card--accent.ui-accent-card,
  .course-add-card.ui-accent-card,
  .course-student-card.ui-accent-card,
  .course-student-picker-card.ui-accent-card,
  .course-choreo-card.ui-accent-card
) > .ui-accent-card__rail::before {
  background: var(--smart-panel-frame-rail-rest) !important;
  -webkit-mask-image: var(--smart-panel-frame-rail-mask) !important;
  mask-image: var(--smart-panel-frame-rail-mask) !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  opacity: var(--smart-panel-frame-rail-rest-opacity) !important;
  transform: scaleY(var(--smart-panel-frame-rail-scale-rest)) !important;
  transform-origin: 50% 50% !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 var(--smart-panel-frame-rail-rest-glow) color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 42%, transparent)) !important;
  transition:
    transform 620ms cubic-bezier(.16, 1, .3, 1),
    opacity 560ms ease,
    filter 620ms ease,
    background 560ms ease !important;
}

body.courses-panel-active .courses-panel-root:not(.student-profile-course-root) :is(
  .course-card.course-card--accent.ui-accent-card,
  .course-add-card.ui-accent-card,
  .course-student-card.ui-accent-card,
  .course-student-picker-card.ui-accent-card,
  .course-choreo-card.ui-accent-card
):is(:hover, :focus-visible, .is-smart-panel-card-hovered, .is-courses-desktop-current, .is-selected, [aria-selected="true"], [data-selected="true"], [data-selected="1"], [data-menu-open="true"]) > .ui-accent-card__rail::before {
  background: var(--smart-panel-frame-rail-active) !important;
  opacity: var(--smart-panel-frame-rail-active-opacity) !important;
  transform: scaleY(var(--smart-panel-frame-rail-scale-active)) !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 var(--smart-panel-frame-rail-active-glow) color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 56%, transparent)) !important;
}

@media (hover: none), (pointer: coarse), (max-width: 1023px) {
  body.courses-panel-active .courses-panel-root:not(.student-profile-course-root) :is(
    .course-card.course-card--accent.ui-accent-card,
    .course-add-card.ui-accent-card,
    .course-student-card.ui-accent-card,
    .course-student-picker-card.ui-accent-card,
    .course-choreo-card.ui-accent-card
  ) > .ui-accent-card__rail::before {
    background: var(--smart-panel-frame-rail-active) !important;
    opacity: var(--smart-panel-frame-rail-active-opacity) !important;
    transform: scaleY(var(--smart-panel-frame-rail-scale-active)) !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 .75rem color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 44%, transparent)) !important;
    transition: none !important;
  }
}

/* ========================================================================== 
   EDQ V46.6.19 — Inscriptions aux cours : rails alignés sur la lame commune
   --------------------------------------------------------------------------
   Le sous-panel élèves “Inscriptions aux cours” utilise des cartes locales
   `.student-courses-panel-card` avec un rail dédié. On branche ce rail sur le
   même comportement que les cartes Cours et Élèves validées : 20 % au repos,
   déploiement complet, couleur du style et extrémités fondues.
   ========================================================================== */

body.courses-panel-active .student-courses-panel-root {
  --smart-panel-frame-rail-scale-rest: .20;
  --smart-panel-frame-rail-scale-active: 1;
  --smart-panel-frame-rail-width: 5px;
  --smart-panel-frame-rail-mask:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0,0,0,0) 9%,
      rgba(0,0,0,.55) 18%,
      #000 34%,
      #000 66%,
      rgba(0,0,0,.55) 82%,
      rgba(0,0,0,0) 91%,
      transparent 100%
    );
  --smart-panel-frame-rail-rest-opacity: .64;
  --smart-panel-frame-rail-active-opacity: 1;
  --smart-panel-frame-rail-rest-glow: .38rem;
  --smart-panel-frame-rail-active-glow: 1.18rem;
}

html:not([data-theme="dark"]) body.courses-panel-active .student-courses-panel-root {
  --smart-panel-frame-rail-rest-opacity: .54;
  --smart-panel-frame-rail-active-opacity: .94;
  --smart-panel-frame-rail-rest-glow: .30rem;
  --smart-panel-frame-rail-active-glow: .95rem;
}

body.courses-panel-active .student-courses-panel-root .student-courses-panel-card {
  --smart-panel-frame-local-accent: var(--student-course-accent, var(--course-style-color, var(--card-accent, #38bdf8)));
  --smart-panel-frame-rail-rest-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 34%, rgba(148, 163, 184, .22) 66%);
  --smart-panel-frame-rail-active-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 72%, rgba(255,255,255,.18) 28%);
  --smart-panel-frame-rail-rest:
    linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 0%, transparent) 12%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 24%, transparent) 24%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 72%, transparent) 38%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 100%, white 5%) 50%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 72%, transparent) 62%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 24%, transparent) 76%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 0%, transparent) 88%,
      transparent 100%
    );
  --smart-panel-frame-rail-active:
    linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 0%, transparent) 10%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 28%, transparent) 20%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 80%, transparent) 36%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 100%, white 7%) 50%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 80%, transparent) 64%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 28%, transparent) 80%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 0%, transparent) 90%,
      transparent 100%
    );
}

html:not([data-theme="dark"]) body.courses-panel-active .student-courses-panel-root .student-courses-panel-card {
  --smart-panel-frame-rail-rest-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 28%, rgba(15, 23, 42, .16) 72%);
  --smart-panel-frame-rail-active-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 64%, rgba(15, 23, 42, .12) 36%);
}

body.courses-panel-active .student-courses-panel-root .student-courses-panel-card > .student-courses-panel-card__rail {
  inset: 18px auto 18px 12px !important;
  width: var(--smart-panel-frame-rail-width) !important;
  border-radius: 999px !important;
  background: var(--smart-panel-frame-rail-rest) !important;
  -webkit-mask-image: var(--smart-panel-frame-rail-mask) !important;
  mask-image: var(--smart-panel-frame-rail-mask) !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  opacity: var(--smart-panel-frame-rail-rest-opacity) !important;
  transform: scaleY(var(--smart-panel-frame-rail-scale-rest)) !important;
  transform-origin: 50% 50% !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 var(--smart-panel-frame-rail-rest-glow) color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 42%, transparent)) !important;
  transition:
    transform 620ms cubic-bezier(.16, 1, .3, 1),
    opacity 560ms ease,
    filter 620ms ease,
    background 560ms ease !important;
}

body.courses-panel-active .student-courses-panel-root .student-courses-panel-card:is(
  :hover,
  :focus-visible,
  .is-smart-panel-card-hovered,
  .is-selected,
  [aria-selected="true"],
  [aria-checked="true"],
  [data-selected="true"],
  [data-selected="1"],
  [data-menu-open="true"]
) > .student-courses-panel-card__rail {
  background: var(--smart-panel-frame-rail-active) !important;
  opacity: var(--smart-panel-frame-rail-active-opacity) !important;
  transform: scaleY(var(--smart-panel-frame-rail-scale-active)) !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 var(--smart-panel-frame-rail-active-glow) color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 56%, transparent)) !important;
}

@media (hover: none), (pointer: coarse), (max-width: 1023px) {
  body.courses-panel-active .student-courses-panel-root .student-courses-panel-card > .student-courses-panel-card__rail {
    background: var(--smart-panel-frame-rail-active) !important;
    opacity: var(--smart-panel-frame-rail-active-opacity) !important;
    transform: scaleY(var(--smart-panel-frame-rail-scale-active)) !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 .75rem color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 44%, transparent)) !important;
    transition: none !important;
  }
}

/* ========================================================================== 
   EDQ V49.4 — Onglet d’accent commun
   Remplace les anciennes lames/rails verticaux du moteur Smart Panel.
   ========================================================================== */

body :is(.ui-accent-card, .smart-panel-frame) > .ui-accent-card__rail,
body.courses-panel-active .student-courses-panel-root .student-courses-panel-card > .student-courses-panel-card__rail {
  position: absolute !important;
  inset: -1px auto -1px -1px !important;
  top: -1px !important;
  right: auto !important;
  bottom: -1px !important;
  left: -1px !important;
  width: 5px !important;
  min-height: calc(100% + 2px) !important;
  border: 0 !important;
  border-radius: 26px 0 0 26px !important;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--ui-accent-card-color, var(--courses-panel-accent, var(--student-course-accent, #38bdf8))) 100%, white 4%) 0%,
      color-mix(in srgb, var(--ui-accent-card-color, var(--courses-panel-accent, var(--student-course-accent, #38bdf8))) 92%, transparent) 42%,
      color-mix(in srgb, var(--ui-accent-card-color, var(--courses-panel-accent, var(--student-course-accent, #38bdf8))) 18%, transparent) 82%,
      transparent 100%) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  box-shadow:
    4px 0 18px color-mix(in srgb, var(--ui-accent-card-color, var(--courses-panel-accent, var(--student-course-accent, #38bdf8))) 24%, transparent),
    inset -1px 0 0 color-mix(in srgb, white 20%, transparent) !important;
  filter: none !important;
  opacity: .76 !important;
  transform: none !important;
  transform-origin: left center !important;
  transition:
    width 230ms cubic-bezier(.2,.82,.24,1),
    opacity 180ms ease,
    box-shadow 230ms ease !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

body :is(.ui-accent-card, .smart-panel-frame) > .ui-accent-card__rail::before,
body :is(.ui-accent-card, .smart-panel-frame) > .ui-accent-card__rail::after,
body.courses-panel-active .student-courses-panel-root .student-courses-panel-card > .student-courses-panel-card__rail::before,
body.courses-panel-active .student-courses-panel-root .student-courses-panel-card > .student-courses-panel-card__rail::after {
  content: none !important;
  display: none !important;
}

body :is(.ui-accent-card, .smart-panel-frame):is(
  .is-smart-panel-card-hovered,
  .is-courses-desktop-current,
  .is-selected,
  [aria-selected="true"],
  [data-selected="true"],
  [data-selected="1"],
  [data-menu-open="true"]
) > .ui-accent-card__rail,
body.courses-panel-active .student-courses-panel-root .student-courses-panel-card:is(
  .is-smart-panel-card-hovered,
  .is-courses-desktop-current,
  .is-selected,
  [aria-selected="true"],
  [data-selected="true"],
  [data-selected="1"],
  [data-menu-open="true"]
) > .student-courses-panel-card__rail {
  width: 16px !important;
  opacity: 1 !important;
  transform: none !important;
  box-shadow:
    8px 0 24px color-mix(in srgb, var(--ui-accent-card-color, var(--courses-panel-accent, var(--student-course-accent, #38bdf8))) 38%, transparent),
    inset -1px 0 0 color-mix(in srgb, white 28%, transparent) !important;
}

@media (hover: hover) and (pointer: fine) {
  body :is(.ui-accent-card, .smart-panel-frame):is(:hover, :focus-visible) > .ui-accent-card__rail,
  body.courses-panel-active .student-courses-panel-root .student-courses-panel-card:is(:hover, :focus-visible) > .student-courses-panel-card__rail {
    width: 16px !important;
    opacity: 1 !important;
    transform: none !important;
    box-shadow:
      8px 0 24px color-mix(in srgb, var(--ui-accent-card-color, var(--courses-panel-accent, var(--student-course-accent, #38bdf8))) 38%, transparent),
      inset -1px 0 0 color-mix(in srgb, white 28%, transparent) !important;
  }
}

@media (max-width: 1023px), (hover: none), (pointer: coarse) {
  body :is(.ui-accent-card, .smart-panel-frame) > .ui-accent-card__rail,
  body.courses-panel-active .student-courses-panel-root .student-courses-panel-card > .student-courses-panel-card__rail {
    width: 6px !important;
    opacity: .9 !important;
  }

  body :is(.ui-accent-card, .smart-panel-frame):is(.is-selected, .is-courses-desktop-current, [aria-selected="true"], [data-selected="true"], [data-selected="1"], [data-menu-open="true"]) > .ui-accent-card__rail,
  body.courses-panel-active .student-courses-panel-root .student-courses-panel-card:is(.is-selected, .is-courses-desktop-current, [aria-selected="true"], [data-selected="true"], [data-selected="1"], [data-menu-open="true"]) > .student-courses-panel-card__rail {
    width: 12px !important;
  }
}

@media (max-width: 767px) {
  body :is(.ui-accent-card, .smart-panel-frame) > .ui-accent-card__rail,
  body.courses-panel-active .student-courses-panel-root .student-courses-panel-card > .student-courses-panel-card__rail {
    border-radius: 22px 0 0 22px !important;
  }
}