/*
 * dev-brand.css - DEV ONLY (peperle.deverp.cz)
 *
 * Visual marker so the upgraded 9.3.10 dev instance is instantly distinguishable from production,
 * plus auto-hiding scrollbars. Colours are taken from the client's own logo:
 *
 *     #20B8E8  brand blue      #9898A0  brand grey
 *
 * Contrast measured against the theme's #333 body text:
 *     header  #E6F5FC -> 11.33:1   sidebar #E8E8EA -> 10.33:1   active #DADADE -> 9.28:1
 * all well past WCAG AA (4.5:1) and AAA (7:1). The header takes the brand blue, the left menu the
 * brand grey. Muted text is darkened to #5A6268 inside these areas because the theme default
 * (#6C757D) only reaches 4.2:1 there.
 *
 * Do NOT deploy to peperle.autoerp.cz - production must keep the stock look.
 */

:root {
	--peperle-brand: #20B8E8;
	--peperle-brand-grey: #9898A0;
	--peperle-header-bg: #E6F5FC;
	--peperle-sidebar-bg: #E8E8EA;   /* logo grey #9898A0 at 22% over white */
	--peperle-active-bg: #DADADE;
	--peperle-muted: #5A6268;
}

/* ---- top header strip (search + icons), fixed full width ---- */
#navbar .navbar-nav.navbar-right {
	background-color: var(--peperle-header-bg) !important;
	border-bottom: 1px solid rgba(32, 184, 232, 0.35);
}

/* ---- left menu ---- */
#navbar .navbar.navbar-inverse {
	background-color: var(--peperle-sidebar-bg) !important;
	border-right: 1px solid rgba(152, 152, 160, 0.35);
}

/* keep the active/hover item visible against the tinted sidebar */
#navbar .navbar.navbar-inverse .nav-link:hover,
#navbar .navbar.navbar-inverse .tabs li:hover > .nav-link {
	background-color: rgba(152, 152, 160, 0.18) !important;
}

#navbar .navbar.navbar-inverse .nav-link.active,
#navbar .navbar.navbar-inverse li.active > .nav-link {
	background-color: var(--peperle-active-bg) !important;
	box-shadow: inset 3px 0 0 var(--peperle-brand);
}

/* muted text inside the tinted areas: theme default only reaches 3.9:1 there */
#navbar .navbar.navbar-inverse .text-muted,
#navbar .navbar-nav.navbar-right .text-muted,
#navbar .navbar.navbar-inverse small {
	color: var(--peperle-muted) !important;
}

/* ---- auto-hiding scrollbars, page included ---- */
html {
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
}

html:hover,
*:hover > * {
	scrollbar-color: rgba(152, 152, 160, 0.45) transparent;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
	background: transparent;
}

/* thumb is invisible until the pointer is over the scrolling area */
::-webkit-scrollbar-thumb {
	background-color: transparent;
	border: 2px solid transparent;
	border-radius: 8px;
	background-clip: content-box;
	transition: background-color 0.15s ease-in-out;
}

*:hover::-webkit-scrollbar-thumb {
	background-color: rgba(152, 152, 160, 0.45);
}

*::-webkit-scrollbar-thumb:hover {
	background-color: rgba(152, 152, 160, 0.75);
}

/* the page scrollbar itself: only show the thumb while the pointer is in the window */
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
	background-color: transparent;
}

html:hover::-webkit-scrollbar-thumb,
body:hover::-webkit-scrollbar-thumb {
	background-color: rgba(152, 152, 160, 0.4);
}

/* ---- test-copy strip: a client with PROD and DEV open side by side must see which window is which
 * (SUP-2331). Fixed to the bottom edge, clicks pass through, shown on the login page too. ---- */
body::after {
	content: "TESTOVACÍ KOPIE · peperle.deverp.cz · testovací data, nic odsud neodchází zákazníkům · ostrý systém je peperle.autoerp.cz";
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100000;
	padding: 3px 8px;
	background: #C62828;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;
	pointer-events: none;
}