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

/* ===== Users Admin - Role Filter Chips ===== */

.users-admin-filter-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.users-admin-filter-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius:999px;
  padding:10px 12px;
  border:1px solid var(--border-soft);
  background: var(--surface-0);
  color: var(--theme-text);
  cursor:pointer;
  user-select:none;
  transition: transform .08s ease, border-color .12s ease, background .12s ease;
}

.users-admin-filter-chip:hover{
  transform: translateY(-1px);
}

.users-admin-filter-chip.is-active{
  background: var(--surface-1);
  border-color: var(--border-strong);
}

.users-admin-filter-chip-badge{
  width:28px;
  height:28px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  border:1px solid var(--border-soft);
  background: var(--surface-0);
}

/* Liaisons couleur: on réutilise l’idée des role-chip--X (si tu as déjà ces couleurs) */
.users-admin-filter-chip--admin .users-admin-filter-chip-badge{ background: color-mix(in srgb, var(--danger, #ef4444) 18%, transparent); }
.users-admin-filter-chip--committee .users-admin-filter-chip-badge{ background: color-mix(in srgb, var(--warning, #f59e0b) 18%, transparent); }
.users-admin-filter-chip--teacher .users-admin-filter-chip-badge{ background: color-mix(in srgb, var(--info, #38bdf8) 18%, transparent); }
.users-admin-filter-chip--guardian .users-admin-filter-chip-badge{ background: color-mix(in srgb, var(--success, #22c55e) 18%, transparent); }
.users-admin-filter-chip--student .users-admin-filter-chip-badge{ background: color-mix(in srgb, var(--primary, #a855f7) 18%, transparent); }

/* =========================================================
   Users Admin - Toolbar (search + sort)
   ======================================================= */

.users-admin-toolbar{
  display:flex;
  gap: var(--space-3, 12px);
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom: var(--space-3, 12px);
}

.users-admin-search{
  flex: 1 1 420px;
  min-width: 260px;
  display:flex;
  align-items:center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.10));
  background: var(--surface-0, rgba(255,255,255,0.03));
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}

.users-admin-search i{
  opacity: 0.75;
}

.users-admin-search .ui-input{
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  width: 100%;
  min-width: 0;
}

.users-admin-sort{
  flex: 0 0 auto;
  min-width: 220px;
}

.users-admin-sort-label{
  display:flex;
  align-items:center;
  gap: 10px;
}

.users-admin-sort select{
  min-height: 44px;
  border-radius: 999px;
  padding: 10px 14px;
  border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.10));
  background: var(--surface-0, rgba(255,255,255,0.03));
  color: var(--theme-text);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}

/* =========================================================
   Users Admin - Role filter chips (pill + badge rond)
   - badge reprend tes couleurs via .role-chip--xxx (important)
   ======================================================= */

.users-admin-filter-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  margin-bottom: var(--space-3, 12px);
}

.users-admin-filter-chip{
  display:inline-flex;
  align-items:center;
  gap: 10px;

  border-radius: 999px;
  padding: 10px 12px;

  border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.10));
  background: var(--surface-0, rgba(255,255,255,0.03));
  color: var(--theme-text);

  cursor:pointer;
  user-select:none;

  transition: transform .08s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}

.users-admin-filter-chip:hover{
  transform: translateY(-1px);
}

.users-admin-filter-chip.is-active{
  background: var(--surface-1, rgba(255,255,255,0.06));
  border-color: var(--color-border-strong, rgba(255,255,255,0.18));
}

.users-admin-filter-chip-badge{
  /* IMPORTANT: on utilise aussi .role-chip.role-chip--xxx sur ce span */
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-weight: 900;
  line-height: 1;
  box-shadow: 0 10px 18px rgba(0,0,0,0.10);
  border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.10));
}

.users-admin-filter-chip-label{
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* Mobile: on compacte un poil */
@media (max-width: 520px){
  .users-admin-toolbar{
    gap: 10px;
  }
  .users-admin-sort{
    width: 100%;
    min-width: 0;
  }
  .users-admin-sort-label{
    width: 100%;
    justify-content:space-between;
  }
  .users-admin-sort select{
    width: 100%;
  }
}

/* Users Admin — chips roles (ligne sous search/sort dans le header) */

.users-admin-filter-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:center;
}

.users-admin-filter-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius:999px;
  padding:10px 12px;
  border:1px solid var(--color-border-subtle, rgba(255,255,255,0.10));
  background: var(--surface-0, rgba(255,255,255,0.03));
  color: var(--theme-text);
  cursor:pointer;
  user-select:none;
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
  transition: transform .08s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.users-admin-filter-chip:hover{ transform: translateY(-1px); }

.users-admin-filter-chip.is-active{
  background: var(--surface-1, rgba(255,255,255,0.06));
  border-color: var(--color-border-strong, rgba(255,255,255,0.18));
}

.users-admin-filter-chip-badge{
  width:30px;
  height:30px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  line-height:1;
  border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.10));
  box-shadow: 0 10px 18px rgba(0,0,0,0.10);
}

/* =========================================================
   Users admin: filtres rôles (chips) -> même composant que Cours/Élèves
   ======================================================= */

.users-admin-filters .student-filter-chips {
  /* Même rendu que les autres panels, mais on laisse respirer un peu */
  gap: var(--space-3, 12px);
}

/* Accent des chips par rôle (utilise le composant .chip) */
.chip--role-admin { --chip-accent: #f97373; }
.chip--role-committee { --chip-accent: #c084fc; }
.chip--role-teacher { --chip-accent: #fb923c; }
.chip--role-guardian { --chip-accent: #4ade80; }
.chip--role-student { --chip-accent: #38bdf8; }

/* ===== Modal "Ajouter des rôles" : pastilles cliquables ===== */

.role-pick-row{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  padding-top: 6px;
}

.role-pick-hint{ margin-top: 10px; }

/* Base: on garde la taille/shape du role-chip */
.role-pick{
  border-width: 2px !important;
  transform: translateZ(0);
}

/* OFF (non sélectionné) = outline + lettre colorée */
.role-pick:not(.is-selected){
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0.95;
}

/* Couleurs OFF par rôle (bord + texte) */
.role-pick.role-chip--admin:not(.is-selected){
  border-color: #f97373 !important;
  color: #f97373 !important;
}

.role-pick.role-chip--committee:not(.is-selected){
  border-color: #c084fc !important;
  color: #c084fc !important;
}

.role-pick.role-chip--teacher:not(.is-selected){
  border-color: #fb923c !important;
  color: #fb923c !important;
}

.role-pick.role-chip--guardian:not(.is-selected){
  border-color: #4ade80 !important;
  color: #4ade80 !important;
}

.role-pick.role-chip--student:not(.is-selected){
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
}

/* ON (sélectionné) = on laisse vivre le style plein de .role-chip--xxx */
.role-pick.is-selected{
  box-shadow: 0 10px 22px rgba(0,0,0,0.16) !important;
}

/* Feedback hover */
.role-pick:hover{ transform: translateY(-1px); }

/* Focus clavier propre */
.role-pick:focus{ outline: none; }
.role-pick:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 22%, transparent) !important;
}