/* /public_html/assets/css/dashboard-components.css */

/* =========================================================
   HEADER COMMUN PANELS (sticky desktop + mobile)
   =======================================================*/

  
:root{
  --panel-header-gap: var(--space-3);
}

@media (max-width: 719px){
  :root{
    --panel-header-gap: var(--space-2);
  }
}

.panel-header-common {
  position: sticky;
  top: var(--app-navbar-h);
  z-index: 40;

  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  margin-top: 0;

  padding: var(--space-3);

  /* ✅ LA clé : espace garanti entre header et contenu */
  margin-bottom: var(--panel-header-gap);

  border-bottom: 1px solid var(--color-border-subtle);
  background: color-mix(in srgb, var(--color-surface-soft) 88%, transparent);
  backdrop-filter: blur(10px);
}

html[data-theme="dark"] .panel-header-common {
  background: color-mix(in srgb, #020617 35%, var(--color-surface) 65%);
  border-bottom-color: rgba(148, 163, 184, 0.22);
}

/* ✅ Exception : planning hebdo (zéro espace sous le header) */
.panel-header-common:has(+ * .planning-public-day-header),
.panel-header-common:has(+ * .planning-public-grid),
.panel-header-common:has(+ * .planning-public-week),
.panel-header-common:has(+ * .planning-public-days){
  margin-bottom: 0;
}

/* on recentre les “rows” du header */
.panel-header-common .panel-header-row{
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.panel-header-common .panel-header-row--extras{
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.panel-header-row--primary {
  display: grid;
  grid-template-columns: 1fr minmax(0, 2fr) 1fr;
  align-items: center;
  gap: var(--space-3);
}

.panel-header-col--left { justify-self: start; }
.panel-header-col--right { justify-self: end; }

/* Quand on a plusieurs actions à droite (ex: imprimer + ajouter) */
.panel-header-actions{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.panel-header-actions > *{
  flex: 0 0 auto;
}

.panel-header-center {
  text-align: center;
  min-width: 0;
}

.panel-header-title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.1;
}

.panel-header-subtitle {
  margin: 0.25rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

.panel-header-row--extras {
  margin-top: var(--space-3);
}

.panel-header-common .btn--back,
.panel-header-common .btn--add {
  height: var(--ui-btn-h);
}

/* ===========================
   Panel header — labels responsive
   (desktop = full, mid = short, mobile = none)
   =========================== */

/* base: desktop */
.panel-header-common .btn__label--full{ display: inline !important; }
.panel-header-common .btn__label--short{ display: none !important; }

/* mid: 720–900px => short */
@media (max-width: 900px) and (min-width: 720px){
  .panel-header-common .btn__label--full{ display: none !important; }
  .panel-header-common .btn__label--short{ display: inline !important; }
}

/* mobile: <720 => aucun texte (tu as déjà ça, mais on bétonne) */
@media (max-width: 719px){
  .panel-header-common .btn__label--full,
  .panel-header-common .btn__label--short{ display: none !important; }
}

/* -------- Mobile comportement -------- */
@media (max-width: 719px) {
  .panel-header-common {
    top: var(--app-navbar-h-mobile);
    margin-top: 0 !important;
  }

  .panel-header-common .btn__label { display: none; }

  .panel-header-title { font-size: 0.95rem; }
  .panel-header-subtitle { display: none; }

  .panel-header-common.is-scrolled {
    background: color-mix(in srgb, var(--color-surface-soft) 74%, transparent);
  }

  html[data-theme="dark"] .panel-header-common.is-scrolled {
    background: color-mix(in srgb, var(--color-surface) 62%, transparent);
  }

  .panel-header-common.is-scrolled .panel-header-center {
    opacity: 1;
    max-height: none;
    overflow: visible;
    transform: none;
    pointer-events: auto;
  }

  .panel-header-center {
    transition: opacity 160ms ease-out, transform 160ms ease-out, max-height 160ms ease-out;
  }
}

/* ================================================
   BADGE DE STYLE GÉNÉRIQUE (cours / feuilles / planning)
   Utilisation : 
   <span class="style-badge" style="--badge-color:#f97316">Jazz</span>
   ou version compacte : style-badge style-badge--compact
   ================================================= */

.style-badge,
.attendance-style-badge {
    --badge-color: #fbbf24;

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

    padding: 0.25rem 1.1rem;
    border-radius: 999px;

    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    white-space: nowrap;
}

.style-badge--compact,
.attendance-style-badge--compact {
    padding: 0.15rem 0.8rem;
    font-size: 0.68rem;
}

/* MODE CLAIR */

html:not([data-theme="dark"]) .style-badge,
html:not([data-theme="dark"]) .attendance-style-badge {
    color: #0f172a;
    border: 1px solid rgba(15, 23, 42, 0.08);

    background:
        radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.38), transparent 70%),
        var(--badge-color);

    box-shadow:
        0 0 20px color-mix(in srgb, var(--badge-color) 80%, transparent);
}

html:not([data-theme="dark"]) .style-badge::before,
html:not([data-theme="dark"]) .attendance-style-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

/* MODE SOMBRE */

html[data-theme="dark"] .style-badge,
html[data-theme="dark"] .attendance-style-badge {
    color: #f9fafb;

    background:
        radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.14), transparent 60%),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--badge-color) 20%, transparent 80%) 0%,
            color-mix(in srgb, var(--badge-color) 45%, transparent 55%) 100%
        );

    border: 1px solid var(--badge-color);
    box-shadow:
        0 0 20px color-mix(in srgb, var(--badge-color) 80%, transparent);
}

html[data-theme="dark"] .style-badge::before,
html[data-theme="dark"] .attendance-style-badge::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    z-index: -1;
    opacity: 0.9;
    filter: blur(10px);
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.15), transparent 55%),
        radial-gradient(circle at 50% 50%, var(--badge-color), transparent 60%);
}

/* =========================================================
   RICH PROMPT TOKENS — EXACTEMENT le look .style-badge
   - pas de background/border/box-shadow custom
   - on ne touche qu’à la typo/espacement dans l’input
   ========================================================= */

.rp-token.style-badge{
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 650;
  user-select: none;
  cursor: default;
}

.rp-token.style-badge .rp-token__prefix,
.rp-token.style-badge .rp-token__label{
  color: inherit;
}

.rp-token.style-badge .rp-token__prefix{
  margin-right: 0.35rem;
  opacity: 0.9;
}


/* ================================================
   BADGES RÔLES (réutilise style-badge)
   Usage:
   <span class="style-badge style-badge--compact role-badge role-badge--admin">Admin</span>
   ================================================= */

.role-badge { 
    /* rien d’obligatoire : tout est géré par .style-badge */
}

/* On met juste la variable --badge-color selon le rôle */
.role-badge--admin    { --badge-color: #f97373; } /* vibe rouge pastille */
.role-badge--teacher  { --badge-color: #fb923c; } /* orange */
.role-badge--guardian { --badge-color: #4ade80; } /* vert */
.role-badge--student  { --badge-color: #38bdf8; } /* bleu */
.role-badge--committee { --badge-color: #c084fc; } /* violet */

/* ================================================
   TOGGLE SEGMENTÉ (3 à 4 positions)
   Utilisation générique :

   <div class="segmented-toggle segmented-toggle--compact">
       <button class="segmented-toggle-btn is-present  is-active">P</button>
       <button class="segmented-toggle-btn is-absent">A</button>
       <button class="segmented-toggle-btn is-late">R</button>
       <button class="segmented-toggle-btn is-unknown">?</button>
   </div>

   - .is-active : état sélectionné (géré en JS)
   - variantes couleurs : .is-present / .is-absent / .is-late / .is-unknown
   ================================================= */

.segmented-toggle {
    --segmented-bg: rgba(148, 163, 184, 0.14);
    --segmented-border: rgba(148, 163, 184, 0.55);

    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border-radius: 999px;
    background: var(--segmented-bg);
    box-shadow: 0 0 0 1px var(--segmented-border);
    gap: 2px;
}

.segmented-toggle--compact {
    padding: 2px;
}

html[data-theme="dark"] .segmented-toggle {
    --segmented-bg: rgba(15, 23, 42, 0.96);
    --segmented-border: rgba(148, 163, 184, 0.7);
}

.segmented-toggle-btn {
    border: none;
    border-radius: 999px;
    padding: 4px 9px;
    min-width: 28px;
    font-size: 0.78rem;
    line-height: 1;

    background: transparent;
    color: #64748b;              /* texte plus neutre */
    opacity: 0.65;               /* boutons “repos” plus discrets */

    cursor: pointer;
    transition:
        background-color 140ms ease-out,
        color 140ms ease-out,
        box-shadow 140ms ease-out,
        transform 80ms ease-out,
        opacity 140ms ease-out;
}

.segmented-toggle--compact .segmented-toggle-btn {
    padding-inline: 7px;
    font-size: 0.75rem;
}

html[data-theme="dark"] .segmented-toggle-btn {
    color: #9ca3af;
}

.segmented-toggle-btn:hover {
    transform: translateY(-0.5px);
}

/* État actif générique : contraste MAX */

.segmented-toggle-btn.is-active {
    background: var(--segmented-active-bg, #0ea5e9);
    color: var(--segmented-active-text, #f9fafb);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--segmented-active-bg) 65%, transparent),
        0 6px 16px color-mix(in srgb, var(--segmented-active-bg) 45%, transparent);
    opacity: 1;
    font-weight: 700;
}

/* Variantes de couleur (P / A / R / ?) */

.segmented-toggle-btn.is-present {
    --segmented-active-bg: #16a34a;
    --segmented-active-text: #f9fafb;
}

.segmented-toggle-btn.is-absent {
    --segmented-active-bg: #ef4444;
    --segmented-active-text: #f9fafb;
}

.segmented-toggle-btn.is-late {
    --segmented-active-bg: #f97316;
    --segmented-active-text: #111827;
}

.segmented-toggle-btn.is-unknown {
    --segmented-active-bg: #0ea5e9;
    --segmented-active-text: #f9fafb;
}

/* petit plus accessibilité clavier */

.segmented-toggle-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ================================================
   FILTRES STANDARD (dashboard)
   Objectif : design identique partout (calendrier, présence, etc.)
   Classes :
   - .dash-filters
   - .dash-filter-group + label
   - .dash-filter-input (select / input)
   - .dash-filter-actions (zone boutons / navigation)
   ================================================= */

.dash-filters {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

@media (min-width: 720px) {
    .dash-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: end;
    }
}

/* Groupe label + input */
.dash-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
}

.dash-filter-group label {
    font-weight: 500;
}

/* Input standard (select, input text, etc.) */
.dash-filter-input {
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    padding: 0.4rem 0.6rem;
    background: var(--color-surface-soft);
    font-size: 0.9rem;
    color: var(--color-text);
}

.dash-filter-input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--theme-primary) 55%, var(--color-border-subtle));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--theme-primary) 35%, transparent),
        0 18px 45px rgba(15, 23, 42, 0.18);
}

/* Checkbox inline propre */
.dash-filter-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.15rem;
    color: var(--color-text);
}

.dash-filter-inline input[type="checkbox"] {
    transform: translateY(1px);
}

/* Zone actions (ex: semaine prev/label/next) */
.dash-filter-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

@media (max-width: 719px) {
    .dash-filter-actions {
        justify-content: space-between;
    }
}

/* Variante : une "ligne actions" qui prend toute la largeur sur desktop */
@media (min-width: 720px) {
    .dash-filter-actions--span {
        grid-column: 1 / -1;
    }
}

/* Formulaires */
.ui-form.is-loading {
  pointer-events: none;
  opacity: 0.65;
}

.ui-skeleton {
  height: 120px;
  border-radius: var(--radius-md);
  background:
    linear-gradient(
      100deg,
      rgba(148,163,184,0.15) 40%,
      rgba(148,163,184,0.30) 50%,
      rgba(148,163,184,0.15) 60%
    );
  background-size: 200% 100%;
  animation: skeleton-move 1.2s infinite;
}

@keyframes skeleton-move {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ==========================
   FORM VALIDATION
   ========================== */

.ui-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ui-form-error {
  font-size: 0.75rem;
  color: #ef4444;
}

.ui-form-invalid .dash-filter-input {
  border-color: #ef4444;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35);
}

html[data-theme="dark"] .ui-form-invalid .dash-filter-input {
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.65),
    0 0 12px rgba(239, 68, 68, 0.35);
}

/* ===== Boutons panels : look "pilule soft" (comme capture 1) ===== */

/* secondaire (retour/fermer) */
.btn.btn--secondary,
.btn-secondary{
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 80%, #94a3b8 20%);
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,0.55), transparent 55%),
    color-mix(in srgb, var(--color-surface-soft) 92%, #ffffff 8%);
  color: var(--color-text);
  box-shadow: var(--shadow-subtle);
}

/* dark : plus "glass" */
html[data-theme="dark"] .btn.btn--secondary,
html[data-theme="dark"] .btn-secondary{
  background: color-mix(in srgb, var(--color-surface) 80%, #020617 20%);
  border-color: rgba(148, 163, 184, 0.55);
}

/* CTA rose (Ajouter) */
.btn.btn--cta{
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: linear-gradient(135deg, #fb7185, #f43f5e);
  color: #ffffff;
  box-shadow: 0 14px 34px rgba(244, 63, 94, 0.35);
}

html[data-theme="dark"] .btn.btn--cta{
  box-shadow:
    0 0 0 1px rgba(244, 63, 94, 0.55),
    0 18px 45px rgba(244, 63, 94, 0.25);
}

/* ===== Modal : cours élève (toggle list) ===== */

.student-courses-modal-list{
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: grid;
  gap: var(--space-2);
}

.student-courses-modal-row{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface-soft) 88%, transparent);
}

.student-courses-modal-title{
  font-size: 0.92rem;
  line-height: 1.25;
}

/* ================================================
   CAPSULES "PERSONNES ASSOCIÉES" (élèves / responsables)
   Repose sur .style-badge (même look que rôles)
   ================================================= */

.person-pill {
  text-transform: none;     /* on garde Prénom Nom */
  letter-spacing: 0.02em;
  font-weight: 650;
}

/* Couleurs : bleu / rose / gris */
.person-pill--male   { --badge-color: #38bdf8; } /* sky-400 */
.person-pill--female { --badge-color: #fb7185; } /* rose-400 */
.person-pill--unk    { --badge-color: #94a3b8; } /* slate-400 */

/* Listes associées : gap + wrap + pas de puces */
.associated-pill-list {
  list-style: none;
  margin: 0.0rem 0 0;  /* <= le “petit espace” sous le titre */
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;          /* espace entre capsules */
}

.associated-pill-list li {
  margin: 0;
  padding: 0;
}

/* Bouton-lien qui contient la capsule (garde ton clic) */
.associated-pill-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.associated-pill-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--theme-primary) 60%, transparent);
  outline-offset: 3px;
  border-radius: 999px;
}

/* =========================================================
   FIX ULTIME — ESPACE GARANTI SOUS LE HEADER COMMUN */

/* Exception : PLANNING HEBDO => pas de gap avant les headers jours */
.dash-panel-shell:has(> .panel-header-common) > *:has(.planning-public-days),
.dash-panel-shell:has(> .panel-header-common) > *:has(.planning-public-week),
.dash-panel-shell:has(> .panel-header-common) > *:has(.planning-public-grid),
#dashboard-view > *:has(.planning-public-days),
#dashboard-view > *:has(.planning-public-week),
#dashboard-view > *:has(.planning-public-grid){
  padding-top: 0 !important;
}

/* On stoppe le margin-top négatif quand on est en mode panel sticky */
#dashboard-view.section{
  margin-top: 0 !important;
}

/* =========================================================
   HEADER EXTRAS — alignement parfait avec la row principale
   ========================================================= */

.panel-header-common [data-panel-header-extras]{
  margin-top: var(--space-3, 12px);

  /* Même “container” que .panel-header-row */
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-4);

  width: 100%;
  box-sizing: border-box;
}

/* On évite tout centrage automatique parasite */
.panel-header-common .panel-header-extras{
  display: block;
}

/* =========================================================
   PANEL HEADER — boutons en chips rondes sur mobile
   + Add = CTA gradient (comme bouton original)
   ========================================================= */

/* Par défaut : full visible, short caché */
.btn__label--short{ display: none; }

/* Entre desktop et mobile : on compacte à partir de 900px et en dessous */
@media (max-width: 900px) and (min-width: 720px){
  .panel-header-common .btn__label--full{ display: none; }
  .panel-header-common .btn__label--short{ display: inline; }
}

@media (max-width: 719px){
  .panel-header-common .btn--back,
  .panel-header-common .btn--add{
    width: 44px;
    height: 44px;
    min-width: 44px;

    padding: 0 !important;
    border-radius: 999px !important;

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

    background: color-mix(in srgb, var(--color-surface) 88%, rgba(255,255,255,0.12));
    box-shadow: 0 10px 24px rgba(15,23,42,0.14);
  }

  /* ✅ CTA : "Ajouter" reprend le dégradé + texte blanc */
  .panel-header-common .btn--add.btn--cta{
    background: linear-gradient(135deg, #fb7185, #f43f5e) !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    box-shadow: 0 14px 34px rgba(244, 63, 94, 0.35);
  }

  html[data-theme="dark"] .panel-header-common .btn--add.btn--cta{
    box-shadow:
      0 0 0 1px rgba(244, 63, 94, 0.55),
      0 18px 45px rgba(244, 63, 94, 0.25);
  }

  /* cache le texte */
  .panel-header-common .btn--back .btn__label,
  .panel-header-common .btn--add .btn__label{
    display: none !important;
  }

  /* centre l’icône */
  .panel-header-common .btn--back .btn__icon,
  .panel-header-common .btn--add .btn__icon{
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    line-height: 1;
  }
}

/* 1) Extras centrés dans le header commun (ligne des chips/boutons extras) */
.panel-header-common .panel-header-extras{
  width: 100%;
}

/* 2) Icon + label desktop / icon-only mobile */
.header-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 768px) {
  .header-action .header-action-label {
    display: none;
  }
}

/* ================================
   Panel form "plain" (sans cadre)
   Utilisé pour Add/Edit style
   ================================ */
.panel-form-plain{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* ===========================
   Panel header actions (élèves)
   =========================== */

.panel-header-actions-row {
  display: flex;
  align-items: center;
  gap: var(--space-2, 10px);
  flex-wrap: wrap;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-ghost--danger {
  color: var(--danger-700, #d63a3a);
  border-color: rgba(214, 58, 58, 0.35);
}

.btn-ghost--danger:hover {
  background: rgba(214, 58, 58, 0.10);
  border-color: rgba(214, 58, 58, 0.55);
}

/* Supprimer = icône seule en mobile */
@media (max-width: 520px) {
  .btn-icon--mobile-only .btn-text {
    display: none;
  }
  .btn-icon--mobile-only {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ===========================
   Form panel : pas de "card" globale
   =========================== */

/* Si ton .form-vertical a un bg/radius/shadow (style modal), on neutralise en panel */
.form-vertical--panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* =========================================================
   PANEL HEADER — labels responsive (UI Button V2)
   Ultra-spécifique pour battre ui-button.css même en !important
   =======================================================*/

/* base: desktop */
.panel-header-common button.ui-btn .ui-btn__label--full{ display: inline !important; }
.panel-header-common button.ui-btn .ui-btn__label--short{ display: none !important; }

/* mid: 720–900px => short */
@media (max-width: 900px) and (min-width: 720px){
  .panel-header-common button.ui-btn .ui-btn__label--full{ display: none !important; }
  .panel-header-common button.ui-btn .ui-btn__label--short{ display: inline !important; }
}

/* mobile: <720 => aucun texte */
@media (max-width: 719px){
  .panel-header-common button.ui-btn .ui-btn__label--full,
  .panel-header-common button.ui-btn .ui-btn__label--short{ display: none !important; }
}

/* =========================================================
   STUDENTS PANEL — search + actions: toujours sur la même ligne
   (empêche le bouton Rapport de passer dessous <= ~560px)
   =======================================================*/

.student-filters-top{
  display: flex;
  align-items: center;
  gap: var(--space-2, 10px);
  flex-wrap: nowrap;           /* ✅ interdit le retour à la ligne */
}

.student-search-field{
  flex: 1 1 auto;              /* ✅ la recherche prend la place */
  min-width: 0;                /* ✅ autorise le shrink (sinon overflow/wrap) */
}

.student-actions{
  flex: 0 0 auto;              /* ✅ actions à droite, taille “contenu” */
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 10px);
}

/* Petit resserrage optionnel sous 560px (pure cosmétique) */
@media (max-width: 560px){
  .student-filters-top{ gap: 8px; }
}