/* ═══════════════════════════════════════════════
   LEH Service — Login Page
   Glassmorphism + Responsive All Screens
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@200;300;400;500;600;700&display=swap');

:root {
    --primary: #0E5DC4;
    --primary-dark: #0a4a9e;
    --accent: #D1002A;
    --accent-light: rgba(209, 0, 42, 0.6);
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-shadow: rgba(0, 0, 0, 0.25);
    --text-white: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.55);
    --input-bg: rgba(255, 255, 255, 0.08);
    --input-focus: rgba(255, 255, 255, 0.18);
    --font: 'Prompt', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }

body.login-page {
    font-family: var(--font);
    height: 100%;
    overflow: hidden;
}

/* ─── Background ─── */
.login-bg { position: fixed; inset: 0; z-index: -2; }
.login-bg__image { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.35) saturate(1.3); }
.login-bg__overlay {
    position: fixed; inset: 0;
    background: linear-gradient(45deg, var(--accent-light) 0%, var(--primary) 100%);
    opacity: 0.9; z-index: -1;
}

/* ─── Particles ─── */
.particles { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.particle { position: absolute; background: rgba(255,255,255,0.12); border-radius: 50%; animation: floatUp linear infinite; }
.particle:nth-child(1) { width:3px; height:3px; left:8%;  animation-duration:14s; animation-delay:0s; }
.particle:nth-child(2) { width:5px; height:5px; left:18%; animation-duration:18s; animation-delay:2s; }
.particle:nth-child(3) { width:4px; height:4px; left:30%; animation-duration:12s; animation-delay:4s; }
.particle:nth-child(4) { width:6px; height:6px; left:45%; animation-duration:20s; animation-delay:1s; }
.particle:nth-child(5) { width:3px; height:3px; left:58%; animation-duration:16s; animation-delay:3s; }
.particle:nth-child(6) { width:4px; height:4px; left:70%; animation-duration:13s; animation-delay:5s; }
.particle:nth-child(7) { width:5px; height:5px; left:82%; animation-duration:17s; animation-delay:2s; }
.particle:nth-child(8) { width:3px; height:3px; left:92%; animation-duration:15s; animation-delay:4s; }
@keyframes floatUp {
    0%   { transform: translateY(100vh) scale(0); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 0.8; }
    100% { transform: translateY(-10vh) scale(1.2); opacity: 0; }
}

/* ─── Layout ─── */
.login-wrapper {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; min-height: 100dvh;
    padding: 15px;
}

/* ─── Glass Card ─── */
.login-card {
    width: 100%; max-width: 440px;
    background: var(--glass-bg);
    backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
    border: 1px solid var(--glass-border);
    border-radius: 28px;
    padding: 22px 44px 22px;
    box-shadow: 0 8px 32px var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.12);
    animation: cardEntry 0.8s cubic-bezier(0.16,1,0.3,1) forwards;
    opacity: 0; transform: translateY(30px) scale(0.96);
}
@keyframes cardEntry { to { opacity:1; transform:translateY(0) scale(1); } }

/* ─── Logo ─── */
.login-logo { text-align:center; margin-bottom:12px; animation:fadeSlide .8s ease .3s forwards; opacity:0; }
.login-logo img { width:200px; height:auto; filter:drop-shadow(0 4px 16px rgba(0,0,0,.3)) brightness(1.05); transition:transform .3s; }
.login-logo img:hover { transform:scale(1.04); }

/* ─── Title ─── */
.login-title { text-align:center; color:var(--text-white); font-size:23px; font-weight:600; letter-spacing:.5px; margin-bottom:4px; animation:fadeSlide .8s ease .4s forwards; opacity:0; }
.login-subtitle { text-align:center; color:var(--text-muted); font-size:13px; font-weight:300; margin-bottom:36px; animation:fadeSlide .8s ease .45s forwards; opacity:0; }
@keyframes fadeSlide { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ─── Form ─── */
.login-form { display:flex; flex-direction:column; gap:16px; }

/* ─── Input Group ─── */
.input-group { position:relative; animation:fadeSlide .6s cubic-bezier(.16,1,.3,1) forwards; opacity:0; }
.input-group:nth-child(1) { animation-delay:.5s; }
.input-group:nth-child(2) { animation-delay:.6s; }

.input-group__icon { position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:15px; transition:color .3s; z-index:2; pointer-events:none; }
.input-group__field {
    width:100%; background:var(--input-bg); border:1px solid transparent; border-radius:14px;
    padding:17px 50px; color:var(--text-white); font-family:var(--font); font-size:15px; font-weight:400; outline:none; transition:all .3s;
}
.input-group__field::placeholder { color:var(--text-muted); font-weight:300; }
.input-group__field:focus { background:var(--input-focus); border-color:rgba(255,255,255,.25); box-shadow:0 0 0 3px rgba(14,93,196,.25); }
.input-group__field:focus ~ .input-group__icon { color:var(--text-white); }
.input-group__field:-webkit-autofill,
.input-group__field:-webkit-autofill:focus {
    -webkit-text-fill-color:var(--text-white);
    -webkit-box-shadow:0 0 0 1000px rgba(14,93,196,.3) inset;
    transition:background-color 5000s ease-in-out 0s;
}

/* Password Toggle */
.input-group__toggle { position:absolute; right:16px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:15px; padding:6px; transition:color .3s; z-index:2; }
.input-group__toggle:hover { color:var(--text-white); }

/* Error State */
.input-group--error .input-group__field { border-color:rgba(255,68,68,.6); box-shadow:0 0 0 3px rgba(255,68,68,.15); }
.input-group__error { display:none; color:#ff6b6b; font-size:12px; margin-top:6px; padding-left:18px; font-weight:300; }
.input-group--error .input-group__error { display:block; animation:fadeSlide .3s ease forwards; }

/* ─── Login Button ─── */
.btn-login {
    width:100%; padding:17px;
    background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color:var(--text-white); border:none; border-radius:14px;
    font-family:var(--font); font-size:16px; font-weight:600; letter-spacing:.5px;
    cursor:pointer; transition:all .3s; position:relative; overflow:hidden; margin-top:10px;
    animation:fadeSlide .6s cubic-bezier(.16,1,.3,1) .7s forwards; opacity:0;
}
.btn-login::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.12) 0%,transparent 60%); opacity:0; transition:opacity .3s; }
.btn-login:hover::before { opacity:1; }
.btn-login:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(14,93,196,.45); }
.btn-login:active { transform:translateY(0); box-shadow:0 4px 12px rgba(14,93,196,.3); }
.btn-login:disabled { opacity:.5; cursor:not-allowed; transform:none!important; box-shadow:none!important; }

/* Loading */
.btn-login--loading { pointer-events:none; }
.btn-login--loading .btn-login__text { visibility:hidden; }
.btn-login--loading .btn-login__spinner { display:block; }
.btn-login__spinner { display:none; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:24px; height:24px; border:3px solid rgba(255,255,255,.3); border-top-color:white; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:translate(-50%,-50%) rotate(360deg); } }

/* ─── Footer ─── */
.login-footer { text-align:center; margin-top:32px; color:var(--text-muted); font-size:12px; font-weight:300; animation:fadeSlide .8s ease .9s forwards; opacity:0; }
.login-footer__version { display:inline-block; background:rgba(255,255,255,.06); padding:3px 12px; border-radius:10px; font-size:11px; margin-top:6px; letter-spacing:.5px; }

/* ─── Shake ─── */
.shake { animation:shake .45s ease; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */
@media (min-width:1400px) {
    .login-card { max-width:460px; padding:56px 48px 48px; }
    .login-title { font-size:25px; }
    .login-logo img { width:220px; }
}
@media (max-width:768px) {
    .login-card { max-width:350px; padding:40px 32px 36px; border-radius:24px; }
    .login-title { font-size:21px; }
    .login-logo img { width:180px; }
}
@media (max-width:600px) {
    .login-wrapper { padding:16px; }
    .login-card { max-width:70%; padding:36px 28px 32px; border-radius:22px; }
    .login-title { font-size:20px; }
    .login-subtitle { font-size:12px; margin-bottom:28px; }
    .login-logo img { width:165px; }
    .input-group__field { padding:15px 46px; font-size:14px; }
    .btn-login { padding:15px; font-size:15px; }
}
@media (max-width:480px) {
    .login-wrapper { padding:12px; }
    .login-card { padding:32px 22px 28px; border-radius:20px; max-width:80%; }
    .login-title { font-size:18px; }
    .login-subtitle { font-size:11px; margin-bottom:24px; }
    .login-logo img { width:150px; }
    .input-group__field { padding:14px 42px; font-size:13px; border-radius:12px; }
    .input-group__icon { left:14px; font-size:14px; }
    .input-group__toggle { right:12px; }
    .btn-login { padding:14px; font-size:14px; border-radius:12px; }
    .login-form { gap:12px; }
    .login-footer { margin-top:24px; font-size:11px; }
}
@media (max-width:360px) {
    .login-wrapper { padding:8px; }
    .login-card { padding:28px 18px 24px; border-radius:18px; max-width:90%; }
    .login-title { font-size:17px; }
    .login-logo img { width:130px; }
    .input-group__field { padding:13px 40px; font-size:13px; }
    .btn-login { padding:13px; font-size:14px; }
}
/* Landscape phone */
@media (max-height:500px) {
    .login-wrapper { padding:8px; align-items:flex-start; padding-top:25px; }
    .login-card { padding:20px 28px; }
    .login-logo { margin-bottom:6px; }
    .login-logo img { width:120px; }
    .login-title { font-size:17px; margin-bottom:2px; }
    .login-subtitle { margin-bottom:16px; font-size:11px; }
    .login-form { gap:10px; }
    .input-group__field { padding:12px 44px; }
    .btn-login { padding:12px; margin-top:4px; }
    .login-footer { margin-top:12px; }
    .particles { display:none; }
}
@media (max-height:400px) {
    .login-logo { display:none; }
    .login-title { font-size:16px; }
    .login-subtitle { margin-bottom:12px; }
}