/*
 * Metal Arts Studio brand for Frappe's built-in web pages (login / sign-up / forgot password,
 * update password, message pages). Loaded site-wide via web_include_css but scoped by
 * body[data-path] so the storefront pages (which have their own frame) are untouched.
 * Keep the tokens in sync with templates/mas_base.html.
 */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Barlow+Condensed:wght@600;700&family=Barlow:wght@400;500;600&display=swap");

body[data-path="login"],
body[data-path="update-password"],
body[data-path="message"] {
	--mas-bg: #0A0A0B; --mas-surface: #111113; --mas-card: #17171A;
	--mas-line: rgba(255,255,255,.10); --mas-line-strong: rgba(255,255,255,.22);
	--mas-ink: #F4F4F1; --mas-ink-2: #D6D6D2; --mas-muted: #A5A5A1;
	--mas-accent: #D4F53C; --mas-accent-dark: #BFE01F; --mas-accent-ink: #0A0A0B;
	--mas-display: "Anton", "Impact", "Arial Narrow", sans-serif;
	--mas-cond: "Barlow Condensed", "Arial Narrow", sans-serif;
	--mas-sans: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

	background: radial-gradient(700px 420px at 85% 0%, rgba(212,245,60,.10), transparent 60%), var(--mas-bg) !important;
	color: var(--mas-ink);
	font-family: var(--mas-sans);
	min-height: 100vh;
}

/* ---------- navbar: logo instead of text brand ---------- */
body[data-path="login"] .navbar,
body[data-path="update-password"] .navbar,
body[data-path="message"] .navbar {
	background: rgba(10,10,11,.9) !important;
	border-bottom: 1px solid var(--mas-line);
	min-height: 72px;
}
body[data-path="login"] .navbar-brand,
body[data-path="update-password"] .navbar-brand,
body[data-path="message"] .navbar-brand {
	display: inline-block;
	width: 150px; height: 40px;
	font-size: 0; color: transparent !important; overflow: hidden;
	background:
		url("/assets/metal_arts_studio/brand/logo-mark-white.png") left center / auto 36px no-repeat,
		url("/assets/metal_arts_studio/brand/logo-wordmark-white.png") 44px center / auto 22px no-repeat;
}
body[data-path="login"] .navbar-brand *,
body[data-path="update-password"] .navbar-brand *,
body[data-path="message"] .navbar-brand * { display: none; }
body[data-path="login"] .navbar .nav-link,
body[data-path="update-password"] .navbar .nav-link,
body[data-path="message"] .navbar .nav-link {
	color: var(--mas-ink-2) !important;
	font-family: var(--mas-cond); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
body[data-path="login"] .navbar-toggler,
body[data-path="update-password"] .navbar-toggler,
body[data-path="message"] .navbar-toggler { filter: invert(1); border-color: transparent; }

/* ---------- card ---------- */
body[data-path="login"] .page-card,
body[data-path="update-password"] .page-card,
body[data-path="message"] .page-card {
	background: var(--mas-card) !important;
	border: 1px solid var(--mas-line) !important;
	border-radius: 18px !important;
	box-shadow: 0 30px 80px rgba(0,0,0,.55) !important;
	color: var(--mas-ink);
	padding: 36px 32px !important;
	max-width: 440px;
}
body[data-path="login"] .page-card-head,
body[data-path="update-password"] .page-card-head,
body[data-path="message"] .page-card-head { text-align: center; }
/* The app logo is the black monogram (for light desk pages); show it white here. */
body[data-path="login"] .app-logo,
body[data-path="update-password"] .app-logo,
body[data-path="message"] .app-logo {
	filter: invert(1);
	width: auto !important; height: 64px !important; max-width: none !important;
	margin: 0 auto 18px !important;
}
body[data-path="login"] .page-card-head h4,
body[data-path="update-password"] .page-card-head h4,
body[data-path="message"] .page-card-head h4,
body[data-path="message"] .page-card h4 {
	font-family: var(--mas-display) !important;
	font-weight: 400 !important;
	text-transform: uppercase;
	font-size: 2rem !important;
	line-height: 1 !important;
	letter-spacing: .01em;
	color: var(--mas-ink) !important;
	margin-bottom: 8px !important;
}
body[data-path="login"] .text-muted,
body[data-path="update-password"] .text-muted,
body[data-path="message"] .text-muted { color: var(--mas-muted) !important; }
body[data-path="login"] label,
body[data-path="update-password"] label { color: var(--mas-ink-2) !important; }

/* ---------- inputs ---------- */
body[data-path="login"] .form-control,
body[data-path="update-password"] .form-control {
	background: var(--mas-surface) !important;
	color: var(--mas-ink) !important;
	border: 1px solid var(--mas-line-strong) !important;
	border-radius: 8px !important;
	min-height: 48px;
	font-size: 1rem !important;
	box-shadow: none !important;
}
body[data-path="login"] .form-control::placeholder,
body[data-path="update-password"] .form-control::placeholder { color: #7d7d79 !important; }
body[data-path="login"] .form-control:focus,
body[data-path="update-password"] .form-control:focus {
	border-color: var(--mas-accent) !important;
	box-shadow: 0 0 0 3px rgba(212,245,60,.2) !important;
}
body[data-path="login"] .field-icon,
body[data-path="update-password"] .field-icon { color: var(--mas-muted); top: 16px !important; }
body[data-path="login"] .toggle-password { color: var(--mas-accent) !important; cursor: pointer; top: 14px !important; }
/* Browser autofill would otherwise paint inputs pale yellow. */
body[data-path="login"] input:-webkit-autofill,
body[data-path="update-password"] input:-webkit-autofill {
	-webkit-text-fill-color: var(--mas-ink);
	-webkit-box-shadow: 0 0 0 1000px var(--mas-surface) inset !important;
	caret-color: var(--mas-ink);
}

/* ---------- buttons & links ---------- */
body[data-path="login"] .btn,
body[data-path="update-password"] .btn,
body[data-path="message"] .btn {
	min-height: 48px;
	border-radius: 8px !important;
	font-family: var(--mas-cond) !important;
	font-weight: 700 !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: 1rem !important;
	box-shadow: none !important;
}
body[data-path="login"] .btn-primary,
body[data-path="update-password"] .btn-primary,
body[data-path="message"] .btn-primary {
	background: var(--mas-accent) !important;
	border-color: var(--mas-accent) !important;
	color: var(--mas-accent-ink) !important;
}
body[data-path="login"] .btn-primary:hover,
body[data-path="update-password"] .btn-primary:hover,
body[data-path="message"] .btn-primary:hover { background: var(--mas-accent-dark) !important; }
body[data-path="login"] .btn-default,
body[data-path="update-password"] .btn-default,
body[data-path="message"] .btn-default {
	background: transparent !important;
	border: 1.5px solid var(--mas-line-strong) !important;
	color: var(--mas-ink) !important;
}
body[data-path="login"] .btn-default:hover { border-color: var(--mas-ink) !important; }
/* Social / email-link buttons: centre their label like the main button. */
body[data-path="login"] .btn-login-option {
	display: flex !important; align-items: center; justify-content: center; gap: 8px;
	width: 100%; margin: 0 !important;
}
body[data-path="login"] a:not(.btn):not(.navbar-brand):not(.nav-link),
body[data-path="update-password"] a:not(.btn):not(.navbar-brand):not(.nav-link),
body[data-path="message"] a:not(.btn):not(.navbar-brand):not(.nav-link) { color: var(--mas-accent) !important; }
body[data-path="login"] .login-divider { color: var(--mas-muted) !important; }
body[data-path="login"] .login-divider::before,
body[data-path="login"] .login-divider::after { background: var(--mas-line) !important; border-color: var(--mas-line) !important; }
body[data-path="login"] .sign-up-message,
body[data-path="login"] .forgot-password-message { color: var(--mas-muted) !important; }
body[data-path="login"] :focus-visible,
body[data-path="update-password"] :focus-visible { outline: 2px solid var(--mas-accent); outline-offset: 3px; }
body[data-path="login"] .indicator.gray { color: var(--mas-muted); }

/* Frappe's validation / message pop-ups */
body[data-path="login"] .page-card .alert,
body[data-path="update-password"] .page-card .alert { background: rgba(212,245,60,.10); color: var(--mas-ink); border: 1px solid var(--mas-accent); }

/* ---------- footer ---------- */
body[data-path="login"] .web-footer,
body[data-path="update-password"] .web-footer,
body[data-path="message"] .web-footer {
	background: #050506 !important;
	border-top: 1px solid var(--mas-line);
	color: var(--mas-muted) !important;
}
body[data-path="login"] .web-footer a,
body[data-path="update-password"] .web-footer a,
body[data-path="message"] .web-footer a { color: var(--mas-ink-2) !important; }
body[data-path="login"] .web-footer .row,
body[data-path="update-password"] .web-footer .row,
body[data-path="message"] .web-footer .row { margin-left: 0; margin-right: 0; }

@media (max-width: 480px) {
	body[data-path="login"] .page-card,
	body[data-path="update-password"] .page-card,
	body[data-path="message"] .page-card { padding: 28px 20px !important; margin: 0 12px; }
}