/* ============================================================
   KerjaGo — lapisan tampilan modern (dimuat SETELAH app-theme.css / mobile-theme.css)
   1. Tombol bulat modern (mobile app + halaman login)
   2. Notifikasi SweetAlert (pengganti toastr) — dipakai di semua layout
   3. Halaman login versi HP: hero berwarna, logo, bubble dekoratif
   4. Splash screen
   5. QR kartu karyawan
   ============================================================ */

/* ---------- 1. TOMBOL ---------- */
.mobile-body .btn,
.auth-right .btn {
  --kg-btn-shadow: color-mix(in srgb, var(--primary) 38%, transparent);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 999px !important;
  padding: .66rem 1.35rem;
  font-weight: 700; letter-spacing: .15px; line-height: 1.25;
  border-width: 0;
  transition: transform .12s ease, box-shadow .2s ease, filter .15s ease, background-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.mobile-body .btn:active:not(:disabled),
.auth-right .btn:active:not(:disabled) { transform: scale(.96); }
.mobile-body .btn:disabled, .mobile-body .btn.disabled,
.auth-right .btn:disabled { opacity: .55; box-shadow: none !important; }
.mobile-body .btn:focus-visible, .auth-right .btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent); outline-offset: 2px; }

.mobile-body .btn-sm, .auth-right .btn-sm { padding: .42rem 1rem; font-size: .8rem; gap: .35rem; }
.mobile-body .btn-lg, .auth-right .btn-lg { padding: .85rem 1.7rem; font-size: 1.02rem; }
.mobile-body .btn.w-100, .auth-right .btn.w-100 { padding-top: .8rem; padding-bottom: .8rem; }

.mobile-body .btn:not(.w-100), .auth-right .btn:not(.w-100) { white-space: nowrap; }

/* solid: gradien + bayangan lembut */
.mobile-body .btn-primary, .auth-right .btn-primary {
  background-image: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
  background-color: var(--primary) !important; color: #fff !important;
  box-shadow: 0 8px 18px var(--kg-btn-shadow);
}
.mobile-body .btn-primary:hover, .auth-right .btn-primary:hover { filter: brightness(1.06); box-shadow: 0 10px 22px var(--kg-btn-shadow); }

.mobile-body .btn-success { background-image: linear-gradient(135deg, #34D399, #059669) !important; background-color: #10B981 !important; color: #fff !important; box-shadow: 0 8px 18px rgba(16,185,129,.32); }
.mobile-body .btn-danger  { background-image: linear-gradient(135deg, #FB7185, #E11D48) !important; background-color: #EF4444 !important; color: #fff !important; box-shadow: 0 8px 18px rgba(244,63,94,.30); }
.mobile-body .btn-warning { background-image: linear-gradient(135deg, #FBBF24, #D97706) !important; background-color: #F59E0B !important; color: #fff !important; box-shadow: 0 8px 18px rgba(245,158,11,.30); }
.mobile-body .btn-info    { background-image: linear-gradient(135deg, #38BDF8, #0284C7) !important; background-color: #0EA5E9 !important; color: #fff !important; box-shadow: 0 8px 18px rgba(14,165,233,.30); }
.mobile-body .btn-secondary { background-image: linear-gradient(135deg, #94A3B8, #64748B) !important; background-color: #64748B !important; color: #fff !important; box-shadow: 0 8px 18px rgba(100,116,139,.25); }
.mobile-body .btn-success:hover, .mobile-body .btn-danger:hover, .mobile-body .btn-warning:hover,
.mobile-body .btn-info:hover, .mobile-body .btn-secondary:hover { filter: brightness(1.06); }

/* tombol berwarna inline (style="background:var(--primary);border:none" / var(--mint)) -> ikut gradien modern */
.mobile-body .btn[style*="var(--primary)"]:not([class*="btn-outline"]):not(.btn-light) {
  background-image: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
  color: #fff; box-shadow: 0 8px 18px var(--kg-btn-shadow);
}
.mobile-body .btn[style*="var(--mint)"]:not([class*="btn-outline"]) {
  background-image: linear-gradient(135deg, #34D399, #059669) !important; color: #fff; box-shadow: 0 8px 18px rgba(16,185,129,.32);
}
.mobile-body .btn[style*="background"][disabled], .mobile-body .btn[style*="background"].disabled { box-shadow: none; }

/* outline: tepi tebal, isi lembut saat disentuh */
.mobile-body .btn[class*="btn-outline"], .auth-right .btn[class*="btn-outline"] {
  border-width: 1.5px; background: transparent; box-shadow: none;
}
.mobile-body .btn-outline-primary { color: var(--primary) !important; border-color: color-mix(in srgb, var(--primary) 60%, transparent) !important; }
.mobile-body .btn-outline-primary:hover, .mobile-body .btn-outline-primary:active { background: color-mix(in srgb, var(--primary) 12%, transparent) !important; }
.mobile-body .btn-outline-secondary, .auth-right .btn-outline-secondary { color: var(--ink-soft) !important; border-color: var(--border) !important; background: var(--surface); }
.mobile-body .btn-outline-secondary:hover, .auth-right .btn-outline-secondary:hover { background: var(--canvas) !important; color: var(--ink) !important; }
.mobile-body .btn-outline-danger { color: var(--danger) !important; border-color: color-mix(in srgb, var(--danger) 55%, transparent) !important; }
.mobile-body .btn-outline-danger:hover, .mobile-body .btn-outline-danger:active { background: color-mix(in srgb, var(--danger) 12%, transparent) !important; }
.mobile-body .btn-outline-success { color: var(--mint) !important; border-color: color-mix(in srgb, var(--mint) 55%, transparent) !important; }
.mobile-body .btn-outline-success:hover, .mobile-body .btn-outline-success:active { background: color-mix(in srgb, var(--mint) 12%, transparent) !important; }

/* tombol terang / link */
.mobile-body .btn-light { background: var(--canvas) !important; color: var(--ink) !important; box-shadow: none; border: 1px solid var(--border); }
.mobile-body .btn-link { color: var(--primary); box-shadow: none; text-decoration: none; background: transparent; }

/* input-group = SATU kotak berborder (ikon + isian + tombol mata menyatu), fokus = satu border + ring tipis (tanpa border ganda) */
.mobile-body .input-group, .auth-right .input-group {
  flex-wrap: nowrap; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.mobile-body .input-group:focus-within, .auth-right .input-group:focus-within {
  border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}
.mobile-body .input-group > .form-control, .mobile-body .input-group > .input-group-text, .mobile-body .input-group > .btn,
.auth-right .input-group > .form-control, .auth-right .input-group > .input-group-text, .auth-right .input-group > .btn {
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: 0 !important; background: transparent !important;
}
.mobile-body .input-group > .input-group-text, .auth-right .input-group > .input-group-text { color: var(--ink-soft); padding-right: .25rem; }
.mobile-body .input-group > .btn, .auth-right .input-group > .btn { color: var(--ink-soft) !important; padding-left: 1rem; padding-right: 1rem; transform: none; }
.mobile-body .input-group > .btn:hover, .auth-right .input-group > .btn:hover { color: var(--primary) !important; }
.mobile-body .input-group:focus-within > .input-group-text, .auth-right .input-group:focus-within > .input-group-text { color: var(--primary); }

/* kolom isian ikut membulat supaya serasi dengan tombol */
.mobile-body .form-control, .mobile-body .form-select,
.auth-right .form-control, .auth-right .form-select { border-radius: 14px; padding-top: .62rem; padding-bottom: .62rem; }
.mobile-body textarea.form-control { border-radius: 16px; }
.mobile-body .form-control:focus, .mobile-body .form-select:focus, .auth-right .form-control:focus, .auth-right .form-select:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}
.auth-right .btn-primary .btn-text i { margin-right: .5rem; }

/* tombol di dalam modal-footer: berdampingan, lebar sama */
.mobile-body .modal-footer { gap: .6rem; border-top: none; padding-top: 0; }
.mobile-body .modal-footer > .btn { flex: 1 1 0; margin: 0; }

/* ---------- 2. NOTIFIKASI SweetAlert (toast modern) ---------- */
.swal2-container.swal2-top, .swal2-container.swal2-top-end { padding-top: calc(env(safe-area-inset-top, 0px) + 12px); }
.swal2-container.swal2-top-end { padding-right: 16px; }
.swal2-popup.swal2-toast.kg-toast {
  width: auto; max-width: min(92vw, 400px); min-width: min(86vw, 240px);
  padding: .75rem 1rem; border-radius: 14px;
  background: var(--surface, #fff); color: var(--ink, #0F172A);
  border: 1px solid var(--border, #E2E8F0);
  box-shadow: none !important; /* flat: tanpa bayangan */
  overflow: hidden; align-items: center; cursor: pointer;
}
.kg-toast-success { --kg-toast-color: #10B981; }
.kg-toast-error   { --kg-toast-color: #EF4444; }
.kg-toast-warning { --kg-toast-color: #F59E0B; }
.kg-toast-info    { --kg-toast-color: #0EA5E9; }
/* ikon datar: lingkaran penuh + tanda putih (tanpa cincin/animasi bawaan SweetAlert) */
.kg-toast .swal2-icon { margin: 0 .75rem 0 0; width: 26px; min-width: 26px; height: 26px; border: 0; background: none; }
.kg-toast .swal2-icon .swal2-icon-content { width: 26px; height: 26px; display: flex; }
.kg-toast .kg-ico { width: 26px; height: 26px; display: block; }
.kg-toast .swal2-title { margin: 0; padding: 0; font-size: .92rem; font-weight: 600; text-align: left; line-height: 1.35; color: var(--ink, #0F172A); }
.kg-toast .swal2-html-container { margin: .1rem 0 0; padding: 0; font-size: .8rem; text-align: left; color: var(--ink-soft, #64748B); }
.kg-toast .swal2-timer-progress-bar-wrapper { height: 2px; }
.kg-toast .swal2-timer-progress-bar { background: var(--kg-toast-color, var(--primary)); height: 2px; opacity: 1; }
@keyframes kg-toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.swal2-popup.swal2-toast.kg-toast.swal2-show { animation: kg-toast-in .22s ease-out; }
.swal2-popup.swal2-toast.kg-toast.swal2-hide { animation: none; opacity: 0; transition: opacity .18s; }

/* dialog konfirmasi SweetAlert (non-toast) ikut gaya modern */
.swal2-popup:not(.swal2-toast) { border-radius: 24px; padding: 1.6rem 1.4rem 1.4rem; background: var(--surface, #fff); color: var(--ink, #0F172A); }
.swal2-popup:not(.swal2-toast) .swal2-title { font-weight: 800; font-size: 1.25rem; color: var(--ink, #0F172A); }
.swal2-popup:not(.swal2-toast) .swal2-html-container { color: var(--ink-soft, #64748B); }
.swal2-popup:not(.swal2-toast) .swal2-actions { gap: .6rem; width: 100%; }
.swal2-popup:not(.swal2-toast) .swal2-styled { border-radius: 999px; padding: .65rem 1.4rem; font-weight: 700; box-shadow: none; flex: 1 1 0; }
.swal2-popup:not(.swal2-toast) .swal2-styled.swal2-confirm { background-image: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.swal2-popup:not(.swal2-toast) .swal2-styled.swal2-cancel { background: var(--canvas, #F1F5F9); color: var(--ink, #0F172A); }

/* ---------- 3. LOGIN VERSI HP ---------- */
.auth-mobile-hero { display: none; }
@media (max-width: 900px) {
  .auth-right { display: block; flex: 0 0 100%; padding: 0; background: var(--canvas); min-height: 100vh; min-height: 100dvh; position: relative; overflow-x: hidden; }
  .auth-mobile-hero {
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff;
    padding: calc(env(safe-area-inset-top, 0px) + 38px) 24px 74px; position: relative; overflow: hidden;
    background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 0 0 44px 44px;
  }
  /* 2 bubble besar di area kosong bagian bawah (gaya lingkaran transparan seperti kartu waktu di halaman presensi) */
  .auth-bubble {
    position: absolute; z-index: 1; border-radius: 50%; cursor: pointer;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 20%, transparent), color-mix(in srgb, var(--primary) 6%, transparent));
    animation: kg-bubble 10s ease-in-out infinite;
  }
  .auth-bubble.b1 { width: 230px; height: 230px; bottom: -70px; right: -60px; }
  .auth-bubble.b2 { width: 120px; height: 120px; bottom: 110px; left: -42px; animation-delay: -4s; }
  .auth-bubble.pop { animation: kg-bubble-pop .5s ease-out, kg-bubble 10s ease-in-out .5s infinite; }
  .auth-logo-card {
    position: relative; z-index: 2; width: 92px; height: 92px; border-radius: 28px; background: #fff; padding: 6px;
    display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
    box-shadow: 0 16px 34px rgba(0,0,0,.28), 0 0 0 6px rgba(255,255,255,.18);
    animation: kg-logo-pop .7s cubic-bezier(.34, 1.56, .64, 1) both, kg-logo-float 4.5s ease-in-out .8s infinite;
  }
  .auth-logo-card img { width: 100%; height: 100%; object-fit: contain; border-radius: 22px; }
  .auth-hero-title { position: relative; z-index: 2; font-size: 1.35rem; font-weight: 800; line-height: 1.15; }
  .auth-hero-sub { position: relative; z-index: 2; font-size: .85rem; opacity: .85; margin-top: 4px; }
  .auth-right .form-box {
    position: relative; z-index: 3; width: calc(100% - 32px); max-width: 440px; margin: -44px auto 28px;
    background: var(--surface); border-radius: 28px; padding: 26px 22px 24px; box-shadow: 0 18px 44px rgba(15,23,42,.14);
    animation: kg-sheet-up .5s .1s cubic-bezier(.32, .72, 0, 1) both;
  }
}
@keyframes kg-bubble { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(8px, -16px) scale(1.05); } 66% { transform: translate(-7px, -6px) scale(.97); } }
@keyframes kg-bubble-pop { 0% { transform: scale(1); opacity: 1; } 35% { transform: scale(1.35); opacity: .35; } 100% { transform: scale(1); opacity: 1; } }
@keyframes kg-logo-pop { from { opacity: 0; transform: scale(.4) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes kg-logo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes kg-sheet-up { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

/* ---------- 4. SPLASH SCREEN ---------- */
#kgSplash { display: none; }
html.kg-splash-on #kgSplash {
  display: flex; position: fixed; inset: 0; z-index: 100000; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #FFFFFF 0%, #EAF3FF 100%); color: #0B2A8F; overflow: hidden;
  transition: opacity .45s ease, transform .45s ease, visibility .45s;
}
html.kg-splash-on #kgSplash.hide { opacity: 0; transform: scale(1.04); visibility: hidden; pointer-events: none; }
#kgSplash .sp-bubble { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 28%, rgba(21,130,255,.22), rgba(21,130,255,.06)); animation: kg-bubble 9s ease-in-out infinite; }
#kgSplash .sp-bubble.s1 { width: 220px; height: 220px; top: -70px; left: -80px; }
#kgSplash .sp-bubble.s2 { width: 140px; height: 140px; bottom: 90px; right: -50px; animation-delay: -3s; }
#kgSplash .sp-bubble.s3 { width: 70px; height: 70px; top: 24%; right: 14%; animation-delay: -5s; }
#kgSplash .sp-bubble.s4 { width: 46px; height: 46px; bottom: 22%; left: 12%; animation-delay: -2s; }
#kgSplash .sp-icon-wrap { position: relative; width: 132px; height: 132px; display: flex; align-items: center; justify-content: center; }
#kgSplash .sp-icon-wrap::before, #kgSplash .sp-icon-wrap::after {
  content: ''; position: absolute; inset: -14px; border-radius: 40px; border: 2px solid rgba(21,100,255,.35); animation: kg-splash-ring 2.2s ease-out infinite;
}
#kgSplash .sp-icon-wrap::after { animation-delay: 1.1s; }
#kgSplash .sp-icon { position: relative; width: 132px; height: 132px; filter: drop-shadow(0 18px 26px rgba(10,60,200,.35)); animation: kg-splash-pop .8s cubic-bezier(.34, 1.56, .64, 1) both; }
#kgSplash .sp-name { margin-top: 44px; font-size: 1.7rem; font-weight: 800; letter-spacing: .3px; animation: kg-splash-text .6s .35s ease both; }
#kgSplash .sp-tag { font-size: .85rem; color: #4A5E9E; margin-top: 2px; animation: kg-splash-text .6s .5s ease both; }
#kgSplash .sp-dots { display: flex; gap: 7px; margin-top: 30px; animation: kg-splash-text .6s .65s ease both; }
#kgSplash .sp-dots span { width: 8px; height: 8px; border-radius: 50%; background: #1564FF; animation: kg-splash-dot 1s ease-in-out infinite; }
#kgSplash .sp-dots span:nth-child(2) { animation-delay: .15s; } #kgSplash .sp-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes kg-splash-pop { from { opacity: 0; transform: scale(.55) translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes kg-splash-ring { 0% { transform: scale(.88); opacity: .7; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes kg-splash-text { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes kg-splash-dot { 0%, 100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-6px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #kgSplash *, .auth-bubble, .auth-logo-card { animation: none !important; }
}

/* ---------- 5. QR KARTU KARYAWAN ---------- */
.id-card-qr svg { display: block; width: 112px; height: 112px; border-radius: 8px; }
#qrBig svg { display: block; width: 260px; max-width: 100%; height: auto; margin: 0 auto; border-radius: 12px; }

/* ---------- 6. ALERT TENGAH LAYAR (aplikasi mobile) ---------- */
/* Backdrop gelap+blur hanya untuk dialog; toast (pojok layar) tidak boleh mengaburkan halaman */
body:not(.swal2-toast-shown) .swal2-container.swal2-backdrop-show { background: rgba(15, 23, 42, .5); backdrop-filter: blur(3px); }
body.swal2-toast-shown .swal2-container, body.swal2-toast-shown .swal2-container.swal2-backdrop-show { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.swal2-popup.kg-alert {
  width: min(86vw, 340px); padding: 1.6rem 1.3rem 1.3rem; border-radius: 26px;
  background: var(--surface, #fff); color: var(--ink, #0F172A); box-shadow: none; border: 1px solid var(--border, #E2E8F0);
}
.kg-alert .swal2-title { font-size: 1.2rem; font-weight: 800; padding: 0; margin: .4rem 0 0; color: var(--ink, #0F172A); }
.kg-alert .swal2-html-container { margin: .5rem 0 0; padding: 0; font-size: .92rem; line-height: 1.5; color: var(--ink-soft, #64748B); }
.kg-alert .swal2-icon { margin: .2rem auto 0; transform: scale(.9); }
.kg-alert .swal2-actions { width: 100%; margin-top: 1.2rem; }
.kg-alert .swal2-confirm.kg-alert-btn {
  width: 100%; margin: 0; border-radius: 999px; padding: .75rem 1.4rem; font-weight: 700; font-size: .95rem; box-shadow: none; color: #fff;
  background-image: linear-gradient(135deg, var(--primary), var(--primary-dark));
}
.kg-alert-success .swal2-confirm.kg-alert-btn { background-image: linear-gradient(135deg, #34D399, #059669); }
.kg-alert-error   .swal2-confirm.kg-alert-btn { background-image: linear-gradient(135deg, #FB7185, #E11D48); }
.kg-alert-warning .swal2-confirm.kg-alert-btn { background-image: linear-gradient(135deg, #FBBF24, #D97706); }
.kg-alert-info    .swal2-confirm.kg-alert-btn { background-image: linear-gradient(135deg, #38BDF8, #0284C7); }
.kg-alert .swal2-confirm.kg-alert-btn:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.kg-alert .swal2-confirm.kg-alert-btn:active { transform: scale(.97); }
.kg-alert-success .swal2-timer-progress-bar { background: #10B981; }
.kg-alert-info .swal2-timer-progress-bar { background: #0EA5E9; }
@keyframes kg-alert-in  { 0% { opacity: 0; transform: scale(.82) translateY(14px); } 60% { opacity: 1; transform: scale(1.03); } 100% { transform: none; } }
@keyframes kg-alert-out { to { opacity: 0; transform: scale(.9); } }
.swal2-popup.kg-alert-in  { animation: kg-alert-in .38s cubic-bezier(.34, 1.3, .64, 1); }
.swal2-popup.kg-alert-out { animation: kg-alert-out .18s ease-in forwards; }
@media (prefers-reduced-motion: reduce) { .swal2-popup.kg-alert-in, .swal2-popup.kg-alert-out { animation: none; } }

/* tanpa progress bar timer di semua SweetAlert */
.swal2-timer-progress-bar, .swal2-timer-progress-bar-wrapper { display: none !important; }

/* ===== Mode hemat data: kurangi animasi, blur, dan dekorasi ===== */
[data-datasaver="1"] *, [data-datasaver="1"] *::before, [data-datasaver="1"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
[data-datasaver="1"] .spinner-border, [data-datasaver="1"] .spinner-grow, [data-datasaver="1"] .skeleton { animation-duration: .9s !important; animation-iteration-count: infinite !important; }
[data-datasaver="1"] * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
[data-datasaver="1"] .auth-bubble, [data-datasaver="1"] .auth-floaters { display: none !important; }