/* /public_html/assets/css/dashboard-courses-guardians.css */

#dashboard-view{
  position: relative;
  z-index: 0;
}

/* ===== Cartes "Cours" dans le panel admin ===== */

.courses-panel-list {
    margin-top: 0; /* l’espace est géré par .panel-body */
}

/* Carte cours */
.course-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    background: color-mix(in srgb, var(--color-surface) 90%, #ffffff 10%);
    border: 1px solid color-mix(
        in srgb,
        var(--course-style-color, var(--color-border-subtle)) 60%,
        transparent
    );
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.20);
    cursor: pointer;

    transition:
        transform 0.22s ease-out,
        box-shadow 0.22s ease-out,
        background 0.22s ease-out,
        border-color 0.22s ease-out;
        
    --card-glow-color: var(--course-style-color, var(--color-accent));
    --card-activation-color: var(--course-style-color, var(--color-accent));
}

.course-card-header {
    margin-bottom: var(--space-3);
}

.course-card-body {
    flex: 1 1 auto;
}

.course-card-footer {
    margin-top: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

/* Badge "X élèves" */
.course-students-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--color-border-subtle);
    background: color-mix(in srgb, var(--color-surface) 86%, var(--course-style-color, var(--color-accent)) 14%);
    color: var(--color-text);
    font-size: 0.78rem;
    font-weight: 650;
    white-space: nowrap;
}

.course-students-badge i {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* ===== Modal "Vue du cours" ===== */
.course-view-summary {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: 0.9rem;
    background: color-mix(in srgb, var(--color-surface) 90%, var(--badge-color, var(--color-accent)) 10%);
}

.course-view-summary-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.course-view-summary-grid {
    display: grid;
    gap: 0.5rem;
}

.course-view-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-muted);
}

.course-view-row i {
    width: 1.2rem;
    display: inline-flex;
    justify-content: center;
    opacity: 0.9;
}

/* Badge doré "Gala" */
.course-gala-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.18rem 0.9rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background-image: var(--gala-badge-bg);
    border: 1px solid var(--gala-badge-border);
    color: var(--gala-badge-text);
    box-shadow: var(--gala-badge-shadow);
    white-space: nowrap;
}

.course-title-line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    justify-content: space-between;
    flex-wrap: wrap;
}

.course-style-name {
    font-weight: 700;
    font-size: 1rem;
}

/* Icône de style dans le titre de la carte cours */
.course-style-name i{
  font-size: 0.75em;     /* ← augmente/diminue ici */
  margin-left: .35em;
  opacity: .9;
  transform: translateY(1px); /* alignement visuel */
}

.course-level-badge {
    /* juste un petit tweak typographique, tout le visuel vient de .style-badge */
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.72rem;
    white-space: nowrap;
}

/* Lignes d’infos (horaire, prof, salle) */
.course-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.9rem;
}

.course-meta-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-muted);
}

.course-meta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    flex-shrink: 0;
    opacity: 0.9;
}

.course-meta-icon i {
    font-size: 0.95rem;
}

.course-meta-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Grille responsive du panel */
@media (min-width: 768px) {
    .courses-panel-list .dashboard-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .courses-panel-list .dashboard-layout {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* =========================================================
   PANEL COURS — FILTRES (layout) — anti-collision mobile
   ========================================================= */

.courses-filters{
  display: grid;
  gap: 6px;
  align-items: start;
  justify-items: center;
  width: 100%;

  /* taille chips fluide + plancher bas pour petits écrans */
  --chip-size: clamp(26px, 9vw, 38px);
}

/* Rangées (styles / profs) */
.courses-filter-row{
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-width: 0;

  /* ✅ gap mini garanti */
  gap: clamp(6px, 2.2vw, 10px);

  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;

  /* ✅ padding “safe” pour éviter coupe des rings */
  padding-left: max(10px, env(safe-area-inset-left));
  padding-right: max(10px, env(safe-area-inset-right));
  padding-block: 8px;

  scroll-snap-type: x proximity;
}
.courses-filter-row::-webkit-scrollbar{ display:none; }

/* Chaque chip snap un peu (agréable au swipe) */
.courses-filter-row .chip{
  scroll-snap-align: center;
}

.courses-filters{
  --chip-size: clamp(
    22px,
    calc(22px + (100vw - 320px) * 0.1),
    38px
  );

  --chip-gap: clamp(
    10px,
    calc(10px + (100vw - 320px) * 0.030769),
    12px
  );
}

.courses-filter-row{
  gap: 10px;
}

/* label discret */
.courses-filter-label{
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted, var(--theme-text-muted));
  opacity: .85;
  margin-right: 2px;
}
/* ===== ASSOCIATION RESPONSABLES / ÉLÈVES ===== */

.guardian-card .guardian-card-main {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.guardian-avatar,
.guardian-avatar-fallback {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.guardian-card-footer {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    opacity: 0.9;
}

.guardian-picker-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.guardian-picker-select {
    flex: 1;
    min-width: 0;
}

.guardian-picker-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.guardian-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--theme-border-subtle);
    background: color-mix(in srgb, var(--theme-surface) 90%, var(--theme-primary) 10%);
    font-size: 0.85rem;
}

.guardian-chip-remove {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
}

/* ===== VUE "MES ÉLÈVES" (RESPONSABLE) ===== */

.guardian-students-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.guardian-student-card {
    border-radius: 1.1rem;
    padding: 1rem;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-subtle);
}

.guardian-student-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.75rem;
}

.guardian-student-name {
    font-size: 1rem;
    font-weight: 600;
}

.guardian-student-count {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.guardian-student-empty {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-style: italic;
}

/* ===== Admin : gestion des cours d'un élève ===== */

.student-courses-admin {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-subtle);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.student-courses-admin-header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.student-courses-admin-title {
    font-size: 0.95rem;
    margin: 0;
}

.student-courses-admin-subtitle {
    font-size: 0.85rem;
    margin: 0;
    color: var(--color-text-muted);
}

.student-courses-admin-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

@media (min-width: 720px) {
    .student-courses-admin-columns {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    }
}

.student-courses-block-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.5rem;
    color: var(--color-text-muted);
}

.student-courses-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.student-course-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.6rem;
    background: color-mix(in srgb, var(--color-surface-soft) 90%, transparent);
}

.student-course-label {
    font-size: 0.85rem;
}

.student-course-remove-btn {
    white-space: nowrap;
}

.student-courses-add-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.student-courses-select {
    width: 100%;
}

@media (min-width: 480px) {
    .student-courses-add-row {
        flex-direction: row;
        align-items: center;
    }

    .student-courses-select {
        flex: 1;
        min-width: 0;
    }
}

.student-courses-add-help {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.consent-toggle-group {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.consent-toggle-pill {
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--theme-border-subtle, #1f2937);
    background: transparent;
    cursor: pointer;
    font-size: 0.9rem;
}

.consent-toggle-pill.is-active {
    background: var(--theme-primary-soft, rgba(248, 113, 113, 0.18));
    border-color: var(--theme-primary, #f97373);
}

.consent-toggle-status {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* =================================================================== */
/* ====================== PANEL ÉLÈVES – STYLING ===================== */
/* =================================================================== */

/* Bouton "Ajouter un élève" : pill avec glow en sombre */

.panel-add-student-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border-radius: 999px;
    padding-inline: 1.3rem;
    padding-block: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
    transition:
        transform 0.16s ease-out,
        box-shadow 0.16s ease-out,
        background 0.16s ease-out,
        filter 0.16s ease-out;
}

.panel-add-student-btn i {
    font-size: 1rem;
}

.panel-add-student-btn:hover {
    transform: none;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.26);
}

/* Glow différent selon le thème (light / dark) */
html[data-theme="light"] .panel-add-student-btn {
    box-shadow:
        0 6px 14px rgba(15, 23, 42, 0.16),
        0 0 0 1px color-mix(in srgb, var(--theme-primary) 40%, transparent);
}

html[data-theme="dark"] .panel-add-student-btn {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--theme-primary) 65%, transparent),
        0 0 18px color-mix(in srgb, var(--theme-primary) 70%, transparent);
    filter: saturate(1.1);
}

html[data-theme="dark"] .panel-add-student-btn:hover {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--theme-primary) 85%, transparent),
        0 0 26px color-mix(in srgb, var(--theme-primary) 90%, transparent);
}

/* =========================================================
   PANEL ÉLÈVES — LAYOUT FILTRES (Search + Sort / Chips)
   ========================================================= */

/*.student-filters{
  display: grid;
  gap: 0.75rem;
  align-items: center;
  width: 100%;

  grid-template-columns: 1fr 260px;
  grid-template-areas:
    "search sort"
    "chips  chips";
}*/

.student-search-field{ grid-area: search; min-width: 0; }
.student-sort-field  { grid-area: sort;  min-width: 0; }
.student-filter-chips{ grid-area: chips; min-width: 0; }

/* Mobile : on empile (optionnel, mais souvent mieux) */
@media (max-width: 560px){
  .student-filters{
    grid-template-columns: 1fr;
    grid-template-areas:
      "search"
      "sort"
      "chips";
  }
}

/* même couleur pour le texte et le placeholder, clair ET sombre */
.student-search-input::placeholder {
    color: var(
        --dashboard-input-placeholder-color,
        var(--theme-text-muted)
    );
}

.student-search-input {
    width: 100%;
    padding-left: 2.1rem;
}

.student-sort-field {
    flex: 0 0 190px;
}

/* --- Panel élèves : cartes --- */

.student-card {
    display: flex;
    flex-direction: column;
}

.student-card-main {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.student-card-header {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
}

.student-card-title-block {
    min-width: 0;
}

.student-name {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.15rem;
}

.student-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--theme-text-muted);
}

.student-guardians-preview {
    font-size: 0.82rem;
    color: var(--theme-text-muted);
}

.student-guardians-empty {
    font-style: italic;
}

/* icônes d’autorisations */

.student-consent-icons {
    display: inline-flex;
    gap: 0.3rem;
}

.student-consent-icon {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    background: color-mix(in srgb, var(--theme-surface) 80%, var(--theme-bg-soft) 20%);
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.45);
    opacity: 0.9;
}

.student-consent-icon i {
    pointer-events: none;
}

/* états */
.student-consent-icon.consent-allowed {
    color: #22c55e;
}

.student-consent-icon.consent-denied {
    color: #ef4444;
}

.student-consent-icon.consent-unknown {
    opacity: 0.45;
}

/* ---- Filter chip tones ---- */
.filter-chip--ok    { --chip-accent: #22c55e; } /* vert */
.filter-chip--no    { --chip-accent: #ef4444; } /* rouge */
.filter-chip--male  { --chip-accent: #38bdf8; } /* bleu */
.filter-chip--female{ --chip-accent: #fb7185; } /* rose */

.filter-chip.filter-chip--icon{
  border-color: color-mix(in srgb, var(--chip-accent) 22%, rgba(148,163,184,0.35));
  background: color-mix(in srgb, var(--chip-accent) 6%, rgba(255,255,255,0.06));
}

.filter-chip.filter-chip--icon.is-active{
  border-color: color-mix(in srgb, var(--chip-accent) 70%, rgba(148,163,184,0.35));
  background: color-mix(in srgb, var(--chip-accent) 16%, rgba(255,255,255,0.06));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip-accent) 22%, transparent);
}

.filter-chip.filter-chip--icon.is-active i{
  color: var(--chip-accent);
}

html[data-theme="dark"] .filter-chip.filter-chip--icon.is-active{
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--chip-accent) 20%, transparent),
    0 0 18px color-mix(in srgb, var(--chip-accent) 32%, transparent);
}

/* contact & compteur de cours */

.student-card-footer {
    margin-top: 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.75rem;
}

.student-contact {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.85rem;
}

.student-contact-line {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem; /* espace entre icône et texte */
}

.student-courses-count {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--theme-text-muted);
    white-space: nowrap;
}

.student-profile-name{
  display:flex;
  align-items:center;
  gap:.55rem;
}

.student-meta-dot{
  display:inline-block;
  margin: 0 .35rem;
  opacity: .75;
  font-weight: 900;
}

.student-sex-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  transform: translateY(1px);
}

.student-sex-icon i{
  font-size: 1.05rem;
  font-weight: 900;
}

/* couleurs */
.student-sex-icon--male{ color:#38bdf8; }
.student-sex-icon--female{ color:#fb7185; }
.student-sex-icon--unknown{ color:#94a3b8; }

/* glow ++ en dark */
html[data-theme="dark"] .student-sex-icon--male{
  text-shadow:
    0 0 10px rgba(56,189,248,.55),
    0 0 18px rgba(56,189,248,.35);
}
html[data-theme="dark"] .student-sex-icon--female{
  text-shadow:
    0 0 10px rgba(251,113,133,.55),
    0 0 18px rgba(251,113,133,.35);
}
html[data-theme="dark"] .student-sex-icon--unknown{
  text-shadow: 0 0 10px rgba(148,163,184,.30);
}

/* =========================================================
   PANEL ÉLÈVES — FILTRES EN CHIPS (like panel Cours)
   Double bordure fine/épaisse + transition lente + centré
   ========================================================= */

/* On veut les chips centrées dans le header, en 1 ligne, responsive */
.student-filter-chips{
  --student-chip-size: clamp(30px, 3.4vw, 38px);
  --student-chip-gap:  clamp(6px, 1.2vw, 10px);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--student-chip-gap);

  width: 100%;
  min-width: 0;

  flex-wrap: nowrap;       /* ✅ 1 seule ligne */
  overflow-x: auto;        /* ✅ scroll si trop */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;   /* Firefox */
  padding-inline: 10px;
  padding-block: 6px;      /* safe pour rings */
}

.student-filter-chips::-webkit-scrollbar{ display:none; }

/* Dans la grid du header : les chips prennent toute la largeur (centrées) */
.student-filter-chips{
  grid-column: 1 / -1;
  justify-self: center;
}

/* Chips = taille fluide */
.student-filter-chips .filter-chip{
  min-width: var(--student-chip-size) !important;
  min-height: var(--student-chip-size) !important;
  width: var(--student-chip-size) !important;
  height: var(--student-chip-size) !important;

  border-radius: 999px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* IMPORTANT : on ne dépend plus de la bordure native */
  border-color: transparent !important;
  background: transparent; /* le fond est très léger via ::before optionnel si tu veux */

  position: relative;
  overflow: visible !important;
  outline: none;

  transform: translateZ(0);
  will-change: transform, box-shadow, filter;
}

/* Neutraliser les styles génériques .filter-chip--icon DANS les chips élèves */
.student-filter-chips .filter-chip.filter-chip--icon{
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

.student-filter-chips .filter-chip.filter-chip--icon.is-active{
  background: transparent !important;
  box-shadow: none !important;
}

/* Un léger fond discret (optionnel mais sympa) */
.student-filter-chips .filter-chip::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events:none;
  z-index: 1;

  background: color-mix(in srgb, var(--chip-accent, rgba(148,163,184,0.55)) 6%, rgba(255,255,255,0.06));
  opacity: .95;
}

/* Double ring collé (fine/fine OFF, épaisse/épaisse ON) */
.student-filter-chips .filter-chip::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events:none;
  z-index: 5;

  box-shadow:
    0 0 0 var(--stu-inner-w, 1px) var(--stu-inner-color, rgba(148,163,184,0.25)),
    0 0 0 calc(var(--stu-inner-w, 1px) + var(--stu-outer-w, 1px))
      var(--stu-outer-color, rgba(148,163,184,0.55));

  transition: box-shadow 520ms ease, filter 520ms ease;
}

/* OFF : 1px + 1px */
.student-filter-chips .filter-chip:not(.is-active){
  --stu-inner-w: 1px;
  --stu-outer-w: 1px;

  --stu-inner-color: rgba(148,163,184,0.22);
  --stu-outer-color: rgba(148,163,184,0.50);
}

/* ON : 2px + 2px (tu peux monter à 3px si tu veux + “wow”) */
.student-filter-chips .filter-chip.is-active{
  --stu-inner-w: 2px;
  --stu-outer-w: 2px;

  --stu-inner-color: color-mix(in srgb, var(--chip-accent) 70%, rgba(255,255,255,0.10));
  --stu-outer-color: color-mix(in srgb, var(--chip-accent) 90%, rgba(148,163,184,0.10));

  filter: saturate(1.06);
}

/* Dark : un poil plus doux OFF */
html[data-theme="dark"] .student-filter-chips .filter-chip:not(.is-active){
  --stu-inner-color: rgba(148,163,184,0.16);
  --stu-outer-color: rgba(148,163,184,0.35);
}

/* Icône : gris OFF / accent ON, transition lente */
.student-filter-chips .filter-chip i{
  position: relative;
  z-index: 2;
  transition: color 220ms ease, opacity 220ms ease, filter 220ms ease;
  font-size: calc(var(--student-chip-size) * 0.48);
  line-height: 1;
}

/* OFF => gris */
.student-filter-chips .filter-chip:not(.is-active) i{
  color: color-mix(in srgb, var(--color-text-muted, #94a3b8) 85%, transparent);
  opacity: .85;
  filter: saturate(0.65);
}

/* ON => couleur accent */
.student-filter-chips .filter-chip.is-active i{
  color: var(--chip-accent);
  opacity: 1;
  filter: saturate(1.15);
}

html[data-theme="dark"] .student-filter-chips .filter-chip:not(.is-active) i{
  color: rgba(148,163,184,0.75);
  opacity: .8;
}

/* Tones (accents) */
.filter-chip--ok     { --chip-accent: #22c55e; } /* vert */
.filter-chip--no     { --chip-accent: #ef4444; } /* rouge */
.filter-chip--male   { --chip-accent: #38bdf8; } /* bleu */
.filter-chip--female { --chip-accent: #fb7185; } /* rose */

/* Nouveaux tones */
.filter-chip--warn   { --chip-accent: #f59e0b; } /* allergies */
.filter-chip--med    { --chip-accent: #a855f7; } /* conditions */

/* =========================================================
   CARTES ÉLÈVES — chips Allergies / Conditions
   (sous les icônes premiers soins / prises de vue)
   ========================================================= */

.student-consent-block{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

.student-health-chips{
  display: flex;
  justify-content: flex-end;
  gap: 0.35rem;
}

/* chips icône-only */
.student-health-chip{
  --health-size: 26px;

  width: var(--health-size);
  height: var(--health-size);
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid color-mix(in srgb, var(--chip-accent) 32%, rgba(148,163,184,0.35));
  background: color-mix(in srgb, var(--chip-accent) 10%, rgba(255,255,255,0.06));
  color: var(--chip-accent);

  box-shadow: 0 0 0 1px rgba(148,163,184,0.18);
}

.student-health-chip i{
  font-size: 0.85rem;
  opacity: .95;
}

.student-health-chip--allergies{ --chip-accent: #f59e0b; }
.student-health-chip--medical  { --chip-accent: #a855f7; }

html[data-theme="dark"] .student-health-chip{
  background: color-mix(in srgb, var(--chip-accent) 12%, rgba(2,6,23,0.18));
  box-shadow: 0 0 0 1px rgba(148,163,184,0.12);
}

/* =========================================================
   PANEL ÉLÈVES — Filtres : top row (search+sort) + chips dessous
   ========================================================= */

.student-filters{
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
}

/* Ligne 1 */
.student-filters-top{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
}

.student-search-field{
  flex: 1 1 auto;
  min-width: 0;
}

.student-sort-field{
  flex: 0 0 260px;
  min-width: 0;
}

/* si ton listCombo wrappe le select, on force le full width */
.student-sort-field > *{
  width: 100%;
}

/* Mobile : on garde search + actions sur 1 ligne */
@media (max-width: 560px){
  .student-filters-top{
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
  }

  .student-search-field{
    flex: 1 1 auto;
    min-width: 0;
  }

  .student-actions{
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

.student-filters-top{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}

.student-search-field{
  flex:1 1 auto;
  min-width:0;      /* critique pour éviter les débordements */
}

.student-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
}

/* Sécurité anti-“ballon” : empêche tout étirement vertical improbable */
.student-search-field.ui-search{
  align-self:center;
  max-height:56px;
}