/* =========================
   ATTENDANCE SPLASH
   ========================== */

.att-splash {

  position: fixed;
  inset: 0;
  z-index: 10500; /* پایین‌تر از version-blocker (11000) */
  background: linear-gradient(
    180deg,
    #D4F4EF 0%,
    #BFEDE6 45%,
    #7DC9CF 100%
  );

  display: none;           /* اول مخفی، بعد با JS فعال می‌کنیم */
  align-items: center;
  justify-content: center;
  padding: 24px;
}


.att-splash-inner {
  width: 100%;
  max-width: 320px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  padding: 18px 18px 16px;
  text-align: center;
  box-shadow: 0 18px 40px rgba(15, 52, 67, 0.28);
  backdrop-filter: blur(12px);
}


.att-splash-avatar {
  width: 120px;     /* قبلاً 96 بود */
  height: 120px;
  margin: 0 auto 12px;
  border-radius: 999px;
  overflow: hidden;
  background: radial-gradient(circle at 30% 20%, #ffffff 0, #2BB2A8 35%, #1BA7A6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 4px #ffffff,
    0 14px 26px rgba(0, 0, 0, 0.25);
}

.att-splash-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* اگر از حرف اول اسم استفاده می‌کنی */
.att-splash-initial {
  font-size: 46px;
  font-weight: 800;
  color: #FFFFFF;
}

.att-splash-name {
  font-size: 17px;
  font-weight: 800;
  color: #1C2C3A;  /* Dayan Deep Blue */
  margin-bottom: 6px;
}

.att-splash-sub {
  font-size: 14px;
  font-weight: bold;
  color: #4B5563;
  line-height: 2;
}

/* انیمیشن محو شدن */
.att-splash {
  animation: attSplashFadeIn 0.3s ease-out forwards;
}

.att-splash.is-hiding {
  animation: attSplashFadeOut 0.4s ease-in forwards;
}


.att-splash-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px 3px;
  border-radius: 999px;
  background: rgba(27, 167, 166, 0.12);
  color: #03636A;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 12px;
}

@keyframes attSplashFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}


.att-splash-avatar {
  /* بالا همین استایل‌ها را داری، این خط را هم اضافه کن */
  animation: avatarFloat 2.4s ease-in-out infinite;
}

@keyframes avatarFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

@keyframes attSplashFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(6px);
  }
}