/* =============================================
   Admin MySolve.id - Login Stylesheet
   ============================================= */

/* --------- Color Tokens --------- */
:root {
    --mysolve-primary: #2563eb;   /* Biru utama brand Mysolve */
    --mysolve-secondary: #312e81; /* Biru tua untuk gradient */
    --mysolve-accent: #7c3aed;    /* Ungu accent untuk gradient */
    --mysolve-surface: #ffffff;   /* Warna kartu login */
    --mysolve-muted: #6b7280;     /* Warna teks penjelas */
    --mysolve-shadow: rgba(15, 23, 42, 0.18); /* Shadow lembut kartu */
}

/* --------- Reset dasar --------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Font sans modern */
    background-color: #0f172a; /* Backdrop gelap agar particle terlihat */
    color: #0f172a;
}

/* =============================================
   Particle Background Layer
   ============================================= */
#particles-js {
    position: fixed;  /* Pastikan layer mengikuti viewport penuh */
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--mysolve-secondary), var(--mysolve-accent)); /* Gradient biru ke ungu */
    z-index: 1; /* Tetap di belakang konten login */
}

/* =============================================
   Login Page Wrapper
   ============================================= */
.login-page {
    position: relative; /* Memberi konteks z-index ke child */
    min-height: 100vh;  /* Tinggi minimal 100% viewport */
    overflow: hidden;   /* Hindari scroll horizontal */
}

.login-container {
    position: relative;
    z-index: 10; /* Taruh container di atas particle layer */
}

/* =============================================
   Login Card Styling
   ============================================= */
.login-page .card {
    background-color: var(--mysolve-surface); /* Warna putih untuk kontras form */
    border-radius: 18px; /* Corner lebih lembut sesuai referensi */
    box-shadow: 0 35px 45px -25px var(--mysolve-shadow); /* Shadow lembut supaya card melayang */
}

.login-page .card-body {
    padding: 3rem; /* Padding 48px agar form terasa lapang */
}

/* =============================================
   Branding Section
   ============================================= */
.logo-login {
    width: 96px; /* Ukuran logo login */
    height: auto;
    filter: drop-shadow(0 6px 18px rgba(37, 99, 235, 0.25)); /* Shadow logo agar pop */
}

.login-page h2 {
    font-size: 1.8rem; /* Ukuran heading utama */
    color: var(--mysolve-primary); /* Warna heading */
}

.login-page .text-muted {
    color: var(--mysolve-muted) !important; /* Warna penjelas */
    font-size: 0.95rem; /* Sedikit lebih kecil dari body text */
}

/* =============================================
   Form Controls
   ============================================= */
.login-page .form-control {
    padding: 0.75rem 1rem; /* Padding input 12px vertikal, 16px horizontal */
    border-radius: 10px; /* Sudut input lembut */
    border: 1px solid rgba(148, 163, 184, 0.4); /* Border abu tipis */
    transition: all 0.25s ease; /* Animasi halus saat fokus */
    font-size: 1rem;
}

.login-page .form-control:focus {
    border-color: var(--mysolve-primary); /* Fokus border biru */
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.15); /* Glow halus saat fokus */
}

/* =============================================
   Login Button
   ============================================= */
.login-page .btn-primary {
    background: linear-gradient(135deg, var(--mysolve-primary), var(--mysolve-accent)); /* Gradient tombol */
    border: none;
    border-radius: 10px; /* Samakan radius dengan input */
    padding: 0.75rem; /* Tinggi tombol 48px */
    font-weight: 600;
    letter-spacing: 0.02em; /* Sedikit tracking agar lebih rapih */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Animasi hover */
}

.login-page .btn-primary:hover {
    transform: translateY(-1px); /* Hover effect naik 1px */
    box-shadow: 0 20px 35px -20px rgba(124, 58, 237, 0.55); /* Shadow tambahan saat hover */
}

.login-page .btn-primary:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.45); /* Fokus manual untuk aksesibilitas */
    outline-offset: 2px;
}

/* =============================================
   Alert Styling
   ============================================= */
#alertMessage {
    font-size: 0.95rem; /* Ukuran teks alert */
    border-radius: 10px; /* Selaras dengan input & tombol */
}

/* =============================================
   Footer Section
   ============================================= */
.login-page small {
    letter-spacing: 0.04em; /* Spasi antar huruf lebih lega */
}

/* =============================================
   Responsive Tweaks
   ============================================= */
@media (max-width: 768px) {
    .login-page .card-body {
        padding: 2.25rem; /* Kurangi padding di tablet */
    }

    .logo-login {
        width: 82px; /* Kecilkan logo di tablet */
    }

    .login-page h2 {
        font-size: 1.6rem; /* Sesuaikan heading */
    }
}

@media (max-width: 576px) {
    .login-page .card-body {
        padding: 1.75rem; /* Padding lebih kecil untuk mobile */
    }

    .login-page .col-md-5 {
        padding: 0 1rem; /* Beri ruang margin samping di mobile */
    }

    .login-page h2 {
        font-size: 1.45rem;
    }

    .login-page .btn-primary {
        padding: 0.65rem; /* Tinggi tombol 42px di mobile */
    }

    .logo-login {
        width: 72px;
    }
}