/* Base layout applied to wrapper from auth_base.html */
body.page-login .auth-wrap{min-height:100vh;background:#f6f7fb;color:#0f172a;display:grid !important;grid-template-columns:42% 58%;}
/* Left illustration area via pseudo-element to avoid HTML changes */
body.page-login .auth-wrap::before{content:"";display:block;background:linear-gradient(0deg,#eef2ff, #f8fafc), url("../../img/illus_login.svg");background-repeat:no-repeat;background-position:center;background-size:72% auto}

/* Container card on right */
body.page-login .login-card{width:100%;max-width:420px;margin:auto 10vw auto auto;background:#ffffff;padding:32px;border-radius:16px;box-shadow:none;border:1px solid #e5e7eb}
body.page-login .login-card h2{margin:0 0 8px 0;font-weight:600;color:#0f172a}
/* Force unified heading text without template changes */
body.page-login .auth-wrap .login-card h2{position:relative;color:transparent !important}
body.page-login .auth-wrap .login-card h2::before{content:"Sign in to your account";position:absolute;left:0;top:0;color:#0f172a !important;display:block}
body.page-login .login-card .messages{list-style:none;padding:0;margin:8px 0 12px 0}
body.page-login .login-card .messages li{font-size:14px;padding:10px 12px;border-radius:10px;margin:6px 0}
body.page-login .login-card .messages li.error{background:#fee2e2;color:#7f1d1d;border:1px solid #fecaca}
body.page-login .login-card .messages li.success{background:#ecfdf5;color:#064e3b;border:1px solid #bbf7d0}

/* Fields */
body.page-login .login-card .form{margin:14px 0}
body.page-login .login-card label{display:block;font-size:13px;color:#374151;margin-bottom:6px}
body.page-login .login-card input{height:44px;padding:0 14px 0 44px;border-radius:12px;border:1px solid #e5e7eb;background:#f9fafb;color:#0f172a;outline:none;transition:border-color .15s, background-color .15s, box-shadow .15s}
body.page-login .login-card input:focus{border-color:#5A7CFD;background:#ffffff;box-shadow:0 0 0 3px rgba(90,124,253,0.15)}
body.page-login .login-card .btn{width:100%;height:44px;padding:0 16px;border:0;border-radius:12px;background:#5A7CFD;color:#ffffff;font-weight:600;cursor:pointer;transition:background-color .15s, transform .02s}
body.page-login .login-card .btn:hover{background:#4a6cf5}
body.page-login .login-card .btn:active{transform:translateY(1px)}

/* Inline row for remember/forgot */
body.page-login .login-card .form.row{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
body.page-login .login-card .form a{color:#5A7CFD;font-size:13px;text-decoration:none}
body.page-login .login-card .form a:hover{text-decoration:underline}

/* Input icons using data URIs */
/* Username */
body.page-login #id_username{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath d='M12 12c2.761 0 5-2.239 5-5s-2.239-5-5-5-5 2.239-5 5 2.239 5 5 5Zm0 2c-4.418 0-8 2.239-8 5v1h16v-1c0-2.761-3.582-5-8-5Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px center}
/* Password */
body.page-login #id_password{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath d='M17 8h-1V6a4 4 0 1 0-8 0v2H7a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2Zm-6 0H9V6a3 3 0 1 1 6 0v2h-2Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px center}

/* Password show/hide: style the checkbox as an eye icon and place it atop input */
/* Structure: the checkbox (#togglePass) sits next to the input, wrapped in a flex row. Turn that row into a relative container and position the label as an icon button on the right. */
body.page-login .login-card .form div[style*="display:flex"]{position:relative}
/* make label an icon button on the right */
body.page-login .login-card .form div[style*="display:flex"] label{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:#6b7280;background:#f3f4f6;border:1px solid #e5e7eb;cursor:pointer;font-size:0;padding:0}
body.page-login .login-card .form div[style*="display:flex"] label:hover{background:#eef2ff;color:#4a6cf5;border-color:#c7d2fe}
body.page-login .login-card .form div[style*="display:flex"] label::before{content:"";display:block;width:18px;height:18px;background-repeat:no-repeat;background-position:center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath d='M12 5C7 5 2.73 8.11 1 12c1.73 3.89 6 7 11 7s9.27-3.11 11-7c-1.73-3.89-6-7-11-7Zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10Z'/%3E%3C/svg%3E");}
/* visually hide the checkbox but keep it accessible; expand hit area */
body.page-login #togglePass{position:absolute;opacity:0;inset:0 auto 0 0;width:100%;height:100%;cursor:pointer}
/* when checked, show eye-off */
body.page-login .login-card .form div[style*="display:flex"] label:has(#togglePass:checked)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath d='M2.1 3.51 3.51 2.1l18.38 18.38-1.41 1.41-2.33-2.33A14.5 14.5 0 0 1 12 19C7 19 2.73 15.89 1 12a14.6 14.6 0 0 1 5.32-6.22L2.1 3.51ZM12 7a5 5 0 0 1 5 5c0 .72-.16 1.41-.45 2.02l-6.57-6.57C10.59 7.16 11.28 7 12 7Z'/%3E%3C/svg%3E");}

/* Links below card */
/* Hide HR/Employee switch to make single login */
body.page-login .auth-wrap .login-card + div{display:none !important}
body.page-login .login-card > div:last-child{display:none !important}
/* Robustly hide any link that points to the old employee login */
body.page-login a[href*="employee-login"]{display:none !important}
/* And hide its container if present */
body.page-login .login-card div:has(> a[href*="employee-login"]) {display:none !important}

/* Responsive */
@media (max-width: 900px){
  body.page-login .auth-wrap{grid-template-columns:1fr;}
  body.page-login .auth-wrap::before{height:28vh}
  body.page-login .login-card{margin: -12vh auto 24px auto;box-shadow:0 10px 30px rgba(2,6,23,0.06);}
}

/* Dark theme compatibility with existing selectors */
body.page-login.theme-dark, body.theme-dark.page-login{background:#0b1020;color:#e5e7eb}
body.theme-dark.page-login .auth-wrap::before{background:linear-gradient(0deg,#111533,#0b1020)}
body.theme-dark.page-login .login-card{background:#0f142a;border-color:#1f2a44}
body.theme-dark.page-login .login-card h2{color:#eef2ff}
body.theme-dark.page-login .login-card input{background:#0b1020;border-color:#1f2a44;color:#e5e7eb}
body.theme-dark.page-login .login-card input:focus{border-color:#8aa2ff;box-shadow:0 0 0 3px rgba(138,162,255,0.18)}
body.theme-dark.page-login .login-card .btn{background:#5A7CFD}
body.theme-dark.page-login .login-card .form a{color:#8aa2ff}