/* Site-wide corrections for Frappe's website chrome.
 *
 * Loaded on every Frappe web page through the `web_include_css` hook, which
 * head.html emits *after* website.bundle.css -- so an equal-specificity rule here
 * wins -- and *before* a page's own {% block head_include %}, so a page can still
 * override it.
 *
 * Not loaded on Builder pages: those render through Builder's own template and do
 * not carry Frappe's navbar at all, so nothing here applies to them.
 */

/* The collapsed navbar's menu button rendered as an empty box on every website page.
 *
 * website.bundle.css contains:
 *     .navbar-light .navbar-toggler .icon,
 *     .navbar-light .navbar-toggler .es-icon { stroke: none }
 * and the toggler's glyph is a <use> of frappe's lucide sprite -- outlines drawn with
 * a stroke and no enclosed area. With `stroke: none` and `fill` computing to
 * transparent there is nothing left to paint. (The .navbar-primary variant is fine:
 * `.navbar-primary svg use { stroke: white }` puts the stroke back.)
 *
 * Below 992px that button is the only route to the avatar menu, and so the only route
 * back to the desk for a signed-in user on a phone.
 *
 * Same specificity as the rule it corrects (0,3,0), winning on order alone, so it
 * stops applying by itself if frappe ever fixes this upstream and drops that rule.
 */
.navbar-light .navbar-toggler .icon,
.navbar-light .navbar-toggler .es-icon {
	stroke: var(--icon-stroke, currentColor);
}

/* Dark-theme wordmark.
 *
 * uxm_app_logo_v2.svg is pure black (fill="#000000") on transparent, which is nearly
 * invisible on Frappe's dark theme. It is loaded through <img>, where the SVG is a
 * separate document: page CSS cannot reach its paths, and `fill="currentColor"` has
 * nothing to inherit (that is why the fill is hardcoded). So the SVG cannot be
 * recoloured from here -- do not try `fill`. Instead the <img> element itself is
 * filtered: invert(1) turns pure black into pure white.
 *
 * A @media (prefers-color-scheme: dark) block inside the SVG is not enough either: it
 * follows the OS, not Frappe's theme switcher, so it would stay black when a user
 * picks dark on a light OS. Frappe sets data-theme="light|dark" on <html> (its
 * "automatic" mode resolves to one of the two), so that is the primary selector. The
 * media query is only a fallback for pages that never set data-theme; the :not()
 * guard keeps an explicit light theme from being inverted. Both set the same single
 * filter, so they can never double-invert.
 *
 * Scoped to the selectors that only ever carry the SVG. Do NOT widen this to the
 * uxm_app_logo_v2.png surfaces (favicon, apps-screen tile): that PNG has an opaque
 * near-white background and would invert to a black box.
 */
[data-theme="dark"] #brand-logo,
[data-theme="dark"] .app-logo,
[data-theme="dark"] .splash img {
	filter: invert(1);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) #brand-logo,
	:root:not([data-theme="light"]) .app-logo,
	:root:not([data-theme="light"]) .splash img {
		filter: invert(1);
	}
}