/* phnx_dash login-page customisations.
   Loaded via hooks.py:web_include_css for /login and other portal pages. */

/* Hide broken SVG-fragment images Frappe inlines for the social-login icon
   field. Browsers can't render `/foo.svg#name` from an <img> tag. */
.social-login-buttons .btn-login-option img[src*=".svg#"] {
	display: none;
}

/* Bigger touch targets — iOS HIG and Android Material both recommend ≥44px.
   Frappe's btn-sm bottoms out around 31px which is finger-mashy on phone. */
.social-logins .btn-login-option {
	min-height: 44px;
	padding: 0.65rem 1rem;
	font-size: 0.95rem;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	border-radius: 8px;
}

/* Authentik-specific tint so it reads as a primary alternative, not a
   secondary action. Direct colour values — Frappe's --bg-color resolves
   to the page background grey which would shadow a CSS-var fallback. */
.social-logins .btn-authentik,
.social-logins .btn-authentik:active,
.social-logins .btn-authentik:visited {
	background-color: #fc7b03 !important;
	color: #fff !important;
	border-color: transparent !important;
}

.social-logins .btn-authentik:hover,
.social-logins .btn-authentik:focus {
	background-color: #d96900 !important;
	color: #fff !important;
	border-color: transparent !important;
}

/* Add a small orange dot before the text so the button isn't just naked
   words after we hid the broken icon. Pure CSS, no asset dependency. */
.social-logins .btn-authentik::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: #fff;
	display: inline-block;
}

/* Tighten the divider so the social block doesn't feel orphaned on phone. */
.social-logins .login-divider {
	margin: 1.25rem 0 0.75rem;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.6;
}

/* Mobile width — Frappe's page-card already constrains this on desktop;
   on phone we want full-width buttons inside the card. */
@media (max-width: 480px) {
	.social-logins .btn-login-option {
		width: 100%;
	}
}