/* ===========================================================================
 * TruAdaptiv brand restyle — Desk UI + Login page
 * ===========================================================================
 *
 * ONE FILE, PLAIN CSS, BY DESIGN.
 *
 *   Plain CSS, not SCSS: infra/Dockerfile.app copies public/ verbatim into
 *   assets/truadaptiv_erp/ and never runs `bench build`. There is no compile step.
 *
 *   One file: a full restyle rides on upstream desk variables that shift between
 *   frappe versions. Keeping every override here, with the upstream variable name
 *   and its stock value in a comment, makes a framework upgrade a re-check rather
 *   than an excavation. (docs/BRANDING.md §2)
 *
 * HOW THIS IS LOADED (verified against frappe 16.29.0, not assumed)
 *
 *   hooks.py: app_include_css -> desk    (frappe/www/desk.html line 24)
 *             web_include_css -> website (frappe/templates/includes/head.html)
 *
 *   Both run the path through frappe.utils.jinja_globals.bundled_asset():
 *
 *       if ".bundle." in path and not path.startswith("/assets"):
 *           ...look up assets.json...
 *       return abs_url(path)
 *
 *   An unbundled "/assets/..." path therefore bypasses assets.json entirely and is
 *   emitted verbatim. This is what makes a no-build-step plain CSS file work, and it
 *   is the open question docs/BRANDING.md §5.2 flagged. Proven live:
 *       include_style("/assets/truadaptiv_erp/css/brand.css")
 *         -> <link ... href="/assets/truadaptiv_erp/css/brand.css">
 *   Do NOT rename this file to *.bundle.css — that would send it down the
 *   assets.json path, which has no entry for it, and it would 404.
 *
 *   truadaptiv_erp is last in sites/apps.txt, so this sheet is the last <link> in
 *   the desk <head> and wins on equal specificity without !important.
 *
 * PALETTE (measured from docs/logo.png, alpha-composited on white)
 *
 *   #14315D  primary navy   "Tru"       — 13.0:1 on white
 *   #525A5D  secondary slate "Adaptiv"
 *   #8C8C8C  muted grey     tagline
 *   #DC3130  ACCENT RED     the tittle of the "i" in "Adaptiv" (62px, the only
 *            saturated colour in the mark). docs/BRANDING.md §3 omits it.
 *
 *   The accent red is deliberately NOT used anywhere in UI chrome. It is within
 *   three points of frappe's own --red-500 (#e03636 = danger), so using it for
 *   links or actions would make branding indistinguishable from error state. It
 *   lives in the logo assets only.
 *
 * DARK MODE
 *
 *   #14315D on frappe's dark canvas (--gray-900 #171717) is 1.39:1 — effectively
 *   invisible. Dark mode therefore uses a lightened tint of the same hue (#7FA3CE,
 *   7.0:1 on #171717) rather than the brand navy. Upstream dark tokens live in
 *   frappe/public/scss/desk/dark.scss under [data-theme="dark"].
 *
 *   The LOGIN page has no dark mode: the website layer emits <html lang dir> with
 *   no data-theme attribute (verified on the live page), unlike the desk which
 *   emits <html data-theme="light|dark">. Login is styled light-only.
 *
 * SCOPE
 *
 *   docs/BRANDING.md §2 puts Desk + Login in scope and the customer-facing portal
 *   explicitly OUT. web_include_css reaches every website page, so every website
 *   rule below is scoped to body[data-path="login"] (value verified on the live
 *   page) and its sibling auth pages. Portal pages are untouched.
 * ======================================================================== */


/* ---------------------------------------------------------------------------
 * 1. Brand ramp
 * A tonal scale built from #14315D so light/dark can share one hue vocabulary.
 * Prefixed --ta- so it can never collide with an upstream frappe token.
 * ------------------------------------------------------------------------ */
:root {
	--ta-navy-50:  #eef3f9;
	--ta-navy-100: #d9e3f0;
	--ta-navy-200: #b0c6e1;
	--ta-navy-300: #7fa3ce;
	--ta-navy-400: #4e7cb8;
	--ta-navy-500: #245296;
	--ta-navy-600: #1c4179;
	--ta-navy-700: #14315d;  /* brand primary */
	--ta-navy-800: #0f2749;
	--ta-navy-900: #0b1d38;

	--ta-slate:  #525a5d;    /* "Adaptiv" */
	--ta-muted:  #8c8c8c;    /* tagline */
	--ta-accent: #dc3130;    /* logo only — see header note */
}


/* ---------------------------------------------------------------------------
 * 2. Desk — light theme
 *
 * Upstream defaults being replaced (frappe/public/scss/common/css_variables.scss
 * and espresso/_colors.scss). Frappe's stock "primary" is near-black #171717,
 * so a navy primary is a hue change, not a lightness change — contrast behaviour
 * stays close to stock.
 * ------------------------------------------------------------------------ */
:root,
[data-theme="light"] {
	/* --primary is emitted at :root by bootstrap from $primary ($gray-900 #171717).
	 * It is the root of the chain: --brand-color, --progress-bar-bg and
	 * --checkbox-gradient are all defined as var(--primary) upstream, so they
	 * follow automatically and must NOT be restated. */
	--primary: var(--ta-navy-700);

	--primary-color:  var(--ta-navy-700);  /* stock: var(--gray-900) */
	--brand-color:    var(--ta-navy-700);  /* stock: var(--primary)  */
	--btn-primary:    var(--ta-navy-700);  /* stock: var(--gray-900) */
	--border-primary: var(--ta-navy-700);  /* stock: var(--gray-900) */

	/* Selection / active affordances — stock is neutral grey */
	--sidebar-select-color: var(--ta-navy-50);   /* stock: var(--gray-100) */
	--date-active-bg:       var(--ta-navy-700);  /* stock: var(--gray-900) */
	--date-active-text:     #ffffff;             /* stock: var(--gray-100) */
	--date-range-bg:        var(--ta-navy-50);   /* stock: var(--subtle-fg) */
	--timeline-badge-color: var(--ta-navy-700);  /* stock: var(--gray-900) */

	/* Focus ring — stock is a neutral grey halo (espresso/_shadows.scss) */
	--focus-default: 0px 0px 0px 2px var(--ta-navy-200);
	--checkbox-focus-shadow: 0 0 0 2px var(--ta-navy-200);

	/* Navbar: stock --navbar-bg is var(--neutral) i.e. white. Overriding the
	 * token rather than --neutral, which is used well beyond the navbar. */
	--navbar-bg: var(--ta-navy-700);
}


/* ---------------------------------------------------------------------------
 * 3. Desk — dark theme
 * Mirrors [data-theme="dark"] in frappe/public/scss/desk/dark.scss.
 * ------------------------------------------------------------------------ */
[data-theme="dark"] {
	/* Brand navy is unusable on the dark canvas (1.39:1) — use the 300 tint. */
	--primary: var(--ta-navy-300);

	--primary-color:  var(--ta-navy-300);
	--brand-color:    var(--ta-navy-300);
	--btn-primary:    var(--ta-navy-300);  /* stock dark: var(--gray-300) */
	--border-primary: var(--ta-navy-200);  /* stock dark: var(--gray-200) */

	--sidebar-select-color: #1c3355;       /* stock dark: var(--gray-800) */
	--date-active-bg:       var(--ta-navy-500);
	--date-active-text:     #ffffff;
	--timeline-badge-color: var(--ta-navy-300);

	--focus-default: 0px 0px 0px 2px var(--ta-navy-500);
	--checkbox-focus-shadow: 0 0 0 2px var(--ta-navy-500);

	/* Deep navy still reads as a dark chrome, so dark mode keeps its character. */
	--navbar-bg: var(--ta-navy-900);
}


/* ---------------------------------------------------------------------------
 * 4. Navbar chrome
 *
 * The navbar goes from white to navy in BOTH themes, so its contents need light
 * ink in both. Frappe's navbar inherits --text-color / --icon-stroke from the
 * document, which stay dark — hence a scoped override rather than a global one.
 * Scoping to .navbar keeps the blast radius to the header.
 * ------------------------------------------------------------------------ */
.navbar {
	--icon-stroke: rgba(255, 255, 255, 0.88);
	--text-color: #ffffff;
	--text-muted: rgba(255, 255, 255, 0.66);
	--heading-color: #ffffff;
	border-bottom: 1px solid var(--ta-navy-900);
	color: #ffffff;
}

.navbar a,
.navbar .nav-link,
.navbar .navbar-brand,
.navbar .dropdown-toggle {
	color: #ffffff;
}

.navbar a:hover,
.navbar .nav-link:hover {
	color: #ffffff;
	opacity: 0.85;
}

/* Awesomebar (global search) sits inside the navbar and is styled for a light
 * chrome upstream; invert it onto the navy. */
.navbar .search-bar .awesomplete input,
.navbar #navbar-search,
.navbar .form-control {
	background-color: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.22);
	color: #ffffff;
}

.navbar .search-bar .awesomplete input::placeholder,
.navbar .form-control::placeholder {
	color: rgba(255, 255, 255, 0.62);
}

.navbar .search-bar .awesomplete input:focus,
.navbar .form-control:focus {
	background-color: rgba(255, 255, 255, 0.20);
	border-color: rgba(255, 255, 255, 0.42);
	box-shadow: none;
	color: #ffffff;
}

/* Dropdown panels hanging off the navbar are ordinary surfaces — reset the
 * inverted ink so they do not inherit white-on-white. */
.navbar .dropdown-menu {
	--text-color: var(--heading-color);
	--icon-stroke: var(--gray-700);
	color: var(--text-color);
}

.navbar .dropdown-menu a,
.navbar .dropdown-menu .dropdown-item {
	color: var(--text-color);
}

/* The navbar logo is a wordmark PNG (see hooks.py app_logo_url). Give it room and
 * keep it crisp — the source is 250px wide with no vector original. */
.navbar .app-logo,
.navbar .navbar-brand img {
	height: 22px;
	width: auto;
	max-width: 168px;
	object-fit: contain;
}


/* ---------------------------------------------------------------------------
 * 5. Buttons
 * --btn-primary drives background; the label colour is not tokenised upstream,
 * so it is set here. White on #14315D is 13.0:1; dark ink on the #7fa3ce dark
 * tint is 6.6:1. Both clear AA.
 * ------------------------------------------------------------------------ */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
	background-color: var(--btn-primary);
	border-color: var(--btn-primary);
	color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--ta-navy-800);
	border-color: var(--ta-navy-800);
	color: #ffffff;
}

.btn-primary:focus,
.btn-primary.focus {
	box-shadow: var(--focus-default);
}

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-primary:not(:disabled):not(.disabled) {
	color: var(--ta-navy-900);
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-primary:focus,
[data-theme="dark"] .btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--ta-navy-200);
	border-color: var(--ta-navy-200);
	color: var(--ta-navy-900);
}


/* ---------------------------------------------------------------------------
 * 6. Links and text accents
 * Upstream sets $link-color: var(--text-color) — links are ink-coloured, not
 * branded. A full restyle brands them, but only in content areas: the navbar and
 * sidebar opt out above/below so their own ink rules win.
 * ------------------------------------------------------------------------ */
a,
.text-primary,
a.text-muted:hover {
	color: var(--ta-navy-600);
}

a:hover,
a:focus {
	color: var(--ta-navy-800);
}

[data-theme="dark"] a,
[data-theme="dark"] .text-primary {
	color: var(--ta-navy-300);
}

[data-theme="dark"] a:hover,
[data-theme="dark"] a:focus {
	color: var(--ta-navy-200);
}

/* Links inside chrome keep chrome ink. */
.navbar a,
.sidebar a,
.list-sidebar a,
.dropdown-menu a {
	color: inherit;
}

::selection {
	background: var(--ta-navy-200);
	color: var(--ta-navy-900);
}

[data-theme="dark"] ::selection {
	background: var(--ta-navy-600);
	color: #ffffff;
}


/* ---------------------------------------------------------------------------
 * 7. Sidebar / workspace active state
 * --sidebar-select-color (set in §2/§3) covers the selected row background;
 * the active label weight/colour is not tokenised.
 * ------------------------------------------------------------------------ */
.sidebar-item-container.selected > .desk-sidebar-item,
.standard-sidebar-item.selected {
	background-color: var(--sidebar-select-color);
}

.sidebar-item-container.selected > .desk-sidebar-item .sidebar-item-label,
.standard-sidebar-item.selected .sidebar-item-label {
	color: var(--ta-navy-700);
	font-weight: 600;
}

[data-theme="dark"] .sidebar-item-container.selected > .desk-sidebar-item .sidebar-item-label,
[data-theme="dark"] .standard-sidebar-item.selected .sidebar-item-label {
	color: var(--ta-navy-200);
}


/* ---------------------------------------------------------------------------
 * 8. Focus visibility
 * Applies the branded ring to real keyboard focus only, so mouse users do not
 * get a permanent halo. Accessibility parity with stock is preserved.
 * ------------------------------------------------------------------------ */
.form-control:focus,
.input-with-feedback:focus,
.btn:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
	box-shadow: var(--focus-default);
	border-color: var(--ta-navy-400);
	outline: none;
}


/* ===========================================================================
 * 9. LOGIN PAGE
 *
 * Scoped to body[data-path="login"] and siblings so the customer-facing portal
 * is untouched (docs/BRANDING.md §2). Verified live: the login page emits
 * <body ... data-path="login">.
 *
 * Load order on this page is
 *     website.bundle.css -> erpnext-web.bundle.css -> [this file] -> login.bundle.css
 * so login.bundle.css comes AFTER us. Custom-property overrides still win
 * (login.bundle.css never redefines them), but a handful of direct property
 * rules below need the attribute selector's specificity to land.
 *
 * No dark variant: the website layer emits no data-theme attribute.
 * ======================================================================== */
body[data-path="login"],
body[data-path="update-password"] {
	--primary: var(--ta-navy-700);
	--primary-color: var(--ta-navy-700);
	--brand-color: var(--ta-navy-700);
	--btn-primary: var(--ta-navy-700);
	--border-primary: var(--ta-navy-700);

	background-color: var(--ta-navy-50);
}

/* The auth card: lift it off the tinted page with a navy-cast shadow. */
body[data-path="login"] .page-card,
body[data-path="update-password"] .page-card {
	border: 1px solid var(--ta-navy-100);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(20, 49, 93, 0.10),
	            0 2px 6px rgba(20, 49, 93, 0.06);
}

body[data-path="login"] .page-card-head .indicator,
body[data-path="login"] .page-card-head h4 {
	color: var(--ta-navy-700);
}

/* The login form's submit is .btn-default upstream (see frappe/www/login.html),
 * not .btn-primary — so branding it needs an explicit rule. */
body[data-path="login"] .btn-login,
body[data-path="login"] .btn-signup,
body[data-path="update-password"] .btn-primary {
	background-color: var(--ta-navy-700);
	border-color: var(--ta-navy-700);
	color: #ffffff;
}

body[data-path="login"] .btn-login:hover,
body[data-path="login"] .btn-login:focus,
body[data-path="login"] .btn-signup:hover,
body[data-path="update-password"] .btn-primary:hover {
	background-color: var(--ta-navy-800);
	border-color: var(--ta-navy-800);
	color: #ffffff;
}

/* Third-party / alternate sign-in options stay secondary, not branded. */
body[data-path="login"] .btn-login-option {
	background-color: #ffffff;
	border: 1px solid var(--ta-navy-100);
	color: var(--ta-slate);
}

body[data-path="login"] .btn-login-option:hover {
	background-color: var(--ta-navy-50);
	border-color: var(--ta-navy-200);
}

body[data-path="login"] .form-control:focus,
body[data-path="update-password"] .form-control:focus {
	border-color: var(--ta-navy-400);
	box-shadow: 0 0 0 2px var(--ta-navy-200);
}

body[data-path="login"] a,
body[data-path="update-password"] a {
	color: var(--ta-navy-600);
}

body[data-path="login"] a:hover,
body[data-path="update-password"] a:hover {
	color: var(--ta-navy-800);
}

/* The splash/app logo above the card (Website Settings -> app_logo). */
body[data-path="login"] .page-card .page-card-head img,
body[data-path="login"] .for-login .page-card-head img,
body[data-path="login"] .app-logo {
	max-height: 34px;
	width: auto;
	object-fit: contain;
}


/* ---------------------------------------------------------------------------
 * 10. Print / PDF
 * The letterhead is already navy in production. This only aligns print headings
 * with the brand and constrains the letterhead logo, which is otherwise
 * unbounded and can blow out the header band.
 *
 * NOTE: frappe/public/scss/desk/dark.scss forces .print-format back to light ink
 * under [data-theme="dark"] so previews stay readable — do not fight that here.
 * ------------------------------------------------------------------------ */
.print-format h1,
.print-format h2,
.print-format h3,
.print-format .print-heading > h2 {
	color: var(--ta-navy-700);
}

.print-format .letter-head img,
.letter-head .logo img {
	max-height: 56px;
	width: auto;
	object-fit: contain;
}