.erp-login { --navy:#0b1440; --navy-light:#182876; --gold:#ffc157; min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr; font-family:'Inter',sans-serif; color:var(--navy); }
.erp-login * { box-sizing:border-box; }
.erp-login .brand { position:relative; min-height:100vh; display:grid; grid-template-rows:auto minmax(0,1fr) auto; overflow:hidden; padding:56px 64px; color:#fff; background:radial-gradient(1100px 700px at -10% -10%,#16205f 0%,transparent 55%),linear-gradient(160deg,#0b1440,#101c5c 55%,#182876); }
.erp-login .brand:before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:46px 46px; pointer-events:none; }
.erp-login #network { position:absolute; inset:0; z-index:1; width:100%; height:100%; opacity:.75; pointer-events:none; }
.erp-login .spotlight { position:absolute; inset:0; pointer-events:none; background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),rgba(245,166,35,.14),transparent 65%); }
.erp-login .logo-row,.erp-login .brand-content,.erp-login .brand-copy,.erp-login .modules { position:relative; z-index:2; }
.erp-login .logo-row { display:flex; align-items:flex-start; justify-content:flex-start; width:max-content; max-width:100%; top:26px; }
.erp-login .erp-main-logo { display:block; width:min(100%,340px); height:auto; }
.erp-login .logo-mark { flex:0 0 44px; height:44px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(145deg,#ffc157,#f5a623); box-shadow:0 10px 24px -8px rgba(245,166,35,.55); }
.erp-login .logo-mark svg { width:24px; height:24px; }
.erp-login .wordmark { line-height:1.05; }
.erp-login .line1 { font:800 26px 'Outfit',sans-serif; }
.erp-login .accent,.erp-login .line2 b { color:var(--gold); }
.erp-login .line2 { margin-top:6px; font-size:13px; color:#aab3e0; }
.erp-login .brand-content { align-self:center; width:100%; max-width:600px; padding:34px 0 12px; }
.erp-login .brand-copy { margin:0; padding:0; max-width:600px; }
.erp-login .brand-copy h1 { position:relative;top:-42px;margin:0 0 22px;font:700 42px/1.18 'Outfit',sans-serif; }
.erp-login .brand-copy p { margin:0; color:#aab3e0; font-size:18px; line-height:1.6; }
.erp-login .modules { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; width:100%; max-width:600px; margin:34px 0 14px; }
.erp-login .modules-more { position:relative; z-index:2; margin:0; color:#aab3e0; font-size:14px; }
.erp-login .brand-footer { position:relative;z-index:2;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);color:#8f9ac8;font-size:12px; }
.erp-login .brand-footer a { color:#ffc157;font-weight:600;text-decoration:none; }
.erp-login .brand-footer a:hover { color:#fff;text-decoration:underline; }
.erp-login .module-chip { display:flex; align-items:center; gap:10px; min-height:50px; padding:12px; border:1px solid rgba(255,255,255,.09); border-radius:10px; background:rgba(255,255,255,.05); color:#d6dbf3; font-size:14px; font-weight:500; }
.erp-login .module-chip span { min-width:0;line-height:1.2;overflow-wrap:normal;word-break:normal;hyphens:none; }
.erp-login .module-chip { animation:erp-chip-drift 7s ease-in-out infinite; animation-delay:calc(var(--i,0) * .35s); }
.erp-login .module-chip:nth-child(2) { --i:1; } .erp-login .module-chip:nth-child(3) { --i:2; }
.erp-login .module-chip:nth-child(4) { --i:3; } .erp-login .module-chip:nth-child(5) { --i:4; }
.erp-login .module-chip:nth-child(6) { --i:5; } .erp-login .module-chip:nth-child(7) { --i:6; }
.erp-login .module-chip:nth-child(8) { --i:7; }
@keyframes erp-chip-drift { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
.erp-login .module-chip i { flex:0 0 18px; width:18px; color:#ffc157; font-size:18px; font-style:normal; }
.erp-login .form-side { min-width:0; display:flex; align-items:center; justify-content:center; padding:48px; background:#fbfbfe; }
.erp-login .content-wrapper,.erp-login .content { width:100%; min-width:0; }
.erp-login .content { display:flex; justify-content:center; align-items:center; flex-direction:column; }
.erp-login .login-form { width:100%; max-width:460px; min-width:0; }
.erp-login .form-card { animation:erp-form-rise .55s cubic-bezier(.2,.7,.3,1) both; }
@keyframes erp-form-rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
.erp-login #UserLoginForm .card { border:0; background:transparent; box-shadow:none; }
.erp-login #UserLoginForm .card-body { padding:0; }
.erp-login #UserLoginForm .logo-container { min-height:0; margin-bottom:22px; }
.erp-login #UserLoginForm .responsive-logo { max-width:260px; max-height:110px; object-fit:contain; }
.erp-login #UserLoginForm h2 { margin:0 0 8px; font:700 32px 'Outfit',sans-serif; }
.erp-login #UserLoginForm .sub { margin:0 0 36px; color:#8790b8; font-size:16px; }
.erp-login .field { position:relative; margin-bottom:20px; }
.erp-login .field input:not([type=hidden]) { display:block; width:100%; height:58px; padding:24px 48px 6px; border:1.5px solid #e4e7f4; border-radius:10px; outline:none; background:#fff; color:var(--navy); font:16px 'Inter',sans-serif; }
.erp-login .field input::placeholder { color:transparent; }
.erp-login .field label { position:absolute; left:48px; top:19px; color:#9aa2c4; font-size:16px; pointer-events:none; transition:all .15s ease; }
.erp-login .field input:focus,.erp-login .field input:not(:placeholder-shown) { border-color:#22349a; box-shadow:0 0 0 4px rgba(24,40,118,.08); }
.erp-login .field input:focus + label,.erp-login .field input:not(:placeholder-shown) + label { top:8px; color:var(--navy-light); font-size:12px; font-weight:600; }
.erp-login .field input:-webkit-autofill + label { opacity:0; visibility:hidden; }
.erp-login .field input:-webkit-autofill { padding-top:6px; padding-bottom:6px; }
.erp-login .field .icon { position:absolute; left:18px; top:20px; width:20px; height:20px; color:#a7aed0; pointer-events:none; }
.erp-login .toggle-pass { position:absolute; right:15px; top:17px; padding:4px; border:0; background:none; color:#a7aed0; cursor:pointer; }
.erp-login .toggle-pass svg { width:18px; height:18px; }
.erp-login .row-between { display:flex; align-items:center; justify-content:space-between; margin:-6px 0 30px; font-size:14px; }
.erp-login .remember { display:flex; align-items:center; gap:8px; margin:0; color:#5b628c; cursor:pointer; }
.erp-login .remember input { width:15px; height:15px; accent-color:var(--navy-light); }
.erp-login .forgot-link { color:var(--navy-light); font-weight:600; }
.erp-login .btn-signin { width:100%; height:56px; border:0; border-radius:10px; background:linear-gradient(135deg,#182876,#0b1440); color:#fff; font:600 16px 'Inter',sans-serif; cursor:pointer; box-shadow:0 12px 24px -10px rgba(11,20,64,.55); }
.erp-login .btn-signin:hover { filter:brightness(1.08); }
.erp-login .btn-signin:focus-visible,.erp-login a:focus-visible,.erp-login input:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.erp-login #UserLoginForm .form-text { font-size:13px; line-height:1.6; }
.erp-login #UserLoginForm .form-text a { color:var(--navy-light); }
.erp-login #Project-form { max-width:460px; }
.erp-login #Project-form .card { border:0; background:transparent; box-shadow:none; }
.erp-login #Project-form .card-body { padding:0; }
.erp-login #Project-form .logo-container { min-height:0; margin-bottom:24px; }
.erp-login #Project-form .responsive-logo { max-width:220px; max-height:100px; object-fit:contain; }
.erp-login #Project-form hr { display:none; }
.erp-login #Project-form h3 { margin:0 0 12px; text-align:left!important; font:700 26px 'Outfit',sans-serif; color:#0b1440; }
.erp-login #Project-form .row.mb-3 { display:block; margin:0 0 24px!important; }
.erp-login #Project-form .row.mb-3 > .col-md-2 { display:none; }
.erp-login #Project-form .row.mb-3 > .col-md-8 { width:100%; max-width:100%; padding:0; }
.erp-login #Project-form .form-control,.erp-login #Project-form .select2-container--default .select2-selection--single { width:100%; height:52px; border:1.5px solid #e4e7f4; border-radius:10px; background:#fff; color:#0b1440; }
.erp-login #Project-form .select2-container--default .select2-selection--single { outline:none; transition:border-color .15s ease,box-shadow .15s ease; }
.erp-login #Project-form .select2-container--default.select2-container--focus .select2-selection--single,
.erp-login #Project-form .select2-container--default.select2-container--open .select2-selection--single { border-color:#22349a; box-shadow:0 0 0 4px rgba(24,40,118,.08); }
.erp-login #Project-form .select2-container { width:100%!important; }
.erp-login #Project-form .select2-selection__rendered { height:100%; display:flex; align-items:center; padding:0 42px 0 16px; line-height:normal; color:#0b1440; }
.erp-login #Project-form .select2-selection__arrow { height:50px; right:12px; }
.erp-login #Project-form .row:last-child { margin:28px 0 0; }
.erp-login #Project-form .row:last-child > .form-group { display:none; }
.erp-login #Project-form .form-actions { display:flex; align-items:center; gap:12px; width:100%; max-width:100%; margin:0!important; padding:0; }
.erp-login #Project-form #BackProject { flex:0 0 110px; height:50px; border:1.5px solid #e4e7f4; border-radius:10px; background:#fff; color:#182876; font:600 15px 'Inter',sans-serif; }
.erp-login #Project-form #GoDashboards { flex:1; height:50px; border:0; border-radius:10px; background:linear-gradient(135deg,#182876,#0b1440); color:#fff; font:600 15px 'Inter',sans-serif; box-shadow:0 12px 24px -10px rgba(11,20,64,.55); }
.erp-login #Project-form .alert { margin:0 0 16px; border-radius:10px; }
.erp-login #UserForgetForm .card,.erp-login #ResetPasswordDiv .card { border:0; background:transparent; box-shadow:none; }
.erp-login #UserForgetForm .card-body,.erp-login #ResetPasswordDiv .card-body { padding:0; }
.erp-login #UserForgetForm .responsive-logo,.erp-login #ResetPasswordDiv .responsive-logo { max-width:220px; max-height:100px; object-fit:contain; }
.erp-login #UserForgetForm hr,.erp-login #ResetPasswordDiv hr { display:none; }
.erp-login #UserForgetForm h2,.erp-login #ResetPasswordDiv h2 { font:700 26px 'Outfit',sans-serif; color:#0b1440; }
.erp-login #UserForgetForm .form-control,.erp-login #ResetPasswordDiv .form-control { min-height:52px; border:1.5px solid #e4e7f4; border-radius:10px; }
.erp-login #UserForgetForm .btn-primary,.erp-login #ResetPasswordDiv .btn-primary { min-height:50px; border:0; border-radius:10px; background:linear-gradient(135deg,#182876,#0b1440); font:600 15px 'Inter',sans-serif; }
@media(max-width:900px) { .erp-login { grid-template-columns:1fr; } .erp-login .brand { min-height:340px; padding:36px 28px 28px; } .erp-login .brand-content { padding:30px 0 0; } .erp-login .brand-copy { margin:0; padding:0; } .erp-login .brand-copy h1 { font-size:24px; } .erp-login .modules { grid-template-columns:repeat(3,1fr); max-width:100%; margin:24px 0 14px; } .erp-login .form-side { padding:32px 24px 48px; } }
@media(max-width:420px) { .erp-login .modules { grid-template-columns:repeat(2,1fr); } .erp-login .line1 { font-size:22px; } .erp-login .row-between { gap:10px; } }
@media(max-width:600px) {
    .erp-login .brand { min-height:0; padding:14px 20px; }
    .erp-login .logo-row { top:0; }
    .erp-login .erp-main-logo { width:200px; }
    .erp-login #network,.erp-login .spotlight,.erp-login .brand-content { display:none; }
    .erp-login .brand-footer { display:none; }
    .erp-login .form-side { min-height:calc(100svh - 80px); align-items:flex-start; padding:28px 20px 40px; }
    .erp-login .login-form { max-width:100%; }
    .erp-login #UserLoginForm h2 { font-size:28px; }
    .erp-login #UserLoginForm .sub { margin-bottom:28px; font-size:14px; }
    .erp-login .field input:not([type=hidden]) { height:54px; }
    .erp-login .field label { top:17px; }
    .erp-login .field .icon { top:17px; }
    .erp-login .toggle-pass { top:15px; }
    .erp-login .row-between { flex-wrap:wrap; row-gap:10px; }
}
@media(prefers-reduced-motion:reduce) { .erp-login .module-chip,.erp-login .form-card { animation:none; } }
