/* Membuat halaman login menjadi full-screen dan tidak bisa di-scroll */
body.login-page-wrapper {
    height: 100%;
    overflow: hidden;
}

/* Kontainer untuk form di sebelah kiri */
.login-page-wrapper .login-form-container {
    background: linear-gradient(135deg, #f5f7fa 0%, #eef2f7 100%);
}

/* Kontainer untuk gambar di sebelah kanan */
.login-page-wrapper .login-img-container {
    height: 100vh;
    overflow: hidden;
}

.login-page-wrapper .login-img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* KARTU LOGIN */
.login-card {
    background: var(--white);
    padding: 3rem 2rem;
    border-radius: 1.5rem;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* GRADASI DEKORATIF DI POJOK KARTU */
.login-card::before,
.login-card::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(
        circle,
        rgba(79, 70, 229, 0.08),
        transparent 70%
    );
    z-index: -1;
    pointer-events: none;
}

.login-card::before {
    top: -120px;
    left: -120px;
}
.login-card::after {
    bottom: -120px;
    right: -120px;
}

/* Wrapper untuk field password */
.login-page-wrapper .password-wrapper {
    position: relative;
}

/* Tombol untuk show/hide password */
.login-page-wrapper .password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    padding: 0.5rem;
}

/* Class khusus untuk tombol login agar tidak mengganggu style utama */
.btn-login-action {
    justify-content: center;
}

/* 1. Sembunyikan spinner & teks loading secara default (KONDISI AWAL) */
.btn-login-action .spinner-border,
.btn-login-action .loading-text {
    display: none;
}

/* 2. Atur status tombol saat proses loading (ketika 'disabled') */
.btn-login-action:disabled {
    cursor: not-allowed;
    opacity: 0.8;
}

/* 3. Tampilkan spinner & teks loading saat tombol nonaktif */
.btn-login-action:disabled .spinner-border {
    display: inline-block !important;
    margin-right: 0.5rem; /* Jarak antara spinner dan teks */
}
.btn-login-action:disabled .loading-text {
    display: inline-block !important;
}

/* 4. Sembunyikan teks asli ("Log in") saat tombol nonaktif */
.btn-login-action:disabled .btn-text {
    display: none;
}

/* LOGIN IMAGE CONTAINER - BACKGROUND DAN DECOR */
.login-img-container {
    min-height: 100vh;
    background-color: #0b0c1a; /* biru tua elegan */
    background-image: radial-gradient(
        circle at 50% 100%,
        #1a1a2e 0%,
        /* ungu gelap lembut */ #0b0c1a 70%
    );
    position: relative;
    overflow: hidden;
}

/* 2. EFEK CAHAYA AURORA (THE GLOW) */
.login-img-container::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 800px;
    transform: translate(-50%, -60%);
    background-image: linear-gradient(135deg, #6f42c1 30%, #00bfa6 100%);
    /* ungu lembut ke cyan/teal */
    filter: blur(150px);
    opacity: 0.25;
    z-index: 1;
}

/* 3. POLA GRID FUTURISTIK (THE GRID OVERLAY) */
.login-img-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px
        ),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 2;
}

/* 4. LOGO (THE LOGO) */
.login-logo {
    max-width: 450px;
    width: 55%;
    height: auto;
    z-index: 3;
    position: relative;
    display: block;
}

/* Pastikan row login full height */
.login-page-wrapper .row.g-0 {
    height: 100vh;
}

/* Kolom kanan: buat flex supaya logo center */
.login-page-wrapper .login-img-container {
    display: flex !important;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;
    overflow: hidden;
}