/*
=========================================================
AmbicQ Enterprise HRMS
Premium Login CSS
Version : 1.0
=========================================================
*/

:root{

--primary:#2563eb;
--primary-dark:#1d4ed8;
--secondary:#7c3aed;

--success:#16a34a;
--danger:#dc2626;
--warning:#f59e0b;

--white:#ffffff;
--black:#111827;

--text:#1f2937;
--text-light:#6b7280;

--border:#e5e7eb;

--bg:#f3f6fb;

--glass:rgba(255,255,255,.18);

--shadow:0 25px 60px rgba(0,0,0,.18);

--radius:18px;

--transition:.35s;

--sidebar:#0f172a;

--gradient:
linear-gradient(
135deg,
#2563eb 0%,
#4f46e5 40%,
#7c3aed 100%
);

font-family:
Inter,
Segoe UI,
Arial,
sans-serif;

}

/* =======================================
Reset
======================================= */

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

height:100%;

}

body{

height:100%;
overflow:hidden;

background:var(--bg);

font-family:Inter,sans-serif;

color:var(--text);

}

/* =======================================
Wrapper
======================================= */

.aq-login-wrapper{

display:flex;

height:100vh;

width:100%;

overflow:hidden;

}

/* =======================================
Left Side
======================================= */

.aq-login-left{

position:relative;

width:60%;

overflow:hidden;

background:#000;

}

.aq-login-video{

position:absolute;

left:0;
top:0;

width:100%;
height:100%;

object-fit:cover;

}

.aq-login-overlay{

position:absolute;

left:0;
right:0;
top:0;
bottom:0;

background:

linear-gradient(

135deg,

rgba(15,23,42,.78),

rgba(37,99,235,.45)

);

z-index:2;

}

.aq-left-content{

position:absolute;

left:70px;

bottom:80px;

z-index:5;

max-width:520px;

color:#fff;

}

.aq-left-content h1{

font-size:46px;

font-weight:700;

line-height:1.2;

margin-bottom:20px;

}

.aq-left-content span{

color:#60a5fa;

}

.aq-left-content p{

font-size:18px;

margin-bottom:35px;

opacity:.95;

line-height:30px;

}

.aq-left-content ul{

list-style:none;

display:grid;

grid-template-columns:repeat(2,1fr);

gap:15px;

}

.aq-left-content li{

padding:14px 18px;

border-radius:14px;

background:

rgba(255,255,255,.12);

backdrop-filter:blur(15px);

font-size:15px;

}

/* =======================================
Right Side
======================================= */

.aq-login-right{

width:40%;

display:flex;

justify-content:center;

align-items:center;

background:#f7f9fc;

padding:60px;

}

.aq-login-box{

width:100%;

max-width:470px;

padding:50px;

border-radius:24px;

background:#fff;

box-shadow:var(--shadow);

position:relative;

overflow:hidden;

}

.aq-login-box::before{

content:"";

position:absolute;

left:0;
top:0;

width:100%;
height:6px;

background:var(--gradient);

}

/* =======================================
Logo
======================================= */

.aq-logo-area{

display:flex;

justify-content:center;

margin-bottom:18px;

}

.aq-logo{

width:92px;

height:auto;

}

.aq-company-name{

font-size:23px;

font-weight:700;

text-align:center;

margin-bottom:12px;

color:#111827;

white-space:nowrap;

line-height:1.2;

font-size:clamp(15px,1.45vw,21px);

}

.aq-login-heading{

text-align:center;

margin-bottom:35px;

}

.aq-login-heading h2{

font-size:30px;

font-weight:700;

margin-bottom:10px;

}

.aq-login-heading p{

font-size:15px;

color:#6b7280;

line-height:24px;

}

/* =======================================
Message
======================================= */

.aq-login-message{

display:none;

padding:14px;

margin-bottom:25px;

border-radius:12px;

font-size:14px;

font-weight:500;

}

.aq-login-message.success{

display:block;

background:#dcfce7;

color:#166534;

}

.aq-login-message.error{

display:block;

background:#fee2e2;

color:#991b1b;

}

/* =======================================
Form
======================================= */

.aq-form-group{

margin-bottom:25px;

}

.aq-form-group label{

display:block;

margin-bottom:10px;

font-size:14px;

font-weight:600;

color:#374151;

}

.aq-form-group input{

width:100%;

height:56px;

padding:0 18px;

border:1px solid #d1d5db;

border-radius:14px;

font-size:15px;

transition:all .3s;

background:#fff;

}

.aq-form-group input:focus{

outline:none;

border-color:#2563eb;

box-shadow:

0 0 0 4px

rgba(37,99,235,.12);

}

/* =======================================
Password
======================================= */

.aq-password-box{

position:relative;

}

.aq-password-box input{

padding-right:55px;

}

.aq-toggle-password{

position:absolute;

right:18px;

top:50%;

transform:translateY(-50%);

cursor:pointer;

font-size:18px;

color:#6b7280;

}

/* =======================================
Remember
======================================= */

.aq-login-options{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

font-size:14px;

}

.aq-login-options label{

display:flex;

gap:8px;

align-items:center;

cursor:pointer;

}

.aq-login-options a{

text-decoration:none;

font-weight:600;

color:#2563eb;

}

.aq-login-options a:hover{

color:#1d4ed8;

}

/* =====================================================
   BUTTON
===================================================== */

.aq-login-btn{

width:100%;

height:58px;

border:none;

border-radius:16px;

background:var(--gradient);

color:#fff;

font-size:17px;

font-weight:700;

cursor:pointer;

position:relative;

overflow:hidden;

transition:all .35s ease;

display:flex;

align-items:center;

justify-content:center;

gap:10px;

box-shadow:
0 15px 35px
rgba(37,99,235,.28);

}

.aq-login-btn:hover{

transform:translateY(-3px);

box-shadow:
0 22px 45px
rgba(37,99,235,.35);

}

.aq-login-btn:active{

transform:scale(.98);

}

.aq-login-btn::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:100%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.35),

transparent

);

transition:all .8s;

}

.aq-login-btn:hover::before{

left:120%;

}

.btn-loader{

display:none;

}

.aq-login-btn.loading{

pointer-events:none;

opacity:.92;

}

.aq-login-btn.loading .btn-loader{

display:inline-flex;

}

.aq-login-btn.loading .btn-text{

display:none;

}

/* =====================================================
FOOTER
===================================================== */

.aq-login-footer{

margin-top:35px;

text-align:center;

font-size:13px;

color:#9ca3af;

line-height:24px;

}

/* =====================================================
INPUT STATES
===================================================== */

.aq-form-group input.error{

border-color:#dc2626;

box-shadow:

0 0 0 4px

rgba(220,38,38,.12);

}

.aq-form-group input.success{

border-color:#16a34a;

box-shadow:

0 0 0 4px

rgba(22,163,74,.10);

}

.aq-form-group input::placeholder{

color:#9ca3af;

}

/* =====================================================
CUSTOM CHECKBOX
===================================================== */

.aq-login-options input[type=checkbox]{

width:18px;

height:18px;

accent-color:#2563eb;

cursor:pointer;

}

/* =====================================================
SCROLLBAR
===================================================== */

::-webkit-scrollbar{

width:8px;

height:8px;

}

::-webkit-scrollbar-track{

background:#edf2f7;

}

::-webkit-scrollbar-thumb{

background:#2563eb;

border-radius:20px;

}

/* =====================================================
ANIMATIONS
===================================================== */

@keyframes fadeIn{

0%{

opacity:0;

transform:translateY(30px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

@keyframes slideLeft{

0%{

opacity:0;

transform:translateX(60px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

@keyframes slideRight{

0%{

opacity:0;

transform:translateX(-60px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

@keyframes zoomIn{

0%{

opacity:0;

transform:scale(.85);

}

100%{

opacity:1;

transform:scale(1);

}

}

@keyframes pulseGlow{

0%{

box-shadow:

0 0 0 0

rgba(37,99,235,.4);

}

70%{

box-shadow:

0 0 0 18px

rgba(37,99,235,0);

}

100%{

box-shadow:

0 0 0 0

rgba(37,99,235,0);

}

}

.aq-login-box{

animation:

fadeIn .7s ease;

}

.aq-left-content{

animation:

slideRight .9s ease;

}

.aq-logo{

animation:

zoomIn .7s ease;

}

.aq-login-btn:hover{

animation:

pulseGlow
1.2s;

}

/* =====================================================
BACKGROUND SHAPES
===================================================== */

.aq-login-right::before{

content:"";

position:absolute;

width:450px;

height:450px;

border-radius:50%;

background:

rgba(37,99,235,.05);

top:-180px;

right:-180px;

z-index:0;

}

.aq-login-right::after{

content:"";

position:absolute;

width:320px;

height:320px;

border-radius:50%;

background:

rgba(124,58,237,.05);

bottom:-150px;

left:-120px;

z-index:0;

}

.aq-login-box{

z-index:5;

}

/* =====================================================
RESPONSIVE
===================================================== */

@media(max-width:1400px){

.aq-login-left{

width:55%;

}

.aq-login-right{

width:45%;

padding:40px;

}

}

@media(max-width:1200px){

.aq-left-content{

left:40px;

bottom:50px;

max-width:420px;

}

.aq-left-content h1{

font-size:38px;

}

.aq-login-box{

padding:40px;

}

}

@media(max-width:992px){

.aq-login-wrapper{

flex-direction:column;

overflow:auto;

height:auto;

}

.aq-login-left{

width:100%;

height:320px;

}

.aq-login-right{

width:100%;

padding:35px;

}

.aq-login-box{

max-width:550px;

margin:auto;

}

.aq-left-content{

left:35px;

bottom:35px;

}

}

@media(max-width:768px){

.aq-login-left{

display:none;

}

.aq-login-right{

width:100%;

min-height:100vh;

padding:25px;

}

.aq-login-box{

padding:30px;

border-radius:18px;

box-shadow:

0 15px 40px

rgba(0,0,0,.10);

}

.aq-company-name{

font-size:20px;

}

.aq-login-heading h2{

font-size:24px;

}

}

@media(max-width:480px){

.aq-login-right{

padding:15px;

}

.aq-login-box{

padding:22px;

}

.aq-logo{

width:72px;

}

.aq-login-heading h2{

font-size:22px;

}

.aq-form-group input{

height:52px;

font-size:14px;

}

.aq-login-btn{

height:54px;

font-size:15px;

}

.aq-login-options{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

}

/* =====================================================
DARK MODE
===================================================== */

body.dark-mode{

background:#0f172a;

}

body.dark-mode .aq-login-right{

background:#0f172a;

}

body.dark-mode .aq-login-box{

background:#1e293b;

color:#fff;

}

body.dark-mode .aq-company-name,

body.dark-mode .aq-login-heading h2{

color:#fff;

}

body.dark-mode .aq-login-heading p{

color:#cbd5e1;

}

body.dark-mode .aq-form-group label{

color:#e2e8f0;

}

body.dark-mode .aq-form-group input{

background:#334155;

border-color:#475569;

color:#fff;

}

body.dark-mode .aq-form-group input::placeholder{

color:#94a3b8;

}

body.dark-mode .aq-login-footer{

color:#94a3b8;

}

/* =====================================================
END LOGIN CSS
===================================================== */

/* Final login media cleanup: play only the configured video on the left. */
.aq-login-left .aq-left-content{display:none!important;}
.aq-login-left .aq-login-overlay{background:linear-gradient(135deg,rgba(15,23,42,.25),rgba(37,99,235,.12))!important;}
.aq-login-left .aq-login-video{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;}

/* v1.3.6 reliable password visibility control */
.aq-toggle-password{width:38px;height:38px;right:8px;border:0;background:transparent;border-radius:10px;display:grid!important;place-items:center;z-index:5;padding:0;color:#64748b}
.aq-toggle-password:hover,.aq-toggle-password:focus-visible{background:#eef2ff;color:#315bea;outline:2px solid rgba(49,91,234,.18)}
.aq-toggle-password svg{width:21px;height:21px;display:block;fill:currentColor}
.aq-toggle-password.is-visible svg{opacity:.72}