@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&family=Raleway:wght@600;700&display=swap");

/*
  Export City izgled servisnih stranica ERP-a (gost): prijava, zaboravljena lozinka, prijava linkom,
  2FA verifikacija, postavljanje/reset lozinke, QR kod, poruke (/message) i 404/greska.
  Ucitava se preko web_include_css (hooks.py). Samo boje/okvir/fontovi — markup ostaje Frappeov.

  Zamka (ista kao kod NEKA): Frappe ucitava login.bundle.css POSLIJE web_include_css, pa pravila
  idu kroz body[data-path=...] (jaca specificnost) umjesto da ga pobjedjuju redoslijedom.
  Tokeni = dizajn sistem Export City (claude.ai/artifact/WUqCrM9kXNQ7eafKsqaJqE): ink #192735,
  crimson #af0738 (jedna primarna akcija), zalfija #c9d9cd, surface-alt #eaf4ed, line-strong #7d8b98.
  Dugmad i polja ostri (radius 0), kartice 8px; fokus 2px tamnoplavo s 2px razmaka.
*/

body[data-path="login"],
body[data-path="update-password"],
body[data-path="message"],
body[data-path="404"],
body[data-path="error"],
body[data-path="qrcode"] {
	--ec-ink: #192735;
	--ec-ink-muted: #4f5d6b;
	--ec-crimson: #af0738;
	--ec-crimson-hover: #8c062d;
	--ec-sage: #c9d9cd;
	--ec-surface-alt: #eaf4ed;
	--ec-line: #c9d9cd;
	--ec-line-strong: #7d8b98;
	--ec-bg: #eaf4ed;
	--ec-focus: #192735;
	--btn-primary: var(--ec-crimson);
	--primary: var(--ec-crimson);
	--primary-color: var(--ec-crimson);
	--border-primary: var(--ec-crimson);
	--bg-color: var(--ec-bg);
	--subtle-accent: var(--ec-bg);
	background-color: var(--ec-bg) !important;
	color: var(--ec-ink);
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

/* Kartica: login, zaboravljena lozinka, link iz maila, 2FA, postavljanje lozinke */
body[data-path="login"] .page-card,
body[data-path="update-password"] .page-card {
	background-color: #fff;
	border: 1px solid var(--ec-line);
	border-top: 5px solid var(--ec-sage);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(25, 39, 53, 0.12);
	max-width: 400px;
	padding: 32px;
}

body[data-path="login"] .app-logo,
body[data-path="update-password"] .app-logo {
	height: 44px;
	width: auto;
	max-width: 100%;
}

body[data-path="login"] .page-card-head-text,
body[data-path="update-password"] .page-card-head-text,
body[data-path="login"] .page-card-head h4,
body[data-path="update-password"] .page-card-head h4 {
	color: var(--ec-ink);
	font-family: Raleway, "Segoe UI", Arial, sans-serif;
	font-weight: 600;
	font-variant-numeric: lining-nums tabular-nums;
}

/* Polja */
body[data-path="login"] .form-control,
body[data-path="update-password"] .form-control {
	border: 1px solid var(--ec-line-strong);
	border-radius: 0;
	background-color: #fff;
}

body[data-path="login"] .form-control:focus,
body[data-path="update-password"] .form-control:focus {
	border-color: var(--ec-focus);
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ec-focus);
}

/* Glavno dugme (Nastavi, Posalji link, Potvrdi, Prijava) */
body[data-path] .page-card .btn-primary,
body[data-path] .page-card .btn-login:not(.btn-login-option),
body[data-path] .page-card .btn-signup,
body[data-path] .error-page .btn-primary {
	background-color: var(--ec-crimson) !important;
	border-color: var(--ec-crimson) !important;
	color: #fff !important;
	border-radius: 0;
	height: 40px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

body[data-path] .page-card .btn-primary:hover,
body[data-path] .page-card .btn-login:not(.btn-login-option):hover,
body[data-path] .page-card .btn-signup:hover,
body[data-path] .error-page .btn-primary:hover {
	background-color: var(--ec-crimson-hover) !important;
	border-color: var(--ec-crimson-hover) !important;
}

/* Sporedna dugmad (prijava linkom, Office 365) */
body[data-path="login"] .page-card .btn-login-option {
	background-color: #fff !important;
	border: 1px solid var(--ec-line) !important;
	color: var(--ec-ink) !important;
	border-radius: 0;
	height: 40px;
}

body[data-path="login"] .page-card .btn-login-option:hover {
	background-color: var(--ec-surface-alt) !important;
	border-color: var(--ec-sage) !important;
}

body[data-path] .page-card .btn:focus,
body[data-path] .error-page .btn:focus {
	outline: none !important;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ec-focus) !important;
}

/* Linkovi (Zaboravili ste lozinku?, Nazad na prijavu) */
body[data-path="login"] .page-card a:not(.btn),
body[data-path="update-password"] .page-card a:not(.btn),
body[data-path] .error-page a:not(.btn) {
	color: var(--ec-crimson);
}

/* 2FA verifikacija: plava tacka -> EC zalfija */
body[data-path="login"] .indicator.blue::before,
body[data-path="login"] .indicator.blue {
	--indicator-dot-color: var(--ec-sage);
}

/* Poruke i 404: Frappe nema karticu ni logo — dodajemo ih */
body[data-path] .error-page > div {
	background-color: #fff;
	border: 1px solid var(--ec-line);
	border-top: 5px solid var(--ec-sage);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(25, 39, 53, 0.12);
	max-width: 400px;
	margin: 0 auto;
	padding: 32px;
	text-align: center;
}

body[data-path] .error-page > div::before {
	content: "";
	display: block;
	height: 44px;
	margin-bottom: 24px;
	background: url("/assets/invento_ec/brend/ec-logo-navy.png") center / contain no-repeat;
}

body[data-path] .error-page h4,
body[data-path] .error-page .page-card-head {
	color: var(--ec-ink);
	font-family: Raleway, "Segoe UI", Arial, sans-serif;
	font-weight: 600;
	font-variant-numeric: lining-nums tabular-nums;
	border: 0;
	padding: 0;
	text-align: center;
}

/* QR kod za 2FA */
body[data-path="qrcode"] .page_content h1,
body[data-path="qrcode"] .page_content h2,
body[data-path="qrcode"] .page_content h3 {
	color: var(--ec-ink);
}

body[data-path="qrcode"] .page_content img {
	border: 1px solid var(--ec-line);
	border-radius: 8px;
	background: #fff;
	padding: 12px;
}

@media (max-width: 575.98px) {
	body[data-path="login"] .page-card,
	body[data-path="update-password"] .page-card,
	body[data-path] .error-page > div {
		border-radius: 0;
		border-left: 0;
		border-right: 0;
		box-shadow: none;
		max-width: 100%;
	}
}