/* Portal / website pages / login screen — loaded via web_include_css
   Brand: deep navy (#0D1421) + gold accents, per client mockup.

   Two gold tones by design:
   --rk-gold        champagne gold — links, borders, small accents, logo-adjacent text
   --rk-gold-btn    #9E8847 — primary buttons / CTAs (Continue, Login, Send Link) + hover accents
   --rk-gold-bright hover/focus state for both buttons and accents (keeps the system cohesive)

   Selectors below were verified against the live rendered login DOM
   (rk-advocates.u.frappe.cloud/login) on 2026-07-16, since Frappe's actual
   login markup uses .btn-login / .btn-default for the primary submit button,
   NOT .btn-primary — a plain .btn-primary override alone misses it. */
:root {
  --rk-bg: #0d1421;
  --rk-surface: #161e2e;
  --rk-elevated: #1b2536;
  --rk-panel: #101828;
  --rk-border: #263148;
  --rk-border-strong: #33405c;
  --rk-gold: #c7a35d;
  --rk-gold-bright: #ddc084;
  --rk-gold-btn: #9e8847;
  --rk-text: #ffffff;
  --rk-muted: #9ca3af;
}

html,
body,
body.web-page,
.web-page,
.navbar-light,
.page-container,
.page-content-wrapper,
.page_content,
.page-header-wrapper,
.page-header,
main.container,
.container {
  background: var(--rk-bg) !important;
  color: var(--rk-text) !important;
}

.navbar {
  background: var(--rk-surface) !important;
  border-bottom: 1px solid rgba(199, 163, 93, 0.35) !important;
}

.navbar .navbar-brand,
.navbar-brand {
  color: var(--rk-gold) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

.navbar-brand img {
  max-height: 30px;
  width: auto;
  object-fit: contain;
}

.navbar .nav-link {
  color: var(--rk-muted) !important;
}

.navbar .nav-link:hover {
  color: var(--rk-gold-bright) !important;
}

.web-footer,
.web-footer-menu,
footer {
  background: var(--rk-surface) !important;
  border-top: 1px solid var(--rk-border) !important;
  color: var(--rk-muted) !important;
}

.web-footer a,
.footer-powered a {
  color: var(--rk-gold) !important;
}

/* --- Login / signup / forgot-password cards --- */
.page-card,
.for-login .page-card,
.login-content {
  background: var(--rk-elevated) !important;
  border: 1px solid var(--rk-border) !important;
  border-top: 3px solid var(--rk-gold-btn) !important;
  color: var(--rk-text) !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45) !important;
}

.page-card-head,
.for-login,
.page-card-head-text {
  color: var(--rk-text) !important;
  background: transparent !important;
}

.page-card-head img,
.for-login .app-logo,
.login-content .app-logo {
  max-height: 52px;
  width: auto;
}

.page-card-subtitle,
.page-card-head .page-card-subtitle {
  color: var(--rk-muted) !important;
}

/* --- Form fields --- */
.page-card .form-control,
.for-login .form-control,
.form-signin .form-control,
.form-group .form-control {
  background: var(--rk-panel) !important;
  border: 1px solid var(--rk-border-strong) !important;
  color: var(--rk-text) !important;
  border-radius: 8px !important;
}

.page-card .form-control:focus,
.for-login .form-control:focus,
.form-signin .form-control:focus {
  border-color: var(--rk-gold-btn) !important;
  box-shadow: 0 0 0 2px rgba(158, 136, 71, 0.35) !important;
  outline: none !important;
}

.page-card .form-control::placeholder,
.for-login .form-control::placeholder {
  color: var(--rk-muted) !important;
  opacity: 0.7;
}

.page-card .form-label,
.for-login .form-label,
.page-card label,
.for-login label {
  color: var(--rk-muted) !important;
}

.page-card .field-icon,
.for-login .field-icon,
.page-card .toggle-password,
.for-login .toggle-password {
  color: var(--rk-muted) !important;
  fill: var(--rk-muted) !important;
  opacity: 0.9;
}

.page-card .text-muted,
.for-login .text-muted {
  color: var(--rk-muted) !important;
}

.field-error {
  color: #e35d6a !important;
}

/* --- Buttons ---
   .btn-login is the REAL primary submit button on the sign-in form and it
   ships as .btn-default, not .btn-primary — style it explicitly, but leave
   .btn-login-option (the secondary "switch method" links) as a ghost button. */
.btn-primary,
.page-card-actions .btn-primary,
.for-login .btn.btn-login:not(.btn-login-option),
.page-card-actions .btn-login:not(.btn-login-option) {
  background: var(--rk-gold-btn) !important;
  border-color: var(--rk-gold-btn) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.btn-primary:hover,
.btn-primary:focus,
.for-login .btn.btn-login:not(.btn-login-option):hover,
.for-login .btn.btn-login:not(.btn-login-option):focus,
.page-card-actions .btn-login:not(.btn-login-option):hover {
  background: var(--rk-gold-bright) !important;
  border-color: var(--rk-gold-bright) !important;
  color: var(--rk-bg) !important;
}

.btn-default,
.btn-login-option,
.for-login .btn-default {
  background: transparent !important;
  border: 1px solid var(--rk-border-strong) !important;
  color: var(--rk-muted) !important;
}

.btn-default:hover,
.btn-login-option:hover,
.for-login .btn-default:hover {
  border-color: var(--rk-gold-btn) !important;
  color: var(--rk-gold-bright) !important;
  background: rgba(158, 136, 71, 0.1) !important;
}

.forgot-password-message a,
.resend-link a,
.btn-resend-link,
.sign-up-message a,
.login-content a {
  color: var(--rk-gold) !important;
}

.forgot-password-message a:hover,
.resend-link a:hover,
.btn-resend-link:hover,
.sign-up-message a:hover,
.login-content a:hover {
  color: var(--rk-gold-bright) !important;
}

a {
  color: var(--rk-gold);
}

a:hover {
  color: var(--rk-gold-bright);
}