/* ==========================================================================
   Learning Platform — Keycloak Login Theme
   Matches the auth-gateway landing page dark theme (#0f172a / #1e293b)
   ========================================================================== */

/* ---------- Page background ---------- */
html,
body.kc-login {
  background: #0f172a !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.login-pf {
  background: #0f172a !important;
  background-image: none !important;
}

.login-pf body {
  background: #0f172a !important;
}

/* ---------- Header (realm name) ---------- */
#kc-header {
  background: transparent !important;
}

#kc-header-wrapper {
  color: #e2e8f0 !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  padding-bottom: 1.5rem !important;
}

/* ---------- Login card ---------- */
#kc-form-wrapper,
.card-pf,
#kc-form {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
  color: #e2e8f0 !important;
}

/* Remove inner card double-borders */
.card-pf .card-pf-body {
  border: none !important;
}

/* ---------- Form labels ---------- */
.card-pf label,
.control-label,
#kc-form label,
.pf-c-form__label-text {
  color: #e2e8f0 !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
}

/* ---------- Input fields ---------- */
input.pf-c-form-control,
input[type="text"],
input[type="password"],
input[type="email"],
select.pf-c-form-control,
.pf-c-form-control {
  background: #0f172a !important;
  border: 1px solid #334155 !important;
  border-radius: 6px !important;
  color: #e2e8f0 !important;
  padding: 0.625rem 0.75rem !important;
  font-size: 0.9rem !important;
  transition: border-color 0.2s !important;
}

input.pf-c-form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
.pf-c-form-control:focus {
  border-color: #3b82f6 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
}

input::placeholder {
  color: #475569 !important;
}

/* ---------- Primary button (Log In) ---------- */
.pf-c-button.pf-m-primary,
input[type="submit"].pf-c-button,
#kc-login {
  background: #3b82f6 !important;
  border: 1px solid #3b82f6 !important;
  border-radius: 6px !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  padding: 0.625rem 1.5rem !important;
  transition: background 0.2s !important;
  width: 100% !important;
  cursor: pointer !important;
}

.pf-c-button.pf-m-primary:hover,
input[type="submit"].pf-c-button:hover,
#kc-login:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
}

.pf-c-button.pf-m-primary:active,
#kc-login:active {
  background: #1d4ed8 !important;
}

/* ---------- Links ---------- */
.card-pf a,
#kc-form-options a,
#kc-registration a,
#kc-info a,
a.pf-c-button.pf-m-link {
  color: #3b82f6 !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

.card-pf a:hover,
#kc-form-options a:hover,
#kc-registration a:hover,
#kc-info a:hover {
  color: #60a5fa !important;
  text-decoration: underline !important;
}

/* ---------- "Remember me" checkbox ---------- */
#kc-form-options .checkbox label,
#kc-form-options label {
  color: #94a3b8 !important;
  font-size: 0.85rem !important;
}

#kc-form-options input[type="checkbox"] {
  accent-color: #3b82f6 !important;
}

/* ---------- Forgot password / register links ---------- */
#kc-form-options,
#kc-registration,
#kc-info {
  color: #94a3b8 !important;
  font-size: 0.85rem !important;
}

#kc-info-wrapper {
  color: #94a3b8 !important;
}

/* ---------- Social login (Google) ---------- */
#kc-social-providers {
  margin-top: 1.5rem !important;
  padding-top: 1.5rem !important;
  border-top: 1px solid #334155 !important;
}

#kc-social-providers ul {
  list-style: none !important;
  padding: 0 !important;
}

.kc-social-provider-link,
.kc-social-provider-link-text {
  background: #0f172a !important;
  border: 1px solid #334155 !important;
  border-radius: 6px !important;
  color: #e2e8f0 !important;
  padding: 0.625rem 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: border-color 0.2s, background 0.2s !important;
}

.kc-social-provider-link:hover {
  border-color: #3b82f6 !important;
  background: #1e3a5f !important;
}

.kc-social-provider-name {
  color: #e2e8f0 !important;
  font-weight: 500 !important;
}

/* ---------- "Or" separator before social ---------- */
#kc-social-providers h2,
#kc-social-providers .kc-social-section {
  color: #94a3b8 !important;
}

/* ---------- Error / alert messages ---------- */
.alert,
.pf-c-alert {
  border-radius: 8px !important;
  font-size: 0.85rem !important;
}

.alert-error,
.pf-m-danger {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #fca5a5 !important;
}

.alert-warning,
.pf-m-warning {
  background: rgba(245, 158, 11, 0.1) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  color: #fcd34d !important;
}

.alert-success,
.pf-m-success {
  background: rgba(34, 197, 94, 0.1) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  color: #86efac !important;
}

.alert-info,
.pf-m-info {
  background: rgba(59, 130, 246, 0.1) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  color: #93c5fd !important;
}

.kc-feedback-text {
  color: inherit !important;
}

/* ---------- Footer / powered by ---------- */
#kc-content-wrapper + div,
.kc-login-tooltip {
  color: #475569 !important;
}

/* ---------- Locale selector ---------- */
#kc-locale ul {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  border-radius: 6px !important;
}

#kc-locale a {
  color: #94a3b8 !important;
}

#kc-locale a:hover {
  color: #e2e8f0 !important;
}

/* ---------- Miscellaneous cleanup ---------- */

/* Remove default PatternFly background images */
.login-pf .container,
.login-pf-page {
  background: transparent !important;
}

/* Center the content better */
.login-pf .login-pf-page .login-pf-page-header,
.login-pf .login-pf-page .login-pf-page-header #kc-header {
  margin: 0 !important;
}

/* Smooth transitions on all interactive elements */
a, button, input, select {
  transition: all 0.2s ease !important;
}

/* Scrollbar styling for dark theme */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0f172a;
}
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #475569;
}