/* ====== Βασικά ====== */
:root{
  --brand:#0056b3;
  --brand-700:#003d80;
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --danger:#b00020;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --focus: 0 0 0 3px rgba(0,86,179,.25);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);}

/* ====== Layout ====== */
.login-wrap{
  /* από 80vh -> 100svh για σωστό ύψος σε mobile με browser bars */
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:24px;
}

.login-card{
  width:100%;
  max-width:460px;              /* +40px για πιο άνετο layout */
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:34px 28px;            /* λίγο μεγαλύτερο padding */
}

/* ====== Logo & Τίτλος ====== */
.login-logo{
  display:block;
  width:200px;                  /* από 180 -> 200 για καλύτερη παρουσία σε mobile */
  max-width:80%;
  margin:0 auto 12px;
}
.login-title{
  text-align:center;
  margin:0 0 18px;
  font-size:clamp(22px, 5.5vw, 28px);   /* κλιμάκωση τίτλου */
  font-weight:800;
  letter-spacing:.2px;
}

/* ====== Alerts ====== */
.alert{
  padding:12px 14px;
  border-radius:10px;
  margin:0 0 14px;
  font-size:clamp(14px, 3.5vw, 15px);
}
.alert.error{background:#ffe8ea;color:var(--danger);}

/* ====== Form ====== */
.login-form{display:grid;gap:16px;}

.login-form label{display:grid;gap:7px;}

.login-form span{
  font-size:clamp(13px, 3.5vw, 14px);
  color:var(--muted);
}

.login-form input{
  width:100%;
  padding:14px 14px;                    /* μεγαλύτερα tap targets */
  border:1px solid #d1d5db;
  border-radius:10px;
  background:#fff;
  color:var(--text);
  outline:none;
  font-size:16px;                        /* αποφυγή zoom στο iOS */
  transition:border-color .15s, box-shadow .15s;
}
.login-form input:focus{
  border-color:var(--brand);
  box-shadow:var(--focus);
}

/* ====== Button ====== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:700;
  padding:14px 16px;                     /* λίγο μεγαλύτερο */
  border:0;
  border-radius:12px;
  cursor:pointer;
  transition:transform .04s ease, background .15s ease, box-shadow .15s ease;
  font-size:16px;                        /* αποφυγή zoom */
  line-height:1.1;
}
.btn:active{transform:translateY(1px);}
.btn-primary{
  background:var(--brand);
  color:#fff;
  box-shadow:0 6px 16px rgba(0,86,179,.25);
}
.btn-primary:hover{background:var(--brand-700);}

/* ====== Help ====== */
.login-help{
  text-align:center;
  margin:14px 0 0;
  font-size:clamp(13px, 3.5vw, 14px);
  color:var(--muted);
}
.login-help a{color:var(--brand);text-decoration:none;}
.login-help a:hover{text-decoration:underline;}

/* ====== Responsive ====== */
@media (max-width:480px){
  .login-card{padding:26px 18px;border-radius:12px;max-width:94vw;}
  .login-logo{width:220px;}               /* πιο εμφανές σε μικρή οθόνη */
  .btn{padding:14px 16px;border-radius:12px;}
}

/* ====== Prefers-reduced-motion ====== */
@media (prefers-reduced-motion: reduce){
  .btn, .login-form input{transition:none}
}