/* --- BAAS (säilib senine ilme) --- */
html, body {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f2f5;
}
*,
*::before,
*::after { box-sizing: border-box; }

.login-container {
  display: flex;
  height: 80vh;
  width: 80vw;
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.login-left {
  width: 50%;
  background-image: url('https://source.unsplash.com/800x600/?technology,cybersecurity');
  background-size: cover;
  background-position: center;
  position: relative;
}
.login-right {
  width: 50%;
  padding: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.login-form { width: 100%; text-align: left; }
.login-form h2 {
  margin-bottom: 30px;
  font-size: 30px;
  font-weight: 700;
  color: #333;
  position: relative;
}
.login-form h2 i {
  font-size: 50px;
  color: #007bff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -80px;
  animation: swing 2s infinite ease-in-out;
}

.form-group label {
  text-align: left; display: block; font-weight: bold; margin-bottom: 10px;
}
.form-group input,
.form-control { width: 100%; }

.bg-overlay {
  background-color: rgba(0,0,0,.6);
  position: absolute; width:100%; height:100%; top:0; left:0; z-index:1;
}
.animated-content {
  position: absolute; color:#fff; font-size:20px; z-index:2;
  top:20px; left:20px; text-align:center; font-weight:700;
  display:flex; flex-direction:column; align-items:center;
}
.animated-content i { font-size:50px; margin-bottom:10px; }
.matrix-text{
  font-family:'Courier New', Courier, monospace; color:#00FF00; font-size:25px;
  text-shadow:0 0 10px #00FF00; white-space:nowrap; overflow:hidden;
  border-right:2px solid #00FF00; animation: typing 3.5s steps(40,end), blink .75s step-end infinite;
  margin-top:50px;
}

/* --- NUPUD (SSO sama sinine) --- */
.login-btn,
.id-card-btn,
.sso-btn {
  background-color:#007bff;
  color:#fff;
  font-weight:bold;
  padding:10px 20px;
  border-radius:50px;
  transition:background-color .3s ease;
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.login-btn:hover,
.id-card-btn:hover,
.sso-btn:hover { background-color:#0056b3; }
.login-btn i, .id-card-btn i, .sso-btn i { margin-right:8px; }

/* =========================
   TELEFON – PORTREE ≤768px
   ========================= */
@media (max-width: 768px) and (orientation: portrait) {
  html, body { align-items: stretch; }
  .login-container {
    flex-direction: column !important;
    width: 100vw !important;
    height: 100svh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* ülemine (matrix) veel madalam, et vormile jääks ruumi */
  .login-left {
    width: 100% !important;
    flex: 0 0 18svh !important;   /* ↓ 22svh → 18svh */
    min-height: 96px !important;
  }

  /* peida anima-tekst täielikult portrees */
  .matrix-text { display: none !important; }

  .login-right {
    width: 100% !important;
    flex: 1 1 auto !important;
    padding: 14px 12px 18px !important;
    overflow: auto !important;
    align-items: flex-start !important;
  }
  .login-form { max-width: 100% !important; width: 100% !important; }

  /* peida luku-ikoon mobiilis */
  .login-form h2 i { display: none !important; }

  .form-control { min-height: 48px; font-size: 1.02rem; }
  .login-btn, .id-card-btn, .sso-btn { padding: 12px 20px; font-size: 1.02rem; }
  .animated-content { top: 12px; left: 12px; }
}

/* ===========================================
   TELEFON – LANDSCAPE ≤768px: kõrvuti & skaleeri vormi kasti
   =========================================== */
@media (max-width: 768px) and (orientation: landscape) {
  html, body { align-items: stretch; }
  .login-container {
    flex-direction: row !important;
    width: 100vw !important;
    height: 100svh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .login-left {
    width: 50% !important;
    min-width: 0 !important;
    min-height: 100% !important;
  }
  .login-right {
    width: 50% !important;
    padding: 12px 12px !important;   /* kompaktsemad padjad */
    overflow: auto !important;
    align-items: center !important;   /* tsentreeri vertikaalselt */
    justify-content: center !important; /* tsentreeri horisontaalselt */
  }

  /* skaleeri vormi plokk ekraanile */
  .login-form {
    max-width: 420px !important;      /* väiksem kast, et mahuks */
    width: 100% !important;
  }
  .login-form h2 { margin-bottom: 16px; font-size: 24px; }
  .login-form h2 i { display: none !important; }

  .form-control { min-height: 42px; font-size: .98rem; }
  .login-btn, .id-card-btn, .sso-btn { padding: 10px 16px; font-size: .98rem; }
}

/* ===================================
   TAHVEL (769–1024px): kõrvuti + kompaktsem
   =================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  html, body { align-items: center; }
  .login-container {
    flex-direction: row !important;
    width: 92vw;
    height: 88vh;
  }
  .login-left  { width: 50%; }
  .login-right { width: 50%; padding: 28px 24px; overflow: auto; }
  .login-form { max-width: 500px; width: 100%; }
  .form-control { min-height: 46px; }
}

/* --- animatsioonid (algne) --- */
@keyframes swing {
  0%   { transform: translateX(-50%) rotate(0deg); }
  50%  { transform: translateX(-50%) rotate(8deg); }
  100% { transform: translateX(-50%) rotate(0deg); }
}
@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes blink {
  from, to { border-color: transparent; }
  50%     { border-color: #00FF00; }
}

/* ==========================================================
   TELEFON – LANDSCAPE ≤768px: vorm mahuks igal juhul sisse
   ========================================================== */
@media (max-width: 768px) and (orientation: landscape) {
  /* tee veidi rohkem ruumi login-vormile */
  .login-container {
    flex-direction: row !important;
    width: 100vw !important;
    height: 100svh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .login-left {
    flex: 0 0 44% !important;   /* ↓ rohkem ruumi paremale */
    min-height: 100% !important;
  }
  .login-right {
    flex: 1 1 56% !important;
    padding: 10px 10px !important;      /* kompaktsemad padjad */
    overflow: auto !important;          /* kui vaja, kerib */
    align-items: center !important;
    justify-content: center !important;
  }

  /* vormi kast kompaktsem, keskjoondus, piiratud kõrgus */
  .login-form {
    max-width: 400px !important;
    width: 92% !important;
    padding: 12px !important;
    margin: 0 auto !important;
    max-height: calc(100svh - 24px) !important; /* ära lõika ära */
    overflow: auto !important;
    transform-origin: top center;
    will-change: transform;
  }

  /* väiksemad pealkirjad, vahed, kontrollid */
  .login-form h2 { margin-bottom: 14px !important; font-size: 24px !important; }
  .login-form h2 i { display: none !important; }
  .form-control { min-height: 40px !important; font-size: 0.98rem !important; }
  .login-btn, .id-card-btn, .sso-btn { padding: 10px 16px !important; font-size: 0.98rem !important; }
}

/* Eriti madal landscape – skaleeri vormi kast väiksemaks */
@media (max-width: 768px) and (orientation: landscape) and (max-height: 480px) {
  .login-form { transform: scale(0.95); }
}
@media (max-width: 768px) and (orientation: landscape) and (max-height: 420px) {
  .login-form { transform: scale(0.90); }
}
@media (max-width: 768px) and (orientation: landscape) and (max-height: 380px) {
  .login-form { transform: scale(0.85); }
}
@media (max-width: 768px) and (orientation: landscape) and (max-height: 340px) {
  .login-form { transform: scale(0.80); }
}

/* BONUS: portree mobiilis – peida “E-ITS-i abimees” tekst täielikult,
   et midagi ei jääks poolikult. (Kui sul see reegel juba on, jäta nii.) */
@media (max-width: 768px) and (orientation: portrait) {
  .matrix-text { display: none !important; }
}