/* =========================================================
   Login Page Redesign — matches main site brand
   ========================================================= */

*{ box-sizing:border-box; }

:root{
  --ink:#12161C;
  --paper:#FBF9F6;
  --primary:#2F5D50;
  --primary-dark:#1E3F36;
  --primary-tint:#E7EFEC;
  --accent:#E8763C;
  --accent-dark:#C75F2B;
  --slate:#5B6470;
  --slate-light:#8A93A0;
  --line:rgba(18,22,28,0.10);
  --shadow-lg:0 24px 60px rgba(18,22,28,0.16);
}

html, body.login-page{
  height:100%;
  width:100% !important;
  max-width:100% !important;
  min-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  background:var(--paper) !important;
  font-family:"Inter", sans-serif !important;
  overflow-x:hidden;
  display:block !important;
  position:static !important;
}

.login-shell{
  min-height:100vh;
  width:100% !important;
  max-width:100% !important;
  display:flex !important;
  flex-wrap:nowrap;
  margin:0 !important;
  position:relative;
}

/* ---- Left brand panel ---- */
.login-brand{
  flex:1 1 42%;
  min-width:0;
  min-height:280px;
  background:
    linear-gradient(160deg, rgba(18,22,28,.88), rgba(30,63,54,.88)),
    url('../workimages/header-background.jpg') center/cover no-repeat;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:3rem 3rem;
  position:relative;
}
.login-brand .brand-mark{
  display:flex; align-items:center; gap:.7rem; margin-bottom:2.5rem;
}
.login-brand .brand-mark img{ height:38px; width:auto; border-radius:8px; }
.login-brand .brand-mark span{
  font:700 1.2rem/1 "Outfit", sans-serif;
}
.login-brand h1{
  font:700 2.1rem/1.2 "Outfit", sans-serif;
  margin:0 0 1rem;
  max-width:420px;
}
.login-brand p{
  color:rgba(255,255,255,.72);
  font-size:1rem;
  max-width:380px;
  margin:0;
}
.login-brand .brand-back{
  margin-top:2.5rem;
  display:inline-flex; align-items:center; gap:.5rem;
  color:#fff; text-decoration:none;
  font:600 .85rem "Inter", sans-serif;
  opacity:.85;
}
.login-brand .brand-back:hover{ opacity:1; color:var(--accent); }

/* ---- Right form panel ---- */
.login-form-side{
  flex:1 1 58%;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3rem 1.5rem;
  background:var(--paper);
}
.login-card{
  width:100%;
  max-width:400px;
  background:#fff;
  border-radius:18px;
  padding:2.5rem 2.25rem;
  box-shadow:var(--shadow-lg);
}
.login-card .eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font:600 .72rem/1 "Inter", sans-serif;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--primary);
  background:var(--primary-tint);
  padding:.4rem .8rem; border-radius:30px;
  margin-bottom:1rem;
}
.login-card h2{
  font:700 1.5rem/1.25 "Outfit", sans-serif;
  color:var(--ink);
  margin:0 0 .4rem;
}
.login-card .sub{
  color:var(--slate);
  font-size:.9rem;
  margin:0 0 1.8rem;
}

.lf-group{
  position:relative;
  margin-bottom:1.3rem;
}
.lf-group label{
  display:block;
  font:600 .78rem "Inter", sans-serif;
  color:var(--ink);
  margin-bottom:.4rem;
}
.login-card input.form-control{
  width:100%;
  height:auto;
  padding:.85rem 1rem;
  border:1.5px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  font:500 .95rem "Inter", sans-serif;
  box-shadow:none;
  transition:border-color .15s ease;
}
.login-card input.form-control:focus{
  border-color:var(--primary);
  outline:none;
  box-shadow:none;
}
.login-card input.form-control::placeholder{
  color:var(--slate-light);
  font-weight:400;
}

.login-card input[type="submit"]{
  width:100%;
  border:none;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  font:600 .95rem "Inter", sans-serif;
  padding:.9rem;
  cursor:pointer;
  margin-top:.5rem;
  transition:background .18s ease, transform .18s ease;
  box-shadow:0 10px 24px rgba(232,118,60,.3);
}
.login-card input[type="submit"]:hover{
  background:var(--accent-dark);
  transform:translateY(-1px);
}

.login-card .legal{
  margin-top:1.8rem;
  padding-top:1.2rem;
  border-top:1px solid var(--line);
  text-align:center;
}
.login-card .copyright{
  font-size:.78rem;
  color:var(--slate-light);
}
.login-card .copyright a{
  color:var(--primary);
  text-decoration:none;
  font-weight:600;
}
.login-card .version{
  display:none;
}

@media (max-width: 860px){
  .login-shell{ flex-direction:column; flex-wrap:wrap; }
  .login-brand{
    flex:none; padding:2.5rem 1.75rem; min-height:220px;
  }
  .login-brand h1{ font-size:1.6rem; }
  .login-form-side{ padding:2rem 1.25rem 3rem; }
  .login-card{ padding:2rem 1.5rem; box-shadow:none; border:1px solid var(--line); }
}