/* Abreco Freight — brand tokens.
 *
 * Loaded after every other app's CSS (see app_include_css in hooks.py), so
 * these values are the final word without patching frappe or hrms.
 *
 * Colours are SAMPLED FROM THE REAL LOGO, not guessed — pixel-counted from
 * images/abreco-logo-original.png as published on abrecofreight.com:
 *
 *   #AB0054  2221 px  the "abreco" wordmark        <- dominant, primary
 *   #004C83   280 px  the "freight" wordmark + arrow
 *   #C81E48    ~40 px the arrow's red face         <- accent only
 */

:root {
	/* Brand */
	--abreco-red: #ab0054; /* "abreco" wordmark */
	--abreco-red-dark: #85003f;
	--abreco-red-light: #fdf0f6;
	--abreco-blue: #004c83; /* "freight" wordmark */
	--abreco-blue-dark: #003558;
	--abreco-blue-light: #eef4f9;
	--abreco-crimson: #c81e48; /* arrow face — accent, never a ground */

	/* Neutrals, biased very slightly toward the blue so they read as chosen
	 * rather than inherited. */
	--abreco-ink: #16191d;
	--abreco-steel: #5b6672;
	--abreco-surface: #f6f8fa;

	/* Semantic — deliberately distinct from the brand hues, so a status never
	 * reads as decoration. Note the danger red is NOT the brand red. */
	--abreco-ok: #2e7d4f;
	--abreco-warn: #b4761a;
	--abreco-danger: #b3402f;
}

/* Map the brand onto the variables Frappe Desk actually paints with.
 *
 * Red is primary because it is the dominant colour in the logo by an order of
 * magnitude. Blue carries secondary/among links. */
:root {
	--primary: var(--abreco-red);
	--primary-color: var(--abreco-red);
	--text-on-primary: #ffffff;

	--btn-primary-bg: var(--abreco-red);
	--btn-primary-color: #ffffff;

	--sidebar-select-color: var(--abreco-red-light);
	--brand-color: var(--abreco-red);
}

@media (prefers-color-scheme: dark) {
	:root {
		/* #AB0054 on a dark ground is muddy and fails contrast. Lift toward the
		 * crimson end of the brand rather than inventing an unrelated hue. */
		--primary: #e0417f;
		--primary-color: #e0417f;
		--brand-color: #e0417f;
	}
}

:root[data-theme="dark"] {
	--primary: #e0417f;
	--primary-color: #e0417f;
	--brand-color: #e0417f;
}

:root[data-theme="light"] {
	--primary: var(--abreco-red);
	--primary-color: var(--abreco-red);
	--brand-color: var(--abreco-red);
}

/* ---------------------------------------------------------------------------
 * Scrollbars
 *
 * The browser default paints an opaque light-grey track, which reads as a white
 * stripe against any dark surface. Track goes transparent everywhere; only the
 * thumb is drawn.
 *
 * The thumb is a neutral alpha rather than a solid colour, so the same rule
 * works on a light Desk list and a dark panel without a second definition —
 * it darkens what is behind it instead of replacing it.
 * ------------------------------------------------------------------------- */

/* Firefox */
* {
	scrollbar-width: thin;
	scrollbar-color: rgba(120, 130, 145, 0.5) transparent;
}

/* WebKit / Blink */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background-color: rgba(120, 130, 145, 0.45);
	border-radius: 8px;
	/* Transparent border + background-clip insets the thumb without needing a
	 * track colour to pad against. */
	border: 2px solid transparent;
	background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
	background-color: rgba(120, 130, 145, 0.7);
}
/* The arrow buttons cannot be made transparent — they render as opaque native
 * widgets. Remove them instead. */
::-webkit-scrollbar-button {
	display: none;
	width: 0;
	height: 0;
}

@media (prefers-color-scheme: dark) {
	* {
		scrollbar-color: rgba(160, 172, 188, 0.4) transparent;
	}
	::-webkit-scrollbar-thumb {
		background-color: rgba(160, 172, 188, 0.35);
	}
	::-webkit-scrollbar-thumb:hover {
		background-color: rgba(160, 172, 188, 0.6);
	}
}

/* ---------------------------------------------------------------------------
 * Splash / loading
 *
 * frappe's splash is templates/includes/splash_screen.html:
 *
 *   <div class="centered splash">
 *     <img src="{{ splash_image or ...frappe-framework-logo.svg }}">
 *   </div>
 *
 * splash_image is already ours (install.py writes Website Settings), so the
 * Abreco logo is what loads. It just sat there motionless.
 *
 * The shimmer is done with a moving mask rather than an overlay, because the
 * markup gives us one <img> and no wrapper to put a highlight in — and we are
 * not overriding a core template for a loading animation. The mask sweeps a
 * band of reduced opacity across the artwork, so the logo's own magenta and
 * navy stay intact; nothing is tinted.
 * ------------------------------------------------------------------------- */
.splash img {
	-webkit-mask-image: linear-gradient(
		100deg,
		#000 20%,
		rgba(0, 0, 0, 0.35) 45%,
		rgba(0, 0, 0, 0.35) 55%,
		#000 80%
	);
	mask-image: linear-gradient(
		100deg,
		#000 20%,
		rgba(0, 0, 0, 0.35) 45%,
		rgba(0, 0, 0, 0.35) 55%,
		#000 80%
	);
	-webkit-mask-size: 250% 100%;
	mask-size: 250% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	animation: abreco-shimmer 1.5s ease-in-out infinite;
}

@keyframes abreco-shimmer {
	from {
		-webkit-mask-position: 160% 0;
		mask-position: 160% 0;
	}
	to {
		-webkit-mask-position: -60% 0;
		mask-position: -60% 0;
	}
}

/* A stalled splash with a frozen logo looks broken rather than busy, so if the
 * user has asked for no motion, hold it at full opacity instead. */
@media (prefers-reduced-motion: reduce) {
	.splash img {
		-webkit-mask-image: none;
		mask-image: none;
		animation: none;
	}
}

/* The navbar logo is set via Navbar Settings (see install.py). This only
 * constrains it so the wide lockup cannot stretch the navbar. */
.navbar-brand img,
.app-logo {
	max-height: 24px;
	width: auto;
}

/* The splash/login logo needs room to breathe — it is the full wordmark
 * lockup, not the mark alone. */
.page-card .app-logo,
.for-login .app-logo {
	max-height: 56px;
}