/* ErpAuto brand theme — Mario product pack: BLACK bg, YELLOW band, RED accents.
   Palette per BRAND_PROFILE.md (2026-06-16 restudy): big surfaces use the WARM
   "Layer A" hexes (sweet golden yellow / tomato red / pack black), NOT the
   electric "Layer B" tokens (#fff100/#eb1f26) — those are for tiny pops only.
   brand.js forces Frappe native dark mode; these rules layer the pack colours on top. */

:root {
	/* Owner decision 2026-06-12: use the BRIGHT pack tokens on the header band,
	   matching the approved sandbox mock. (BRAND_PROFILE.md Layer A suggests the
	   softer #FFC91E for big surfaces, but Neeraj compared both live and chose the
	   bright lemon #fff100 — owner overrides spec; recorded here + in the spec.) */
	--mario-yellow: #fff100;   /* bright Mario lemon — the header band */
	--mario-red:    #eb1f26;   /* bright Mario red — buttons, divider, accents */
	--mario-berry:  #c4161c;   /* darker red — hover/pressed */
	--mario-black:  #111111;   /* Pack Black — backgrounds, the stage */
}

/* ── Yellow header band (the pack stripe) ──────────────────────────────── */
/* New-UI app launcher top bar */
header.desktop-navbar {
	background: var(--mario-yellow) !important;
	border-bottom: 4px solid var(--mario-red) !important;
}
header.desktop-navbar i {
	color: var(--mario-black) !important;
}
header.desktop-navbar .desktop-search-wrapper,
header.desktop-navbar button.btn-reset {
	background: var(--mario-black) !important;
}
header.desktop-navbar .desktop-search-wrapper * {
	color: #cfcfcf !important;
}
/* logo is a yellow pack mark — on the yellow band it needs a black chip behind
   it (pack-authentic: the MARIO mark lives on black) or it bleeds into the band */
header.desktop-navbar .navbar-home {
	background: var(--mario-black) !important;
	border-radius: 10px !important;
	padding: 5px 9px !important;
	display: flex !important;
	align-items: center !important;
	height: 40px !important;
	box-sizing: border-box !important;
}

/* Classic desk navbar: keep the yellow pairing strip */
.navbar {
	box-shadow: inset 0 -3px 0 var(--mario-yellow);
}

/* ── Yellow sidebar on module pages (red badge + black main stay) ──────── */
.body-sidebar {
	background: var(--mario-yellow) !important;
}
.body-sidebar,
.body-sidebar a,
.body-sidebar span,
.body-sidebar p,
.body-sidebar .sidebar-item-label,
.body-sidebar .title-area {
	color: var(--mario-black) !important;
}
.body-sidebar svg {
	stroke: var(--mario-black) !important;
	color: var(--mario-black) !important;
}
/* active nav item -> white pill so it reads on yellow */
.body-sidebar [class*="selected"] {
	background: #fff !important;
	border-radius: 8px !important;
}
/* search / notification / user rows -> faint dark inset */
.body-sidebar .navbar-search-bar,
.body-sidebar .sidebar-notification,
.body-sidebar .dropdown-navbar-user {
	background: rgba(0, 0, 0, .07) !important;
	border-radius: 8px !important;
}
/* Mario brand chip (injected by brand.js at top of the sidebar) */
#mario-brand {
	background: var(--mario-black) !important;
	border-radius: 10px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	margin: 6px 8px 8px;
}
#mario-brand,
#mario-brand * {
	color: #fff !important;
}
#mario-brand img {
	width: 26px;
	height: 26px;
	border-radius: 5px;
	display: block;
}

/* primary action buttons -> Mario red */
.btn-primary {
	background-color: var(--mario-red) !important;
	border-color: var(--mario-red) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background-color: var(--mario-berry) !important;
	border-color: var(--mario-berry) !important;
}

/* checked checkboxes follow the brand */
.frappe-control input[type="checkbox"]:checked {
	background-color: var(--mario-red);
	border-color: var(--mario-red);
}

/* login page: red button already covered; add the yellow pairing under the card */
.for-login .login-content.page-card {
	border-top: 4px solid var(--mario-yellow);
}

/* hide the "Login with Frappe Cloud" button Frappe Cloud injects on /login */
.btn-login-with-frappe-cloud {
	display: none !important;
}
.login-button-wrapper:has(.btn-login-with-frappe-cloud),
.social-login-buttons:has(.btn-login-with-frappe-cloud) {
	display: none !important;
}