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

/* ========== LAYOUT FEUILLES DE PRÉSENCE ========== */

.attendance-panel-root {
    /* l'espace est géré par le header commun + panel-body */
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* (Nouveau) la nav semaine est désormais en chips : on n'utilise plus le pill "attendance-week-label" */

.attendance-week-label {
    padding: 0.4rem 1.1rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    background: rgba(148, 163, 184, 0.12);
    backdrop-filter: blur(16px);
}

@media (max-width: 640px) {
    .attendance-week-label {
        flex: 1 1 auto;
    }
}

/* Selects */

.attendance-panel-root .form-field .form-label {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    color: var(--theme-text-muted);
}

.attendance-panel-root .form-select {
    width: 100%;
    border-radius: 999px;
    border: 1px solid var(--theme-border-subtle);
    padding: 0.55rem 1.1rem;
    font-size: 0.9rem;
    line-height: 1.2;
    background-color: var(--theme-surface);
    color: var(--theme-text);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.02);
    appearance: none;
}

.attendance-panel-root .form-select:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--theme-primary) 65%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--theme-primary) 45%, transparent),
        0 18px 45px rgba(15, 23, 42, 0.18);
}

[data-theme="light"] .attendance-panel-root .form-select {
    background-color: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

/* Liste des feuilles */

.attendance-list-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.attendance-day-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.attendance-day-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.attendance-day-label {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: baseline;
}

.attendance-day-name {
    font-weight: 600;
}

.attendance-day-date {
    font-size: 0.95rem;
    opacity: 0.8;
}

.attendance-day-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.attendance-item-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-subtle);
    background: color-mix(in srgb, var(--color-surface) 92%, #ffffff 8%);
    cursor: pointer;
    transition:
        background-color 0.15s ease-out,
        box-shadow 0.15s ease-out,
        transform 0.1s ease-out;
}

.attendance-item-card:hover {
    background: color-mix(in srgb, var(--color-surface) 85%, #ffffff 15%);
    box-shadow:
        0 14px 30px rgba(15, 23, 42, 0.18),
        0 0 0 1px color-mix(in srgb, var(--color-border-subtle) 60%, transparent);
    transform: translateY(-1px);
}

.attendance-item-card.is-archived {
    opacity: 0.85;
}

.attendance-item-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.attendance-item-title {
    font-size: 1.05rem;
    font-weight: 600;
}

.attendance-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: 0.9rem;
    opacity: 0.9;
}

.attendance-item-meta-chip {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-border-subtle) 70%, transparent);
    background: color-mix(in srgb, var(--color-surface) 96%, #ffffff 4%);
}

.attendance-item-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
}

.attendance-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.attendance-badge-archived{
  background: color-mix(in srgb, var(--color-success, #22c55e) 16%, var(--color-surface) 84%);
  color: var(--color-success, #22c55e);
}

.attendance-badge-draft {
    background: color-mix(in srgb, var(--color-warning) 16%, var(--color-surface) 84%);
    color: var(--color-warning);
}

/* Contrastes light */

:where(body.theme-light, html[data-theme="light"]) .attendance-badge-draft {
    background: #fef3c7;
    color: #92400e;
    box-shadow:
        0 0 0 1px rgba(245, 158, 11, 0.35),
        0 4px 10px rgba(245, 158, 11, 0.25);
}

/* ===== Détail d'une feuille ===== */

.attendance-sheet-body {
    margin-top: 0;
}

.attendance-sheet {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.attendance-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.attendance-sheet-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.attendance-sheet-title {
    font-size: 1.2rem;
    font-weight: 600;
}

.attendance-sheet-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: 0.9rem;
    opacity: 0.9;
}

.attendance-sheet-status {
    display: flex;
    align-items: center;
}

/* Liste des élèves */

.attendance-sheet-students {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.attendance-student-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-subtle);
    background: color-mix(in srgb, var(--color-surface) 95%, #ffffff 5%);
}

.attendance-student-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
}

.attendance-student-name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 500;
}

.attendance-student-actions {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.25rem;
}

@media (max-width: 720px) {
    .attendance-item-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .attendance-item-side {
        align-items: flex-start;
    }

    .attendance-student-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .attendance-student-actions {
        align-self: flex-end;
    }
}

/* ----- Vote élève (récap dans feuille) ----- */

.attendance-student-vote {
    font-size: 0.85rem;
    color: var(--theme-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    align-items: center;
}

.attendance-vote-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    background: rgba(148, 163, 184, 0.18);
    color: var(--theme-text);
}

.attendance-vote-empty {
    opacity: 0.7;
}

.attendance-vote-reason {
    opacity: 0.85;
}

/* Couleurs selon statut */

.attendance-vote-badge.is-present {
    background: rgba(34, 197, 94, 0.20);
    color: #bbf7d0;
}

.attendance-vote-badge.is-absent {
    background: rgba(248, 113, 113, 0.20);
    color: #fecaca;
}

.attendance-vote-badge.is-late {
    background: rgba(250, 204, 21, 0.20);
    color: #fef3c7;
}

.attendance-vote-badge.is-unknown {
    background: rgba(148, 163, 184, 0.20);
    color: #e5e7eb;
}

/* Overrides LIGHT */

:where(body.theme-light, html[data-theme="light"]) .attendance-vote-badge.is-present {
    background: #dcfce7;
    color: #166534;
}

:where(body.theme-light, html[data-theme="light"]) .attendance-vote-badge.is-absent {
    background: #fee2e2;
    color: #b91c1c;
}

:where(body.theme-light, html[data-theme="light"]) .attendance-vote-badge.is-late {
    background: #ffedd5;
    color: #c2410c;
}

:where(body.theme-light, html[data-theme="light"]) .attendance-vote-badge.is-unknown {
    background: #e5e7eb;
    color: #374151;
}

:where(body.theme-light, html[data-theme="light"]) .attendance-badge-archived{
  background: #dcfce7;
  color: #166534;
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.28),
    0 4px 10px rgba(34, 197, 94, 0.20);
}

/* Ligne titre style + niveau */

.attendance-sheet-title-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Badge niveau */

.attendance-level-badge {
    border-radius: 999px;
    padding: 0.18rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: color-mix(
        in srgb,
        var(--attendance-style-color, var(--color-accent)) 16%,
        var(--color-surface-soft) 84%
    );
    box-shadow: 0 0 0 1px color-mix(
        in srgb,
        var(--attendance-style-color, var(--color-accent)) 55%,
        transparent
    );
    color: var(--color-text);
}

html[data-theme="dark"] .attendance-level-badge {
    background: color-mix(
        in srgb,
        var(--attendance-style-color, var(--color-accent)) 28%,
        #020617 72%
    );
    color: #f9fafb;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--attendance-style-color, var(--color-accent)) 75%, transparent),
        0 8px 18px color-mix(in srgb, var(--attendance-style-color, var(--color-accent)) 38%, transparent);
}

/* Version compacte pour la liste */

.attendance-item-title-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.attendance-level-badge-sm {
    padding: 0.12rem 0.55rem;
    font-size: 0.76rem;
}

/* même stack/layout que calendrier */
.attendance-list-panel .calendar-full-chip-stack{
  display:flex;
  flex-direction:column;
  gap: var(--space-2);
}

.attendance-list-panel .calendar-full-chip-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: var(--space-2);
  flex-wrap:wrap;
}

.attendance-list-panel .calendar-full-chip-list{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: clamp(6px, 1.2vw, 10px);
  flex-wrap:wrap;
}

/* CTA Envoyer (copie style Add) : grisé quand disabled */
.attendance-sheet-panel .att-btn-send:disabled,
.attendance-sheet-panel .att-btn-send[aria-disabled="true"]{
  opacity: 0.45;
  filter: grayscale(0.35);
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ✓ save indicator (vert + fondu + espace avec le toggle) */
.attendance-save-indicator{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 16px;
  min-width: 16px;

  margin-right: 8px; /* espace entre ✓ et toggle */
  color: rgba(34,197,94,0.0); /* vert mais invisible par défaut */
  opacity: 0;
  transform: translateY(1px);
  transition: opacity .28s ease, transform .28s ease, color .28s ease;
}

.attendance-save-indicator.is-on{
  color: rgba(34,197,94,0.95);
  opacity: 1;
  transform: translateY(0);
}

/* vote collé à gauche après le nom */
.attendance-student-main{
  flex-wrap: nowrap;       /* évite que ça parte à la ligne trop vite */
  align-items: center;
  gap: 10px;
}
.attendance-student-name{
  flex: 0 0 auto;          /* ne pousse plus le vote à droite */
  min-width: 0;
}
.attendance-student-vote{
  flex: 0 1 auto;
  min-width: 0;
}

/* ================================
   Vote élève : couleurs alignées
   ================================ */

:root{
  --att-green:  #22c55e;
  --att-red:    #ef4444;
  --att-orange: #f97316;
  --att-blue:   #38bdf8; /* "Aucun vote" */
}

/* "Aucun vote" en bleu */
.attendance-vote-empty{
  color: color-mix(in srgb, var(--att-blue) 92%, var(--theme-text) 8%);
  opacity: 0.95;
}

/* (Optionnel) rend les badges encore plus "cohérents" */
.attendance-vote-badge.is-present{ color: color-mix(in srgb, var(--att-green) 85%, #fff 15%); }
.attendance-vote-badge.is-absent{  color: color-mix(in srgb, var(--att-red)   85%, #fff 15%); }
.attendance-vote-badge.is-late{    color: color-mix(in srgb, var(--att-orange)85%, #fff 15%); }

/* Light : un poil plus lisible */
:where(body.theme-light, html[data-theme="light"]) .attendance-vote-empty{
  color: #0284c7;
}

/* ================================
   Segmented toggle : slider animé
   (spécifique feuille de présence)
   ================================ */

.attendance-sheet-panel .attendance-vote-toggle{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 4px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 75%, transparent);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  overflow: hidden;

  /* piloté en JS */
  --idx: 3;               /* 0..3 => P,A,R,? */
  --accent: #38bdf8;      /* couleur du pill */
}

/* Le "puck" qui glisse */
.attendance-sheet-panel .attendance-vote-toggle::before{
  content:"";
  position:absolute;
  inset: 4px;
  width: calc((100% - 0px) / 4);
  border-radius: 999px;

  transform: translateX(calc(var(--idx) * 100%));
  transition:
    transform 220ms cubic-bezier(.2,.9,.2,1),
    background-color 220ms ease,
    box-shadow 220ms ease;

  background: color-mix(in srgb, var(--accent) 60%, #0b1220 40%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 65%, transparent),
    0 10px 22px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Les boutons passent au-dessus du slider */
.attendance-sheet-panel .attendance-vote-toggle .segmented-toggle-btn{
  position: relative;
  z-index: 1;

  height: 44px;
  min-width: 52px;
  padding: 0 18px;

  border: 0;
  background: transparent !important;
  box-shadow: none !important;

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

  font-weight: 700;
  letter-spacing: 0.02em;

  color: color-mix(in srgb, var(--theme-text-muted) 88%, transparent);
  transition: color 180ms ease, transform 120ms ease;
}

/* Le bouton actif devient blanc (lisible sur le pill) */
.attendance-sheet-panel .attendance-vote-toggle .segmented-toggle-btn.is-active{
  color: #ffffff;
}

/* Petit "press" */
.attendance-sheet-panel .attendance-vote-toggle .segmented-toggle-btn:active{
  transform: scale(0.98);
}

@media (max-width: 720px){
  .attendance-sheet-panel .attendance-vote-toggle .segmented-toggle-btn{
    height: 46px;
    min-width: 58px;
    padding: 0 20px;
    font-size: 0.95rem;
  }
}

/* =========================================================
   ATTENDANCE SHEET — HEADER: back left, action right, center text
   (robuste quel que soit le DOM de makePanelHeader)
   ========================================================= */

.attendance-sheet-panel .panel-header-common .panel-header-row{
  position: relative;
}

/* Cible “back” (selon variantes possibles) */
.attendance-sheet-panel .panel-header-common .panel-header-back,
.attendance-sheet-panel .panel-header-common .panel-header-left,
.attendance-sheet-panel .panel-header-common .panel-header-backButton{
  position: absolute;
  left: 0;
  top: 0;
}

/* Cible “actions” (selon variantes possibles) */
.attendance-sheet-panel .panel-header-common .panel-header-actions,
.attendance-sheet-panel .panel-header-common .panel-header-extras{
  position: absolute;
  right: 0;
  top: 0;
  display: inline-flex;
  gap: var(--space-2);
}

/* Centre réel */
.attendance-sheet-panel .panel-header-common .panel-header-main,
.attendance-sheet-panel .panel-header-common .panel-header-center{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;     /* ✅ centre toutes les lignes */
  text-align: center;      /* ✅ texte centré */
  padding: 0 84px;         /* ✅ laisse respirer entre back et bouton (ajuste si besoin) */
  min-width: 0;
}

/* Le sous-titre doit rester visible */
.attendance-sheet-panel .panel-header-common .panel-header-subtitle{
  display: block;
  width: 100%;
}

/* Desktop vs Mobile content dans le subtitle */
.attendance-sheet-panel .att-hdr-desktop{ display: flex; flex-direction: column; gap: 4px; }
.attendance-sheet-panel .att-hdr-mobile{ display: none; flex-direction: column; gap: 6px; align-items: center; }

.attendance-sheet-panel .att-hdr-desktop-line1{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.attendance-sheet-panel .att-hdr-desktop-line2{
  opacity: 0.85;
  font-size: 0.95rem;
}

.attendance-sheet-panel .att-hdr-sep{
  opacity: 0.6;
  font-weight: 700;
}

@media (max-width: 720px){
  /* Tu veux le stack mobile à la place du titre */
  .attendance-sheet-panel .panel-header-common .panel-header-title{
    display: none;
  }
  .attendance-sheet-panel .att-hdr-desktop{ display: none; }
  .attendance-sheet-panel .att-hdr-mobile{ display: flex; }

  /* en mobile on centre aussi */
  .attendance-sheet-panel .panel-header-common .panel-header-main,
  .attendance-sheet-panel .panel-header-common .panel-header-center{
    padding: 0 64px; /* un peu moins en mobile */
  }

  .attendance-sheet-panel .att-hdr-mobile-dowtime{ font-weight: 800; }
  .attendance-sheet-panel .att-hdr-mobile-date{ opacity: 0.85; }
}

/* ================================
   Toggle présence : boutons plus gros (mobile friendly)
   ================================ */

/* on grossit la barre */
.attendance-sheet-panel .attendance-vote-toggle.segmented-toggle--compact{
  --ui-control-h: 44px; /* si ton segmented toggle utilise cette var */
}

/* on grossit chaque bouton */
.attendance-sheet-panel .attendance-vote-toggle .segmented-toggle-btn{
  min-width: 44px;     /* "tap target" iOS */
  padding: 0.5rem 0.9rem; /* double-ish largeur */
  line-height: 1;
}

/* un peu plus haut en mobile */
@media (max-width: 720px){
  .attendance-sheet-panel .attendance-vote-toggle .segmented-toggle-btn{
    min-width: 52px;
    padding: 0.6rem 1.0rem;
    font-size: 0.95rem;
  }
}

/* ================================
   Attendance toggle — FIX dimensions + slider centré
   (à placer en TOUT dernier)
   ================================ */

.attendance-sheet-panel .attendance-vote-toggle{
  --seg-pad: 4px;
  --seg-h: 46px; /* hauteur globale du toggle */
  --idx: 3;
  --accent: #38bdf8;

  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;

  height: var(--seg-h);
  padding: var(--seg-pad);

  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 75%, transparent);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  overflow: hidden;
}

/* slider/puck : EXACTEMENT 1/4 du conteneur (hors padding) */
.attendance-sheet-panel .attendance-vote-toggle::before{
  content:"";
  position:absolute;
  top: var(--seg-pad);
  bottom: var(--seg-pad);
  left: var(--seg-pad);

  width: calc((100% - (var(--seg-pad) * 2)) / 4);
  border-radius: 999px;

  transform: translateX(calc(var(--idx) * 100%));
  transition:
    transform 220ms cubic-bezier(.2,.9,.2,1),
    background-color 220ms ease,
    box-shadow 220ms ease;

  background: color-mix(in srgb, var(--accent) 60%, #0b1220 40%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 65%, transparent),
    0 10px 22px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* boutons = 1 cellule chacun, pas de min-width, pas de padding parasite */
.attendance-sheet-panel .attendance-vote-toggle .segmented-toggle-btn{
  position: relative;
  z-index: 1;

  width: 100%;
  height: 100%;
  min-width: 0 !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

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

  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;

  color: color-mix(in srgb, var(--theme-text-muted) 88%, transparent);
  transition: color 180ms ease, transform 120ms ease;
}

.attendance-sheet-panel .attendance-vote-toggle .segmented-toggle-btn.is-active{
  color: #fff;
}

.attendance-sheet-panel .attendance-vote-toggle .segmented-toggle-btn:active{
  transform: scale(0.98);
}

@media (max-width: 720px){
  .attendance-sheet-panel .attendance-vote-toggle{
    --seg-h: 50px;
  }
  .attendance-sheet-panel .attendance-vote-toggle .segmented-toggle-btn{
    font-size: 0.98rem;
  }
}

.attendance-student-first{
  font-weight: 800;
}
.attendance-student-last{
  font-weight: 500;
  opacity: 0.92;
}

/* ================================
   FIX: toggle écrasé (mobile + desktop)
   ================================ */

/* le container d'actions ne doit pas forcer un "min-content" */
.attendance-student-actions{
  min-width: 0;
}

/* donne une largeur stable au toggle (sinon il se compresse à "PAR?") */
.attendance-sheet-panel .attendance-vote-toggle{
  width: 240px;          /* desktop */
  max-width: 100%;
}

/* mobile: actions prennent toute la ligne, toggle reste à droite */
@media (max-width: 720px){
  .attendance-student-actions{
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  .attendance-sheet-panel .attendance-vote-toggle{
    width: min(260px, 100%);
  }
}

.attendance-sheet-status{
  display:flex;
  justify-content:flex-start;
}

/* =========================================================
   ATTENDANCE SHEET — HEADER RESPONSIVE (desktop vs mobile)
   ========================================================= */

.attendance-sheet-panel .att-hdr-wrap{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Desktop visible par défaut */
.attendance-sheet-panel .att-hdr-desktop{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.attendance-sheet-panel .att-hdr-desktop-line1{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.attendance-sheet-panel .att-hdr-sep{
  opacity: 0.6;
  font-weight: 700;
}

.attendance-sheet-panel .att-hdr-desktop-line2{
  opacity: 0.85;
  font-size: 0.95rem;
}

/* Mobile stack caché par défaut */
.attendance-sheet-panel .att-hdr-mobile{
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* Mobile: on masque le titre "Feuille de présence" et on affiche le stack */
@media (max-width: 720px){
  .attendance-sheet-panel .panel-header-title{
    display: none;
  }
  .attendance-sheet-panel .att-hdr-desktop{
    display: none;
  }
  .attendance-sheet-panel .att-hdr-mobile{
    display: flex;
  }

  .attendance-sheet-panel .att-hdr-mobile-dowtime{
    font-weight: 700;
  }
  .attendance-sheet-panel .att-hdr-mobile-date{
    opacity: 0.85;
  }
}

/* =========================================================
   ATTENDANCE SHEET — TOGGLE: jamais écrasé
   ========================================================= */

.attendance-student-row{
  overflow: hidden; /* évite les débordements moches */
}

.attendance-student-actions{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

/* largeur stable + pas de shrink */
.attendance-sheet-panel .attendance-vote-toggle{
  flex: 0 0 auto;
  width: clamp(220px, 36vw, 280px);
  max-width: 100%;
}

/* Mobile: actions sur une ligne à droite, toggle garde sa largeur */
@media (max-width: 720px){
  .attendance-student-actions{
    width: 100%;
    justify-content: flex-end;
  }

  .attendance-sheet-panel .attendance-vote-toggle{
    width: min(280px, 100%);
  }
}

/* Desktop: title sur 1 ligne (il y a la place) */
@media (min-width: 721px){
  .attendance-sheet-panel .panel-header-common .panel-header-title{
    white-space: nowrap;
    font-size: clamp(1.1rem, 2vw, 1.55rem);
  }
}

/* Mobile: tout centrer dans le stack (badge / jour-heure / date) */
@media (max-width: 720px){
  .attendance-sheet-panel .att-hdr-mobile{
    align-items: center !important;
    text-align: center !important;
    width: 100%;
  }

  .attendance-sheet-panel .att-hdr-mobile-badge,
  .attendance-sheet-panel .att-hdr-mobile-dowtime,
  .attendance-sheet-panel .att-hdr-mobile-date{
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 720px){
  .attendance-sheet-panel .att-hdr-mobile-dowtime{
    white-space: nowrap;
    font-size: 0.98rem;
  }
}

/* Badge "appel terminé" */
.attendance-badge-completed{
  background: color-mix(in srgb, var(--color-success, #22c55e) 16%, var(--color-surface) 84%);
  color: var(--color-success, #22c55e);
}

/* Mini badge "Essai" sur la carte élève */
.attendance-mini-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  margin-left: 10px;
  letter-spacing: .02em;
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 70%, transparent);
}
.attendance-mini-badge-essai{
  background: color-mix(in srgb, #a855f7 16%, var(--color-surface) 84%);
  color: #a855f7;
}

/* =========================================================
   MODAL "Ajouter un élève" : résultats de recherche lisibles
   ========================================================= */

.attendance-sheet-panel .modal-list{
  background: color-mix(in srgb, var(--color-surface) 78%, transparent);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.25);
}

.attendance-sheet-panel .attendance-search-item{
  display: block;
  width: 100%;
  text-align: left;

  padding: 12px 14px;
  border: 0;
  background: transparent;
  cursor: pointer;

  transition: background-color .14s ease, transform .08s ease;
}

.attendance-sheet-panel .attendance-search-item + .attendance-search-item{
  border-top: 1px solid color-mix(in srgb, var(--color-border-subtle) 80%, transparent);
}

.attendance-sheet-panel .attendance-search-item:hover{
  background: color-mix(in srgb, var(--color-surface) 68%, #ffffff 32%);
}

html[data-theme="dark"] .attendance-sheet-panel .attendance-search-item:hover{
  background: color-mix(in srgb, #0b1220 55%, var(--color-surface) 45%);
}

.attendance-sheet-panel .attendance-search-item:active{
  transform: scale(0.995);
}

.attendance-sheet-panel .attendance-search-item__name{
  font-weight: 850;
  letter-spacing: .01em;
}

.attendance-sheet-panel .attendance-search-item__meta{
  margin-top: 2px;
  font-size: .86rem;
  color: var(--theme-text-muted);
  opacity: .95;
}