/* RUYA_GUIDANCE_CALENDAR_DETAIL_V1_20260926 */

/* =========================================================
   REHBERLIK TAKVIM - ETKINLIK DETAY
   Kompakt / mobil uygulama tipi modal
========================================================= */

.ruyaGuidanceCalendarDetailBack{
  position:fixed!important;
  inset:0!important;
  z-index:2147482600!important;

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

  padding:
    max(20px,env(safe-area-inset-top,0px))
    15px
    max(20px,env(safe-area-inset-bottom,0px))!important;

  background:rgba(27,36,57,.48)!important;

  -webkit-backdrop-filter:blur(9px)!important;
  backdrop-filter:blur(9px)!important;

  overflow:hidden!important;
}

.ruyaGuidanceCalendarDetailWrap{
  position:relative!important;

  width:min(100%,460px)!important;
  max-width:460px!important;

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

  max-height:calc(100dvh - 40px)!important;
}


/* TAKVIM IKONU - dev yuvarlak yerine küçük premium ikon */

.ruyaGuidanceCalendarDetailIcon{
  position:absolute!important;
  z-index:5!important;

  top:15px!important;
  left:17px!important;

  width:42px!important;
  height:42px!important;

  display:grid!important;
  place-items:center!important;

  margin:0!important;

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

  background:#edf2ff!important;
  color:#24458b!important;

  box-shadow:none!important;

  transform:none!important;
}

.ruyaGuidanceCalendarDetailIcon .monoIcon,
.ruyaGuidanceCalendarDetailIcon svg{
  width:21px!important;
  height:21px!important;
}


/* ANA MODAL */

.ruyaGuidanceCalendarDetailModal{
  box-sizing:border-box!important;

  width:100%!important;
  max-width:none!important;
  max-height:calc(100dvh - 40px)!important;

  margin:0!important;
  padding:
    70px
    17px
    15px!important;

  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;

  border:1px solid rgba(229,233,241,.98)!important;
  border-radius:25px!important;

  background:#fff!important;

  box-shadow:
    0 22px 60px rgba(18,28,50,.22),
    0 3px 12px rgba(18,28,50,.06)!important;

  text-align:left!important;

  -webkit-overflow-scrolling:touch!important;
}


/* KAPAT X */

.ruyaGuidanceCalendarDetailModal .modalTopClose{
  position:absolute!important;

  top:16px!important;
  right:16px!important;

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

  padding:0!important;

  display:grid!important;
  place-items:center!important;

  border:1px solid #e5e9f1!important;
  border-radius:14px!important;

  background:#f7f8fb!important;
  color:#66748b!important;

  font-size:22px!important;
  font-weight:500!important;

  line-height:1!important;
}


/* ETKINLIK + TARIH */

.ruyaGuidanceCalendarDetailModal>small{
  display:block!important;

  margin:0 45px 7px 0!important;

  color:#7f8ba0!important;

  font-size:10.5px!important;
  font-weight:800!important;
  line-height:1.3!important;

  letter-spacing:.065em!important;
  text-transform:uppercase!important;
}


/* BAŞLIK */

.ruyaGuidanceCalendarDetailModal>h3{
  margin:0 0 15px!important;

  color:#172950!important;

  font-size:21px!important;
  font-weight:800!important;
  line-height:1.18!important;
  letter-spacing:-.025em!important;

  text-align:left!important;

  word-break:normal!important;
  overflow-wrap:anywhere!important;
}


/* HEDEF / SAAT / PAYLAŞAN
   Büyük kutular yerine kompakt bilgi çipleri */

.ruyaGuidanceCalendarDetailModal
.ruyaCalendarDetailMeta{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;

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

.ruyaGuidanceCalendarDetailModal
.ruyaCalendarDetailMeta>span{
  box-sizing:border-box!important;

  min-width:0!important;
  min-height:54px!important;

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

  gap:3px!important;

  padding:9px 11px!important;

  border:1px solid #e9edf4!important;
  border-radius:14px!important;

  background:#f8f9fc!important;

  text-align:left!important;
}

.ruyaGuidanceCalendarDetailModal
.ruyaCalendarDetailMeta>span small{
  margin:0!important;

  color:#929caf!important;

  font-size:8.5px!important;
  font-weight:800!important;
  line-height:1.1!important;

  letter-spacing:.08em!important;
}

.ruyaGuidanceCalendarDetailModal
.ruyaCalendarDetailMeta>span b{
  display:block!important;

  width:100%!important;

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

  color:#2c3954!important;

  font-size:11.5px!important;
  font-weight:720!important;
  line-height:1.25!important;
}


/* ETKINLIK ICERIGI */

.ruyaGuidanceCalendarDetailModal
.ruyaCalendarDetailContent{
  margin:0!important;

  padding:12px 13px!important;

  border:1px solid #e8edf4!important;
  border-radius:15px!important;

  background:#fff!important;
}

.ruyaGuidanceCalendarDetailModal
.ruyaCalendarDetailContent>small{
  display:block!important;

  margin:0 0 7px!important;

  color:#929caf!important;

  font-size:9px!important;
  font-weight:800!important;

  letter-spacing:.075em!important;
}

.ruyaGuidanceCalendarDetailModal
.ruyaCalendarDetailDescription{
  min-height:0!important;

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

  border:0!important;
  background:transparent!important;

  color:#3b4962!important;

  font-size:13px!important;
  font-weight:500!important;
  line-height:1.48!important;

  text-align:left!important;
}

.ruyaGuidanceCalendarDetailModal
.ruyaCalendarDetailDescription.empty{
  color:#919aaa!important;
  font-style:italic!important;
}


/* DOSYA EKLERI */

.ruyaGuidanceCalendarDetailModal
.ruyaCalendarDetailFiles{
  margin:10px 0 0!important;

  padding:11px 12px!important;

  border:1px solid #e8edf4!important;
  border-radius:15px!important;

  background:#f9fafc!important;
}

.ruyaGuidanceCalendarDetailModal
.ruyaCalendarDetailFiles>small{
  display:block!important;

  margin-bottom:7px!important;

  color:#929caf!important;

  font-size:9px!important;
  font-weight:800!important;
  letter-spacing:.075em!important;
}


/* FOOTER */

.ruyaGuidanceCalendarDetailModal
.ruyaCalendarDetailFooter{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;

  margin-top:12px!important;
  padding:12px 0 0!important;

  border-top:1px solid #edf0f5!important;
}


/* Footer içindeki receipt wrapper varsa da düzgün otursun */

.ruyaGuidanceCalendarDetailModal
.ruyaCalendarDetailFooter>*{
  min-width:0!important;
  margin:0!important;
}

.ruyaGuidanceCalendarDetailModal
.ruyaCalendarDetailFooter button{
  width:100%!important;

  min-height:43px!important;

  margin:0!important;
  padding:9px 11px!important;

  border-radius:13px!important;

  font-size:12px!important;
  font-weight:730!important;

  box-shadow:none!important;
}


/* Görüntülenme = ikincil aksiyon */

.ruyaGuidanceCalendarDetailModal
.ruyaCalendarDetailFooter button:not(:last-child){
  border:1px solid #dfe5ef!important;

  background:#f6f8fb!important;
  color:#40516f!important;
}


/* Kapat = ana aksiyon */

.ruyaGuidanceCalendarDetailModal
.ruyaCalendarDetailFooter>button:last-child{
  border:0!important;

  background:#203d86!important;
  color:#fff!important;
}


/* 3 aksiyon olursa Düzenle de kompakt */

.ruyaGuidanceCalendarDetailModal
.ruyaCalendarDetailFooter:has(> :nth-child(3)){
  grid-template-columns:1fr 1fr!important;
}

.ruyaGuidanceCalendarDetailModal
.ruyaCalendarDetailFooter:has(> :nth-child(3))
> :last-child{
  grid-column:1/-1!important;
}


/* KÜÇÜK TELEFON */

@media (max-width:380px){

  .ruyaGuidanceCalendarDetailBack{
    padding-left:11px!important;
    padding-right:11px!important;
  }

  .ruyaGuidanceCalendarDetailModal{
    padding-left:14px!important;
    padding-right:14px!important;

    border-radius:22px!important;
  }

  .ruyaGuidanceCalendarDetailModal>h3{
    font-size:19px!important;
  }
}


/* TABLET */

@media (min-width:700px){

  .ruyaGuidanceCalendarDetailWrap{
    width:min(100%,500px)!important;
    max-width:500px!important;
  }

  .ruyaGuidanceCalendarDetailModal{
    padding-left:21px!important;
    padding-right:21px!important;
  }

  .ruyaGuidanceCalendarDetailModal>h3{
    font-size:22px!important;
  }
}