/*!
 * BuddyBoss ReadyLaunch Companion theme — wp-login.php styling.
 *
 * Strategy: WordPress core ships a heavy `login.min.css` for wp-login.php.
 * Our rules layer on top to swap colors/borders/radii to RL's dark mode
 * tokens. We do NOT replace any layout — only restyle. Tokens are injected
 * inline by `bb_rl_companion_login_assets()` so this file is palette-agnostic.
 *
 * Scoping: every selector starts with `body.login` so we never affect any
 * other admin screen.
 */

/* ─── Page background + body type ────────────────────────────────────────── */

body.login {
	background-color: var(--bb-rl-companion-login-bg, #19191a);
	color: var(--bb-rl-companion-login-text, #ffffff);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* ─── Login header logo — match the RL frontend header sizing ─────────────
 * Platform's login.css line 2558:
 *   .bb-rl-login-header-logo img { width: 130px; height: 32px; object-fit: contain }
 * forces a 130-wide slot regardless of image aspect. The RL frontend header
 * (.bb-rl-logo-wrap img) uses `max-width: 130px; max-height: 32px` instead,
 * which constrains size while preserving aspect ratio. With a 3:1 source
 * (300×100 logo), the frontend renders 96×32, but the login fixed-slot
 * paints the image at 96×32 visually inside a 130-wide box (extra padding
 * makes it look bigger).
 *
 * Switch login to the same constraint pattern so the logo renders at the
 * same size on every page.
 */
body.login .bb-rl-login-header-logo img {
	width: auto;
	height: auto;
	max-width: 130px;
	max-height: 32px;
	object-fit: contain;
}

/* WP renders the login page as a top-of-document #login wrapper. RL's branded
 * login template (when enabled) reuses #login as the visible card, so we
 * apply the RL card chrome here. When stock WP login is in play, this
 * still gives the form a centered card to sit inside. */
body.login #login {
	padding: 32px 28px;
	margin-top: 8vh;
	margin-bottom: 4vh;
	background-color: var(--bb-rl-companion-login-card, #242425);
	border: 1px solid var(--bb-rl-companion-login-border, #3a3a3b);
	border-radius: 16px;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15);
	max-width: 420px;
}

/* Any heading text rendered by either WP or RL inside #login (e.g., RL's
 * "Sign in to your account" h2) needs to switch to the card's text color. */
body.login #login h1,
body.login #login h2,
body.login #login h3,
body.login #login .login-heading,
body.login #login .login-subtitle {
	color: var(--bb-rl-companion-login-text, #ffffff);
}

/* ─── Logo (the WordPress wordmark) ──────────────────────────────────────── */

/* WP renders the logo as a 84x84 background image on `<h1><a>`. We hide it
 * by default — the URL bar already identifies the site, and customizing the
 * logo image is a secondary concern that can be tackled later via the
 * `login_header_image` filter / a custom logo upload. Hiding keeps the form
 * centered on a clean dark background without a stray bright icon. */
body.login h1 a {
	display: none;
}

/* ─── Form ────────────────────────────────────────────────────────────────
 * The form sits inside the #login card (chrome is on #login above), so the
 * form itself is transparent — no nested-card look. Just inherit the card's
 * background. */
body.login form,
body.login .login form {
	background-color: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
}

/* ─── Field labels ───────────────────────────────────────────────────────── */

body.login form label {
	color: var(--bb-rl-companion-login-text, #ffffff);
	font-weight: 500;
	font-size: 14px;
}

/* ─── Inputs ─────────────────────────────────────────────────────────────── */

body.login form input[type="text"],
body.login form input[type="password"],
body.login form input[type="email"],
body.login form .input {
	background-color: var(--bb-rl-companion-login-input-bg, #19191a);
	border: 1px solid var(--bb-rl-companion-login-border, #3a3a3b);
	color: var(--bb-rl-companion-login-text, #ffffff);
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 14px;
	box-shadow: none;
	height: auto;
	margin-top: 4px;
}

body.login form input[type="text"]::placeholder,
body.login form input[type="password"]::placeholder,
body.login form input[type="email"]::placeholder {
	color: var(--bb-rl-companion-login-text-secondary, #b8b8b9);
}

body.login form input[type="text"]:focus,
body.login form input[type="password"]:focus,
body.login form input[type="email"]:focus,
body.login form .input:focus {
	border-color: var(--bb-rl-companion-login-brand, #ef5d33);
	outline: 2px solid var(--bb-rl-companion-login-brand, #ef5d33);
	outline-offset: 1px;
	box-shadow: none;
}

/* The "show password" eye button overlays the right edge of the password
 * field. Keep it readable + give it the same focus indicator. */
body.login .wp-pwd button.button {
	background: transparent;
	border: 0;
	color: var(--bb-rl-companion-login-text-secondary, #b8b8b9);
	box-shadow: none;
}

body.login .wp-pwd button.button:hover {
	color: var(--bb-rl-companion-login-text, #ffffff);
}

body.login .wp-pwd button.button:focus {
	outline: 2px solid var(--bb-rl-companion-login-brand, #ef5d33);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ─── Submit button ──────────────────────────────────────────────────────── */

body.login .submit .button-primary,
body.login #wp-submit {
	background-color: var(--bb-rl-companion-login-brand, #ef5d33);
	border: 1px solid var(--bb-rl-companion-login-brand, #ef5d33);
	color: var(--bb-rl-companion-login-brand-fg, #ffffff);
	border-radius: 6px;
	font-weight: 600;
	font-size: 14px;
	text-shadow: none;
	box-shadow: none;
	height: auto;
	padding: 10px 16px;
	width: 100%;
	float: none;
	cursor: pointer;
	transition: filter 120ms ease;
}

body.login .submit .button-primary:hover,
body.login #wp-submit:hover {
	filter: brightness(1.1);
	box-shadow: none;
}

body.login .submit .button-primary:focus,
body.login #wp-submit:focus {
	outline: 2px solid var(--bb-rl-companion-login-brand-fg, #ffffff);
	outline-offset: 2px;
	box-shadow: none;
}

body.login .submit .button-primary:active,
body.login #wp-submit:active {
	transform: translateY(1px);
}

/* ─── "Remember me" checkbox row ─────────────────────────────────────────── */

body.login .forgetmenot {
	color: var(--bb-rl-companion-login-text-secondary, #b8b8b9);
}

body.login .forgetmenot label {
	color: var(--bb-rl-companion-login-text-secondary, #b8b8b9);
	font-weight: 400;
}

body.login .forgetmenot input[type="checkbox"] {
	accent-color: var(--bb-rl-companion-login-brand, #ef5d33);
}

/* ─── Below-form links: lost password / register / back to site ─────────── */

body.login #nav,
body.login #backtoblog {
	text-align: center;
	margin: 16px 0 0;
	padding: 0;
	text-shadow: none;
}

body.login #nav a,
body.login #backtoblog a {
	color: var(--bb-rl-companion-login-link, #ef5d33);
	text-decoration: none;
	font-size: 13px;
	transition: text-decoration-thickness 120ms ease;
}

body.login #nav a:hover,
body.login #backtoblog a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.login #nav a:focus,
body.login #backtoblog a:focus {
	outline: 2px solid var(--bb-rl-companion-login-brand, #ef5d33);
	outline-offset: 2px;
	border-radius: 4px;
	text-decoration: underline;
}

/* ─── Notice / error / success messages ──────────────────────────────────── */

/* Login error (e.g., "ERROR: incorrect password") */
body.login .notice,
body.login .message,
body.login #login_error {
	background-color: var(--bb-rl-companion-login-card, #242425);
	border-left: 4px solid var(--bb-rl-companion-login-brand, #ef5d33);
	color: var(--bb-rl-companion-login-text, #ffffff);
	box-shadow: none;
	border-radius: 6px;
	padding: 12px 16px;
	margin-bottom: 16px;
}

/* Success messages (e.g., "Password reset link sent") get a green accent */
body.login .message {
	border-left-color: #4caf50;
}

/* Strength indicator on register/reset password screens */
body.login #pass-strength-result {
	background-color: var(--bb-rl-companion-login-input-bg, #19191a);
	border: 1px solid var(--bb-rl-companion-login-border, #3a3a3b);
	color: var(--bb-rl-companion-login-text, #ffffff);
	border-radius: 6px;
	padding: 8px 12px;
}

body.login #pass-strength-result.short,
body.login #pass-strength-result.bad {
	border-color: #ff9800;
}

body.login #pass-strength-result.good {
	border-color: #4caf50;
}

body.login #pass-strength-result.strong {
	border-color: #4caf50;
	color: var(--bb-rl-companion-login-text, #ffffff);
}

/* ─── Privacy policy link (added by WP at bottom on 6.x) ─────────────────── */

body.login .privacy-policy-page-link {
	color: var(--bb-rl-companion-login-text-secondary, #b8b8b9);
	text-align: center;
}

body.login .privacy-policy-page-link a {
	color: var(--bb-rl-companion-login-link, #ef5d33);
	text-decoration: none;
}

body.login .privacy-policy-page-link a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ─── Language switcher (multilingual installs) ──────────────────────────── */

body.login .language-switcher {
	margin-top: 16px;
}

body.login .language-switcher select {
	background-color: var(--bb-rl-companion-login-input-bg, #19191a);
	color: var(--bb-rl-companion-login-text, #ffffff);
	border: 1px solid var(--bb-rl-companion-login-border, #3a3a3b);
	border-radius: 6px;
	padding: 6px 10px;
}

body.login .language-switcher .button {
	background-color: transparent;
	color: var(--bb-rl-companion-login-link, #ef5d33);
	border: 1px solid var(--bb-rl-companion-login-border, #3a3a3b);
	border-radius: 6px;
	box-shadow: none;
}

/* ─── Generated password screen (admin-created accounts) ─────────────────── */

body.login .reset-pass-submit .wp-generate-pw {
	background-color: transparent;
	color: var(--bb-rl-companion-login-link, #ef5d33);
	border: 1px solid var(--bb-rl-companion-login-border, #3a3a3b);
	border-radius: 6px;
}

body.login .reset-pass-submit .wp-cancel-pw {
	background-color: transparent;
	color: var(--bb-rl-companion-login-text-secondary, #b8b8b9);
}