/* assets/css/payroll-lock.css
   [PATCH124] Lapisan kunci layar Payroll.

   Menutupi ISI HALAMAN saja. Sidebar, header, dan footer tetap terlihat dan
   tetap bisa dipakai: orang yang salah masuk menu harus bisa keluar tanpa
   memasukkan PIN, dan mengunci navigasinya berarti menjebaknya di halaman
   yang tidak ingin ia buka. */

#payrollKunciArea { position: relative; min-height: 70vh; }

#payrollKunciTirai {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1030;               /* di bawah modal Bootstrap (1050) */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* [PATCH136] Tanpa padding-top. Jarak dari atas layar sekarang ditentukan
       `top` pada kotaknya yang sticky. Padding di sini akan menambahkannya
       LAGI, dan kotaknya turun dua kali lipat dari yang dimaksud. */
    background: rgba(244, 246, 249, .97);
    backdrop-filter: blur(3px);
}

/* Tanpa backdrop-filter (Firefox lama, peramban di dalam aplikasi), latarnya
   harus tetap pekat sendiri. Tirai setengah tembus yang mengandalkan blur
   berarti angka gaji masih terbaca samar di peramban yang tidak mendukungnya. */
@supports not (backdrop-filter: blur(3px)) {
    #payrollKunciTirai { background: #f4f6f9; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   [PATCH136] KOTAK PIN MENEMPEL PADA LAYAR, BUKAN PADA PUNCAK HALAMAN.
   ═════════════════════════════════════════════════════════════════════════════
   Dilaporkan sebagai: pindah ke tab lain lalu kembali, halamannya cuma blur
   dan kotak PIN-nya tidak ada.

   Sebabnya bukan kotak yang tidak tergambar. Ia tergambar sempurna, di puncak
   #payrollKunciArea. Tapi area itu setinggi seluruh tabel gaji, dan orang yang
   baru saja membacanya hampir selalu sudah menggulir ke bawah. Diukur saat
   ditirukan di peramban: kotaknya berada 1.937 piksel DI ATAS layar. Yang
   terlihat cuma blur.

   Kenapa baru sekarang ketahuan, dan kenapa hanya lewat pindah tab: sesudah
   menggambar, kodenya memanggil focus() pada kotak PIN, dan focus() kebetulan
   ikut menggulirkan halaman ke kotak itu. Kebetulan itu yang menutupi cacatnya
   selama ini. Sesudah berpindah tab, dokumennya belum memegang fokus saat
   penggambaran terjadi, peramban menolak menggulir, dan cacatnya muncul.

   Mengandalkan efek samping focus() untuk menempatkan sesuatu di layar bukan
   penempatan; itu keberuntungan yang kebetulan berulang.

   position: sticky membuat kotaknya mengikuti layar ke mana pun orang
   menggulir, tanpa merebut posisi gulir mereka. Ia tetap DI DALAM tirai, jadi
   janji "yang tertutup hanya isi halaman, sidebar dan header tetap bisa
   dipakai" tidak berubah sedikit pun. */
#payrollKunciKotak {
    position: sticky;
    top: 6vh;
    width: 100%;
    max-width: 380px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
    padding: 26px 24px;
    text-align: center;
}

#payrollKunciKotak .kunci-ikon {
    font-size: 2.2rem;
    color: #1a3c6e;
    margin-bottom: .5rem;
}

#payrollKunciKotak input.kunci-pin {
    font-size: 1.6rem;
    letter-spacing: .55em;
    text-align: center;
    padding-left: .55em;          /* imbangi spasi huruf supaya tetap di tengah */
    font-variant-numeric: tabular-nums;
}

#payrollKunciKotak .kunci-pesan { min-height: 1.2rem; }

/* Halaman di belakangnya tidak boleh bisa di-tab. Tanpa ini, orang bisa
   berpindah ke tombol di balik tirai lewat papan ketik dan menekannya. */
#payrollKunciArea.terkunci > *:not(#payrollKunciTirai) {
    filter: blur(4px);
    pointer-events: none;
    user-select: none;
}

/* [PATCH127] Penghitung mundur AFK.

   POJOK KIRI BAWAH, bukan kanan. Tombol mengambang "Lapor Kendala" duduk di
   right:20px bottom:20px dengan z-index 1035 (lihat ui-kendala.css). Versi
   sebelumnya menaruh penghitung ini di pojok yang sama dengan z-index lebih
   rendah, jadi ia tergambar lalu tertutup rapat dan tidak pernah terlihat.

   Gayanya juga ditulis inline oleh JS. Duplikasi yang disengaja: kalau berkas
   ini gagal termuat, penghitungnya tetap muncul di tempat yang benar. Untuk
   elemen yang tugasnya memperingatkan, tidak terlihat sama dengan tidak ada. */
#payrollAfk {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 1036;
    padding: .45rem .85rem;
    border-radius: 6px;
    font-size: .82rem;
    max-width: 240px;
    background: #fff;
    border: 1px solid #d7dbe0;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .14);
}

/* Kotak PIN: matikan bantuan peramban yang justru merugikan di sini. */
#payrollKunciKotak input.kunci-pin::-ms-reveal,
#payrollKunciKotak input.kunci-pin::-ms-clear { display: none; }