/* ================================================================
   AdminPro — auth.css
   Login / Register / Forgot Password page styles.
   Loaded only by layouts/auth.php.
   ================================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; font-family: 'Inter', sans-serif; }

.login-container { display: flex; height: 100vh; overflow: hidden; }

/* ── Left Panel ──────────────────────────────────────────────────── */
.login-left {
  width: 45%;
  background: #0f172a;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: 4rem 3rem; color: white;
}
.login-right {
  width: 55%; background: var(--ap-bg);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem; position: relative;
}

/* ── Orbs ────────────────────────────────────────────────────────── */
.orb { position: absolute; border-radius: 50%; opacity: .15; filter: blur(40px); }
.orb-1 { width:300px; height:300px; background:linear-gradient(135deg,#a855f7,#7c3aed); top:-100px; right:-100px; animation:float 20s ease-in-out infinite; }
.orb-2 { width:200px; height:200px; background:linear-gradient(135deg,#4f46e5,#4338ca); bottom:20%; left:-50px; animation:float 25s ease-in-out infinite reverse; }
.orb-3 { width:250px; height:250px; background:linear-gradient(135deg,#0ea5e9,#06b6d4); bottom:-80px; right:10%; animation:float 22s ease-in-out infinite; }
@keyframes float {
  0%,100% { transform:translate(0,0) rotate(0deg); }
  33%      { transform:translate(30px,-30px) rotate(120deg); }
  66%      { transform:translate(-20px,20px) rotate(240deg); }
}

.login-left-content { position: relative; z-index: 2; }
.login-logo {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 3rem; font-size: 1.5rem; font-weight: 700;
}
.login-logo-icon {
  width: 40px; height: 40px;
  background: linear-gradient(135deg,#a855f7,#4f46e5);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.25rem; color: white;
}
.login-headline { font-size: 2.5rem; font-weight: 800; line-height: 1.2; margin-bottom: .75rem; }
.login-subtext  { font-size: 1rem; color: rgba(255,255,255,.7); margin-bottom: 2rem; }
.login-features { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 3rem; }
.login-feature-chip { font-size: .95rem; color: rgba(255,255,255,.85); }
.login-feature-chip::before { content:'✦'; margin-right: .5rem; color: #a855f7; }

.login-stats {
  display: flex; gap: 2rem; padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.login-stat-item  { flex: 1; }
.login-stat-value { font-size: 1.25rem; font-weight: 700; display: block; }
.login-stat-label { font-size: .85rem; color: rgba(255,255,255,.6); margin-top: .25rem; }

/* ── Login Card ──────────────────────────────────────────────────── */
.login-card {
  width: 100%; max-width: 420px;
  background: var(--ap-surface); border-radius: 12px;
  padding: 2.5rem; box-shadow: 0 4px 20px rgba(0,0,0,.05);
}
.login-card-header { text-align: center; margin-bottom: 2rem; }
.login-card-logo {
  width: 48px; height: 48px;
  background: linear-gradient(135deg,#a855f7,#4f46e5);
  border-radius: 10px; margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.5rem; color: white;
}
.login-card-title    { font-size: 1.5rem; font-weight: 700; color: var(--ap-text-1); margin-bottom: .5rem; }
.login-card-subtitle { font-size: .9rem; color: var(--ap-text-3); }

/* ── Social Buttons ──────────────────────────────────────────────── */
.login-social-buttons { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.login-social-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1rem; border: 1px solid var(--ap-border);
  background: var(--ap-surface); border-radius: 8px; cursor: pointer;
  font-weight: 500; color: var(--ap-text-1); transition: all .2s;
}
.login-social-btn:hover   { background: var(--ap-bg); border-color: var(--ap-primary); }
.login-social-btn.loading { opacity: .7; pointer-events: none; }

/* ── Divider ─────────────────────────────────────────────────────── */
.login-divider {
  display: flex; align-items: center; gap: 1rem;
  margin: 1.5rem 0; color: var(--ap-text-3);
}
.login-divider::before,.login-divider::after { content:''; flex:1; height:1px; background:var(--ap-border); }

/* ── Form Controls ───────────────────────────────────────────────── */
.login-form-group  { margin-bottom: 1.25rem; }
.login-form-label  { display:block; font-size:.9rem; font-weight:600; color:var(--ap-text-1); margin-bottom:.5rem; }
.login-form-control{
  width:100%; padding:.75rem 1rem; border:1px solid var(--ap-border);
  border-radius:8px; font-size:.95rem; background:var(--ap-surface);
  color:var(--ap-text-1); transition:all .2s;
}
.login-form-control:focus { outline:none; border-color:var(--ap-primary); box-shadow:0 0 0 3px rgba(168,85,247,.1); }
.login-form-control::placeholder { color:var(--ap-text-3); }
.login-input-group   { position: relative; }
.login-input-addon   { position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:var(--ap-text-3); pointer-events:none; }
.login-input-group .login-form-control { padding-left: 2.75rem; }
.login-toggle-password {
  position:absolute; right:1rem; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; color:var(--ap-text-3);
  font-size:1.1rem; padding:.25rem;
}

/* ── Checkbox row ────────────────────────────────────────────────── */
.login-checkbox-row {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:1.5rem; font-size:.9rem;
}
.login-checkbox        { display:flex; align-items:center; gap:.5rem; cursor:pointer; }
.login-checkbox input  { cursor:pointer; accent-color:var(--ap-primary); }
.login-checkbox-label  { cursor:pointer; color:var(--ap-text-1); user-select:none; }
.login-forgot-link     { color:var(--ap-primary); text-decoration:none; font-weight:600; transition:opacity .2s; }
.login-forgot-link:hover{ opacity:.8; }

/* ── Submit Button ───────────────────────────────────────────────── */
.login-btn-submit {
  width:100%; padding:.875rem 1rem;
  background:linear-gradient(135deg,var(--ap-primary),#7c3aed);
  color:white; border:none; border-radius:8px;
  font-size:.95rem; font-weight:600; cursor:pointer; transition:all .2s;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.login-btn-submit:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 8px 16px rgba(168,85,247,.2); }
.login-btn-submit:disabled             { opacity:.7; cursor:not-allowed; }

.login-spinner {
  width:16px; height:16px; border:2px solid rgba(255,255,255,.3);
  border-top-color:white; border-radius:50%; animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Error Alert ─────────────────────────────────────────────────── */
.login-error-alert {
  display:none; margin-bottom:1.5rem; padding:1rem;
  background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3);
  border-radius:8px; color:#dc2626; font-size:.9rem;
}
.login-error-alert.show { display:block; }

/* ── Demo Hint ───────────────────────────────────────────────────── */
.login-demo-hint {
  text-align:center; margin-top:1.5rem; padding-top:1.5rem;
  border-top:1px solid var(--ap-border); font-size:.85rem; color:var(--ap-text-3);
}
.login-demo-hint strong { color:var(--ap-text-1); font-weight:600; }

/* ── Theme Toggle (login page) ───────────────────────────────────── */
.theme-toggle {
  position:fixed; top:2rem; right:2rem; z-index:1000;
  background:var(--ap-surface); border:1px solid var(--ap-border);
  border-radius:8px; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .2s;
}
.theme-toggle:hover { background:var(--ap-bg); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width:768px) {
  .login-container  { flex-direction:column; }
  .login-left,.login-right { width:100%; }
  .login-left       { padding:2rem; height:30vh; }
  .login-right      { height:70vh; }
  .login-headline   { font-size:1.75rem; }
  .login-features   { display:none; }
  .login-stats      { margin-top:1rem; }
}