/* ══════════════════════════════════════════════════════════════════════
   NPJ Jewellers — brand theme
   ----------------------------------------------------------------------
   Phase 0.5. Colours are taken from the supplied logo files, not guessed:

     gold     #D2AB67   98.3% of pixels in npj-full-logo-without-background
     oxblood  #6E0202   94.1% of pixels in npj-full-logo-with-background

   STRATEGY — read this before editing.
   Frappe v15 themes itself through CSS custom properties declared under
   `:root, [data-theme="light"]` and `[data-theme="dark"]`. We therefore
   RE-DECLARE THOSE VARIABLES rather than fighting individual selectors.
   That keeps `!important` almost entirely out of this file and means the
   branding follows upstream when they restyle a component.

   CONTRAST — every shipped pairing was measured (WCAG 2.1):
     white on oxblood-700 ......... 12.56:1  AAA   (navbar, primary button)
     white on oxblood-600 ......... 10.30:1  AAA   (button hover)
     gold  on oxblood-700 .......... 5.84:1  AAA   (logo on navbar)
     black on gold ................. 8.33:1  AAA   (dark-theme button)
     gold  on #1A1A1A .............. 8.09:1  AAA   (dark-theme accent text)

   ⚠️ NEVER use gold for text or borders on white — it measures 2.15:1 and
   fails even the 3:1 non-text threshold. Gold is for dark grounds only.
   ══════════════════════════════════════════════════════════════════════ */

:root {
	/* Brand ramp — derived from the two logo colours in HLS space */
	--npj-oxblood-900: #500101;
	--npj-oxblood-800: #5f0202;
	--npj-oxblood-700: #6e0202; /* ★ the logo background */
	--npj-oxblood-600: #870202;
	--npj-oxblood-500: #a00303;
	--npj-oxblood-100: #e7c5c5;
	--npj-oxblood-50: #f2e3e3;

	--npj-gold-700: #b38535;
	--npj-gold-600: #c99a48;
	--npj-gold-500: #d2ab67; /* ★ the logo gold */
	--npj-gold-400: #dbbc86;
	--npj-gold-300: #e5cea6;
	--npj-gold-100: #ede6db;
	--npj-gold-50: #f6f4f0;

	/* Foreground used on top of the oxblood navbar */
	--npj-on-brand: #ffffff;
	--npj-on-brand-muted: rgba(255, 255, 255, 0.72);
	--npj-on-brand-faint: rgba(255, 255, 255, 0.14);
}

/* ── Light theme ──────────────────────────────────────────────────── */
:root,
[data-theme="light"] {
	--navbar-bg: var(--npj-oxblood-700);

	--primary: var(--npj-oxblood-700);
	--primary-color: var(--npj-oxblood-700);
	--brand-color: var(--npj-oxblood-700);

	/* .btn-primary takes `color: var(--neutral)`, which is #fff in the
	   light theme — so an oxblood ground gives white text at 12.56:1. */
	--btn-primary: var(--npj-oxblood-700);
	--border-primary: var(--npj-oxblood-700);

	--sidebar-select-color: var(--npj-oxblood-50);
	--highlight-color: var(--npj-gold-50);
}

/* ── Dark theme ───────────────────────────────────────────────────── */
[data-theme="dark"] {
	--navbar-bg: var(--npj-oxblood-800);

	/* In dark mode `--neutral` is #000, so the primary button ground must
	   be LIGHT. Gold on black measures 8.33:1 — and gold-on-dark is how
	   the logo itself is drawn. */
	--btn-primary: var(--npj-gold-500);
	--primary: var(--npj-gold-500);
	--primary-color: var(--npj-gold-500);
	--brand-color: var(--npj-gold-500);
	--border-primary: var(--npj-gold-500);

	--sidebar-select-color: rgba(210, 171, 103, 0.14);
}

/* ══ Navbar ═══════════════════════════════════════════════════════════
   The navbar ground is dark in BOTH themes, so its contents must be
   light in both. Everything here is scoped to `.navbar` and deliberately
   stops at `.dropdown-menu`, which is a popover on its own light ground.
   ═══════════════════════════════════════════════════════════════════ */
.navbar {
	border-bottom: 1px solid var(--npj-oxblood-900);
}

.navbar .navbar-home img.app-logo {
	max-height: 26px;
	width: auto;
}

/* Breadcrumbs and icon buttons sitting directly on the brand ground */
.navbar #navbar-breadcrumbs > li > a,
.navbar #navbar-breadcrumbs > li > a:hover,
.navbar .navbar-nav > .nav-item > .nav-link,
.navbar .navbar-nav > .nav-item > .btn-reset {
	color: var(--npj-on-brand-muted);
	--icon-stroke: var(--npj-on-brand-muted);
}

.navbar #navbar-breadcrumbs > li > a:hover,
.navbar .navbar-nav > .nav-item > .nav-link:hover,
.navbar .navbar-nav > .nav-item > .btn-reset:hover {
	color: var(--npj-on-brand);
	--icon-stroke: var(--npj-on-brand);
}

.navbar .vertical-bar {
	border-right-color: var(--npj-on-brand-faint);
}

/* Search field — a translucent well rather than a white slab */
.navbar .search-bar .form-control {
	background-color: var(--npj-on-brand-faint);
	border-color: transparent;
	color: var(--npj-on-brand);
}

.navbar .search-bar .form-control::placeholder {
	color: var(--npj-on-brand-muted);
}

.navbar .search-bar .form-control:focus {
	background-color: rgba(255, 255, 255, 0.2);
	border-color: var(--npj-gold-500);
	box-shadow: 0 0 0 2px rgba(210, 171, 103, 0.35);
	color: var(--npj-on-brand);
}

.navbar .search-bar .search-icon svg {
	stroke: var(--npj-on-brand-muted);
}

/* ⚠️ Protect popovers. These are children of .navbar in the DOM but are
   drawn on their own light ground — without this reset they would
   inherit white-on-white text and become invisible. */
.navbar .dropdown-menu,
.navbar .dropdown-menu * {
	color: var(--text-color);
	--icon-stroke: var(--icon-stroke-default, currentColor);
}

.navbar .dropdown-menu .dropdown-item:hover {
	background-color: var(--fg-hover-color);
}

/* ══ Accents ═════════════════════════════════════════════════════════ */

/* Gold hairline under the navbar — the one decorative flourish */
.navbar::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: linear-gradient(
		90deg,
		var(--npj-gold-700) 0%,
		var(--npj-gold-500) 50%,
		var(--npj-gold-700) 100%
	);
	opacity: 0.85;
	pointer-events: none;
}

/* Keyboard focus — visible, on brand, and never gold-on-white for text */
:is(.btn, .form-control, a):focus-visible {
	outline: 2px solid var(--npj-gold-600);
	outline-offset: 1px;
}

/* ══ Login & web pages ═══════════════════════════════════════════════ */
.page-card {
	border-top: 3px solid var(--npj-oxblood-700);
}

.page-card .page-card-head .indicator {
	color: var(--npj-oxblood-700);
}

/* ══ Suppress upstream branding in everyday view ═════════════════════
   Scoped to footers/attribution only. We do NOT touch developer-facing
   screens — see 03-development/06-branding.md, "Do not go too deep".
   ═══════════════════════════════════════════════════════════════════ */
.footer-powered,
.navbar-brand .frappe-logo,
a[href*="frappe.io"]:not([data-keep]),
a[href*="erpnext.com"]:not([data-keep]) {
	display: none !important;
}

/* ══ Print / letterhead ══════════════════════════════════════════════
   Gold is decorative only here; all printed text stays near-black so it
   survives photocopying and B&W printing.
   ═══════════════════════════════════════════════════════════════════ */
.npj-letterhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--npj-oxblood-700);
}

.npj-letterhead .npj-lh-logo {
	max-height: 54px;
	width: auto;
}

.npj-letterhead .npj-lh-meta {
	text-align: right;
	font-size: 11px;
	line-height: 1.45;
	color: #1c1917;
}

.npj-letterhead .npj-lh-name {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--npj-oxblood-700);
}

@media print {
	.npj-letterhead {
		border-bottom-color: #6e0202;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   ★ 11c — NPJ Chat wears NPJ's mark inside the ERP desk.

   Raven's app tile carries its own bird logo, whose URL comes from that
   app's hooks.py and is therefore not ours to change. `content:` on an
   <img> replaces what the browser paints without touching one byte of
   their app — the same class of override as a print stylesheet.

   Belt and braces: the tile is matched by its src, so if Raven ever ships
   a different filename the tile simply shows their logo again — it never
   breaks the page. A test pins that this rule exists.
   ══════════════════════════════════════════════════════════════════════ */

img[src="/assets/raven/raven-logo.png"],
img[src$="/raven/raven-logo.png"] {
	content: url("/assets/npj_jewellery/images/npj_logo_square.png");
	border-radius: 6px;
}