/*
 * 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 paints inputs a pale colour. Cover it with an inset shadow
   (also when focused, where the focus ring rule would otherwise win) and keep
   the text light. The long transition stops Chrome flashing its own colour.
   Separate rules per pseudo-class: a browser that doesn't know one drops the whole list. */
body[data-path="login"] .form-control:-webkit-autofill,
body[data-path="update-password"] .form-control:-webkit-autofill {
	-webkit-text-fill-color: var(--mas-ink) !important;
	caret-color: var(--mas-ink);
	box-shadow: 0 0 0 1000px var(--mas-surface) inset !important;
	transition: background-color 600000s 0s, color 600000s 0s;
	filter: none;
}
body[data-path="login"] .form-control:-webkit-autofill:focus,
body[data-path="update-password"] .form-control:-webkit-autofill:focus {
	box-shadow: 0 0 0 1000px var(--mas-surface) inset, 0 0 0 3px rgba(212,245,60,.2) !important;
}
body[data-path="login"] .form-control:autofill,
body[data-path="update-password"] .form-control:autofill {
	-webkit-text-fill-color: var(--mas-ink) !important;
	caret-color: var(--mas-ink);
	box-shadow: 0 0 0 1000px var(--mas-surface) inset !important;
	transition: background-color 600000s 0s, color 600000s 0s;
	filter: none;
}
body[data-path="login"] .form-control:autofill:focus,
body[data-path="update-password"] .form-control:autofill:focus {
	box-shadow: 0 0 0 1000px var(--mas-surface) inset, 0 0 0 3px rgba(212,245,60,.2) !important;
}

/* ---------- dialogs (frappe.msgprint etc.) ----------
   Bootstrap keeps the modal white while the text inherits the page's light ink,
   so give dialogs the dark card treatment. */
body[data-path="login"] .modal-content,
body[data-path="update-password"] .modal-content,
body[data-path="message"] .modal-content {
	background: var(--mas-card) !important;
	color: var(--mas-ink) !important;
	border: 1px solid var(--mas-line-strong) !important;
	border-radius: 14px !important;
	box-shadow: 0 24px 60px rgba(0,0,0,.6) !important;
}
body[data-path="login"] .modal-header,
body[data-path="update-password"] .modal-header,
body[data-path="message"] .modal-header,
body[data-path="login"] .modal-footer,
body[data-path="update-password"] .modal-footer,
body[data-path="message"] .modal-footer { border-color: var(--mas-line) !important; }
body[data-path="login"] .modal-title,
body[data-path="update-password"] .modal-title,
body[data-path="message"] .modal-title {
	color: var(--mas-ink) !important;
	font-family: var(--mas-cond) !important; font-weight: 700 !important;
	letter-spacing: .06em; text-transform: uppercase;
}
body[data-path="login"] .modal-body,
body[data-path="update-password"] .modal-body,
body[data-path="message"] .modal-body { color: var(--mas-ink-2) !important; }
body[data-path="login"] .modal .btn-modal-close,
body[data-path="update-password"] .modal .btn-modal-close,
body[data-path="message"] .modal .btn-modal-close,
body[data-path="login"] .modal .close,
body[data-path="update-password"] .modal .close,
body[data-path="message"] .modal .close { color: var(--mas-ink) !important; opacity: .8; }
body[data-path="login"] .modal .close .icon,
body[data-path="update-password"] .modal .close .icon,
body[data-path="message"] .modal .close .icon { --icon-stroke: var(--mas-ink); stroke: var(--mas-ink); }
body[data-path="login"] .modal-backdrop.show,
body[data-path="update-password"] .modal-backdrop.show,
body[data-path="message"] .modal-backdrop.show { opacity: .7 !important; }

/* ---------- 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; }
}