/*
 * Giriş / qeydiyyat (panel.layouts.auth-modern) - Tailwind-in əhatə etmədiyi hissələr.
 * Üslub qrgate.az saytındandır: --qr-black #020202, --qr-green #A9F504, --qr-blue #06A4ED,
 * --qr-light #F7F7F7, Poppins. Səhnə vəziyyəti `[data-scene][data-state]` ilə idarə olunur
 * (auth-modern.js): setup → scan → done → control.
 */

/* ── Fon motivləri (saytdakı piksel kvadratlar + şəbəkə) ──── */
.auth-grid {
    background-image:
        linear-gradient(rgba(2, 2, 2, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(2, 2, 2, 0.045) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: radial-gradient(circle at 85% 80%, #000 0%, transparent 55%);
    -webkit-mask-image: radial-gradient(circle at 85% 80%, #000 0%, transparent 55%);
}

.auth-pixel {
    position: absolute;
    width: 44px;
    height: 44px;
    border: 3px solid #cdeefc;
    border-radius: 12px;
    background: #fff;
    animation: auth-pixel-float 6s ease-in-out infinite;
}
.auth-pixel::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 4px;
    background: #d9fb8f;
    animation: auth-pixel-blink 3s ease-in-out infinite;
}
/* İkinci kvadrat fazadan kənar hərəkət edir - eyni anda tərpənmirlər */
.auth-pixel--late, .auth-pixel--late::after { animation-delay: -3s; }

@keyframes auth-pixel-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(6deg); }
}
@keyframes auth-pixel-blink {
    0%, 100% { transform: scale(1); background: #d9fb8f; }
    50% { transform: scale(.7); background: #a9f504; }
}

/* ── Səhnə miqyası: sabit 700×580, ekrana görə kiçilir ─────
 * `zoom` (transform yox): kiçilən səhnə layout-da da az yer tutur. */
.auth-stage { zoom: 0.6; }
@media (min-width: 1280px) { .auth-stage { zoom: 0.8; } }
@media (min-width: 1536px) { .auth-stage { zoom: 0.98; } }
/* Alçaq ekran: en icazə versə də hündürlüyə sığsın */
@media (min-width: 1280px) and (max-height: 960px) { .auth-stage { zoom: 0.74; } }
@media (max-height: 820px) { .auth-stage { zoom: 0.56; } }

/* ── 1. Veb panel pəncərəsi ───────────────────────────────── */
/* Yan kartlar telefondan kənara əyilir: sol pəncərə sola, «Qısa hesabat» sağa (--auth-tilt) */
.auth-stage { --auth-tilt: 10deg; }
.auth-web { transform: rotate(calc(var(--auth-tilt) * -1)); transition: box-shadow .4s; }
/* Dar sol panel (lg, <1280): səhnənin solunda yer azdır - pəncərə aside-dan kəsilməsin */
@media (max-width: 1279px) { .auth-stage .auth-web { left: -60px; } }
[data-state="setup"] .auth-web,
[data-state="control"] .auth-web { box-shadow: 0 0 0 6px rgba(169, 245, 4, 0.35), 0 12px 32px -14px rgba(2, 2, 2, 0.18); }
/* QR kartı yalnız «Quraşdırma»da açıqdır */
.auth-web-modal { opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.auth-web-card { transform: translateY(10px); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
[data-state="setup"] .auth-web-modal { opacity: 1; }
[data-state="setup"] .auth-web-card { transform: none; }
[data-state="setup"] .auth-web-print { animation: auth-ring-pulse 1.4s ease-in-out .6s infinite; }

/* ── 2. Telefon (QR Gate tətbiqi; daxili Figma ölçüləri 393×852, zoom ilə kiçilir) ── */
/*
 * Telefon yalnız mərhələ dəyişəndə transition ilə hərəkət edir. Fasiləsiz animasiya / fırlanma
 * QOYULMUR: transform qatı zoom-lu mətni bulanıq rastrlaşdırır. Fırlanma yalnız kamera anındadır,
 * mətnli nəticə ekranında telefon düz dayanır (iti mətn).
 */
.auth-phone { zoom: 0.64; transition: transform 1s cubic-bezier(.45, 0, .2, 1); }
[data-state="scan"] .auth-phone { transform: translate(-46px, -16px) rotate(-4deg); }

.auth-statusbar { color: #111; transition: color .6s ease; }
[data-state="scan"] .auth-statusbar { color: #fff; }

.auth-screen { transition: opacity .6s cubic-bezier(.4, 0, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1); }
.auth-screen-scan,
.auth-screen-done { opacity: 0; }
.auth-screen-done { transform: translateY(30px); }
[data-state="scan"] .auth-screen-scan,
[data-state="done"] .auth-screen-scan { opacity: 1; }
[data-state="done"] .auth-screen-done { opacity: 1; transform: none; }

/* Alt naviqasiya: nəticə ekranında yoxdur (tətbiqdəki kimi) */
.auth-tabbar { transition: opacity .5s ease; }
[data-state="done"] .auth-tabbar { opacity: 0; }
.auth-tab-home { color: #04a9f5; }
[data-state="scan"] .auth-tab-home { color: #686868; }
[data-state="scan"] .auth-tab-qr { animation: auth-ring-pulse 1.2s ease-in-out infinite; }

/* Ana səhifə: seçilən əməliyyatın düyməsi «basılır» */
/* «Giriş et / Çıxış et» basılması: Quraşdırma bitəndə (skan ekranından dərhal əvvəl) bir dəfə
 * aydın basılır - düymə çökür, üstündə barmaq izi (dairə) açılıb sönür */
.auth-btn-in, .auth-btn-out { position: relative; overflow: hidden; }
.auth-btn-in::after, .auth-btn-out::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    opacity: 0;
    transform: scale(.2);
    pointer-events: none;
}
[data-state="setup"]:not([data-type="out"]) .auth-btn-in,
[data-state="setup"][data-type="out"] .auth-btn-out { animation: auth-press 2.6s ease-in-out both; }
[data-state="setup"]:not([data-type="out"]) .auth-btn-in::after,
[data-state="setup"][data-type="out"] .auth-btn-out::after { animation: auth-tap 2.6s ease-out both; }

/* QR kod ekranı: kamerada poster */
.auth-camera {
    background:
        radial-gradient(55% 30% at 20% 12%, rgba(255, 240, 215, 0.55) 0%, transparent 70%),
        radial-gradient(50% 30% at 85% 88%, rgba(160, 140, 120, 0.55) 0%, transparent 70%),
        linear-gradient(180deg, #8d8b87 0%, #6f6c68 50%, #4c4a47 100%);
}
/* Kamera fokuslanır: kart QR-ın mərkəzinə (150px, 201px) nəzərən kiçilib dəqiq çərçivəyə oturur */
.auth-cam-poster { filter: blur(1.2px); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5); transform-origin: 150px 201px; transform: scale(1.12); transition: transform 1s cubic-bezier(.2, .8, .2, 1), filter .8s ease; }
[data-state="scan"] .auth-cam-poster,
[data-state="done"] .auth-cam-poster { transform: none; filter: blur(.3px); }

.auth-corner { position: absolute; width: 58px; height: 58px; border-color: #04a9f5; }
.auth-scan-line { opacity: 0; box-shadow: 0 0 14px 2px rgba(4, 169, 245, 0.65); }
[data-state="scan"] .auth-scan-line { opacity: 1; animation: auth-scan 1.3s ease-in-out infinite; }

/* Nəticə: giriş (yaşıl), gecikmə (yaşıl + gecikmə bloku), çıxış (mavi) */
.auth-check { background: #3cc62a; box-shadow: 0 0 0 7px rgba(60, 198, 42, 0.22); }
.auth-done-title { color: #3cc62a; }
[data-type="out"] .auth-check { background: #04a9f5; box-shadow: 0 0 0 7px rgba(4, 169, 245, 0.22); }
[data-type="out"] .auth-done-title { color: #04a9f5; }
[data-state="done"] .auth-check { animation: auth-pop .5s cubic-bezier(.2, 1.4, .4, 1); }

.auth-late, .auth-late-row, .auth-late-btn { display: none; }
[data-type="late"] .auth-late { display: block; }
[data-type="late"] .auth-late-row { display: flex; }
[data-type="late"] .auth-late-btn { display: flex; }
[data-type="late"] .auth-card-title { display: none; }

/* Tarixçəyə / hesabata yeni düşən qeyd */
.auth-row-new { animation: auth-row-in .6s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 0 0 2px rgba(4, 169, 245, 0.35); }

/* ── 3. Admin «Qısa hesabat» ──────────────────────────────── */
.auth-board { transform: rotate(var(--auth-tilt)); transition: box-shadow .4s, transform .5s cubic-bezier(.2, .8, .2, 1); }
[data-state="control"] .auth-board { transform: translateY(-4px) rotate(var(--auth-tilt));box-shadow: 0 0 0 6px rgba(4, 169, 245, 0.16), 0 12px 32px -14px rgba(2, 2, 2, 0.18); }
.auth-bump { animation: auth-pop .45s cubic-bezier(.2, 1.4, .4, 1); display: inline-block; }
.auth-work-bar { transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.auth-donut { transition: background .4s; }
/* «Canlı» nöqtəsi - tətbiqdəki yaşıl indikator */
.auth-live-dot { box-shadow: 0 0 0 0 rgba(141, 209, 11, .6); animation: auth-live 2s ease-out infinite; }
@keyframes auth-live {
    0% { box-shadow: 0 0 0 0 rgba(141, 209, 11, .6); }
    70%, 100% { box-shadow: 0 0 0 6px rgba(141, 209, 11, 0); }
}

/* ── Addımlar ─────────────────────────────────────────────── */
.auth-step-no { color: #d4d4d4; transition: color .5s ease; }
.auth-step-title { color: #9a9a9a; transition: color .5s ease; }
.auth-step.is-active .auth-step-no { color: #06a4ed; }
.auth-step.is-active .auth-step-title { color: #020202; }
/* Zolağın eni JS-dən transition ilə idarə olunur (dolma / geri sarınma) - bax auth-modern.js setBar() */
.auth-step-bar > span { width: 0; }

/* ── Mobil mini nişan ─────────────────────────────────────── */
.auth-mini-check { animation: auth-mini 3.2s ease-in-out infinite; }

/* ── Forma (saytın input / düymə üslubu) ──────────────────── */
.auth-enter { animation: auth-rise .55s cubic-bezier(.2, .8, .2, 1) both; }

.auth-input {
    width: 100%;
    height: 50px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: #f7f7f7;
    padding: 0 16px;
    font-size: 14px;
    color: #020202;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
    outline: none;
}
.auth-input::placeholder { color: #9a9a9a; }
.auth-input:focus { background: #fff; border-color: #06a4ed; box-shadow: 0 0 0 4px rgba(6, 164, 237, 0.14); }
select.auth-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235b5b5b' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; }
.auth-input.has-icon { padding-right: 46px; }

.auth-input.is-invalid { border-color: #ef4444; background: #fff; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12); }
.invalid-feedback { display: block; margin-top: 6px; font-size: 12px; color: #dc2626; }

/* Əsas düymə - panelin / mobil tətbiqin mavisi (#04A9F5) */
.auth-btn {
    display: flex;
    width: 100%;
    height: 52px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 9999px;
    border: 0;
    background: #04a9f5;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    transition: background-color .15s, transform .15s, opacity .15s;
}
.auth-btn:hover { background: #0389c9; }

/* Qeydiyyat addımları (1 Şəxsi məlumatlar → 2 Şirkət) - sol paneldəki addım zolaqları kimi */
.auth-signup-step { color: #9a9a9a; transition: color .3s; }
.auth-signup-bar { position: relative; overflow: hidden; background: #e4e4e4; }
.auth-signup-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 0;
    border-radius: inherit;
    background: #04a9f5;
    transition: width .5s cubic-bezier(.4, 0, .2, 1);
}
.auth-signup-no { font-size: 18px; font-weight: 600; color: #d4d4d4; transition: color .3s; }
.auth-signup-step.is-active { color: #020202; }
.auth-signup-step.is-active .auth-signup-bar::after,
.auth-signup-step.is-done .auth-signup-bar::after { width: 100%; }
.auth-signup-step.is-active .auth-signup-no,
.auth-signup-step.is-done .auth-signup-no { color: #04a9f5; }
[data-signup-step]:not([hidden]) { animation: auth-row-in .35s cubic-bezier(.2, .8, .2, 1); }
.auth-btn:active { transform: translateY(1px); }
.auth-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(4, 169, 245, 0.3); }

/* Göndərmə zamanı: ikon (ox) yüklənmə dairəsinə çevrilir, düymə bağlanır (auth-modern.js) */
.auth-btn-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: auth-spin .7s linear infinite;
}
.auth-btn.is-loading { cursor: wait; opacity: .92; }
.auth-btn.is-loading i { display: none; }
.auth-btn.is-loading .auth-btn-spinner { display: inline-block; }

/* auth.js `.showpass` (fa-eye) - inputun içində sağda */
.showpass { position: absolute; right: 16px; top: 25px; transform: translateY(-50%); cursor: pointer; color: #9a9a9a; font-size: 15px; }
.showpass:hover { color: #020202; }

/* Tablar (e-poçt / telefon) */
.auth-tab[aria-selected="true"] { background: #020202; color: #fff; }
.auth-panel[hidden] { display: none; }
.auth-panel { animation: auth-rise .35s ease both; }

.auth-mobile-menu summary::-webkit-details-marker { display: none; }

/* ── Açar kadrlar ─────────────────────────────────────────── */
@keyframes auth-scan     { 0%, 100% { transform: translateY(-105px); } 50% { transform: translateY(105px); } }
@keyframes auth-float    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes auth-press {
    0%, 62% { transform: scale(1); box-shadow: 0 0 0 0 rgba(4, 169, 245, 0); }
    72% { transform: scale(.88); box-shadow: 0 0 0 8px rgba(4, 169, 245, .25); }
    84%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(4, 169, 245, 0); }
}
@keyframes auth-tap {
    0%, 64% { opacity: 0; transform: scale(.2); }
    72% { opacity: 1; transform: scale(.6); }
    92%, 100% { opacity: 0; transform: scale(2.6); }
}
@keyframes auth-qr-glow  { 0%, 100% { box-shadow: 0 0 0 0 rgba(169, 245, 4, 0); } 50% { box-shadow: 0 0 0 6px rgba(169, 245, 4, 0.55); } }
@keyframes auth-pop      { 0% { transform: scale(.4); } 100% { transform: scale(1); } }
@keyframes auth-ring-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(4, 169, 245, 0.45); } 50% { box-shadow: 0 0 0 12px rgba(4, 169, 245, 0); } }
@keyframes auth-row-in   { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes auth-spin     { to { transform: rotate(360deg); } }
@keyframes auth-rise     { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes auth-mini     { 0%, 40% { transform: scale(0); } 50%, 90% { transform: scale(1); } 100% { transform: scale(0); } }

/* ── SweetAlert2 - YALNIZ auth səhifələri ────────────────────
 * Bu fayl yalnız panel.layouts.auth-modern-də (giriş, qeydiyyat, şifrə) yüklənir -
 * panelin digər SweetAlert-lərinə təsir etmir. qrgate.az üslubu: Poppins, yumru kart,
 * həb (pill) düymələr, əsas mavi #04A9F5.
 * `body` prefiksi: sweetalert2.all.js öz stilini səhifəyə SONRADAN yazır - eyni çəkidə onunku qalib gəlirdi.
 * `!important` - Swal-ın inline `confirmButtonColor`-unu da əvəzləyir. Ölçülər px (Swal `em` işlədir). */
body .swal2-container.swal2-backdrop-show { background: rgba(2, 2, 2, .45); }
body .swal2-popup {
    width: 440px;
    max-width: calc(100% - 32px);
    padding: 32px 28px 28px;
    border-radius: 28px;
    font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
    font-size: 16px;
    box-shadow: 0 30px 70px -25px rgba(2, 2, 2, .4);
}
body .swal2-title { padding: 18px 0 0; font-size: 22px; font-weight: 500; line-height: 1.3; color: #020202; }
body .swal2-html-container { margin: 10px 4px 0; font-size: 15px; line-height: 1.65; color: #5b5b5b; }
body .swal2-icon.swal2-info, body .swal2-icon.swal2-question { border-color: #cdeefc; color: #04a9f5; }
body .swal2-actions { flex-wrap: nowrap; gap: 10px; width: 100%; margin: 26px 0 0; }
body .swal2-styled {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 13px 18px;
    border-radius: 999px !important;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: none !important;
    transition: background-color .2s;
}
body .swal2-styled .ti { font-size: 19px; }
body .swal2-styled.swal2-confirm { background: #04a9f5 !important; color: #fff !important; }
body .swal2-styled.swal2-confirm:hover { background: #0389c9 !important; }
body .swal2-styled.swal2-cancel, body .swal2-styled.swal2-deny { flex: 0 0 auto; min-width: 120px; background: #f4f4f4 !important; color: #020202 !important; }
body .swal2-styled.swal2-cancel:hover, body .swal2-styled.swal2-deny:hover { background: #e9e9e9 !important; }
body .swal2-styled:focus-visible { box-shadow: 0 0 0 3px rgba(4, 169, 245, .35) !important; }

/* Personal → mobil tətbiq popup-ı: dairə yox, tətbiq ikonu kimi yumru kvadrat + telefon */
body .swal2-icon.auth-swal-app-icon {
    width: 76px;
    height: 76px;
    margin: 4px auto 0;
    border: 0;
    border-radius: 24px;
    background: #e6f6fe;
    color: #04a9f5;
}
body .swal2-icon.auth-swal-app-icon .swal2-icon-content { font-size: 38px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}