/* ===== Base / Layout ===== */
:root{
  --bg1: #263846;
  --bg2: #20455D;
  --white: #fff;
}

html, body{
  height:100%;
  margin:0;
  padding:0;
}

body.login-body{
  height:100%;
  min-height:100vh;
  background:linear-gradient(130deg, var(--bg1), var(--bg2));
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Open Sans','Helvetica Neue',Arial,sans-serif;
  color:#2b2b2b;
}

/* На десктоп – без вертикален скрол (100vh секция) */
@media (min-width: 980px){
  body.login-body{ overflow:hidden; }
}

.login-wrapper{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  height:100vh;                 /* важен – заключваме на 100% от екрана */
  width:100%;
}

/* ===== Left panel ===== */
.login-left{
  position:relative;
  overflow:hidden;
  padding:3.2rem 3rem;
  background:linear-gradient(130deg, var(--bg1), var(--bg2));
}

/* Подравняване на текстовия блок вляво – визуален баланс */
.login-left .left-overlay{
  position:absolute;
  top:3.2rem;
  left:3rem;
  right:3rem;
  max-width:min(760px, 95%);
  z-index:2;
  color:var(--white);
}

.login-left .eyebrow{
  opacity:.78; margin:0 0 .4rem; font-weight:500; letter-spacing:.02em;
}

.login-left h1{
  margin:0 0 1.2rem;
  font-weight:800;
  line-height:1.08;
  font-size: clamp(28px, 3.1vw, 44px);
}
.login-left h1 span{ color:#8bd9ff; }

.login-left .tagline{
  margin-top:.6rem;
  opacity:.78;
  letter-spacing:.12em;
  font-size: clamp(10px, .95vw, 12px);
}

/* Корабът – абсолютен фон, без да „избутва“ височина */
.login-left .blueprint{
  position:absolute;
  inset:auto 0 -2rem 0;      /* -2rem за да избегне вертикален скрол от антиалиасинг */
  width:100%;
  max-width:none;
  height:auto;
  opacity:.20;
  z-index:1;
  object-fit:cover;
  pointer-events:none;
}

/* ===== Right panel ===== */
.login-right{
  background:#fff;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:1.8rem 2.2rem;
  height:100vh;               /* заключваме височината на екрана */
  box-sizing:border-box;
}

/* По-голямо лого – елегантно респонсив с clamp */
.logo{
  width: clamp(420px, 26vw, 420px);
  height:auto;
  margin-bottom:.6rem;
}

h2{
  color:#545c6b;
  margin:.2rem 0 1.6rem;
  text-align:center;
  font-size: clamp(18px, 2vw, 24px);
}

.login-form{
  width:min(420px, 94%);
  display:flex; flex-direction:column; gap:1rem;
}

.login-form label{ font-size:.95rem; color:#6a7386; }

.login-form textarea{
  width:100%;
  padding:.85rem .95rem;
  border:1px solid #e3e6ef; border-radius:12px; outline:none;
  background:#f9fbff; transition:border .2s;
  min-height: 9.5rem;
  resize: vertical;
}
.login-form textarea:focus{ border-color:#9bb7ff; }

.form-row{
  display:flex; align-items:center; justify-content:space-between;
  font-size:.95rem; flex-wrap:wrap; gap:.6rem;
}
.form-row .remember{ color:#6a7386; }
.form-row .forgot{ color:#6a86ff; text-decoration:none; }

.btn-primary{
  border:none; border-radius:12px; padding:.9rem 1rem; color:#fff; cursor:pointer;
  background:linear-gradient(90deg, #3a61ff, #1234b6); transition:filter .2s;
  font-weight:600;
}
.btn-primary:hover{ filter:brightness(1.05); }

.btn-outline{
  border:1.6px solid #b7c4ff; background:transparent; color:#1234b6;
  border-radius:14px; padding:.75rem 1rem; cursor:pointer; font-weight:600;
}

.flashes{ width:min(520px, 94%); margin:.6rem 0; }
.flash{ padding:.75rem .95rem; border-radius:10px; margin:.35rem 0; font-size:.98rem; }
.flash.error{ background:#ffe7e7; color:#8a1f1f; border:1px solid #ffb9b9; }
.flash.success{ background:#e9ffe7; color:#185c26; border:1px solid #bdf5b6; }

/* ===== Responsive: мобилен layout ===== */
@media (max-width: 979.98px){
  /* На мобилно – позволяваме скрол; подреждаме на колона */
  body.login-body{ overflow:auto; }
  .login-wrapper{
    grid-template-columns: 1fr;
    height:auto;               /* височината вече се определя от съдържанието */
  }
  .login-left{
    min-height:48vh;
    padding:2rem 1.6rem 1.2rem;
  }
  .login-left .left-overlay{
    position:relative; top:0; left:0; right:0; max-width:100%;
  }
  .login-right{
    height:auto;
    padding:2rem 1.6rem 2.6rem;
  }
  .logo{ width: clamp(180px, 44vw, 280px); }
}