/* Backlink's own look, on top of whatever theme is installed.
 *
 * One brand for every tenant — this is our product, not each client's. There is
 * deliberately nothing per-site here: change a value in `:root` and every tenant's
 * Desk follows on the next page load.
 *
 * Served from /assets/backlink/css/brand.css and injected with
 * `app_include_css`. Our app is last in `sites/apps.txt`, so this file loads
 * **after** the theme's stylesheets — which is why plain overrides are enough, and
 * why `!important` appears only where a foreign selector is more specific.
 *
 * Tunable in one place: the tokens below. Nothing else in this file is a colour.
 */

:root {
	/* --- our palette --------------------------------------------------------- */
	--bl-brand: #123b4f; /* deep petrol: the bar, primary surfaces, the active item */
	--bl-brand-dark: #0c2a39;
	--bl-brand-light: #1c5570;
	--bl-accent: #e8a33d; /* warm amber: actions, focus, the active edge */
	--bl-accent-soft: #f6e2bf;

	--bl-page: #f6f7f9;
	--bl-surface: #ffffff;
	--bl-surface-2: #eef1f5;
	--bl-border: #e2e6ec;
	--bl-text: #1f2933;
	--bl-muted: #6b7683;

	--bl-success: #2e7d5b;
	--bl-warning: #b7791f;
	--bl-danger: #c0392b;

	/* --- shape and motion ---------------------------------------------------- */
	--bl-radius: 8px;
	--bl-radius-lg: 12px;
	--bl-shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 4%);
	--bl-shadow-lg: 0 8px 24px rgb(16 24 40 / 10%);
	--bl-fast: 120ms;
	--bl-ease: cubic-bezier(0.2, 0, 0.2, 1);

	/* --- layout -------------------------------------------------------------- */
	/* One number for the top bar. Everything that must not slide under it reads
	   this: that overlap is the "header covers the menu" report. */
	--bl-navbar-h: 44px;

	/* --- aliases onto the names core and the theme are likely to read --------
	 * Belt and braces on purpose: if one spelling is not the one in use, another
	 * still carries the value, and passing through our tokens keeps this file the
	 * single source of truth. */
	--primary-color: var(--bl-brand);
	--brand-color: var(--bl-brand);
	--primary: var(--bl-brand);
	--accent-color: var(--bl-accent);
	--bg-color: var(--bl-page);
	--card-bg: var(--bl-surface);
	--fg-color: var(--bl-text);
	--text-color: var(--bl-text);
	--text-muted: var(--bl-muted);
	--border-color: var(--bl-border);
	--control-bg: var(--bl-surface);
	--border-radius: var(--bl-radius);
	--border-radius-lg: var(--bl-radius-lg);
}

/* --- dark mode ---------------------------------------------------------------- */

html[data-theme="dark"],
body.dark-mode,
body[data-theme="dark"],
.dark {
	--bl-page: #0f1418;
	--bl-surface: #161c21;
	--bl-surface-2: #1d242b;
	--bl-border: #262f37;
	--bl-text: #e6eaf0;
	--bl-muted: #98a2ad;
	--bl-brand: #14384a;
	--bl-brand-light: #5aa3c4;
	--bl-accent: #f0b055;
	--bl-success: #3f9e75;
	--bl-warning: #d69b3f;
	--bl-danger: #e06c5e;
}

/* --- the shell: nothing overlaps anything ------------------------------------ */

body {
	background: var(--bl-page);
	color: var(--bl-text);
}

body .navbar {
	height: var(--bl-navbar-h);
	min-height: var(--bl-navbar-h);
	background: var(--bl-brand) !important;
	border-bottom: 1px solid var(--bl-brand-dark);
	z-index: 1040; /* above the rail, which starts below it */
}

body .navbar .navbar-brand,
body .navbar a,
body .navbar .nav-link {
	color: rgb(255 255 255 / 92%);
}

/* The rail and the sidebar start *below* the bar and scroll in their own box:
   that is what stops the bar eating the first menu entries. */
body .layout-side-section,
body .body-sidebar,
body .desk-sidebar {
	max-height: calc(100vh - var(--bl-navbar-h));
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--bl-border) transparent;
}

.page-head,
.sticky-top {
	/* Anything sticky keeps its distance from the fixed bar. */
	scroll-margin-top: calc(var(--bl-navbar-h) + 8px);
}

/* --- the theme's own tokens, overridden --------------------------------------
 *
 * Solvronix (MIT) hangs its whole chrome off its own `--st-*` variables, and it
 * ships a **server-rendered** `<style id="st-dynamic-theme">` that *pins* a few
 * dozen of them to concrete values (`--st-primary: #1B3F7E`, `--st-rail-bg:
 * #F57C00`, …). Those pins are what a version bump has to be re-checked against.
 *
 * Two facts make this file the right place, and both were measured in a real
 * browser rather than reasoned about:
 *
 *  1. The theme declares **no variable with `!important`** (0 of 106 `!important`
 *     in its sheet are on a custom property). An important author declaration
 *     beats a normal one **whatever the order**, so this sheet wins even though
 *     `app_include_css` loads it *before* the theme's eleven stylesheets. That is
 *     why `--st-brand`/`--st-accent` were already ours while `--st-primary` was not.
 *  2. The pins are concrete values, not `var()` chains, so leaving one unset is
 *     leaving it the theme's. We therefore name every token its chrome reads,
 *     not just the two we think of as "the brand".
 *
 * Derived shades are the exception we *want*: `--st-primary-600`, `--st-accent-50`,
 * `--st-shadow-glow` and friends are, in the theme's own sheet, `color-mix(…,
 * var(--st-primary) …)`. Forcing the base token recomputes all of them, so they are
 * deliberately absent below — one value, not sixty.
 *
 * Everything resolves through `--bl-*`, so the dark block above recolours this one
 * too and there is no second palette. Only where the theme's *intent* differs by
 * mode (a white sidebar in light, a brand-coloured one in dark) is there a second
 * block, further down.
 */
:root {
	/* --- identity ------------------------------------------------------------- */
	--st-brand: var(--bl-brand) !important;
	/* The theme keeps `--st-primary` as a back-compat alias of `--st-brand`, but
	   the server-rendered style pins it, breaking the alias. Re-aliasing it here is
	   the single highest-leverage line in this file: the navy the Desk showed was
	   this token, and `--st-primary-50 … -900` all derive from it. */
	--st-primary: var(--bl-brand) !important;
	--st-accent: var(--bl-accent) !important;
	--st-accent-btn: var(--bl-accent) !important;
	--st-dark: var(--bl-brand) !important;

	/* --- surfaces ------------------------------------------------------------- */
	--st-page-bg: var(--bl-page) !important;
	--st-bg: var(--bl-page) !important;
	--st-card-bg: var(--bl-surface) !important;
	--st-card-border: var(--bl-border) !important;
	--st-border: var(--bl-border) !important;
	--st-text: var(--bl-text) !important;
	--st-text-primary: var(--bl-text) !important;
	--st-text-muted: var(--bl-muted) !important;
	--st-link: var(--bl-brand-light) !important;
	--st-hover: color-mix(in srgb, var(--bl-brand) 5%, transparent) !important;
	--st-glass-bg: color-mix(in srgb, var(--bl-surface) 84%, transparent) !important;

	/* --- the top bar ---------------------------------------------------------- */
	/* The theme's own formula is "a deeper shade of the brand"; `--bl-brand-dark`
	   *is* that shade, and `branding.py` puts the same value in the theme's config,
	   so the stylesheet and the profile agree instead of both inventing one. */
	--st-navbar-bg: var(--bl-brand-dark) !important;
	--st-toolbar-bg: var(--bl-brand-dark) !important;
	--st-toolbar-text: #ffffff !important;

	/* --- the sidebar --------------------------------------------------------- */
	--st-sidebar-bg: var(--bl-surface) !important;
	--st-sidebar-text: var(--bl-text) !important;
	--st-sidebar-text-muted: var(--bl-muted) !important;
	--st-sidebar-icon: var(--bl-muted) !important;
	--st-sidebar-hover: var(--bl-surface-2) !important;
	--st-sidebar-hover-text: var(--bl-text) !important;
	--st-sidebar-active: var(--bl-brand) !important;
	--st-sidebar-active-text: #ffffff !important;
	--st-sidebar-border: var(--bl-border) !important;

	/* --- the icon rail ------------------------------------------------------- */
	/* Pinned to the theme's orange out of the box, which is the loudest thing on
	   the screen. A soft brand tint for the chip, brand glyphs, and the accent as
	   the active ring — the same "here" language the sidebar uses. */
	--st-rail-bg: color-mix(in srgb, var(--bl-brand) 12%, var(--bl-surface)) !important;
	--st-rail-icon-color: var(--bl-brand) !important;
	--st-rail-active: var(--bl-accent) !important;

	/* --- buttons ------------------------------------------------------------- */
	--st-btn-primary: var(--bl-brand) !important;
	--st-btn-primary-text: #ffffff !important;
	--st-btn-secondary: var(--bl-surface) !important;
	--st-btn-secondary-text: var(--bl-text) !important;
	--st-primary-hover: var(--bl-brand-light) !important;
	--st-btn-bg: var(--bl-brand) !important;
	--st-btn-hover: var(--bl-brand-light) !important;
	--st-button-text: #ffffff !important;

	/* --- controls ------------------------------------------------------------ */
	--st-input-bg: var(--bl-surface) !important;
	--st-input-border: var(--bl-border) !important;
	--st-focus: var(--bl-accent) !important;
	--st-checkbox: var(--bl-accent) !important;
	--st-dropdown-bg: var(--bl-surface) !important;
	--st-readonly-bg: var(--bl-surface-2) !important;

	/* --- lists, tables, cards ------------------------------------------------ */
	--st-row-alt: var(--bl-surface-2) !important;
	--st-row-hover: var(--bl-surface-2) !important;
	--st-row-selected: color-mix(in srgb, var(--bl-accent) 18%, transparent) !important;
	--st-table-header: var(--bl-surface-2) !important;
	--st-report-grid: var(--bl-border) !important;
	--st-list-row-bg: var(--bl-surface) !important;
	--st-list-row-hover: var(--bl-surface-2) !important;
	--st-workspace-card: var(--bl-surface) !important;
	--st-number-card: var(--bl-surface) !important;
	--st-chart-bg: var(--bl-surface) !important;
	--st-chart-1: var(--bl-brand) !important;
	--st-chart-2: var(--bl-accent) !important;
	--st-chart-3: var(--bl-success) !important;
	--st-chart-4: var(--bl-brand-light) !important;
	--st-chart-5: #6b4aa0 !important;

	/* --- feedback ------------------------------------------------------------ */
	--st-success: var(--bl-success) !important;
	--st-warning: var(--bl-warning) !important;
	--st-error: var(--bl-danger) !important;

	/* --- login --------------------------------------------------------------- */
	--st-login-bg: var(--bl-brand-dark) !important;
	--st-login-card: var(--bl-surface) !important;
	--st-login-gradient: linear-gradient(135deg, var(--bl-brand-dark), var(--bl-brand)) !important;

	/* --- Frappe's own variables, which the theme also sets ------------------- */
	--bg-color: var(--bl-page) !important;
	--fg-color: var(--bl-surface) !important;
	--card-bg: var(--bl-surface) !important;
	--control-bg: var(--bl-surface) !important;
	--input-bg: var(--bl-surface) !important;
	--border-color: var(--bl-border) !important;
	--text-color: var(--bl-text) !important;
	--text-muted: var(--bl-muted) !important;
	--btn-default-bg: var(--bl-surface) !important;
	--btn-default-hover-bg: var(--bl-surface-2) !important;
	--sidebar-active-color: var(--bl-brand) !important;
	--sidebar-select-color: var(--bl-brand) !important;
	--sidebar-hover-color: var(--bl-surface-2) !important;
	--sidebar-border-color: var(--bl-border) !important;
}

/* --- the tokens whose light/dark intent differs -------------------------------
 *
 * Everything above resolves through `--bl-*`, which the block at the top of this
 * file already switches per mode, so most of the palette needs no dark rule at
 * all. These are the few the theme treats as *structurally* different: it wants a
 * white sidebar in light and a brand-coloured one in dark, and an accent-filled
 * primary button where light can afford a solid brand fill.
 *
 * Same four selectors as the dark `--bl-*` block, so `html[data-theme="dark"]`
 * (what the theme actually sets) and the legacy class-based switches agree.
 */
html[data-theme="dark"],
body.dark-mode,
body[data-theme="dark"],
.dark {
	--st-navbar-bg: color-mix(in srgb, var(--bl-brand) 70%, black) !important;
	--st-toolbar-bg: color-mix(in srgb, var(--bl-brand) 70%, black) !important;

	--st-sidebar-bg: var(--bl-brand) !important;
	--st-sidebar-text: #ffffff !important;
	--st-sidebar-text-muted: rgb(255 255 255 / 55%) !important;
	--st-sidebar-icon: rgb(255 255 255 / 75%) !important;
	--st-sidebar-hover: rgb(255 255 255 / 10%) !important;
	--st-sidebar-hover-text: #ffffff !important;
	--st-sidebar-active: var(--bl-accent) !important;
	--st-sidebar-active-text: #10161a !important;
	--st-sidebar-border: rgb(255 255 255 / 12%) !important;

	--st-rail-bg: color-mix(in srgb, var(--bl-brand) 45%, #10161a) !important;
	--st-rail-icon-color: #ffffff !important;
	--st-rail-active: var(--bl-accent) !important;

	--st-btn-primary: var(--bl-accent) !important;
	--st-btn-primary-text: #10161a !important;
	--st-primary-hover: color-mix(in srgb, var(--bl-accent) 85%, black) !important;

	--st-row-selected: color-mix(in srgb, var(--bl-accent) 22%, transparent) !important;
	--st-login-bg: color-mix(in srgb, var(--bl-brand) 60%, black) !important;
	/* The primary button is accent-filled here, so its hover has to darken the
	   accent rather than follow the light-mode brand fill. */
	--st-btn-hover: color-mix(in srgb, var(--bl-accent) 85%, black) !important;
}

/* --- their chrome, by its own names ------------------------------------------ */

/* The active item, whichever class it wears: Frappe's or theirs. */
body .st-active,
body .st-rail-active,
body .sidebar-item.selected,
body .sidebar-item.active {
	background: var(--bl-brand) !important;
	color: #fff !important;
	box-shadow: inset 3px 0 0 var(--bl-accent);
}

/* The icon rail answers the pointer like the menus do. */
body .st-icon-rail .st-rail-app:hover,
body .st-rail-items .st-rail-app:hover {
	background: var(--bl-surface-2) !important;
}

body .st-icon-rail,
body .st-sidebar-layout-rail .st-icon-rail {
	background: var(--bl-brand) !important;
	border-right: 1px solid var(--bl-brand-dark) !important;
}

/* --- menus that answer the pointer -------------------------------------------
 *
 * `body` on the front of these is not decoration: measured with
 * `frappe.get_hooks("app_include_css")`, the theme's stylesheets load **after**
 * ours, so on equal specificity theirs would win. One extra element in each
 * selector makes order irrelevant — and where even that is not enough (the bar,
 * the active item, the primary button) there is an `!important`.
 */

body .sidebar-item,
body .desk-sidebar .sidebar-item,
body .dropdown-item,
body .list-row {
	border-radius: var(--bl-radius);
	transition: background-color var(--bl-fast) var(--bl-ease),
		color var(--bl-fast) var(--bl-ease);
}

body .sidebar-item:hover,
body .desk-sidebar .sidebar-item:hover,
body .dropdown-item:hover {
	background: var(--bl-surface-2);
}

/* The item you are on, unmistakably: an accent edge, not just a tint. */
body .sidebar-item.selected,
body .sidebar-item.active,
body .desk-sidebar .sidebar-item.selected,
body .desk-sidebar .sidebar-item.active {
	background: var(--bl-brand) !important;
	color: #fff !important;
	box-shadow: inset 3px 0 0 var(--bl-accent);
}

body .dropdown-menu {
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-radius-lg);
	box-shadow: var(--bl-shadow-lg);
	padding: 4px;
}

/* --- controls and cards ------------------------------------------------------- */

body .btn {
	border-radius: var(--bl-radius);
	transition: transform var(--bl-fast) var(--bl-ease), filter var(--bl-fast) var(--bl-ease);
}

body .btn-primary,
body .btn.btn-primary {
	background: var(--bl-brand) !important;
	border-color: var(--bl-brand) !important;
}

body .btn-primary:hover {
	filter: brightness(1.08);
}

body .btn:active {
	transform: translateY(1px);
}

body .form-control,
body .input-with-feedback,
body .frappe-control .control-input {
	border-radius: var(--bl-radius);
}

body .card,
body .widget,
body .frappe-card,
body .form-page .frappe-control {
	border-radius: var(--bl-radius-lg);
	box-shadow: var(--bl-shadow);
}

body .list-row:hover {
	background: var(--bl-surface-2);
}

/* --- focus you can actually see ---------------------------------------------- */

:focus-visible {
	outline: 2px solid var(--bl-accent);
	outline-offset: 2px;
}

/* --- the bar controls added by public/js/brand.js ----------------------------- */

.bl-nav-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	margin-right: 8px;
}

.bl-nav-actions .btn {
	background: rgb(255 255 255 / 10%);
	border: 1px solid rgb(255 255 255 / 18%);
	color: #fff;
	padding: 2px 10px;
	line-height: 1.5;
}

.bl-nav-actions .btn:hover {
	background: rgb(255 255 255 / 22%);
}

.bl-apps-menu {
	max-height: 60vh;
	overflow-y: auto;
	min-width: 220px;
}

/* --- respect the operating system -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	* {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
	}
}