/* public_html/assets/css/dashboard-families.css */
/* Familles : modernisation rapide EDQ V49.7.4 */

.families-modern-root{
  min-height:100dvh;
  color:var(--text-primary, #f7f9ff);
  background:
    radial-gradient(circle at 14% 0%, rgba(47,181,255,.16), transparent 34rem),
    radial-gradient(circle at 86% 4%, rgba(255,82,149,.20), transparent 36rem),
    linear-gradient(180deg, rgba(5,10,28,.96), rgba(2,6,22,.98));
  overflow-x:hidden;
}

.families-modern-hero{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(18rem, .85fr);
  gap:clamp(1rem, 3vw, 3rem);
  align-items:center;
  padding:clamp(5.6rem, 8vw, 7.2rem) clamp(1.5rem, 5vw, 4.2rem) clamp(2rem, 4vw, 3.4rem);
  border-bottom:1px solid rgba(255,94,163,.38);
  background:
    linear-gradient(110deg, rgba(8,22,50,.74), rgba(125,34,76,.58)),
    radial-gradient(circle at 74% 12%, rgba(255,88,160,.28), transparent 22rem);
}

.families-modern-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(90deg, rgba(0,0,0,.75), transparent 72%);
  opacity:.42;
  pointer-events:none;
}

.families-modern-kicker{
  margin:0 0 .75rem;
  color:rgba(198,220,255,.84);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.families-modern-title{
  margin:0;
  font-size:clamp(3.1rem, 8vw, 5.5rem);
  line-height:.86;
  letter-spacing:-.075em;
  font-weight:950;
  max-width:13ch;
}

.families-modern-lead{
  max-width:58rem;
  margin:1.1rem 0 0;
  color:rgba(230,237,255,.82);
  font-size:clamp(1rem, 1.6vw, 1.18rem);
  line-height:1.5;
  font-weight:650;
}

.families-modern-stats{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.85rem;
}

.families-modern-stat{
  min-height:5.4rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:1rem 1.1rem;
  border:1px solid rgba(255,255,255,.13);
  border-radius:1.05rem;
  background:rgba(12,8,28,.56);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 1.2rem 3rem rgba(0,0,0,.16);
}

.families-modern-stat strong{
  font-size:clamp(1.85rem, 3vw, 2.45rem);
  line-height:1;
  font-weight:950;
  letter-spacing:-.04em;
}

.families-modern-stat span{
  margin-top:.35rem;
  color:rgba(232,238,255,.72);
  font-size:.88rem;
  font-weight:750;
}

.families-modern-dock{
  position:sticky;
  top:calc(var(--dashboard-navbar-height, 72px) + .35rem);
  z-index:25;
  display:flex;
  gap:.85rem;
  align-items:center;
  justify-content:space-between;
  min-height:4.45rem;
  margin:0;
  padding:.75rem clamp(1.5rem, 5vw, 4.2rem);
  border-bottom:1px solid rgba(86,205,255,.20);
  background:rgba(3,8,26,.74);
  backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:0 1rem 2.4rem rgba(0,0,0,.18);
}

.families-modern-dock__left,
.families-modern-dock__right{
  display:flex;
  align-items:center;
  gap:.7rem;
  min-width:0;
}

.families-modern-dock__left{ flex:1 1 auto; }
.families-modern-dock__right{ flex:0 0 auto; justify-content:flex-end; }

.families-modern-search{
  flex:1 1 min(34rem, 45vw);
  max-width:46rem;
  min-width:13rem;
}

.families-modern-content{
  width:min(100%, 95rem);
  margin:0 auto;
  padding:clamp(1.5rem, 4vw, 3rem) clamp(1.2rem, 4vw, 3.2rem) clamp(3rem, 6vw, 5rem);
}

.families-modern-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:1.35rem;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  box-shadow:0 1.5rem 4rem rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
  padding:clamp(1rem, 2vw, 1.35rem);
}

.families-modern-section-title{
  margin:0 0 .75rem;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(181,213,255,.74);
}

.families-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1rem;
}

.families-card{
  position:relative;
  text-align:left;
  width:100%;
  min-height:12rem;
  border:1px solid rgba(255,255,255,.13);
  background:
    radial-gradient(circle at 12% 0%, rgba(54,188,255,.10), transparent 16rem),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  border-radius:1.15rem;
  padding:1.05rem;
  cursor:pointer;
  color:inherit;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.families-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  border-radius:1.15rem 0 0 1.15rem;
  background:linear-gradient(180deg, #36c5ff, #ff5d9e);
  opacity:.55;
}

.families-card:hover,
.families-card:focus-visible{
  border-color:rgba(89,205,255,.42);
  box-shadow:0 0 0 1px rgba(91,205,255,.12), 0 1.4rem 3.4rem rgba(0,0,0,.26);
  outline:none;
}

.families-card__title{
  font-weight:950;
  font-size:1.05rem;
  letter-spacing:-.025em;
  margin-bottom:.2rem;
}

.families-card__subtitle{
  color:rgba(231,238,255,.74);
  font-size:.86rem;
  font-weight:700;
  margin-bottom:.8rem;
}

.families-card__section{ margin-top:.85rem; }
.families-card__label,
.family-profile__label{
  color:rgba(214,227,255,.72);
  font-size:.78rem;
  font-weight:800;
  margin-bottom:.45rem;
}

.families-card__chips,
.family-profile__chips,
.family-editor__chips,
.student-picker__selected{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}

.ui-chip,
.family-chip,
.family-editor__chip,
.student-picker__chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  max-width:100%;
  padding:.36rem .65rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.07);
  color:rgba(245,248,255,.92);
  font-size:.78rem;
  font-weight:750;
  line-height:1.2;
}

.ui-chip--muted{ opacity:.68; background:rgba(255,255,255,.035); }

.families-empty,
.family-modern-empty{
  padding:1.35rem;
  border:1px dashed rgba(255,255,255,.18);
  border-radius:1.15rem;
  color:rgba(230,238,255,.74);
  background:rgba(255,255,255,.035);
}

.family-profile__sections,
.family-editor,
.student-picker-modern-body{
  display:grid;
  gap:1rem;
}

.family-profile__section,
.family-editor__field{
  border:1px solid rgba(255,255,255,.12);
  border-radius:1.15rem;
  background:rgba(255,255,255,.04);
  padding:1rem;
}

.family-editor__field label{
  display:block;
  margin-bottom:.5rem;
  color:rgba(214,227,255,.74);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.family-editor__field input{
  width:100%;
  min-height:3.1rem;
  padding:.85rem 1rem;
  border:1px solid rgba(255,255,255,.15);
  border-radius:1rem;
  background:rgba(2,8,26,.58);
  color:inherit;
  outline:none;
  font-weight:750;
}

.family-editor__field input:focus{
  border-color:rgba(80,210,255,.52);
  box-shadow:0 0 0 4px rgba(80,210,255,.11);
}

.family-editor__hint,
.family-profile__meta,
.student-picker__hint{
  margin-top:.55rem;
  color:rgba(231,238,255,.68);
  font-size:.84rem;
  line-height:1.35;
}

.family-editor__actions,
.family-profile__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  align-items:center;
}

.family-chip button,
.family-editor__chip button,
.student-picker__chip button{
  border:none;
  background:transparent;
  color:inherit;
  opacity:.82;
  cursor:pointer;
  padding:0 .05rem;
}

.student-picker__list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.7rem;
  margin-top:1rem;
}

.student-picker__card{
  text-align:left;
  width:100%;
  min-height:3.25rem;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.035);
  border-radius:.95rem;
  padding:.75rem .8rem;
  cursor:pointer;
  color:inherit;
  display:flex;
  align-items:center;
  gap:.7rem;
  transition:border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.student-picker__card:hover,
.student-picker__card:focus-visible{
  outline:none;
  border-color:rgba(88,204,255,.42);
  background:rgba(88,204,255,.055);
}

.student-picker__card.is-selected{
  border-color:rgba(70,230,147,.48);
  background:rgba(70,230,147,.08);
}

.student-picker__check{
  width:1.35rem;
  height:1.35rem;
  border-radius:.45rem;
  border:1px solid rgba(255,255,255,.20);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  background:rgba(255,255,255,.045);
}
.student-picker__check i{ opacity:0; }
.student-picker__card.is-selected .student-picker__check i{ opacity:1; }
.student-picker__name{ font-weight:900; }

@media (max-width:1100px){
  .families-modern-hero{ grid-template-columns:1fr; }
  .families-modern-stats{ max-width:42rem; }
  .families-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width:760px){
  .families-modern-hero{ padding:5.2rem 1rem 1.4rem; }
  .families-modern-title{ font-size:clamp(2.5rem, 13vw, 4rem); }
  .families-modern-stats{ grid-template-columns:1fr 1fr; }
  .families-modern-dock{
    top:calc(var(--dashboard-navbar-height, 62px) + .25rem);
    flex-direction:column;
    align-items:stretch;
    padding:.7rem 1rem;
  }
  .families-modern-dock__left,
  .families-modern-dock__right{ width:100%; justify-content:space-between; }
  .families-modern-search{ flex:1 1 auto; max-width:none; min-width:0; }
  .families-modern-content{ padding:1rem 1rem 2.5rem; }
  .families-grid,
  .student-picker__list{ grid-template-columns:1fr; }
}