/* ==========================================================================
   Account Panel (BCP) theme engine
   --------------------------------------------------------------------------
   Loaded before the selected theme file. It declares the --bcp-* design tokens
   and applies them to every component the old per-colour theme files used to
   restyle by hand. Theme files under /css/themes/ override only the tokens,
   which mirrors the hosted storefront (public_billing/css/style.css).

   Load order: css/style.css -> css/themes/_engine.css -> css/themes/<name>.css
   Dark mode adds: css/dark.css -> css/themes/_dark.css
   ========================================================================== */

:root {
	/* Defaults match the "default" theme so a missing theme file still renders */
	--bcp-primary: #2f6feb;
	--bcp-primary-rgb: 47, 111, 235;
	--bcp-primary-dark: #1f55c4;
	--bcp-primary-darker: #17439b;
	--bcp-focus-border: #a8c4f7;

	--bcp-body-bg: #f3f4f7;

	/* The navigation chrome stays a neutral dark gray across all themes; theme
	   files only tint it very slightly so the accent colour still reads. */
	--bcp-nav-bg: #2b2d31;
	--bcp-nav-submenu-bg: #34373c;
	--bcp-nav-split-bg: #17191c;
	--bcp-nav-border: #44474e;
	--bcp-nav-icon: #a0a0a0;

	/* Used by _dark.css; light-on-dark variants of the accent colour */
	--bcp-primary-on-dark: #6c9bf5;
	--bcp-primary-on-dark-hover: #9dbcf9;
}

body {
	background: var(--bcp-body-bg);
}

a, .btn-link {
	color: var(--bcp-primary);
}

a:hover, a:focus, .btn-link:focus, .btn-link:hover, .btn-link:disabled, a:disabled {
	color: var(--bcp-primary-dark);
}

/* --- Navigation --------------------------------------------------------- */

.navbar {
	background-color: var(--bcp-nav-bg);
}

nav .submenu,
.nav-expand nav .submenu {
	background: var(--bcp-nav-submenu-bg);
}

nav .submenu {
	border-left: 1px solid var(--bcp-nav-border);
}

nav > ul > li {
	border-bottom: 1px solid var(--bcp-nav-border);
}

nav > ul > li.active {
	border-left: 3px solid var(--bcp-primary);
}

.nav-expand nav li.split a {
	background: var(--bcp-nav-split-bg);
}

.nav-expand nav li.split a.active {
	background: var(--bcp-nav-submenu-bg);
}

.nav-expand nav li.split a:last-child {
	border-left: 1px solid var(--bcp-nav-border);
}

.sidebar-collapse {
	border-bottom: 1px solid var(--bcp-nav-border);
}

.sidebar-collapse > i.fa {
	color: var(--bcp-nav-icon);
}

/* --- Pagination --------------------------------------------------------- */

.pagination a, .pagination span.disabled {
	color: var(--bcp-primary);
}

.pagination a:hover, .pagination a:active {
	border: 1px solid var(--bcp-primary-dark);
	background-color: var(--bcp-primary);
}

.pagination a.active, .pagination a.active:hover, .pagination a.active:active {
	border: 1px solid var(--bcp-primary-dark) !important;
}

/* --- Buttons ------------------------------------------------------------ */

.btn-primary {
	background-color: var(--bcp-primary) !important;
	border-color: var(--bcp-primary) !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:disabled {
	background-color: var(--bcp-primary-dark) !important;
	border-color: var(--bcp-primary-dark) !important;
}

.btn-primary:active:focus,
.btn-primary:active:hover,
.btn-primary:disabled:hover,
.btn-primary:disabled:focus {
	background-color: var(--bcp-primary-darker) !important;
	border-color: var(--bcp-primary-darker) !important;
}

/* --- Form controls ------------------------------------------------------ */

.form-control:focus, .input:focus {
	border-color: var(--bcp-focus-border) !important;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(var(--bcp-primary-rgb), 0.4) !important;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(var(--bcp-primary-rgb), 0.4) !important;
}

.form-control[readonly]:focus, .input[readonly]:focus {
	border-color: #ccc !important;
	box-shadow: none !important;
}

.select2-container--bootstrap.select2-container--focus .select2-selection,
.select2-container--bootstrap.select2-container--open .select2-selection {
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(var(--bcp-primary-rgb), 0.4) !important;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(var(--bcp-primary-rgb), 0.4) !important;
	border-color: var(--bcp-focus-border) !important;
	border-bottom-color: var(--bcp-focus-border) !important;
}

.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
	background-color: var(--bcp-primary) !important;
}

/* --- Widgets ------------------------------------------------------------ */

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	background-color: var(--bcp-primary) !important;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover {
	background-color: var(--bcp-primary);
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:focus,
.dropdown-menu > .active > a:hover {
	background-color: var(--bcp-primary);
}