/* ============================================================
   login.css — หน้า Login
   ============================================================ */
.login-page {
  min-height: 100vh;
  display: flex;
  background: linear-gradient(145deg, var(--green-900) 0%, var(--green-700) 55%, var(--green-600) 100%);
  position: relative;
  overflow: hidden;
}

/* Decorative pattern */
.login-page::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.06) 0%, transparent 40%);
  pointer-events: none;
}
.login-page::after {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 50%;
  top: -200px; right: -200px;
  pointer-events: none;
}

/* Left decorative panel (Desktop) */
.login-brand-panel {
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: var(--sp-10);
  position: relative;
  z-index: 1;
}
.login-brand-panel__logo {
  width: 180px;
  height: 180px;
  object-fit: contain;
}
.login-brand-panel__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl); font-weight: 700;
  color: #fff;
  text-align: center; line-height: 1.3;
  margin-bottom: var(--sp-2);
}
.login-brand-panel__sub {
  font-size: var(--text-base); color: rgba(255,255,255,.65);
  text-align: center;
}
.login-brand-panel__dots {
  display: flex; gap: var(--sp-2); margin-top: var(--sp-8);
}
.login-brand-panel__dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.3);
}
.login-brand-panel__dots span:first-child { background: rgba(255,255,255,.8); }

/* Right form panel */
.login-form-panel {
  width: min(440px, 100%);
  background: var(--color-surface);
  display: flex; flex-direction: column;
  justify-content: center;
  padding: var(--sp-12) var(--sp-10);
  position: relative; z-index: 1;
  box-shadow: -20px 0 60px rgba(0,0,0,.25);
}

.login-form-panel__header { margin-bottom: var(--sp-8); }
.login-form-panel__hello {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-primary);
  margin-bottom: var(--sp-2);
}
.login-form-panel__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl); font-weight: 700;
  color: var(--color-text); line-height: 1.2;
}
.login-form-panel__sub { font-size: var(--text-sm); color: var(--color-text-3); margin-top: var(--sp-2); }

/* Form */
.login-form { display: flex; flex-direction: column; gap: var(--sp-5); }

/* Input with icon */
.input-icon-wrap { position: relative; }
.input-icon-wrap .form-control { padding-left: 42px; }
.input-icon-wrap .input-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--color-text-3); pointer-events: none;
  display: flex; align-items: center;
}
.input-icon-wrap .input-toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--color-text-3); padding: 4px;
  display: flex; align-items: center;
}
.input-icon-wrap .input-toggle:hover { color: var(--color-primary); }

/* Remember me row */
.login-options {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--text-sm);
}
.login-check {
  display: flex; align-items: center; gap: var(--sp-2);
  cursor: pointer; color: var(--color-text-2);
}
.login-check input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--color-primary); cursor: pointer;
}
.login-forgot { color: var(--color-primary); font-weight: 500; }
.login-forgot:hover { text-decoration: underline; }

/* Submit button */
.login-submit {
  width: 100%; padding: 13px;
  background: var(--color-primary); color: #fff;
  border: none; border-radius: var(--r-md);
  font-size: var(--text-base); font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer; position: relative; overflow: hidden;
  box-shadow: 0 4px 16px rgba(26,122,74,.35);
  transition: all .2s ease;
}
.login-submit:hover {
  background: var(--color-primary-dark);
  box-shadow: 0 6px 24px rgba(26,122,74,.45);
  transform: translateY(-1px);
}
.login-submit:active { transform: translateY(0); }
.login-submit:disabled { opacity: .65; cursor: not-allowed; transform: none; }

/* Shimmer effect on button */
.login-submit::after {
  content: '';
  position: absolute; top: -50%; left: -60%;
  width: 40%; height: 200%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  animation: shimmer 2.5s infinite;
}
@keyframes shimmer { 0%,100% { left: -60%; } 60% { left: 120%; } }

/* Loading spinner */
.login-submit .spinner {
  display: none;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin-right: var(--sp-2);
}
.login-submit.loading .spinner { display: inline-block; }
.login-submit.loading .btn-text { opacity: .8; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Alert */
.login-alert { margin-bottom: var(--sp-1); }

/* Footer note */
.login-footer-note {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--color-border-light);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-3);
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
  .login-page { flex-direction: column; }
  .login-brand-panel {
    flex: none; padding: var(--sp-8) var(--sp-5) var(--sp-6);
  }
  .login-brand-panel__logo { width: 60px; height: 60px; }
  .login-brand-panel__title { font-size: var(--text-xl); }
  .login-brand-panel__dots { display: none; }
  .login-form-panel {
    width: 100%; flex: 1;
    padding: var(--sp-8) var(--sp-5);
    box-shadow: none;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    margin-top: -20px;
  }
}