/* =========================================================
   EZ ERP — Login (diagonal split / flat illustration style)
   ---------------------------------------------------------
   Blue-deep:  #1B63D6
   Blue-mid:   #2E8FE0
   Teal:       #2FBFC4
   Ink:        #24313D
   Muted:      #90A0AC
   Line:       #E3E8EC
   Orange:     #F2A33E
   Green:      #6FCF97
   White:      #FFFFFF
   ========================================================= */

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

:root{
  --blue-deep:#1B63D6;
  --blue-mid:#2E8FE0;
  --teal:#2FBFC4;
  --ink:#24313D;
  --muted:#90A0AC;
  --line:#E3E8EC;
  --orange:#F2A33E;
  --green:#6FCF97;
  --page-bg:#EAF1F8;
}

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

body{
  font-family:'Inter', sans-serif;
  background: var(--page-bg);
  color: var(--ink);
  min-height:100vh;
}

.stage{
  position:relative;
  width:100%;
  min-height:100vh;
  background:#fff;
  overflow:hidden;
  display:flex;
}

/* ---------- illustration wedge (desktop) ---------- */

.illustration-panel{
  position:absolute;
  inset:0;
  clip-path: polygon(0 0, 66% 0, 52% 100%, 0 100%);
  background: linear-gradient(150deg, var(--blue-deep) 0%, var(--blue-mid) 55%, var(--teal) 100%);
}

.illustration-panel svg{
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%,-50%);
  width: 78%;
  max-width: 520px;
  height:auto;
}

/* ---------- form side ---------- */

.form-panel{
  position:relative;
  z-index:2;
  margin-left:auto;
  width:44%;
  min-width:380px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 48px 56px;
}

.form-inner{ width:100%; max-width:340px; }

.form-inner h1{
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size:30px;
  letter-spacing:0.5px;
  color: var(--blue-deep);
  margin:0 0 6px;
}

.form-inner p.sub{
  color: var(--muted);
  font-size:14px;
  margin:0 0 30px;
}

.error-msg{
  background: #FDECEA;
  border:1px solid #F3B7B0;
  color:#B3392C;
  font-size:13px;
  padding:10px 14px;
  border-radius:10px;
  margin-bottom:18px;
}

.field{ margin-bottom:16px; }

.field .input-wrap{ position:relative; }

.field input{
  width:100%;
  background:#F4F7FA;
  border:1px solid var(--line);
  border-radius:24px;
  padding:14px 20px;
  font-size:14px;
  color: var(--ink);
  font-family:'Inter', sans-serif;
  outline:none;
  transition: border-color .15s ease, background .15s ease;
}

.field input::placeholder{ color:#9FACB8; }

.field input:focus{
  border-color: var(--blue-mid);
  background:#fff;
}

.field input[type="password"],
.field input[data-pass]{
  padding-right:46px;
}

.toggle-pass{
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  cursor:pointer;
  color: var(--muted);
  padding:4px;
  display:flex;
}

.toggle-pass:hover{ color: var(--blue-mid); }

.row-between{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin: 4px 0 26px;
  font-size:13px;
}

.remember{
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--ink);
}

.switch{
  position:relative;
  width:38px;
  height:20px;
  flex-shrink:0;
}
.switch input{ opacity:0; width:0; height:0; }
.switch .track{
  position:absolute; inset:0;
  background:#D6DEE5;
  border-radius:20px;
  transition:.15s;
}
.switch .track::before{
  content:"";
  position:absolute;
  height:16px; width:16px;
  left:2px; top:2px;
  background:#fff;
  border-radius:50%;
  transition:.15s;
  box-shadow:0 1px 3px rgba(0,0,0,0.25);
}
.switch input:checked + .track{ background: var(--blue-mid); }
.switch input:checked + .track::before{ transform: translateX(18px); }

.row-between a{
  color: var(--blue-mid);
  text-decoration:none;
}
.row-between a:hover{ text-decoration:underline; }

.btn-signin{
  width:100%;
  padding:14px;
  background: linear-gradient(135deg, var(--blue-deep), var(--blue-mid));
  color:#fff;
  border:none;
  border-radius:24px;
  font-size:15px;
  font-weight:600;
  font-family:'Inter', sans-serif;
  cursor:pointer;
  box-shadow: 0 10px 24px rgba(46,143,224,0.35);
  transition: transform .05s ease, box-shadow .15s ease;
}
.btn-signin:hover{ box-shadow: 0 12px 28px rgba(46,143,224,0.45); }
.btn-signin:active{ transform: translateY(1px); }

.form-footer{
  margin-top:26px;
  font-size:12px;
  color:#AAB6C0;
  display:flex;
  justify-content:space-between;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px){
  .form-panel{ width:52%; padding:40px; }
  .illustration-panel{ clip-path: polygon(0 0, 60% 0, 44% 100%, 0 100%); }
}

@media (max-width: 860px){
  body{ padding:0; }
  .stage{
    border-radius:0;
    min-height:100vh;
    box-shadow:none;
    display:block;
  }
  .illustration-panel{
    position:fixed;
    inset:0;
    clip-path:none;
    z-index:0;
  }
  .illustration-panel svg{
    width:88%;
    max-width:360px;
    top:34%;
  }
  .form-panel{
    position:relative;
    z-index:2;
    width:100%;
    min-width:0;
    min-height:100vh;
    padding: 40px 28px 40px;
    align-items:flex-end;
    background: linear-gradient(180deg, rgba(27,99,214,0) 0%, rgba(15,30,50,0.35) 55%, rgba(10,20,35,0.55) 100%);
  }
  .form-inner{ max-width:400px; padding-bottom:24px; }
  .form-inner h1{ color:#fff; }
  .form-inner p.sub{ color:rgba(255,255,255,0.75); }
  .remember{ color:#fff; }
  .row-between a{ color:#fff; text-decoration:underline; }
  .form-footer{ color:rgba(255,255,255,0.65); }
}

@media (max-width:420px){
  .form-inner h1{ font-size:26px; }
  .illustration-panel svg{ top:30%; }
}