/* ==========================================================
   RUYA_COORDINATOR_UI_FINAL_V1
   Sadece coordinator sınıf / öğrenci detay UI standardı.
   ========================================================== */


/* ----------------------------------------------------------
   1. ORTAK 3'LÜ AKSIYON SISTEMI
   ---------------------------------------------------------- */

.v23StudentDetailOverlay .v23StudentQuickLinks,
.v23TeacherClassDetail .v23CoordinatorClassActions{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;

  width:100%!important;

  gap:7px!important;

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


/* Kartların ortak görünümü */

.v23StudentDetailOverlay .v23StudentQuickLinks > button,
.v23TeacherClassDetail .v23CoordinatorClassActions > button{
  appearance:none!important;
  -webkit-appearance:none!important;

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

  min-height:68px!important;

  padding:8px 6px!important;

  border:0!important;
  border-radius:14px!important;

  background:#17307a!important;
  background-color:#17307a!important;
  background-image:none!important;

  color:#fff!important;
  -webkit-text-fill-color:#fff!important;

  box-shadow:
    0 5px 12px
    rgba(23,48,122,.14)!important;

  overflow:hidden!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;

  text-align:left!important;

  cursor:pointer!important;
}


/* Touch / active */

.v23StudentDetailOverlay .v23StudentQuickLinks > button:active,
.v23TeacherClassDetail .v23CoordinatorClassActions > button:active{
  background:#122966!important;
  background-color:#122966!important;

  transform:scale(.985)!important;
}


/* İkon */

.v23StudentDetailOverlay .v23StudentQuickLinks > button svg,
.v23TeacherClassDetail .v23CoordinatorClassActions > button svg{
  width:16px!important;
  height:16px!important;

  flex:0 0 16px!important;

  color:#fff!important;
  stroke:#fff!important;

  margin:0!important;
}


/* Başlık */

.v23StudentDetailOverlay .v23StudentQuickLinks > button b,
.v23TeacherClassDetail .v23CoordinatorClassActions > button b{
  display:block!important;

  width:100%!important;

  margin:5px 0 0!important;

  color:#fff!important;
  -webkit-text-fill-color:#fff!important;

  font-size:10.5px!important;
  line-height:1.12!important;
  font-weight:750!important;

  white-space:normal!important;
  overflow-wrap:anywhere!important;
}


/* Açıklama */

.v23StudentDetailOverlay .v23StudentQuickLinks > button small,
.v23TeacherClassDetail .v23CoordinatorClassActions > button small{
  display:block!important;

  width:100%!important;

  margin:3px 0 0!important;

  color:rgba(255,255,255,.74)!important;
  -webkit-text-fill-color:rgba(255,255,255,.74)!important;

  font-size:8px!important;
  line-height:1.12!important;

  white-space:normal!important;
}


/* ----------------------------------------------------------
   2. ÖĞRENCİ DETAYI — MOR / LILA HERO YERİNE AÇIK GRİ
   ---------------------------------------------------------- */

.v23StudentDetailOverlay .v23StudentDetailHero{
  background:#f3f5f8!important;
  background-color:#f3f5f8!important;
  background-image:none!important;

  border-bottom:
    1px solid
    rgba(20,35,70,.06)!important;
}


/* Hero çevresinde kalmış gradient / renk varsa temizle */

.v23StudentDetailOverlay .v23StudentDetailSheet{
  background:
    linear-gradient(
      180deg,
      #f3f5f8 0,
      #f3f5f8 245px,
      #f6f7f9 245px,
      #f6f7f9 100%
    )!important;
}


/* Öğrenci detay küçük başlığı */

.v23StudentDetailOverlay .v23StudentDetailHero small{
  color:#17307a!important;
  -webkit-text-fill-color:#17307a!important;
}


/* ----------------------------------------------------------
   3. SINIF DETAYI — MOR METİNLERİ LACİVERTLE
   ---------------------------------------------------------- */

.v23TeacherClassDetail .v23TeacherClassDetailHead small,
.ruyaCoordinatorClassPicker .ruyaAdminDailyHead small{
  color:#17307a!important;
  -webkit-text-fill-color:#17307a!important;
}


/* Sınıf detayındaki olası mor icon/text mirasını temizle */

.v23TeacherClassDetail .v23CoordinatorClassActions{
  color:#17307a!important;
}


/* ----------------------------------------------------------
   4. AKSIYONLAR İLE ÖĞRENCİ LİSTESİ ARASI
   ---------------------------------------------------------- */

.v23TeacherClassDetail .v23CoordinatorClassActions{
  margin-bottom:12px!important;
}

.v23StudentDetailOverlay .v23StudentQuickLinks{
  margin-bottom:12px!important;
}


/* ----------------------------------------------------------
   5. KÜÇÜK EKRANLAR
   ---------------------------------------------------------- */

@media (max-width:390px){

  .v23StudentDetailOverlay .v23StudentQuickLinks,
  .v23TeacherClassDetail .v23CoordinatorClassActions{
    gap:5px!important;
  }

  .v23StudentDetailOverlay .v23StudentQuickLinks > button,
  .v23TeacherClassDetail .v23CoordinatorClassActions > button{
    min-height:64px!important;
    padding:7px 5px!important;
    border-radius:13px!important;
  }

  .v23StudentDetailOverlay .v23StudentQuickLinks > button svg,
  .v23TeacherClassDetail .v23CoordinatorClassActions > button svg{
    width:15px!important;
    height:15px!important;
  }

  .v23StudentDetailOverlay .v23StudentQuickLinks > button b,
  .v23TeacherClassDetail .v23CoordinatorClassActions > button b{
    font-size:9.8px!important;
  }

  .v23StudentDetailOverlay .v23StudentQuickLinks > button small,
  .v23TeacherClassDetail .v23CoordinatorClassActions > button small{
    font-size:7.6px!important;
  }
}


/* ==========================================================
   RUYA_COORDINATOR_ACTION_CARDS_CLEAN_V3
   Sınıf + öğrenci detayında ortak premium kompakt aksiyon barı
   ========================================================== */


/* 3 kart tek sıra */
.v23TeacherClassDetail .v23CoordinatorClassActions,
.v23StudentDetailOverlay .v23StudentQuickLinks{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;

  width:100%!important;

  gap:8px!important;

  margin-top:8px!important;
  margin-bottom:12px!important;

  padding:0!important;
}


/* Ortak kart */
.v23TeacherClassDetail .v23CoordinatorClassActions > button,
.v23StudentDetailOverlay .v23StudentQuickLinks > button{
  appearance:none!important;
  -webkit-appearance:none!important;

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

  height:62px!important;
  min-height:62px!important;

  padding:9px 10px!important;

  border:0!important;
  border-radius:15px!important;

  background:#17307a!important;
  background-color:#17307a!important;
  background-image:none!important;

  box-shadow:
    0 5px 12px
    rgba(23,48,122,.12)!important;

  color:#fff!important;
  -webkit-text-fill-color:#fff!important;

  /*
   * İkon + başlığı yatay kullanıyoruz.
   * Böylece kart yüksekliği azalırken içerik nefes alıyor.
   */
  display:grid!important;
  grid-template-columns:17px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;

  column-gap:7px!important;
  row-gap:2px!important;

  align-items:center!important;

  text-align:left!important;

  overflow:hidden!important;
}


/* İkon */
.v23TeacherClassDetail .v23CoordinatorClassActions > button svg,
.v23StudentDetailOverlay .v23StudentQuickLinks > button svg{
  grid-column:1!important;
  grid-row:1 / 3!important;

  width:16px!important;
  height:16px!important;

  min-width:16px!important;
  min-height:16px!important;

  margin:0!important;

  color:#fff!important;
  stroke:#fff!important;

  align-self:center!important;
}


/* Başlık */
.v23TeacherClassDetail .v23CoordinatorClassActions > button b,
.v23StudentDetailOverlay .v23StudentQuickLinks > button b{
  grid-column:2!important;
  grid-row:1!important;

  display:block!important;

  min-width:0!important;

  margin:0!important;

  color:#fff!important;
  -webkit-text-fill-color:#fff!important;

  font-size:11.5px!important;
  line-height:1.14!important;
  font-weight:780!important;

  letter-spacing:-.012em!important;

  white-space:normal!important;
  overflow-wrap:normal!important;
}


/* İkinci açıklama */
.v23TeacherClassDetail .v23CoordinatorClassActions > button small,
.v23StudentDetailOverlay .v23StudentQuickLinks > button small{
  grid-column:2!important;
  grid-row:2!important;

  display:block!important;

  min-width:0!important;

  margin:0!important;

  color:rgba(255,255,255,.70)!important;
  -webkit-text-fill-color:rgba(255,255,255,.70)!important;

  font-size:8.4px!important;
  line-height:1.12!important;
  font-weight:550!important;

  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}


/* Touch */
.v23TeacherClassDetail .v23CoordinatorClassActions > button:active,
.v23StudentDetailOverlay .v23StudentQuickLinks > button:active{
  background:#122966!important;
  background-color:#122966!important;

  transform:scale(.985)!important;
}


/* ==========================================================
   TELEFON:
   açıklamalar kalkıyor -> sadece ikon + başlık.
   Daha sade ve daha az karmaşık görünüm.
   ========================================================== */

@media (max-width:600px){

  .v23TeacherClassDetail .v23CoordinatorClassActions,
  .v23StudentDetailOverlay .v23StudentQuickLinks{
    gap:7px!important;
  }

  .v23TeacherClassDetail .v23CoordinatorClassActions > button,
  .v23StudentDetailOverlay .v23StudentQuickLinks > button{
    height:56px!important;
    min-height:56px!important;

    padding:8px 9px!important;

    border-radius:14px!important;

    grid-template-columns:16px minmax(0,1fr)!important;
    grid-template-rows:1fr!important;

    column-gap:7px!important;
  }

  .v23TeacherClassDetail .v23CoordinatorClassActions > button svg,
  .v23StudentDetailOverlay .v23StudentQuickLinks > button svg{
    grid-column:1!important;
    grid-row:1!important;

    width:15px!important;
    height:15px!important;

    min-width:15px!important;
    min-height:15px!important;
  }

  .v23TeacherClassDetail .v23CoordinatorClassActions > button b,
  .v23StudentDetailOverlay .v23StudentQuickLinks > button b{
    grid-column:2!important;
    grid-row:1!important;

    font-size:10.8px!important;
    line-height:1.15!important;

    align-self:center!important;
  }

  /*
   * Mobilde ikincil açıklamalar kaldırılıyor.
   * Buton başlıkları zaten işlevi açıkça anlatıyor.
   */
  .v23TeacherClassDetail .v23CoordinatorClassActions > button small,
  .v23StudentDetailOverlay .v23StudentQuickLinks > button small{
    display:none!important;
  }
}


/* Çok dar cihaz */
@media (max-width:360px){

  .v23TeacherClassDetail .v23CoordinatorClassActions,
  .v23StudentDetailOverlay .v23StudentQuickLinks{
    gap:5px!important;
  }

  .v23TeacherClassDetail .v23CoordinatorClassActions > button,
  .v23StudentDetailOverlay .v23StudentQuickLinks > button{
    height:54px!important;
    min-height:54px!important;

    padding:7px!important;

    grid-template-columns:14px minmax(0,1fr)!important;
    column-gap:5px!important;

    border-radius:13px!important;
  }

  .v23TeacherClassDetail .v23CoordinatorClassActions > button svg,
  .v23StudentDetailOverlay .v23StudentQuickLinks > button svg{
    width:14px!important;
    height:14px!important;
  }

  .v23TeacherClassDetail .v23CoordinatorClassActions > button b,
  .v23StudentDetailOverlay .v23StudentQuickLinks > button b{
    font-size:9.8px!important;
  }
}


/* ==========================================================
   RUYA_COORDINATOR_ACTION_GUTTER_V4
   3'lü aksiyon gruplarına güvenli sağ-sol nefes
   ========================================================== */

.v23TeacherClassDetail .v23CoordinatorClassActions,
.v23StudentDetailOverlay .v23StudentQuickLinks{
  width:auto!important;
  max-width:none!important;

  margin-left:14px!important;
  margin-right:14px!important;

  box-sizing:border-box!important;
}


/* Kartlar mevcut alanı eşit paylaşsın */
.v23TeacherClassDetail .v23CoordinatorClassActions > button,
.v23StudentDetailOverlay .v23StudentQuickLinks > button{
  width:100%!important;
  max-width:100%!important;
}


/* Biraz daha dar telefonlarda nefesi koru */
@media (max-width:390px){

  .v23TeacherClassDetail .v23CoordinatorClassActions,
  .v23StudentDetailOverlay .v23StudentQuickLinks{
    margin-left:10px!important;
    margin-right:10px!important;
  }

}


/* RUYA_COORD_NATIVE_HERO_V1 */
.v23TeacherClassDetailHead.ruyaCoordNativeHeroHead{
  justify-content:center!important;
  text-align:center!important;
}

.ruyaCoordNativeHero{
  width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
}

.ruyaCoordNativeHeroTitle{
  margin:4px 0 10px!important;
  color:#17307a!important;
  font-size:28px!important;
  line-height:1.08!important;
  font-weight:750!important;
  letter-spacing:-.02em!important;
  text-align:center!important;
}

.ruyaCoordNativeHeroMeta{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  margin:0 auto!important;
  padding:9px 15px!important;
  border-radius:999px!important;
  background:#f4f6fb!important;
  color:#737f98!important;
  font-size:14px!important;
  font-weight:650!important;
  line-height:1!important;
}

.ruyaCoordNativePeopleIcon{
  position:relative!important;
  display:block!important;
  width:20px!important;
  height:16px!important;
}

.ruyaCoordNativePeopleIcon:before,
.ruyaCoordNativePeopleIcon:after{
  content:""!important;
  position:absolute!important;
  top:0!important;
  width:6px!important;
  height:6px!important;
  border:1.7px solid currentColor!important;
  border-radius:50%!important;
  box-sizing:border-box!important;
}

.ruyaCoordNativePeopleIcon:before{left:3px!important}
.ruyaCoordNativePeopleIcon:after{right:3px!important}

.ruyaCoordNativePeopleIcon i{
  position:absolute!important;
  bottom:0!important;
  width:10px!important;
  height:7px!important;
  border:1.7px solid currentColor!important;
  border-bottom:0!important;
  border-radius:8px 8px 0 0!important;
  box-sizing:border-box!important;
}

.ruyaCoordNativePeopleIcon i:first-child{left:0!important}
.ruyaCoordNativePeopleIcon i:last-child{right:0!important}

.ruyaCoordNativeHeroInfo{
  max-width:420px!important;
  margin:11px auto 0!important;
  color:#8a93a9!important;
  font-size:13px!important;
  line-height:1.45!important;
  font-weight:500!important;
  text-align:center!important;
}

@media(max-width:430px){
  .ruyaCoordNativeHeroTitle{
    font-size:24px!important;
  }
}