/*
 * GestionMed — Login Page Styles
 */

.login-body {
  min-height: 100vh;
  display: flex;
  background: var(--white);
}

.login-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  width: 100%;
}

/* Left column — branding */
.login-brand {
  background: linear-gradient(135deg, #0A0A0C 0%, #1D1D1F 100%);
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
  padding: 80px 64px;
  position: relative; overflow: hidden;
}
.login-brand::before {
  content: '';
  position: absolute; top: -50%; right: -30%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0,113,227,0.15) 0%, transparent 70%);
  border-radius: 50%;
}
.login-brand::after {
  content: '';
  position: absolute; bottom: -30%; left: -20%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(52,170,220,0.1) 0%, transparent 70%);
  border-radius: 50%;
}

.login-brand-content {
  position: relative; z-index: 1;
  max-width: 480px;
}

.login-brand .brand-logo {
  font-size: 19px; font-weight: 700; color: var(--white);
  letter-spacing: -.3px; margin-bottom: 64px;
  animation: fadeUp .6s ease .1s both;
}
.login-brand .brand-logo span { color: var(--blue); }

.login-brand h1 {
  font-size: clamp(38px, 5vw, 56px); font-weight: 700;
  line-height: 1.06; letter-spacing: -.035em;
  color: var(--white); margin-bottom: 20px;
  animation: fadeUp .6s ease .2s both;
}
.login-brand h1 .grad {
  background: linear-gradient(135deg, #0071E3 0%, #34AADC 55%, #5AC8FA 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.login-brand p {
  font-size: 19px; color: #6E6E73; line-height: 1.6;
  letter-spacing: -.1px; margin-bottom: 48px;
  animation: fadeUp .6s ease .3s both;
}

.login-brand-stats {
  display: flex; gap: 48px;
  animation: fadeUp .6s ease .4s both;
}
.login-brand-stat .stat-val {
  font-size: 28px; font-weight: 700; color: var(--white);
  letter-spacing: -.04em; line-height: 1;
}
.login-brand-stat .stat-label {
  font-size: 13px; color: #6E6E73; margin-top: 5px;
}

/* Right column — login form */
.login-form-side {
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: 60px 48px;
  background: var(--white);
}

.login-card {
  width: 100%; max-width: 400px;
  animation: fadeUp .6s ease .2s both;
}

.login-card .login-header { margin-bottom: 36px; }
.login-card .login-header h2 {
  font-size: 28px; font-weight: 700; color: var(--black);
  letter-spacing: -.03em; margin-bottom: 8px;
}
.login-card .login-header p {
  font-size: 15px; color: var(--mid); line-height: 1.5;
}

.login-card .login-submit {
  width: 100%; padding: 15px; border: none;
  background: var(--blue); color: var(--white);
  border-radius: 12px; font-size: 16px; font-weight: 600;
  font-family: var(--font); cursor: pointer;
  transition: background .2s, transform .1s;
}
.login-card .login-submit:hover { background: var(--blue-dk); }
.login-card .login-submit:active { transform: scale(0.98); }

.login-footer { text-align: center; margin-top: 32px; }
.login-footer a { color: var(--mid); font-size: 13px; transition: color .2s; }
.login-footer a:hover { color: var(--blue); }

@media (max-width: 900px) {
  .login-split { grid-template-columns: 1fr; }
  .login-brand { display: none; }
  .login-form-side { padding: 40px 24px; }
}