/* ── AUTH PAGE CSS ─────────────────────────────────────────── */
:root {
  --primary: #1a237e;
  --primary-light: #3949ab;
  --accent: #ff6f00;
  --font: 'Inter', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body.auth-body { 
  font-family: var(--font); margin: 0; min-height: 100vh; 
  background: #f0f2f8; 
  color: #333; /* Default dark text for light mode */
}
.form-label { color: #444; }
.auth-secondary { color: #666; }

.auth-wrapper { display: flex; min-height: 100vh; }

/* LEFT HERO */
.auth-left {
  width: 45%; background: linear-gradient(135deg, #0d1b5e 0%, #1a237e 50%, #283593 100%);
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 48px;
}
.auth-left-content { position: relative; z-index: 2; }
.auth-logo {
  width: 72px; height: 72px; border-radius: 20px;
  background: linear-gradient(135deg, #ff6f00, #ff8f00);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: #fff; margin-bottom: 28px;
  box-shadow: 0 8px 32px rgba(255,111,0,.4);
}
.auth-hero-title {
  font-size: 3rem; font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 16px;
}
.auth-hero-title span { color: #ff8f00; }
.auth-hero-sub { color: rgba(255,255,255,.7); font-size: 1rem; line-height: 1.6; margin-bottom: 32px; }
.auth-feature-item { color: rgba(255,255,255,.85); margin-bottom: 10px; font-size: .9rem; }
.auth-feature-item i { color: #66bb6a; margin-right: 8px; }

/* BG CIRCLES */
.auth-bg-circles { position: absolute; inset: 0; pointer-events: none; }
.circle { position: absolute; border-radius: 50%; opacity: .06; background: #fff; }
.c1 { width: 400px; height: 400px; top: -100px; right: -100px; }
.c2 { width: 280px; height: 280px; bottom: 60px; left: -80px; }
.c3 { width: 180px; height: 180px; top: 40%; right: 20%; }

/* RIGHT FORM */
.auth-right {
  flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px;
}
.auth-card {
  width: 100%; max-width: 440px;
  background: var(--bs-body-bg); border-radius: 20px;
  padding: 40px; box-shadow: 0 8px 40px rgba(0,0,0,.12);
  border: 1px solid var(--bs-border-color);
}
.auth-card-header { margin-bottom: 28px; }
.auth-card-header h2 { font-size: 1.75rem; font-weight: 800; color: #1a237e; margin: 0 0 6px; }
.auth-card-header p  { color: #666; margin: 0; font-weight: 500; }
.auth-icon-wrap { width: 52px; height: 52px; border-radius: 14px; background: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #ff6f00; margin-bottom: 16px; }

/* INPUT GROUP */
.input-group-icon { position: relative; }
.input-group-icon > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9e9e9e; z-index: 2; }
.input-group-icon .form-control { padding-left: 40px; padding-right: 40px; border-radius: 12px; height: 48px; }
.input-group-icon .form-control:focus { border-color: #3949ab; box-shadow: 0 0 0 3px rgba(57,73,171,.15); }
.eye-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #9e9e9e; cursor: pointer; z-index: 2; }

.btn-auth { height: 48px; border-radius: 12px; font-size: 1rem; font-weight: 700;
  background: linear-gradient(135deg, #1a237e, #3949ab); border: none;
  transition: all .25s; }
.btn-auth:hover { background: linear-gradient(135deg, #0d1b5e, #1a237e); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(26,35,126,.35); }
.fw-600 { font-weight: 600; }

/* DIVIDER */
.auth-divider { text-align: center; margin: 20px 0; position: relative; }
.auth-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #e0e0e0; }
.auth-divider span { background: #fff; padding: 0 12px; position: relative; font-size: .8rem; color: #888; font-weight: 600; }

/* DEMO CREDS */
.demo-creds { display: flex; gap: 10px; }
.demo-item {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid #e0e0e0; border-radius: 10px;
  cursor: pointer; transition: all .2s; font-size: .8rem;
  background: #fff; color: #333;
}
.demo-item:hover { border-color: var(--primary-light); background: rgba(var(--bs-primary-rgb), 0.05); }
.demo-item i { font-size: 1.2rem; flex-shrink: 0; }

@media (max-width: 768px) {
  .auth-card { padding: 28px 20px; }
  .demo-creds { flex-direction: column; }
}

/* ── DARK MODE FOR AUTH ──────────────────────────────────────── */
[data-bs-theme="dark"] body.auth-body { background: #0f1117; color: #e0e0e0; }
[data-bs-theme="dark"] .auth-card { background: #1a1d27; box-shadow: 0 8px 40px rgba(0,0,0,.4); }
[data-bs-theme="dark"] .auth-card-header h2 { color: #fff; }
[data-bs-theme="dark"] .auth-card-header p { color: #aaa; }
[data-bs-theme="dark"] .form-label { color: #e0e0e0; }
[data-bs-theme="dark"] .form-control { background-color: #12151e; border-color: #2a2d3a; color: #fff; }
[data-bs-theme="dark"] .form-control:focus { background-color: #12151e; color: #fff; }
[data-bs-theme="dark"] .auth-divider::before { background: #2a2d3a; }
[data-bs-theme="dark"] .auth-divider span { background: #1a1d27; color: #777; }
[data-bs-theme="dark"] .demo-item { border-color: #2a2d3a; color: #aaa; }
[data-bs-theme="dark"] .demo-item:hover { background: #12151e; border-color: var(--primary-light); }
[data-bs-theme="dark"] .demo-item i { color: #7986cb !important; }
[data-bs-theme="dark"] .form-check-label { color: #aaa; }
[data-bs-theme="dark"] .eye-toggle { color: #555; }