/* Reset and Base Styles */
* { margin:0; padding:0; box-sizing:border-box; }

:root{
  --space: 40px;
  --card-pad-x: 80px;
  --card-pad-y: 60px;
  --font-h1: clamp(24px, 2.2vw, 32px);
  --font-base: 16px;
  --font-small: 14px;
}

html { font-size: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  min-height: 100vh;
  line-height: 1.45;
  color: #1a1a1a;
  background: #ffffff;
}

/* ===== Loader ===== */
#root {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .25s ease;
}
#root.is-hidden { opacity: 0; pointer-events: none; }

/* ====== Main Container as Grid ====== */
.layout-container{
  display: grid;
  min-height: 100vh;
  grid-template-columns: 37% 1fr;
  grid-template-areas: "left right";
}

/* ====== Left Side - Logo (Grid) ====== */
.left-side{
  grid-area: left;
  background-color: #ffffff;
  padding: var(--space);
  display: grid;
  align-content: center;
  justify-items: center;
}
.logo-container{
  max-width: 200px; width: 100%;
  display: grid;
  gap: 12px;
  justify-items: center;
}
.logo{ width: 100%; height: auto; display: block; }

/* ====== Right Side ====== */
.right-side{
  --tw-bg-opacity: 1;
  grid-area: right;
  background-color: rgb(252 245 245 / var(--tw-bg-opacity));
  padding: var(--space);
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  overflow: hidden;
}

/* ====== Background Decoration ====== */
.background-decoration{
  position: absolute;
  bottom: 60px;
  right: -750px;
  left: -200px;
  text-align: center;
  opacity: 0.3;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.decoration-img{
  height: 250px;
  width: auto;
  max-width: 100%;
  transform: scale(2.3);
}

/* ====== Login / Survey Card ====== */
.login-form{
  background: transparent;
  border-radius: 0;
  padding: var(--card-pad-y) var(--card-pad-x);
  width: 70%;
  max-width: min(640px, 92vw);
  position: relative;
  z-index: 2;
  box-shadow: none;
}

/* Heading */
h1{
  font-size: var(--font-h1);
  font-weight: 600;
  text-align: center;
  color: #1a1a1a;
  margin-bottom: 28px;
}

/* ====== Error Message ====== */
.error-message{
  background-color: #fee;
  border-left: 4px solid #c92a2a;
  padding: 16px 40px 16px 16px;
  margin-bottom: 20px;
  border-radius: 6px;
  display: none;
  position: relative;
}
.error-message.show{ display:block; animation: slideDown .25s ease-out; }

@keyframes slideDown{
  from{ opacity:0; transform: translateY(-8px); }
  to{ opacity:1; transform: translateY(0); }
}

.error-title{ color:#c92a2a; font-weight:600; margin-bottom:4px; font-size: var(--font-small); }
.error-text{ color:#c92a2a; font-size: var(--font-small); }

.close-error{
  position:absolute; top:12px; right:12px;
  background:none; border:none; color:#c92a2a;
  font-size:20px; cursor:pointer; padding:0;
  width:24px; height:24px;
  display:grid; place-items:center;
  line-height:1; transition:opacity .2s;
}
.close-error:hover{ opacity:.7; }

/* ====== Form Styles ====== */
.form-group{ margin-bottom: 18px; }

label{
  display:block;
  font-size: var(--font-small);
  font-weight: 600;
  color:#333;
  margin-bottom: 8px;
}

/* Input wrapper */
.input-wrapper{
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}

input[type="text"],
input[type="password"],
textarea{
  width: 100%;
  padding: 5px 9px;
  font-size: 14px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  outline: none;
  transition: all .2s;
  background: #ffffff;
  color:#333;
  min-height: 39px;
}

input::placeholder, textarea::placeholder{ color:#9ca3af; font-size: 15px; }

input:focus, textarea:focus{
  border-color:#c92a2a;
  box-shadow: 0 0 0 3px rgba(201,42,42,0.1);
}

/* Password eye inside input */
.password-wrapper input[type="password"],
.password-wrapper input[type="text"]{ padding-right: 44px; }
.password-wrapper .toggle-password{
  position:absolute;
  top:50%;
  right:14px;
  transform: translateY(-50%);
  background:none;
  border:none;
  color:#9ca3af;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; padding:0;
}
.password-wrapper .toggle-password:hover{ color:#6b7280; }
.password-wrapper .toggle-password svg{ width:22px; height:22px; }

/* Button */
.sign-in-btn{
  width:100%;
  padding:6px 6px;
  background-color:#c92a2a; color:#fff;
  border:none; border-radius:8px;
  font-weight:600;
  cursor:pointer; transition:all .2s;
  margin-top:10px; margin-bottom:16px;
  min-height: 36px;
  display:block;
}
.sign-in-btn:hover{ background-color:#a61e1e; }
.sign-in-btn:active{ transform: scale(.98); }

/* Forgot Password */
.forgot-password{
  margin-top: 8px;
  display:grid;
  justify-items:end;
  text-align:right;
}
.forgot-password a{
  color:#4b5563; text-decoration:none;
  font-size:15px; font-weight:500;
  transition:color .2s;
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.forgot-password a:hover{ color:#c92a2a; text-decoration:underline; }

/* Survey helpers */
.back-row{ margin-top:10px; display:grid; justify-items:end; }
.likert-row{
  display: grid;
  grid-template-columns: repeat(5, minmax(40px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.likert-row > label{
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #374151;
  justify-self: start;
}
.likert-row input[type="radio"]{
  width: 18px; height: 18px;
}

/* ====== Responsiveness ====== */

/* XL ↓ — 1440px and below */
@media (max-width: 1440px){
  .background-decoration{ right:-225px; left:-131px; }
  .decoration-img{ height: 223px; transform: scale(2.5); }
}

/* LG ↓ — 1200px and below */
@media (max-width: 1200px){
  .layout-container{ grid-template-columns: 33% 1fr; }
  .decoration-img{ height: 200px; transform: scale(1.8); }
}

/* MD ↓ — 1024px and below */
@media (max-width: 1024px){
  .layout-container{ grid-template-columns: 38% 1fr; }
  .logo-container{ max-width: 180px; }
  .login-form{ padding: 48px 56px; }
  .decoration-img{ height: 160px; transform: scale(1.6); }
  .likert-row{ grid-template-columns: repeat(5, 1fr); }
}

/* SM ↓ — 840px and below (tight tablets) */
@media (max-width: 840px){
  :root{ --space: 28px; --card-pad-x: 40px; --card-pad-y: 40px; }
  .layout-container{
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "right";
  }
  .left-side{
    padding: 28px;
    min-height: 140px;
  }
  .logo-container{ max-width: 160px; }
  .right-side{ padding: 28px; }
  .decoration-img{ height: 120px; transform: scale(1.3); }
  .likert-row{ grid-template-columns: repeat(3, 1fr); } /* 3 per row */
}

/* XS ↓ — 640px and below (phones) */
@media (max-width: 640px){
  :root{ --space: 22px; --card-pad-x: 24px; --card-pad-y: 28px; }
  .logo-container{ max-width: 140px; margin-top:20px;}
  .login-form{ width: 100%; padding: 0; }
  .decoration-img{ height: 318px; transform: scale(1.15); }
  input[type="text"], input[type="password"], textarea{ font-size: 16px; } /* avoid iOS zoom */
  .likert-row{
    grid-template-columns: repeat(2, 1fr); /* stack 2 per row */
    gap: 12px;
  }
  .likert-row > label{ font-size: 15px; }
  .forgot-password{ justify-items: end; text-align: left; }
}

/* XXS ↓ — 480px and below (small phones) */
@media (max-width: 480px){
  .left-side{ min-height: 150px; padding: 18px; }
  .logo-container{ max-width: 120px; }
  .background-decoration{ opacity: .1; }
  .decoration-img{ height: 72px; transform: scale(1.05); }
  .login-form{ padding: 24px 18px; }
  .likert-row{ grid-template-columns: 1fr; } /* 1 per row for max readability */
  .sign-in-btn{ font-size: 16px; }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}