@import url("https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400;600&display=swap");
@import url("/assets/nutek_core/css/arabic-font.css");

html:root {
	--font-stack: "Noto Naskh Arabic", "InterVariable", "Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI",
		"Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
/* NuTEK ERP colours: Gulf Navy #0C2340 for primary actions, Coral #E8604C as the accent.
   Light theme only; the dark theme keeps Frappe's own colours so contrast stays right.
   `html:not([data-theme="dark"])` outranks Frappe's own `:root` tokens whatever the load order. */
html:not([data-theme="dark"]) {
	--btn-primary: #0c2340;
	--primary: #0c2340;
	--primary-color: #0c2340;
	--brand-color: #0c2340;
	--nutek-coral: #e8604c;
}

/* Frappe's "espresso" buttons (login page, onboarding, dialogs): the default gray theme only. */
html:not([data-theme="dark"]) .es-button:not([data-theme]) {
	--bt-solid-bg: #0c2340;
	--bt-solid-bg-hover: #16355c;
	--bt-solid-bg-active: #081a30;
}

.splash img {
	width: 72px;
	height: 72px;
}

/* Quick-cash buttons on the till's payment screen and the cash count total. */
.nutek-quick-cash { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.nutek-quick-cash .btn { min-width: 44px; font-weight: 600; }
.nutek-cash-total { font-size: 18px; text-align: right; padding: 8px 0; }

/* Login page in the NuTEK look: a navy band, the card on Mist, Readex Pro, soft 20px corners. */
body[data-path="login"] {
	background: #eef0f3;
	font-family: "Noto Naskh Arabic", "Readex Pro", system-ui, sans-serif;
	min-height: 100vh;
}
body[data-path="login"]::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 42vh;
	background: #0c2340;
	z-index: 0;
}
body[data-path="login"] .page-content-wrapper,
body[data-path="login"] main.container {
	position: relative;
	z-index: 1;
	background: transparent;
}
body[data-path="login"] .login-content.page-card {
	background: #ffffff;
	border: 0;
	border-radius: 20px;
	box-shadow: 0 12px 40px rgba(12, 35, 64, 0.12);
	padding: 40px 32px;
	box-sizing: border-box;
	width: calc(100% - 32px);
	max-width: 420px;
	height: auto;
	min-height: 0;
	margin: 12vh auto 40px;
}
body[data-path="login"] .page-card-head .app-logo {
	width: 56px;
	height: 56px;
	border-radius: 14px;
}
body[data-path="login"] .page-card-head h4 {
	color: #0c2340;
	font-weight: 600;
}
body[data-path="login"] #page-login .form-control {
	height: 46px;
	border-radius: 8px;
	font-size: 15px;
}
body[data-path="login"] .btn-login,
body[data-path="login"] .es-button {
	min-height: 48px;
	border-radius: 14px;
	font-size: 15px;
}
@media (max-width: 480px) {
	body[data-path="login"] .login-content.page-card {
		margin: 8vh auto 24px;
		padding: 32px 20px;
	}
}