/* ═══════════════════════════════════════════════════════════════════════════
   static/attendance/css/att-btn.css — KATTA CHECK-IN/OUT TUGMASINING
   HOLAT-ANIMATSIYASI (2026-08-20)

   ⛔ NIMA O'ZGARMAGAN (eng muhimi):
   `.bigbtn`ning BO'SH TURGAN (idle) ko'rinishi — o'lcham, shakl, gradient,
   soya, taklif-pulsi, hover/active — attendance/templates/attendance/
   index.html'dagi 2026-08-19 taktil dizaynining O'ZI, bir bayt ham
   o'zgartirilmagan. TZ so'ragan "kirish — zumrad radial porlash" va
   "chiqish — marjon/yoqut porlash" holatlari ALLAQACHON o'sha yerda
   mavjud (`.bigbtn.in` → --accent zumrad #24C29A, `.bigbtn.out` →
   --danger marjon #F58B8B, ikkalasi ham `radial-gradient` bilan) — shu
   bois bu fayl ularga UMUMAN tegmaydi, faqat USTIGA vaqtinchalik
   holatlarni qo'shadi.

   Bu fayldagi HAMMA narsa `.bigbtn` ga JS qo'shadigan holat klassi
   (`is-processing` / `is-success` / `is-warn` / `is-error`) ORQASIDA
   turadi. Klass yo'q — bu fayl hech narsa qilmaydi (shu bois uni
   hammaga yuklash xavfsiz).

   ⛔ `.att-anim-*` (att-anim.css, FAQAT TrainingUser id=221 uchun A/B
   tajribasi) BILAN HECH QANDAY UMUMIY SELEKTOR YO'Q — bu yerdagi
   prefikslar `.bb-*` va `.bigbtn.is-*`. Ikkala tizim bir-birini
   ko'rmaydi.
   ═══════════════════════════════════════════════════════════════════════ */

/* Effekt qatlami — JS tomonidan `.bigbtn`ning BIRINCHI bolasi sifatida
   qo'shiladi.
   ⚠️ NEGA BIRINCHI, oxirgi emas: index.html'da
   `.bigbtn span:last-child{text-shadow:…}` qoidasi bor (tugma yorlig'i).
   Effekt qatlami OXIRGI bola bo'lsa, yorliq `:last-child` bo'lmay qolib,
   barcha xodimlar uchun matn soyasi JIMGINA yo'qolardi. Birinchi bola
   bo'lsa — yorliq oxirgi bo'lib qoladi, mavjud qoida o'zgarishsiz ishlaydi. */
.bigbtn > .bb-fx{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; opacity:0; transition:opacity .18s ease;
}
.bigbtn.is-processing > .bb-fx,
.bigbtn.is-success > .bb-fx,
.bigbtn.is-warn > .bb-fx,
.bigbtn.is-error > .bb-fx{ opacity:1 }

/* Holat paytida tugmaning O'Z mazmuni (ikonka + yorliq) so'nadi —
   O'CHIRILMAYDI (DOM tegilmaydi), shu bois holat tugagach hech narsani
   qayta qurish kerak emas. */
.bigbtn.is-processing > .ic, .bigbtn.is-processing > span:last-child,
.bigbtn.is-success > .ic,    .bigbtn.is-success > span:last-child,
.bigbtn.is-warn > .ic,       .bigbtn.is-warn > span:last-child,
.bigbtn.is-error > .ic,      .bigbtn.is-error > span:last-child{
  opacity:0; transform:scale(.86); transition:opacity .16s ease, transform .16s ease;
}

/* ═══════════════ 1. QAYTA ISHLANMOQDA (processing) ═══════════════
   HAQIQIY GPS o'qish + check-in/check-out so'rovi UCHIB TURGAN paytda.
   Tugma kichrayadi (bosilgan/"kutmoqda" hissi) va aylanma paydo bo'ladi. */
.bigbtn.is-processing{
  transform:scale(.9);
  filter:saturate(.75);
  box-shadow:0 8px 20px -8px rgba(0,0,0,.35), inset 0 -6px 14px rgba(0,0,0,.18);
}
.bigbtn.is-processing:hover{ transform:scale(.9) }   /* hover ko'tarilishini bosadi */
.bb-spin{
  width:54px; height:54px; border-radius:50%;
  border:4px solid rgba(255,255,255,.28);
  border-top-color:rgba(255,255,255,.95);
  animation:bb-spin 720ms linear infinite;
}
@keyframes bb-spin{ to{ transform:rotate(360deg) } }

/* ═══════════════ 2. MUVAFFAQIYAT (success) ═══════════════
   Qalqon+belgi ikonkasi ichkaridan "chiqadi" + ikki to'lqinli halqa.
   Davomiyligi 1.8s — JS ham AYNAN shu qiymatni kutadi (BB_MS.success). */
.bigbtn.is-success{
  transform:scale(1);
  background:
    radial-gradient(120% 120% at 28% 18%, rgba(255,255,255,.42), transparent 58%),
    linear-gradient(155deg, var(--ok), color-mix(in srgb, var(--ok) 72%, black 28%));
  box-shadow:
    0 18px 40px -10px rgba(var(--ok-rgb),.6),
    0 0 0 7px color-mix(in srgb, var(--ok) 18%, transparent),
    inset 0 1px 2px rgba(255,255,255,.45);
}
.bb-ico{ width:66px; height:66px; color:#fff }
.bb-ico svg{ width:100%; height:100%; display:block;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.25)) }
.bigbtn.is-success .bb-ico{ animation:bb-pop 540ms cubic-bezier(.34,1.56,.64,1) both }
@keyframes bb-pop{
  0%  { transform:scale(.3);  opacity:0 }
  60% { transform:scale(1.14); opacity:1 }
  100%{ transform:scale(1);   opacity:1 }
}
/* Qalqon ichidagi "belgi" chizig'i — chizib chiqiladi (stroke-dashoffset). */
.bb-ico .bb-check{
  stroke-dasharray:26; stroke-dashoffset:26;
  animation:bb-draw 420ms .22s ease-out both;
}
@keyframes bb-draw{ to{ stroke-dashoffset:0 } }

/* To'lqin (ripple) — ikkita kengayuvchi halqa, tugmadan tashqariga chiqadi. */
.bb-ripple{ position:absolute; inset:0; border-radius:inherit; pointer-events:none }
.bb-ripple::before, .bb-ripple::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  border:2.5px solid rgba(255,255,255,.75); opacity:0;
}
.bigbtn.is-success .bb-ripple::before{ animation:bb-ring 1.15s .05s ease-out both }
.bigbtn.is-success .bb-ripple::after { animation:bb-ring 1.15s .32s ease-out both }
@keyframes bb-ring{
  0%  { transform:scale(.9);  opacity:.85 }
  100%{ transform:scale(1.55); opacity:0 }
}

/* ═══════════════ 3. SAQLANDI, LEKIN RADIUSDAN TASHQARIDA (warn) ═══════════
   Bu XATO EMAS: server 200 qaytardi va yozuv SAQLANDI, faqat `valid:false`
   (attendance/services/checkin.py — geofence QATTIQ bloklamaydi). Aynan shu
   holat att-anim.js'da ham alohida (`out_of_range`) — shu bois bu yerda ham
   qizil "xato" emas, sariq ogohlantirish + HAQIQIY masofa matni, va OVOZ
   muvaffaqiyat ohangi bo'lib qoladi (yozuv chindan saqlangan). */
.bigbtn.is-warn{
  background:
    radial-gradient(120% 120% at 28% 18%, rgba(255,255,255,.4), transparent 58%),
    linear-gradient(155deg, var(--warn), color-mix(in srgb, var(--warn) 72%, black 28%));
  box-shadow:0 18px 40px -12px rgba(0,0,0,.4),
    0 0 0 7px color-mix(in srgb, var(--warn) 20%, transparent),
    inset 0 1px 2px rgba(255,255,255,.4);
  color:#2a1e05;
}
.bigbtn.is-warn .bb-ico{ color:#2a1e05; animation:bb-pop 540ms cubic-bezier(.34,1.56,.64,1) both }

/* ═══════════════ 4. XATO (error) ═══════════════
   BLOKLOVCHI xato (hech narsa saqlanmadi): Wi-Fi/Telegram/koordinata/holat
   nizosi. Tugma "silkinadi" + xato belgisi. Matn — SERVERNING O'Z xabari
   (JS, o'ylab topilgan matn emas). */
.bigbtn.is-error{
  background:
    radial-gradient(120% 120% at 28% 18%, rgba(255,255,255,.32), transparent 58%),
    linear-gradient(155deg, var(--danger), color-mix(in srgb, var(--danger) 66%, black 34%));
  box-shadow:0 16px 34px -12px rgba(var(--danger-rgb),.6),
    0 0 0 7px color-mix(in srgb, var(--danger) 20%, transparent),
    inset 0 1px 2px rgba(255,255,255,.35);
  animation:bb-shake 520ms cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes bb-shake{
  0%,100%{ transform:translateX(0) }
  12%{ transform:translateX(-9px) } 26%{ transform:translateX(8px) }
  40%{ transform:translateX(-6px) } 54%{ transform:translateX(5px) }
  68%{ transform:translateX(-3px) } 84%{ transform:translateX(2px) }
}
.bigbtn.is-error .bb-ico{ animation:bb-pop 420ms cubic-bezier(.34,1.56,.64,1) both }
.bb-ico .bb-x{
  stroke-dasharray:14; stroke-dashoffset:14;
  animation:bb-draw 300ms .18s ease-out both;
}
.bb-ico .bb-x2{ animation-delay:.32s }

/* ═══════════════ HOLAT MATNI (tugma ostida) ═══════════════
   Faqat HAQIQIY xabar bo'lganda ko'rinadi. Matn manbai:
     · radiusdan tashqarida → serverdagi `distance_meters` (o'lchangan masofa)
     · bloklovchi xato     → serverning `error.message` (yoki Wi-Fi kodi
                             uchun att-anim.js dagi AYNI matn)
   Yangi xabar formati O'YLAB TOPILMAGAN. */
.bigbtn-msg{
  max-width:min(340px, 92vw); margin:-22px auto 0; text-align:center;
  font-size:13.5px; font-weight:650; line-height:1.4;
  padding:9px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--border2); background:var(--panel-2); color:var(--text);
  opacity:0; transform:translateY(-6px);
  transition:opacity .22s ease, transform .22s ease;
}
.bigbtn-msg.show{ opacity:1; transform:translateY(0) }
.bigbtn-msg.err{
  border-color:color-mix(in srgb, var(--danger) 45%, transparent);
  background:color-mix(in srgb, var(--danger) 14%, transparent);
}
.bigbtn-msg.warn{
  border-color:color-mix(in srgb, var(--warn) 45%, transparent);
  background:color-mix(in srgb, var(--warn) 15%, transparent);
}

/* ═══════════════ KAMAYTIRILGAN HARAKAT ═══════════════
   Vestibulyar buzilishi bo'lgan xodimlar uchun (OS sozlamasi). Holatlar
   YO'QOLMAYDI — faqat harakat olib tashlanadi, ranglar/ikonkalar qoladi,
   ya'ni ma'lumot bir xil yetkaziladi. */
@media (prefers-reduced-motion:reduce){
  .bigbtn.is-error{ animation:none }
  .bigbtn.is-success .bb-ripple::before,
  .bigbtn.is-success .bb-ripple::after{ animation:none; opacity:0 }
  .bb-spin{ animation-duration:1.6s }
  .bigbtn .bb-ico{ animation:none !important; opacity:1; transform:none }
  .bb-ico .bb-check, .bb-ico .bb-x{ animation:none; stroke-dashoffset:0 }
}

/* Mobil — tugma 158px (index.html @media), ikonka/aylanma ham mos kichrayadi. */
@media (max-width:620px){
  .bb-ico{ width:58px; height:58px }
  .bb-spin{ width:46px; height:46px; border-width:3.5px }
  .bigbtn-msg{ font-size:13px; margin-top:-18px }
}