/* ══════════════════════════════════════════════════════════════════════
   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;
	}
}