/**
 * SIMFONI - pages/login.css
 *
 * Gaya khusus halaman auth/login.php. Diekstrak dari blok <style> inline pada
 * berkas tersebut. Seluruh selector diberi awalan .page--login sehingga tidak
 * lagi bergantung pada urutan muat dan tidak dapat bertabrakan dengan
 * halaman lain yang memakai nama kelas sama.
 *
 * @filename    login.css
 * @description Gaya halaman auth/login.php
 * @author      Syams
 * @created     August 11, 2025
 * @license     SIMFONI Dual License (GPL v3 / Commercial)
 * @version     2.3
 * @project     SIMFONI - Sistem Informasi Monitoring dan Evaluasi Kearsipan
 */

/* Modern Login Design */

/* ── Latar foto gedung Dispersip ────────────────────────────────────────────
   Latar dipasang pada KOTAK ISI (.wrapper > .container-fluid), bukan pada
   <body>. Alasannya: kerangka .wrapper selebar 1600px menutupi hampir seluruh
   layar, jadi apa pun yang dilukis di body hanya tersisa sebagai bingkai tipis
   di sekelilingnya — foto tidak akan terlihat. Aturan di bawah juga menimpa
   selubung tembus pandang bawaan kotak isi (simfoni.css): di halaman ini
   fotolah yang menjadi latar, jadi selubung itu tidak dipakai.

   `cover` + `center` memilih pemotongan sendiri mengikuti kotaknya. Foto sudah
   diperkecil ke 2400x1086 (rasio ~2,21:1) — cukup untuk .wrapper yang paling
   lebar 1600px, termasuk pada layar rapat-piksel. Di desktop kotak isi
   berukuran sekitar 1600x790 (rasio ~2,02:1), jadi selisih rasionya tipis dan
   yang terpotong hanya sekitar 75px di tiap tepi kiri-kanan; pada jendela yang
   lebih pendek arah potongnya berbalik menjadi sedikit tepi atas-bawah. Kedua
   arah sama-sama dangkal: gedung, tiang bendera, dan papan DISPERSIP tetap
   utuh. Di layar sempit barulah pemotongan mengetat ke tengah, tempat pintu
   masuk berada.

   Latar sengaja TIDAK memakai `background-attachment: fixed`: nilai itu
   mengukur foto terhadap viewport, bukan terhadap kotak ini, sehingga
   pemotongannya melenceng dari kotak yang sebenarnya dilukis.

   Selubung putih di atasnya yang membuat foto tampak semi transparan. Ia
   ditulis sebagai lapisan gradien pada properti yang sama — idiom yang sudah
   dipakai body di simfoni.css — supaya tidak perlu elemen atau pseudo-element
   tambahan hanya untuk meredam foto. */
.page--login .wrapper > .container-fluid {
    /* Tinggi kotak isi dipaksa memenuhi sisa layar agar foto tampil sebagai
       latar penuh, bukan sebagai pita setinggi kartu login. Yang dikurangi:
       tinggi kerangka atas yang menempel (diukur app.js), margin .wrapper
       atas dan bawah (40px + 32px), dan tinggi footer beserta bingkainya
       (~64px). Nilai cadangan 190px dipakai sebelum app.js sempat mengukur. */
    min-height: calc(100vh - var(--simfoni-header-h, 190px) - 136px);

    /* Padding samping dilepas supaya foto mencapai tepi .wrapper (full-bleed);
       jarak isi kini menjadi urusan .login-container di bawah. */
    padding-left: 0;
    padding-right: 0;

    background-color: #dceaf7; /* langit foto, tampil bila gambar gagal dimuat */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.32)),
        url("../../img/bg-img.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Jarak tegak halaman masuk.
   `min-height: 70vh` dulu memaksa wadah setinggi 70% layar, dan karena isinya
   dipusatkan, sisa ruangnya jatuh sebagai rongga di ATAS kartu (di bawah
   navbar) dan di BAWAHNYA (sebelum footer) — pada layar tinggi rongga itu
   lebih besar daripada kartunya sendiri. Wadah tetap setinggi isinya; yang
   memenuhi layar sekarang kotak isi berlatar foto di atas, dan kartu ini
   dipusatkan di dalamnya. Padding di sini menggantikan padding samping
   .container-fluid yang dilepas, agar kartu tidak menempel ke tepi foto. */
.page--login .login-container {
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    margin: 0;
    position: relative;
}

.page--login .login-card {
    background: rgba(255, 255, 255, 0.95);
    /* Dipulihkan dari blok login lama di simfoni.css (dihapus pada fase 5):
       kedua deklarasi ini ikut membentuk tampilan asli kartu login karena
       aturan di bawah tidak menyetel ulang keduanya. */
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.12),
        0 20px 40px rgba(0, 0, 0, 0.08);
    max-width: 420px;
    width: 100%;
    overflow: hidden;
    animation: slideInScale 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 1;
}

.page--login .login-header {
    padding: 1.1rem 2rem 0.9rem;
    text-align: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 24px 24px 0 0;
    position: relative;
    overflow: hidden;
}

.page--login .login-header::before {
    content: '';
    position: absolute;
    top: -50%;
    /* Dipulihkan dari blok login lama di simfoni.css (dihapus pada fase 5):
       aturan di bawah tidak menyetel ulang 'left' maupun 'animation', sehingga
       kilau radial yang berputar perlahan tetap menjadi bagian tampilan asli. */
    left: -50%;
    animation: rotate 20s linear infinite;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    pointer-events: none;
}

.page--login .login-logo {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.6rem;
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: float 3s ease-in-out infinite;
    backdrop-filter: blur(10px);
}

.page--login .login-logo i {
    font-size: 2rem;
    color: #667eea;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page--login .login-header h4 {
    color: white;
    font-weight: 700;
    margin-bottom: 0.2rem;
    font-size: 1.5rem;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: -0.02em;
}

.page--login .login-header p {
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    font-size: 0.95rem;
    position: relative;
    z-index: 2;
    font-weight: 400;
    line-height: 1.4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.page--login .login-body {
    padding: 1rem 2rem 1.1rem;
}

.page--login .form-group {
    margin-bottom: 0.65rem;
    position: relative;
}

/* Baris pertama tidak perlu didorong: padding atas .login-body sudah
   memisahkannya dari kepala kartu. Baris terakhir — tombol Masuk — juga
   tidak, sebab padding bawah .login-body sudah menjadi jaraknya ke tepi. */
.page--login .form-group:first-of-type {
    margin-top: 0;
}

.page--login .login-body form .form-group:last-child {
    margin-bottom: 0;
}

.page--login .form-label {
    display: block;
    margin-bottom: 0.2rem;
    color: #4a5568;
    font-weight: 600;
    font-size: 0.9rem;
}

.page--login .form-input {
    width: 100%;
    padding: 0.7rem 1rem; /* Reduced from 0.8rem 1rem */
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    background: #f8fafc;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.page--login .form-input:focus {
    outline: none;
    border-color: #667eea;
    background: white;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

.page--login .form-input::placeholder {
    color: #a0aec0;
}

/* Select dropdown specific styling */
.page--login .form-input select {
    cursor: pointer;
}

.page--login .form-input option {
    padding: 0.5rem;
    background: white;
    color: #2d3748;
}

/* ── Sakelar tampil/sembunyi sandi ──────────────────────────────────────────
   Kelasnya sama dengan layar Ubah Password, tetapi aturannya ditulis ulang di
   sini: change-password.css bersasaran `.page--change-password` dan tidak
   pernah berlaku di layar ini. Bentuk medannya pun berbeda — di sana
   `.form-floating` Bootstrap, di sini `.form-input` bulat milik login. */
.page--login .password-input-group {
    position: relative;
}

/* Ruang bagi tombol. Tanpa ini sandi yang panjang berjalan tepat di bawah
   ikonnya dan huruf terakhirnya tidak terbaca justru ketika ditampilkan. */
.page--login .password-input-group .form-input {
    padding-right: 3rem;
}

.page--login .password-toggle {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: #a0aec0;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.page--login .password-toggle .material-icons {
    font-size: 1.25rem;
}

.page--login .password-toggle:hover:not(:disabled) {
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
}

/* Cincin fokus hanya bagi penjelajah papan tik: tombol ini berada di dalam alur
   Tab, dan cincin yang muncul pada setiap klik tetikus akan mengganggu. */
.page--login .password-toggle:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
    color: #667eea;
}

.page--login .password-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

/* Remember Me Checkbox Styling */
.page--login .form-check-group {
    margin: 0.5rem 0;
}

.page--login .form-check-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.9rem;
    color: #4a5568;
    user-select: none;
    position: relative;
}

.page--login .form-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.page--login .checkmark {
    position: relative;
    height: 20px;
    width: 20px;
    background-color: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    margin-right: 12px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.page--login .form-check-label:hover .checkmark {
    border-color: #667eea;
    background-color: #edf2f7;
}

.page--login .form-checkbox:checked ~ .checkmark {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
}

.page--login .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.page--login .form-checkbox:checked ~ .checkmark:after {
    display: block;
}

.page--login .form-checkbox:disabled ~ .checkmark {
    background-color: #f7fafc;
    border-color: #e2e8f0;
    opacity: 0.6;
    cursor: not-allowed;
}

.page--login .btn-login {
    width: 100%;
    padding: 0.75rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
}

.page--login .btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
}

.page--login .btn-login:active {
    transform: translateY(0);
}

.page--login .btn-login::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: all 0.5s;
    transform: translate(-50%, -50%);
}

.page--login .btn-login:active::before {
    width: 300px;
    height: 300px;
}

.page--login .alert {
    border: none;
    border-radius: 16px;
    padding: 0.9rem 1rem;
    margin-bottom: 0.9rem;
    animation: slideInDown 0.5s ease-out;
    border-left: 4px solid;
}

.page--login .alert-success {
    background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%);
    color: #2f855a;
    border-left-color: #38a169;
}

.page--login .alert-danger {
    background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
    color: #c53030;
    border-left-color: #e53e3e;
}

.page--login .alert-warning {
    background: linear-gradient(135deg, #fffaf0 0%, #feebc8 100%);
    color: #c05621;
    border-left-color: #ed8936;
}

.page--login .login-footer {
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
    margin-top: 0.5rem;
}

.page--login .login-footer small {
    color: #718096;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Enhanced Animations */
@keyframes slideInScale {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes slideInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Loading State */
.page--login .btn-loading {
    position: relative;
    color: transparent !important;
}

.page--login .btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Kotak isi tidak lagi dipaksa setinggi sisa layar. Di layar sempit kartu
       login sendiri hampir memenuhi layar, dan memaksa tinggi minimum di
       atasnya hanya menambah gulir. `cover` pada kotak yang tinggi-sempit
       memotong panorama dengan keras, jadi titik potongnya digeser turun ke
       bagian gedung — bukan ke langit kosong di puncak foto. */
    .page--login .wrapper > .container-fluid {
        min-height: 0;
        background-position: 50% 68%;
    }

    .page--login .login-container {
        padding: 1rem 0.75rem;
        margin: 0;
    }

    .page--login .login-card {
        border-radius: 20px;
        margin: 0;
    }
    
    .page--login .login-header {
        padding: 1rem 1.5rem 0.8rem;
    }
    
    .page--login .login-body {
        padding: 0.9rem 1.5rem 1rem;
    }
    
    .page--login .login-logo {
        width: 50px;
        height: 50px;
    }
    
    .page--login .login-logo i {
        font-size: 1.5rem;
    }
    
    .page--login .login-header h4 {
        font-size: 1.3rem;
    }
}