@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
body, html { font-family: 'Inter', -apple-system, sans-serif !important; }

/* Kill the old geometric bg completely */
.login-wrapper { background: #0f0c29 !important; overflow: hidden !important; }
.login-wrapper::before, .login-wrapper::after { display: none !important; }
.login-wrapper .login-wrapper-inner { background: transparent !important; }

/* Left login panel */
.login-wrapper .login {
  background: rgba(15, 12, 41, 0.97) !important;
  border-right: 1px solid rgba(139, 92, 246, 0.15) !important;
  z-index: 10 !important;
  position: relative !important;
}

/* Title */
.login h2, .login .title, .sign-in .title { color: #e2e8f0 !important; font-weight: 700 !important; font-size: 1.6rem !important; }

/* Inputs */
.login input, .sign-in input {
  background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(139,92,246,0.25) !important;
  border-radius: 8px !important; color: #f1f5f9 !important; padding: 10px 14px !important;
}
.login input:focus, .sign-in input:focus { border-color: #8b5cf6 !important; box-shadow: 0 0 0 3px rgba(139,92,246,0.2) !important; }

/* Labels */
.login label, .sign-in label { color: #94a3b8 !important; }
.login a, .sign-in a { color: #a78bfa !important; }

/* Button */
.btn-primary, button.btn-primary, .btn.btn-primary {
  background: linear-gradient(135deg, #8b5cf6, #6366f1) !important; border: none !important;
  border-radius: 10px !important; font-weight: 600 !important; text-transform: uppercase !important;
  letter-spacing: 1.5px !important; box-shadow: 0 4px 20px rgba(139,92,246,0.3) !important;
}
.btn-primary:hover { background: linear-gradient(135deg, #a78bfa, #818cf8) !important; box-shadow: 0 6px 30px rgba(139,92,246,0.5) !important; transform: translateY(-1px) !important; }

/* Error */
.alert-danger { background: rgba(239,68,68,0.1) !important; border: 1px solid rgba(239,68,68,0.3) !important; border-radius: 8px !important; color: #fca5a5 !important; }

/* HEADER */
.header, header.header { background: linear-gradient(135deg, #0f0c29, #1a1744) !important; border-bottom: 1px solid rgba(139,92,246,0.2) !important; box-shadow: 0 2px 15px rgba(0,0,0,0.3) !important; }
.header .branding .title, .header .branding .nav-link { color: #e2e8f0 !important; font-weight: 600 !important; }
.header .search .search-input { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(139,92,246,0.2) !important; border-radius: 8px !important; color: #e2e8f0 !important; }

/* SIDEBAR */
.vertical-nav, .clr-vertical-nav { background: linear-gradient(180deg, #0f0c29, #1a1744) !important; border-right: 1px solid rgba(139,92,246,0.1) !important; }
.vertical-nav .nav-link { color: #94a3b8 !important; }
.vertical-nav .nav-link:hover { color: #e2e8f0 !important; background: rgba(139,92,246,0.08) !important; }
.vertical-nav .nav-link.active { color: #a78bfa !important; background: rgba(139,92,246,0.12) !important; border-left: 3px solid #8b5cf6 !important; }

/* CONTENT */
.content-area { background: #0e0b24 !important; }
.card, .clr-card { border-radius: 12px !important; border: 1px solid rgba(139,92,246,0.1) !important; }