/**
 * Black Gate portal redesign — visual system from product mockups.
 * Loaded after style.css. Presentation only; no AJAX/admin-post contract changes.
 *
 * References: docs/design-references/{photos,cameras,properties}.png
 */

:root {
	--bg-ink: #1a1a1a;
	--bg-muted: #6a6560;
	--bg-line: #ddd8d0;
	--bg-canvas: #f2f0eb;
	--bg-card: #ffffff;
	--bg-sidebar: #141a16;
	--bg-sidebar-hover: #1f2822;
	--bg-sidebar-text: rgba(255, 255, 255, 0.78);
	--bg-sidebar-text-strong: #ffffff;
	--bg-brand: #8b1a1a;
	--bg-brand-hover: #731515;
	--bg-success: #2f6b45;
	--bg-warning: #b86a12;
	--bg-danger: #b42318;
	--bg-danger-hover: #912014;
	--bg-info-soft: #e4ebe3;
	--bg-link: #8b1a1a;
	--bg-link-hover: #731515;
	--bg-radius: 4px;
	--bg-radius-sm: 3px;
	--bg-shadow: 0 1px 2px rgba(20, 17, 15, 0.05);
	--bg-focus: 0 0 0 2px rgba(139, 26, 26, 0.28);
	--bg-font: "Barlow", "Segoe UI", sans-serif;
	--bg-display: "Barlow Semi Condensed", "Barlow", sans-serif;
	--bg-touch: 44px;
	--bg-sidebar-width: 248px;
	--bg-header-height: 64px;
	/* Thin chevron caret — stroke matches --bg-muted (#6a6560) */
	--bg-select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath stroke='%236a6560' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='m3.5 6 4.5 4.5L12.5 6'/%3E%3C/svg%3E");
}

html[data-theme="dark"] {
	/* Cold blue-grey metal */
	--bg-ink: #e8edf4;
	--bg-muted: #9aa6b5;
	--bg-line: #2e3845;
	--bg-canvas: #12161c;
	--bg-card: #1a212a;
	--bg-sidebar: #0e1319;
	--bg-sidebar-hover: #1c2530;
	--bg-brand: #c23a3a;
	--bg-brand-hover: #a82f2f;
	--bg-danger: #c23a3a;
	--bg-danger-hover: #a82f2f;
	--bg-info-soft: #1a2430;
	--bg-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	--bg-focus: 0 0 0 2px rgba(194, 58, 58, 0.35);
	--bg-input: #141b24;
	/* Cool metal ink for links — no tinted accent */
	--bg-link: #e8edf4;
	--bg-link-hover: #ffffff;
	/* Thin chevron caret — stroke matches --bg-muted (#9aa6b5) */
	--bg-select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath stroke='%239aa6b5' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='m3.5 6 4.5 4.5L12.5 6'/%3E%3C/svg%3E");
}

/* Base — beat legacy style.css dark !important rules */
body.logged-in,
html[data-theme="dark"] body.logged-in {
	font-family: var(--bg-font) !important;
	background: var(--bg-canvas) !important;
	color: var(--bg-ink) !important;
}

body.logged-in #content,
html[data-theme="dark"] body.logged-in #content {
	background: var(--bg-canvas) !important;
}

body.logged-in #content .inner-content {
	max-width: 1180px;
	padding-top: 1.25rem;
}

/*
 * Native <select> caret — portal redesign sets `background` on inputs/selects,
 * which clears background-image. Keep caret via --bg-select-caret and prefer
 * background-color on select rules so the chevron is not wiped.
 */
html select:not([multiple]):not([size]),
html .form-select,
body.logged-in select:not([multiple]):not([size]),
body.logged-in .form-select,
body.logged-in select.form-control:not([multiple]):not([size]) {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	padding-right: 2.25rem !important;
	background-image: var(--bg-select-caret) !important;
	background-position: right 0.75rem center !important;
	background-size: 12px 12px !important;
	background-repeat: no-repeat !important;
}

html select::-ms-expand,
html .form-select::-ms-expand,
body.logged-in select::-ms-expand {
	display: none;
}

html textarea:focus-visible,
html input:focus-visible,
html select:focus-visible,
html .form-control:focus-visible,
html .form-select:focus-visible {
	outline: none !important;
	border-color: var(--bg-brand) !important;
	box-shadow: var(--bg-focus) !important;
}

.btn:focus-visible,
a.btn:focus-visible {
	box-shadow: var(--bg-focus) !important;
}

/* Unified button system — primary / secondary / danger */
body.logged-in .btn,
body.logged-in a.btn,
body.logged-in button.btn,
body.logged-in input.btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	font-family: var(--bg-font) !important;
	font-weight: 600 !important;
	line-height: 1.25;
	text-decoration: none !important;
	border-radius: var(--bg-radius-sm) !important;
	border-width: 1px !important;
	border-style: solid !important;
	min-height: 2.5rem !important;
	padding: 0.45rem 1rem !important;
	box-shadow: none !important;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body.logged-in .btn-sm,
body.logged-in a.btn-sm {
	min-height: 2.15rem !important;
	padding: 0.35rem 0.8rem !important;
	font-size: 0.875rem !important;
}

body.logged-in .btn-lg,
body.logged-in a.btn-lg {
	min-height: 2.75rem !important;
	padding: 0.65rem 1.2rem !important;
	font-size: 1.05rem !important;
}

body.logged-in .btn-primary,
body.logged-in a.btn-primary,
body.logged-in .btn-primary:visited,
body.logged-in a.btn-primary:visited {
	background: var(--bg-brand) !important;
	border-color: var(--bg-brand) !important;
	color: #fff !important;
}

body.logged-in .btn-primary:hover,
body.logged-in .btn-primary:focus,
body.logged-in .btn-primary:active,
body.logged-in a.btn-primary:hover,
body.logged-in a.btn-primary:focus,
body.logged-in a.btn-primary:active {
	background: var(--bg-brand-hover) !important;
	border-color: var(--bg-brand-hover) !important;
	color: #fff !important;
}

body.logged-in .btn-secondary,
body.logged-in a.btn-secondary,
body.logged-in .btn-secondary:visited,
body.logged-in a.btn-secondary:visited,
body.logged-in .btn-outline-secondary,
body.logged-in a.btn-outline-secondary {
	background: var(--bg-card) !important;
	border-color: var(--bg-line) !important;
	color: var(--bg-ink) !important;
}

body.logged-in .btn-secondary:hover,
body.logged-in .btn-secondary:focus,
body.logged-in .btn-secondary:active,
body.logged-in a.btn-secondary:hover,
body.logged-in a.btn-secondary:focus,
body.logged-in a.btn-secondary:active,
body.logged-in .btn-outline-secondary:hover,
body.logged-in a.btn-outline-secondary:hover {
	background: rgba(20, 17, 15, 0.04) !important;
	border-color: var(--bg-ink) !important;
	color: var(--bg-ink) !important;
}

html[data-theme="dark"] body.logged-in .btn-secondary,
html[data-theme="dark"] body.logged-in a.btn-secondary,
html[data-theme="dark"] body.logged-in .btn-secondary:visited,
html[data-theme="dark"] body.logged-in a.btn-secondary:visited,
html[data-theme="dark"] body.logged-in .btn-outline-secondary,
html[data-theme="dark"] body.logged-in a.btn-outline-secondary {
	background: var(--bg-input) !important;
	border-color: var(--bg-line) !important;
	color: var(--bg-ink) !important;
}

html[data-theme="dark"] body.logged-in .btn-secondary:hover,
html[data-theme="dark"] body.logged-in .btn-secondary:focus,
html[data-theme="dark"] body.logged-in .btn-secondary:active,
html[data-theme="dark"] body.logged-in a.btn-secondary:hover,
html[data-theme="dark"] body.logged-in a.btn-secondary:focus,
html[data-theme="dark"] body.logged-in a.btn-secondary:active,
html[data-theme="dark"] body.logged-in .btn-outline-secondary:hover,
html[data-theme="dark"] body.logged-in a.btn-outline-secondary:hover {
	background: var(--bg-sidebar-hover) !important;
	border-color: #4a5565 !important;
	color: #fff !important;
}

body.logged-in .btn-danger,
body.logged-in a.btn-danger,
body.logged-in .btn-danger:visited,
body.logged-in a.btn-danger:visited {
	background: var(--bg-danger) !important;
	border-color: var(--bg-danger) !important;
	color: #fff !important;
}

body.logged-in .btn-danger:hover,
body.logged-in .btn-danger:focus,
body.logged-in .btn-danger:active,
body.logged-in a.btn-danger:hover,
body.logged-in a.btn-danger:focus,
body.logged-in a.btn-danger:active {
	background: var(--bg-danger-hover) !important;
	border-color: var(--bg-danger-hover) !important;
	color: #fff !important;
}

body.logged-in .btn-outline-primary,
body.logged-in a.btn-outline-primary {
	background: transparent !important;
	border-color: var(--bg-brand) !important;
	color: var(--bg-brand) !important;
}

body.logged-in .btn-outline-primary:hover,
body.logged-in a.btn-outline-primary:hover {
	background: var(--bg-brand) !important;
	color: #fff !important;
}

/* Text links — brand family only; never paint .btn */
body.logged-in a:not(.btn):not(.menuItem):not(.portal-menu__link):not(.portal-local-nav__item):not(.portal-profile-menu__action):not(.portal-profile-menu__logout):not(.page-numbers) {
	color: var(--bg-link);
}

body.logged-in a:not(.btn):not(.menuItem):not(.portal-menu__link):not(.portal-local-nav__item):not(.portal-profile-menu__action):not(.portal-profile-menu__logout):not(.page-numbers):hover {
	color: var(--bg-link-hover);
}

body.logged-in .metabox {
	background: var(--bg-card);
	border: 1px solid var(--bg-line);
	border-radius: var(--bg-radius-sm) !important;
	box-shadow: var(--bg-shadow);
}

body.logged-in .metabox,
body.logged-in .data-usage-card,
body.logged-in .data-usage-grid > *,
body.logged-in .bg-stats-strip,
body.logged-in .bg-camera-card,
body.logged-in .bg-property-card,
body.logged-in .billing-hub-card,
body.logged-in .portal-list-card,
body.logged-in .portal-empty-state,
body.logged-in .form-control,
body.logged-in .form-select,
body.logged-in .btn,
body.logged-in a.btn {
	border-radius: var(--bg-radius-sm) !important;
}

body.logged-in #sideBar .sideMenu a.menuItem,
body.logged-in #sideBar .sideMenu .menuItem {
	border-radius: var(--bg-radius-sm) !important;
}

/* Display headings */
.bg-page-heading,
.portal-page-header h1,
.portal-page-header__title,
.bg-theme-portal-page-header h1 {
	font-family: var(--bg-display);
	font-weight: 700;
	font-size: clamp(1.65rem, 2.1vw, 2rem);
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--bg-ink);
	margin: 0 0 0.3rem;
}

.bg-page-subheading,
.portal-page-header__subtitle,
.page-title__subtitle,
.bg-theme-portal-page-header p {
	font-family: var(--bg-font);
	color: var(--bg-muted);
	font-size: 1rem;
	margin: 0;
}

/* Legacy portal-page-header alias → same spacing as bg-page-header */
.portal-page-header,
.header.portal-page-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.25rem;
	margin-bottom: 1.35rem;
	min-height: 2.75rem;
}

.portal-page-header .page-title {
	flex: 1 1 16rem;
}

.portal-page-header .page-title h1 {
	font-family: var(--bg-display);
	font-weight: 700;
	font-size: clamp(1.65rem, 2.1vw, 2rem);
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--bg-ink);
	margin: 0 0 0.3rem;
}

.header-hr {
	display: none;
}

.bg-page-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.25rem;
	margin-bottom: 1.35rem;
	min-height: 2.75rem;
}

.bg-page-header__copy {
	flex: 1 1 16rem;
	min-width: 0;
}

.bg-page-header__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	justify-content: flex-end;
	margin-left: auto;
	flex: 0 0 auto;
}

/* Sidebar — override legacy style.css (icon-above-label / 200px rail) */
body.logged-in #sideBar {
	background-color: var(--bg-sidebar) !important;
	background-image: none !important;
	width: var(--bg-sidebar-width) !important;
	min-width: var(--bg-sidebar-width) !important;
	max-width: var(--bg-sidebar-width) !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden;
	box-shadow: none !important;
	position: fixed !important;
	isolation: isolate;
}

/* Sidebar atmosphere — subtle circled photo with heavy feather into rail */
body.logged-in #sideBar::after {
	content: "" !important;
	position: absolute !important;
	left: 50% !important;
	bottom: -0.5rem !important;
	transform: translateX(-50%) !important;
	width: min(268px, 112%) !important;
	height: min(268px, 112%) !important;
	background-image: url("../images/sidebar-woods.jpg?v=1") !important;
	background-repeat: no-repeat !important;
	background-position: 54% 38% !important;
	background-size: cover !important;
	opacity: 0.1;
	filter: saturate(0.55) brightness(0.7) contrast(0.95);
	mix-blend-mode: normal;
	-webkit-mask-image: radial-gradient(
		circle at center,
		#000 0%,
		#000 16%,
		rgba(0, 0, 0, 0.75) 32%,
		rgba(0, 0, 0, 0.35) 50%,
		rgba(0, 0, 0, 0.12) 66%,
		transparent 78%
	);
	mask-image: radial-gradient(
		circle at center,
		#000 0%,
		#000 16%,
		rgba(0, 0, 0, 0.75) 32%,
		rgba(0, 0, 0, 0.35) 50%,
		rgba(0, 0, 0, 0.12) 66%,
		transparent 78%
	);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	pointer-events: none !important;
	z-index: 0 !important;
}

body.logged-in #sideBar > * {
	position: relative;
	z-index: 1;
}

body.logged-in #content {
	margin-left: var(--bg-sidebar-width) !important;
	max-width: calc(100% - var(--bg-sidebar-width)) !important;
	background: var(--bg-canvas) !important;
}

body.logged-in #sideBar #logoHome {
	background: transparent !important;
	min-height: 0 !important;
	padding: 1.5rem 1.25rem 1.1rem !important;
	display: block !important;
}

body.logged-in #sideBar .portal-logo-link {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;
	text-decoration: none !important;
	color: var(--bg-sidebar-text-strong) !important;
}

body.logged-in #sideBar #logoHome img {
	width: 44px !important;
	max-width: 44px !important;
	height: auto !important;
	margin: 0 !important;
	filter: brightness(0) invert(1);
}

body.logged-in #sideBar .portal-logo-text,
body.logged-in #sideBar #logoHome span,
body.logged-in #sideBar #logoHome .portal-logo-text {
	font-family: var(--bg-font) !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	color: var(--bg-sidebar-text-strong) !important;
	line-height: 1.2 !important;
}

body.logged-in #sideBar .portal-logo-text span,
body.logged-in #sideBar #logoHome span span {
	color: inherit !important;
	font-weight: inherit !important;
}

body.logged-in #sideBar .sideMenu {
	flex: 1 1 auto;
	padding: 0.35rem 0.85rem !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.15rem !important;
	list-style: none !important;
}

body.logged-in #sideBar .sideMenu .portal-menu__item {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* Horizontal icon + label (mockups). Legacy uses column-reverse. */
body.logged-in #sideBar .sideMenu a.menuItem,
body.logged-in #sideBar .sideMenu .menuItem,
body.logged-in #sideBar .portal-menu__link {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 0.75rem !important;
	min-height: 2.7rem !important;
	height: auto !important;
	padding: 0.55rem 0.9rem !important;
	border-radius: var(--bg-radius-sm) !important;
	border-bottom: none !important;
	box-shadow: none !important;
	text-align: left !important;
	color: var(--bg-sidebar-text) !important;
	font-family: var(--bg-font) !important;
	font-weight: 500 !important;
	font-size: 0.94rem !important;
	line-height: 1.25 !important;
	position: relative;
	text-decoration: none !important;
	opacity: 1 !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}

body.logged-in #sideBar .sideMenu a.menuItem:hover,
body.logged-in #sideBar .sideMenu .menuItem:hover,
body.logged-in #sideBar .portal-menu__link:hover {
	background: var(--bg-sidebar-hover) !important;
	color: var(--bg-sidebar-text-strong) !important;
	opacity: 1 !important;
}

body.logged-in #sideBar .sideMenu a.menuItem.active,
body.logged-in #sideBar .sideMenu .menuItem.active,
body.logged-in #sideBar .sideMenu .portal-menu__item.is-open > .menuItem,
body.logged-in #sideBar .portal-menu__link.is-active {
	background: var(--bg-brand) !important;
	color: #fff !important;
	box-shadow: none !important;
}

body.logged-in #sideBar .sideMenu a.menuItem.active::before,
body.logged-in #sideBar .sideMenu .menuItem.active::before,
body.logged-in #sideBar .portal-menu__link.is-active::before {
	content: none !important;
	display: none !important;
}

body.logged-in #sideBar .sideMenu a.menuItem span[class^="bx"],
body.logged-in #sideBar .sideMenu a.menuItem span[class*=" bx"],
body.logged-in #sideBar .sideMenu .menuItem span[class^="bx"],
body.logged-in #sideBar .sideMenu .menuItem span[class*=" bx"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	width: 1.25rem !important;
	font-size: 1.2rem !important;
	margin: 0 !important;
	line-height: 1 !important;
}

body.logged-in #sideBar .sideMenu a.menuItem .portal-menu__label,
body.logged-in #sideBar .sideMenu .menuItem .portal-menu__label {
	display: inline !important;
	font-size: inherit !important;
	line-height: inherit !important;
	white-space: nowrap;
}

body.logged-in #sideBar .sideMenu a.menuItem .portal-menu__hint,
body.logged-in #sideBar .sideMenu .menuItem .portal-menu__hint {
	display: none !important;
}

/* Mockups: flat primary nav — no nested Account flyout in the rail */
body.logged-in #sideBar .portal-submenu {
	display: none !important;
}

body.logged-in #sideBar .sideMenu--footer {
	flex: 0 0 auto !important;
	margin-top: auto !important;
	padding: 0.85rem 0.85rem 0.25rem !important;
	border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body.logged-in #sideBar .portal-sidebar-tagline {
	margin: 0.85rem 1rem 1.35rem !important;
	text-align: center !important;
	font-size: 0.62rem !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: rgba(255, 255, 255, 0.42) !important;
	line-height: 1.35 !important;
}

@media (max-width: 768px) {
	body.logged-in #sideBar {
		width: min(86vw, 280px) !important;
		min-width: 0 !important;
		max-width: min(86vw, 280px) !important;
	}

	body.logged-in #content {
		margin-left: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* Top bar — always visible; align to sidebar width */
body.logged-in .portal-top-bar,
body.logged-in body:not(.not_logged_in) .portal-top-bar,
body:not(.not_logged_in) .portal-top-bar {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 1rem !important;
	position: sticky !important;
	top: 0 !important;
	z-index: 90 !important;
	margin-left: var(--bg-sidebar-width) !important;
	width: calc(100% - var(--bg-sidebar-width)) !important;
	max-width: calc(100% - var(--bg-sidebar-width)) !important;
	box-sizing: border-box !important;
	min-height: var(--bg-header-height) !important;
	padding: 0.7rem 1.5rem !important;
	background: color-mix(in srgb, var(--bg-canvas) 92%, transparent) !important;
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--bg-line) !important;
	box-shadow: none !important;
}

body.logged-in .portal-top-bar__main {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
	flex: 1 1 auto;
}

body.logged-in .portal-top-bar__greeting {
	display: flex;
	flex-direction: column;
	gap: 0.05rem;
	min-width: 0;
}

body.logged-in .portal-top-bar__hello {
	font-family: var(--bg-display);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 0.01em;
	color: var(--bg-ink);
	line-height: 1.2;
}

body.logged-in .portal-top-bar__tagline {
	font-size: 0.84rem;
	color: var(--bg-muted);
	line-height: 1.25;
}

body.logged-in .portal-top-bar__title {
	display: none !important;
}

body.logged-in .portal-top-bar__actions {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	flex: 0 0 auto;
	margin-left: auto;
}

body.logged-in .portal-profile-menu {
	position: relative;
	margin-left: 0 !important;
}

body.logged-in .portal-profile-menu__toggle {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.45rem !important;
	width: auto !important;
	min-width: 2.75rem;
	height: 2.5rem !important;
	padding: 0 0.65rem 0 0.35rem !important;
	border: 1px solid var(--bg-line) !important;
	border-radius: var(--bg-radius-sm) !important;
	background: var(--bg-card) !important;
	color: var(--bg-ink) !important;
	font-size: 0.9rem !important;
	box-shadow: none !important;
}

body.logged-in .portal-profile-menu__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.85rem;
	height: 1.85rem;
	border-radius: 50%;
	background: var(--bg-brand);
	color: #fff;
	font-family: var(--bg-display);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.02em;
}

body.logged-in .portal-profile-menu__chevron {
	font-size: 1.1rem;
	opacity: 0.7;
}

body.logged-in .portal-profile-menu__popup {
	border-radius: var(--bg-radius-sm) !important;
	border-color: var(--bg-line) !important;
	background: var(--bg-card) !important;
	box-shadow: var(--bg-shadow) !important;
}

body.logged-in .portal-profile-menu__email {
	color: var(--bg-ink) !important;
	border-bottom-color: var(--bg-line) !important;
}

body.logged-in .portal-mobile-menu-toggle {
	display: none !important;
}

body.logged-in #content .inner-content {
	max-width: 1180px;
	padding: 1.35rem 1.5rem 2.5rem;
}

/* Section local nav — same content column as .inner-content */
body.logged-in .portal-section-nav {
	margin-left: var(--bg-sidebar-width);
	width: calc(100% - var(--bg-sidebar-width));
	max-width: calc(100% - var(--bg-sidebar-width));
	padding: 0.65rem 1.5rem 0;
	background: var(--bg-canvas);
	border-bottom: 1px solid transparent;
	box-sizing: border-box;
}

body.logged-in .portal-section-nav .portal-local-nav {
	max-width: 1180px;
	width: 100%;
	margin-left: 0;
	margin-right: auto;
	box-sizing: border-box;
}

body.logged-in .portal-local-nav {
	display: flex !important;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0 0 0.85rem;
	padding: 0.25rem;
	background: var(--bg-card);
	border: 1px solid var(--bg-line);
	border-radius: var(--bg-radius-sm);
	box-shadow: none;
}

body.logged-in .portal-local-nav__item {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0.35rem 0.8rem;
	border-radius: var(--bg-radius-sm);
	color: var(--bg-muted) !important;
	font-family: var(--bg-font);
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none !important;
	background: transparent;
	border: 0;
}

body.logged-in .portal-local-nav__item:hover,
body.logged-in .portal-local-nav__item:focus-visible {
	color: var(--bg-ink) !important;
	background: rgba(20, 17, 15, 0.05);
}

html[data-theme="dark"] body.logged-in .portal-local-nav__item:hover,
html[data-theme="dark"] body.logged-in .portal-local-nav__item:focus-visible {
	background: rgba(255, 255, 255, 0.06);
}

body.logged-in .portal-local-nav__item.is-active,
body.logged-in .portal-local-nav__item[aria-current="page"] {
	background: rgba(139, 26, 26, 0.12) !important;
	color: var(--bg-brand) !important;
}

@media (max-width: 768px) {
	body.logged-in .portal-top-bar,
	body:not(.not_logged_in) .portal-top-bar {
		margin-left: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		gap: 0.65rem !important;
		padding: 0.55rem 0.85rem !important;
		min-height: 56px !important;
	}

	body.logged-in .portal-top-bar__main {
		flex: 1 1 auto;
		min-width: 0;
		gap: 0.55rem;
	}

	body.logged-in .portal-top-bar__greeting {
		min-width: 0;
		flex: 1 1 auto;
	}

	body.logged-in .portal-top-bar__hello {
		font-size: 0.95rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	body.logged-in .portal-top-bar__actions {
		flex: 0 0 auto;
		margin-left: 0;
	}

	body.logged-in .portal-profile-menu__toggle {
		min-width: 2.5rem;
		height: 2.5rem !important;
		padding: 0 0.45rem 0 0.3rem !important;
	}

	body.logged-in .portal-mobile-menu-toggle {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex: 0 0 44px !important;
		width: 44px !important;
		height: 44px !important;
		padding: 0 !important;
		border: 1px solid var(--bg-line) !important;
		border-radius: var(--bg-radius-sm) !important;
		background: var(--bg-card) !important;
		box-shadow: none !important;
	}

	body.logged-in .portal-mobile-menu-toggle__icon {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 18px;
		height: 14px;
	}

	body.logged-in .portal-mobile-menu-toggle__bar {
		display: block;
		width: 100%;
		height: 2px;
		border-radius: 999px;
		background: var(--bg-ink);
	}

	body.logged-in .portal-section-nav {
		margin-left: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 0.85rem;
		padding-right: 0.85rem;
	}

	body.logged-in .portal-top-bar__tagline {
		display: none;
	}

	body.logged-in #content .inner-content {
		padding: 1.15rem 0.85rem 2rem;
	}
}

/* Viewer / gallery selection bar */
body.logged-in .viewer-selection-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0.65rem 0.85rem;
	background: var(--bg-card);
	border: 1px solid var(--bg-line);
	border-radius: var(--bg-radius-sm);
	box-shadow: none;
}

body.logged-in .viewer-selection-bar[hidden] {
	display: none !important;
}

body.logged-in .viewer-selection-bar__count {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--bg-ink);
	margin-right: auto;
}

body.logged-in .media-filters--viewer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.85rem;
	flex-wrap: wrap;
	margin-bottom: 0.85rem;
}

body.logged-in .media-filters--viewer .media-filters__controls {
	width: 100%;
	justify-content: space-between;
}

body.logged-in .media-filters--viewer .media-filter-actions {
	margin-left: auto;
}

/* Empty / notice */
.portal-empty-state {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.65rem;
	padding: 1.5rem 1.25rem;
	background: var(--bg-card);
	border: 1px solid var(--bg-line);
	border-radius: var(--bg-radius);
	box-shadow: var(--bg-shadow);
}

.portal-empty-state--compact {
	align-items: center;
	text-align: center;
}

.portal-empty-state__icon {
	font-size: 1.75rem;
	color: var(--bg-muted);
}

.portal-empty-state__title {
	margin: 0;
	font-family: var(--bg-display);
	font-size: 1.25rem;
	font-weight: 700;
}

.portal-empty-state__text,
.portal-empty-state__hint {
	margin: 0;
	color: var(--bg-muted);
	line-height: 1.5;
	max-width: 36rem;
}

.bg-info-banner {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	padding: 0.85rem 1rem;
	margin-bottom: 1.15rem;
	background: var(--bg-info-soft);
	border-radius: var(--bg-radius-sm);
	color: var(--bg-ink);
	font-size: 0.95rem;
}

.bg-info-banner__icon {
	flex: 0 0 auto;
	margin-top: 0.1rem;
	color: var(--bg-success);
}


/* Hide duplicate chrome title — pages own the H1 */
body.logged-in .portal-top-bar__title {
	display: none !important;
}

.bg-stats-strip__heading {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0.85rem 1.1rem 0.2rem;
	font-family: var(--bg-font);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--bg-muted);
}

.bg-stats-panel {
	margin-bottom: 1.25rem;
}

.bg-stats-panel .bg-stats-strip {
	margin-bottom: 0;
}

/* Stats strip (Photos) */
.bg-stats-strip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	background: var(--bg-card);
	border: 1px solid var(--bg-line);
	border-radius: var(--bg-radius);
	box-shadow: var(--bg-shadow);
	margin-bottom: 1.25rem;
	overflow: hidden;
}

.bg-stats-strip__item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1rem 1.1rem;
	border-right: 1px solid var(--bg-line);
}

.bg-stats-strip__item:last-child {
	border-right: none;
}

.bg-stats-strip__icon {
	font-size: 1.25rem;
	color: var(--bg-muted);
	margin-top: 0.15rem;
}

.bg-stats-strip__label {
	display: block;
	font-size: 0.78rem;
	color: var(--bg-muted);
	margin-bottom: 0.15rem;
}

.bg-stats-strip__value {
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--bg-ink);
}

@media (max-width: 900px) {
	.bg-stats-strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bg-stats-strip__item:nth-child(2) {
		border-right: none;
	}

	.bg-stats-strip__item:nth-child(1),
	.bg-stats-strip__item:nth-child(2) {
		border-bottom: 1px solid var(--bg-line);
	}
}

@media (max-width: 560px) {
	.bg-stats-strip {
		grid-template-columns: 1fr;
	}

	.bg-stats-strip__item {
		border-right: none;
		border-bottom: 1px solid var(--bg-line);
	}

	.bg-stats-strip__item:last-child {
		border-bottom: none;
	}
}

/* Camera cards (mockup) */
.bg-camera-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.1rem;
}

.bg-camera-card {
	display: flex;
	flex-direction: column;
	background: var(--bg-card);
	border: 1px solid var(--bg-line);
	border-radius: var(--bg-radius);
	box-shadow: var(--bg-shadow);
	overflow: hidden;
}

.bg-camera-card__head {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.95rem 1rem 0.55rem;
}

.bg-camera-card__name {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin: 0;
	font-family: var(--bg-display);
	font-size: 1.2rem;
	font-weight: 700;
}

.bg-camera-card__shared-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
	color: #ffffff;
	background: #2f5d7a;
	border: 1px solid #244a63;
	box-shadow: 0 1px 2px rgba(20, 17, 15, 0.12);
	white-space: nowrap;
	vertical-align: middle;
}

html[data-theme="dark"] .bg-camera-card__shared-pill {
	color: #f0f6fb;
	background: #3d7396;
	border-color: #4f86aa;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.viewer-page.is-shared-viewer .media-card__select,
.media-card.is-shared-media .media-card__select {
	display: none;
}

.media-card__shared-badge {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(47, 93, 122, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.55);
	color: #ffffff;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 2px 8px rgba(5, 10, 21, 0.35);
}

html[data-theme="dark"] .media-card__shared-badge {
	background: rgba(61, 115, 150, 0.94);
	border-color: rgba(240, 246, 251, 0.55);
}

.bg-camera-card__name a {
	color: var(--bg-ink) !important;
	text-decoration: none;
}

.bg-camera-card__name a:hover {
	color: var(--bg-brand) !important;
}

.bg-camera-card__property {
	margin: 0.15rem 0 0;
	font-size: 0.88rem;
	color: var(--bg-muted);
}

.bg-camera-card__media {
	display: block;
	position: relative;
	aspect-ratio: 16 / 10;
	background: #1a1a1a;
	overflow: hidden;
}

.bg-camera-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bg-camera-card__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	height: 100%;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.9rem;
}

.bg-camera-card__badge {
	position: absolute;
	top: 0.65rem;
	right: 0.65rem;
	background: var(--bg-brand);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	padding: 0.2rem 0.45rem;
	border-radius: 4px;
}

.bg-camera-card__status {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.75rem 1rem 0.35rem;
	font-size: 0.88rem;
	font-weight: 600;
}

.bg-camera-card__status-dot {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--bg-success);
}

.bg-camera-card__status.is-inactive .bg-camera-card__status-dot {
	background: var(--bg-muted);
}

.bg-camera-card__meta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.65rem 0.85rem;
	padding: 0.35rem 1rem 0.85rem;
}

.bg-camera-card__meta-item {
	min-width: 0;
}

.bg-camera-card__meta-label {
	display: block;
	font-size: 0.72rem;
	color: var(--bg-muted);
	margin-bottom: 0.1rem;
}

.bg-camera-card__meta-value {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--bg-ink);
}

.bg-camera-card__meta-value.is-warn {
	color: var(--bg-warning);
}

.bg-camera-card__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.55rem;
	padding: 0 1rem 1rem;
	margin-top: auto;
}

.bg-camera-card__actions .btn {
	width: 100%;
	justify-content: center;
}

/* Property cards (mockup) */
.bg-property-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.bg-property-card {
	display: grid;
	grid-template-columns: minmax(180px, 260px) 1fr auto;
	gap: 1.1rem;
	align-items: stretch;
	padding: 1rem;
	background: var(--bg-card);
	border: 1px solid var(--bg-line);
	border-radius: var(--bg-radius);
	box-shadow: var(--bg-shadow);
}

.bg-property-card__media {
	display: block;
	border-radius: var(--bg-radius-sm);
	overflow: hidden;
	background: #1a1a1a;
	aspect-ratio: 16 / 11;
	min-height: 120px;
}

.bg-property-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bg-property-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: rgba(255, 255, 255, 0.65);
	font-size: 1.5rem;
}

.bg-property-card__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.35rem;
}

.bg-property-card__title {
	margin: 0;
	font-family: var(--bg-display);
	font-size: 1.45rem;
	font-weight: 700;
}

.bg-property-card__title a {
	color: var(--bg-ink) !important;
	text-decoration: none;
}

.bg-property-card__title a:hover {
	color: var(--bg-brand) !important;
}

html[data-theme="dark"] .bg-toolbar .form-select,
html[data-theme="dark"] .dashboard-media-filters .form-select,
html[data-theme="dark"] .bg-toolbar .form-control {
	background-color: #2f2b26;
	color: var(--bg-ink);
	border-color: var(--bg-line);
}

.bg-property-card__row {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--bg-muted);
	font-size: 0.92rem;
}

.bg-property-card__row .bx {
	font-size: 1rem;
}

.bg-property-card__actions {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.55rem;
	min-width: 10.5rem;
}

.bg-property-card__actions .btn {
	width: 100%;
	justify-content: center;
}

@media (max-width: 820px) {
	.bg-property-card {
		grid-template-columns: 1fr;
	}

	.bg-property-card__actions {
		flex-direction: row;
		min-width: 0;
	}
}

/* Filter toolbar + Photos gallery (mockup) */
.bg-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.bg-toolbar .form-select,
.bg-toolbar .form-control {
	border-radius: var(--bg-radius-sm);
	border-color: var(--bg-line);
	background-color: var(--bg-card);
	min-height: 2.5rem;
}

.bg-toolbar__grow {
	flex: 1 1 14rem;
}

.photos-page .bg-gallery-panel {
	margin-top: 0.35rem;
}

.photos-page .bg-gallery-toolbar {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
	margin-bottom: 1.1rem;
}

.photos-page .bg-gallery-toolbar__title {
	margin: 0;
	font-family: var(--bg-font);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--bg-ink);
}

.photos-page .bg-gallery-toolbar__row {
	display: flex !important;
	flex-wrap: nowrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.85rem 1.25rem;
	width: 100%;
}

.photos-page .bg-gallery-toolbar__filters,
.photos-page .dashboard-media-filters {
	display: flex !important;
	flex-wrap: nowrap;
	align-items: flex-end;
	gap: 0.65rem !important;
	flex: 1 1 auto;
	min-width: 0;
	width: auto !important;
	max-width: calc(100% - 14rem);
	margin: 0 !important;
}

.photos-page .dashboard-filter-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
	flex: 1 1 9.5rem;
	max-width: 14rem;
	margin-left: 0 !important;
}

.photos-page .bg-gallery-toolbar__actions {
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	gap: 0.85rem !important;
	flex: 0 0 auto;
	margin-left: auto;
	padding-bottom: 0;
}

.photos-page .dashboard-filter-field .form-label {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bg-muted);
}

.photos-page .dashboard-filter-field .form-select {
	min-width: 0;
	width: 100%;
	min-height: 2.55rem;
	padding: 0.45rem 0.75rem;
	padding-right: 2.25rem;
	background-color: var(--bg-card) !important;
	border: 1px solid var(--bg-line) !important;
	border-radius: var(--bg-radius-sm) !important;
	color: var(--bg-ink);
	font-family: var(--bg-font);
	font-size: 0.95rem;
	box-shadow: none !important;
}

.photos-page .media-filter-actions,
.viewer-page .media-filter-actions {
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	gap: 0.85rem !important;
	flex-wrap: nowrap;
	width: auto;
}

.photos-page .media-filter-actions-menu,
.viewer-page .media-filter-actions-menu {
	position: relative;
	flex: 0 0 auto;
}

.photos-page .bg-new-only-toggle,
.viewer-page .bg-new-only-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 2.55rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--bg-ink);
	font-family: var(--bg-font);
	font-size: 0.92rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.photos-page .bg-new-only-toggle__track,
.viewer-page .bg-new-only-toggle__track {
	position: relative;
	width: 2.4rem;
	height: 1.35rem;
	border-radius: 999px;
	background: rgba(106, 101, 96, 0.35);
	border: 1px solid var(--bg-line);
	flex: 0 0 auto;
	transition: background 0.15s ease;
}

.photos-page .bg-new-only-toggle__thumb,
.viewer-page .bg-new-only-toggle__thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	transition: transform 0.15s ease;
}

.photos-page .bg-new-only-toggle.is-active .bg-new-only-toggle__track,
.viewer-page .bg-new-only-toggle.is-active .bg-new-only-toggle__track {
	background: var(--bg-brand);
	border-color: var(--bg-brand);
}

.photos-page .bg-new-only-toggle.is-active .bg-new-only-toggle__thumb,
.viewer-page .bg-new-only-toggle.is-active .bg-new-only-toggle__thumb {
	transform: translateX(1.05rem);
}

.photos-page .bg-gallery-actions-btn,
.photos-page #dashboardMediaActionsMenu,
.viewer-page .bg-gallery-actions-btn,
.viewer-page #viewerMediaActionsMenu {
	display: inline-flex !important;
	align-items: center;
	gap: 0.35rem;
	min-height: 2.55rem !important;
	padding: 0.45rem 0.95rem !important;
	white-space: nowrap;
}

.photos-page .media-filter-actions-popup,
.viewer-page .media-filter-actions-popup {
	right: 0;
	left: auto;
	min-width: 11rem;
	border-radius: var(--bg-radius-sm);
	border-color: var(--bg-line);
	background: var(--bg-card);
	color: var(--bg-ink);
	z-index: 40;
}

@media (max-width: 900px) {
	.photos-page .bg-gallery-toolbar__row {
		flex-wrap: wrap;
		flex-direction: column;
		align-items: stretch;
	}

	.photos-page .bg-gallery-toolbar__filters,
	.photos-page .dashboard-media-filters {
		flex-wrap: wrap;
		max-width: 100%;
	}

	.photos-page .dashboard-filter-field {
		flex: 1 1 10rem;
		max-width: none;
	}

	.photos-page .bg-gallery-toolbar__actions {
		margin-left: 0;
		justify-content: flex-start;
		flex-wrap: wrap;
		width: 100%;
	}

	.photos-page .media-filter-actions {
		justify-content: flex-start;
	}
}

body.logged-in .header-hr {
	display: none;
}

html[data-theme="dark"] body.logged-in .portal-profile-menu__toggle {
	background: var(--bg-card) !important;
	border-color: var(--bg-line) !important;
	color: var(--bg-ink) !important;
}

html[data-theme="dark"] body.logged-in .portal-profile-menu__popup {
	background: var(--bg-card) !important;
	border-color: var(--bg-line) !important;
}

html[data-theme="dark"] body.logged-in .portal-profile-menu__email,
html[data-theme="dark"] body.logged-in .portal-profile-menu__action,
html[data-theme="dark"] body.logged-in .portal-profile-menu__logout {
	color: var(--bg-ink) !important;
}

html[data-theme="dark"] body.logged-in #content,
html[data-theme="dark"] body.logged-in .portal-top-bar,
html[data-theme="dark"] body.logged-in .portal-section-nav {
	background: var(--bg-canvas) !important;
}

html[data-theme="dark"] body.logged-in .metabox,
html[data-theme="dark"] body.logged-in .data-usage-card,
html[data-theme="dark"] body.logged-in .bg-stats-strip,
html[data-theme="dark"] body.logged-in .bg-camera-card,
html[data-theme="dark"] body.logged-in .bg-property-card,
html[data-theme="dark"] body.logged-in .billing-hub-card,
html[data-theme="dark"] body.logged-in .portal-list-card,
html[data-theme="dark"] body.logged-in .media-day,
html[data-theme="dark"] body.logged-in .media-days > section {
	background: var(--bg-card) !important;
	border-color: var(--bg-line) !important;
	color: var(--bg-ink);
}

html[data-theme="dark"] body.logged-in .form-control,
html[data-theme="dark"] body.logged-in .form-select,
html[data-theme="dark"] body.logged-in .photos-page .dashboard-filter-field .form-select {
	background-color: var(--bg-input, #141b24) !important;
	border-color: var(--bg-line) !important;
	color: var(--bg-ink) !important;
}

html[data-theme="dark"] body.logged-in select:not([multiple]):not([size]),
html[data-theme="dark"] body.logged-in .form-select,
html[data-theme="dark"] body.logged-in select.form-control:not([multiple]):not([size]),
html[data-theme="dark"] body.logged-in .photos-page .dashboard-filter-field .form-select {
	background-image: var(--bg-select-caret) !important;
	background-position: right 0.75rem center !important;
	background-size: 12px 12px !important;
	background-repeat: no-repeat !important;
}

html[data-theme="dark"] body.logged-in a:not(.btn):not(.menuItem):not(.portal-local-nav__item):not(.portal-menu__link):not(.portal-profile-menu__action):not(.portal-profile-menu__logout) {
	color: var(--bg-link);
}

html[data-theme="dark"] body.logged-in .text-muted,
html[data-theme="dark"] body.logged-in .photos-overview-note {
	color: var(--bg-muted) !important;
}

html[data-theme="dark"] body.logged-in .bg-new-only-toggle__track {
	background: rgba(154, 166, 181, 0.35);
}

html[data-theme="dark"] body.logged-in #sideBar {
	background-color: var(--bg-sidebar) !important;
	background-image: none !important;
}

html[data-theme="dark"] body.logged-in #sideBar::after {
	opacity: 0.11;
	filter: saturate(0.4) brightness(0.58) contrast(0.94);
	mix-blend-mode: normal;
}

html[data-theme="dark"] body.logged-in .portal-local-nav {
	background: var(--bg-card) !important;
	border-color: var(--bg-line) !important;
}

html[data-theme="dark"] body.logged-in .portal-local-nav__item.is-active,
html[data-theme="dark"] body.logged-in .portal-local-nav__item[aria-current="page"] {
	background: rgba(194, 58, 58, 0.18) !important;
	color: #e8b4b4 !important;
}

html[data-theme="dark"] body.logged-in .bg-page-heading,
html[data-theme="dark"] body.logged-in .bg-gallery-toolbar__title,
html[data-theme="dark"] body.logged-in .bg-stats-strip__value {
	color: var(--bg-ink) !important;
}



.cameras-page .bg-toolbar,
.properties-page .bg-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem;
}

.cameras-page .dashboard-filter-field,
.devices-page .dashboard-filter-field {
	min-width: 10.5rem;
}

/* Billing hub */
.billing-hub-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 0.85rem;
	margin-bottom: 1.25rem;
}

.billing-hub-card {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.1rem 1rem;
	min-height: 8.5rem;
	border-radius: var(--bg-radius);
	border: 1px solid var(--bg-line);
	background: var(--bg-card);
	box-shadow: var(--bg-shadow);
	color: var(--bg-ink);
	text-decoration: none;
}

.billing-hub-card:hover,
.billing-hub-card:focus-visible {
	border-color: var(--bg-brand);
	color: var(--bg-ink);
}

.billing-hub-card__icon {
	font-size: 1.35rem;
	color: var(--bg-brand);
}

.billing-hub-card__title {
	font-weight: 700;
}

.billing-hub-card__text {
	font-size: 0.875rem;
	color: var(--bg-muted);
	line-height: 1.4;
}

.bg-page-subheading a {
	color: var(--bg-brand);
	font-weight: 600;
	text-decoration: none;
}

.bg-page-subheading a:hover {
	text-decoration: underline;
}

/* Device detail */
.manage-device-page .device-detail-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	padding: 0.35rem;
	margin-bottom: 1.15rem;
	background: var(--bg-card);
	border-radius: var(--bg-radius);
	border: 1px solid var(--bg-line);
	box-shadow: var(--bg-shadow);
}

.device-detail-tabs__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 2.5rem;
	padding: 0.4rem 0.85rem;
	border-radius: var(--bg-radius-sm);
	color: var(--bg-muted);
	font-weight: 600;
	font-size: 0.92rem;
	text-decoration: none;
}

.device-detail-tabs__item:hover {
	color: var(--bg-ink);
	background: rgba(20, 17, 15, 0.04);
}

.device-detail-tabs__item.is-active {
	background: rgba(139, 26, 26, 0.1);
	color: var(--bg-brand);
}

.device-live-view-panel {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.15rem;
	border: 1px solid var(--bg-line);
	border-radius: var(--bg-radius);
	background: linear-gradient(180deg, #fff 0%, #f7f5f1 100%);
}

.device-live-view-panel__copy {
	flex: 1 1 16rem;
	max-width: 40rem;
}

.device-live-view-panel__copy strong {
	display: block;
	font-family: var(--bg-display);
	font-size: 1.15rem;
	margin-bottom: 0.35rem;
}

.device-live-view-panel__copy p {
	margin: 0;
	color: var(--bg-muted);
	line-height: 1.5;
}

.device-live-view-panel__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.manage-device-page .side-content .device-live-view-panel {
	flex-direction: column;
	padding: 0;
	border: 0;
	background: transparent;
}

.manage-device-page .side-content .device-live-view-panel__copy {
	max-width: none;
}

.bg-device-timing__stat-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.55rem;
	margin-bottom: 1rem;
}

.bg-device-timing__stat {
	padding: 0.7rem 0.8rem;
	border: 1px solid var(--bg-line);
	border-radius: var(--bg-radius-sm, 6px);
	background: rgba(20, 17, 15, 0.02);
}

.bg-device-timing__stat-label {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bg-muted);
}

.bg-device-timing__stat-label .bx {
	font-size: 0.95rem;
}

.bg-device-timing__stat-value {
	margin-top: 0.2rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--bg-ink);
}

.bg-device-timing__stat-unit {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--bg-muted);
}

.bg-device-timing__chart {
	margin-bottom: 1rem;
	padding: 0.85rem 0.9rem;
	border: 1px solid var(--bg-line);
	border-radius: var(--bg-radius-sm, 6px);
	background: rgba(20, 17, 15, 0.02);
}

.bg-device-timing__chart:last-child {
	margin-bottom: 0;
}

.bg-device-timing__chart-title {
	margin: 0 0 0.65rem;
	font-size: 0.9rem;
	font-weight: 700;
}

.bg-device-timing__bars {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 7.5rem;
	padding-top: 0.25rem;
	border-bottom: 1px solid var(--bg-line);
}

.bg-device-timing__bars--dow {
	height: 5rem;
}

.bg-device-timing__bar {
	flex: 1 1 0;
	min-width: 0;
	border-radius: 2px 2px 0 0;
	background: rgba(20, 17, 15, 0.18);
}

.bg-device-timing__bar.is-peak {
	background: var(--bg-brand, #8b1a1a);
}

.bg-device-timing__bar.is-crepuscular {
	background: #c28a2e;
}

.bg-device-timing__bar-labels {
	display: flex;
	justify-content: space-between;
	margin-top: 0.35rem;
	font-size: 0.68rem;
	color: var(--bg-muted);
}

.bg-device-timing__bar-labels--dow {
	justify-content: space-around;
}

.bg-device-timing__periods {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.bg-device-timing__period-row {
	display: grid;
	grid-template-columns: 3.5rem 1fr 2.25rem;
	align-items: center;
	gap: 0.5rem;
}

.bg-device-timing__period-label {
	font-size: 0.8rem;
	font-weight: 600;
}

.bg-device-timing__period-track {
	height: 0.45rem;
	border-radius: 999px;
	background: rgba(20, 17, 15, 0.08);
	overflow: hidden;
}

.bg-device-timing__period-fill {
	height: 100%;
	border-radius: inherit;
	background: var(--bg-brand, #8b1a1a);
}

.bg-device-timing__period-count {
	text-align: right;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--bg-muted);
}

html[data-theme="dark"] .bg-device-timing__stat,
html[data-theme="dark"] .bg-device-timing__chart {
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .bg-device-timing__bar {
	background: rgba(255, 255, 255, 0.22);
}

html[data-theme="dark"] .bg-device-timing__bar.is-peak {
	background: var(--bg-brand, #c23a3a);
}

html[data-theme="dark"] .bg-device-timing__bar.is-crepuscular {
	background: #d4a017;
}

html[data-theme="dark"] .bg-device-timing__period-track {
	background: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .bg-device-timing__period-fill {
	background: var(--bg-brand, #c23a3a);
}

.manage-device-page .device-detail-layout {
	align-items: flex-start;
}

.manage-device-page .device-detail-layout > .main-content,
.manage-device-page .device-detail-layout > .side-content {
	min-width: 0;
}

.manage-device-page .device-side-meta {
	list-style: none;
	margin: 0;
	padding: 0;
}

.manage-device-page .device-side-meta li {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--bg-line);
}

.manage-device-page .device-side-meta li:first-child {
	padding-top: 0;
}

.manage-device-page .device-side-meta li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.manage-device-page .device-side-meta__label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bg-muted);
}

.manage-device-page .device-side-meta__value {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--bg-ink);
	word-break: break-word;
}

.device-recordings-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.45rem;
	padding: 1.25rem 1.15rem;
	border: 1px dashed var(--bg-line);
	border-radius: var(--bg-radius);
	background: #faf9f6;
	color: var(--bg-muted);
}

.device-recordings-empty__icon {
	font-size: 1.6rem;
	color: var(--bg-brand);
}

.device-recordings-empty__title {
	color: var(--bg-ink);
	font-family: var(--bg-display);
	font-size: 1.1rem;
}

.device-status-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin: 0.5rem 0 1rem;
	font-size: 0.85rem;
	color: var(--bg-muted);
}

.manage-device-page .device-stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: 0.75rem;
}

.manage-device-page .device-stat-card,
.manage-device-page button.device-stat-card {
	border: 1px solid var(--bg-line);
	border-radius: var(--bg-radius-sm);
	background: var(--bg-card);
	box-shadow: none;
	color: var(--bg-ink);
}

.manage-device-page .device-stat-card__icon,
.manage-device-page .device-stat-card__value {
	color: var(--bg-ink);
	opacity: 1;
}

.manage-device-page .device-stat-card__label {
	color: var(--bg-muted);
}

/* Content / CMS pages — brand-red text links so they stand out */
body.logged-in .content-page__article a:not(.btn),
body.logged-in .metabox-content a:not(.btn),
body.logged-in .main-content .metabox-content a:not(.btn),
html[data-theme="dark"] body.logged-in .content-page__article a:not(.btn),
html[data-theme="dark"] body.logged-in .metabox-content a:not(.btn),
html[data-theme="dark"] body.logged-in .main-content .metabox-content a:not(.btn) {
	color: var(--bg-brand) !important;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

body.logged-in .content-page__article a:not(.btn):hover,
body.logged-in .metabox-content a:not(.btn):hover,
body.logged-in .main-content .metabox-content a:not(.btn):hover,
html[data-theme="dark"] body.logged-in .content-page__article a:not(.btn):hover,
html[data-theme="dark"] body.logged-in .metabox-content a:not(.btn):hover,
html[data-theme="dark"] body.logged-in .main-content .metabox-content a:not(.btn):hover {
	color: var(--bg-brand-hover) !important;
}

/* Downloads */
.bgdm-manager .metabox {
	overflow: hidden;
}

/* Sharing */
.sharing-help-list {
	margin: 0;
	padding-left: 1.1rem;
	color: var(--bg-muted);
	line-height: 1.55;
}

.sharing-help-list li + li {
	margin-top: 0.45rem;
}

.sharing-access-list {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.sharing-access-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--bg-line);
	border-radius: var(--bg-radius-sm);
	background: color-mix(in srgb, var(--bg-canvas) 58%, var(--bg-card));
	color: var(--bg-ink);
}

.sharing-access-row__copy {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.sharing-access-row__copy a {
	color: var(--bg-ink);
	text-decoration: none;
	font-weight: 700;
}

.sharing-access-row__copy a:hover {
	color: var(--bg-brand);
}

.sharing-access-row__meta {
	font-size: 0.8rem;
	color: var(--bg-muted);
}

body.logged-in .sharing-page .sharing-access-row .switch .slider {
	background-color: color-mix(in srgb, var(--bg-muted) 45%, var(--bg-line));
}

body.logged-in .sharing-page .sharing-access-row .switch input:checked + .slider {
	background-color: var(--bg-brand);
}

body.logged-in .sharing-page .sharing-access-row .switch .slider:before {
	background-color: var(--bg-card);
}

html[data-theme="dark"] body.logged-in .sharing-page .sharing-access-row {
	background: var(--bg-card) !important;
	border-color: var(--bg-line) !important;
	color: var(--bg-ink) !important;
}

html[data-theme="dark"] body.logged-in .sharing-page .sharing-access-row__copy a {
	color: var(--bg-ink) !important;
}

html[data-theme="dark"] body.logged-in .sharing-page .sharing-access-row__meta {
	color: var(--bg-muted) !important;
}

.account-page #shared-users .metabox-header h3 {
	font-family: var(--bg-display);
}

/* Sharing list — clean person rows (desktop table + mobile cards) */
body.logged-in .account-page #shared-users .sharing-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--bg-line);
	border-radius: var(--bg-radius-sm);
	background: var(--bg-card);
	box-shadow: none;
}

body.logged-in .account-page #shared-users .sharing-table {
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	background: transparent !important;
	box-shadow: none !important;
}

body.logged-in .account-page #shared-users .sharing-table thead th {
	padding: 0.7rem 0.9rem !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bg-muted) !important;
	background: color-mix(in srgb, var(--bg-canvas) 72%, var(--bg-card)) !important;
	border-bottom: 1px solid var(--bg-line) !important;
	border-top: none !important;
	white-space: nowrap;
}

body.logged-in .account-page #shared-users .sharing-table tbody td {
	padding: 0.85rem 0.9rem !important;
	vertical-align: middle;
	background: var(--bg-card) !important;
	color: var(--bg-ink) !important;
	border-top: 1px solid var(--bg-line) !important;
	border-bottom: none !important;
	font-size: 0.925rem !important;
	font-weight: 400 !important;
}

body.logged-in .account-page #shared-users .sharing-table tbody tr:first-child td {
	border-top: none !important;
}

body.logged-in .account-page #shared-users .sharing-table tbody tr:hover td {
	background: color-mix(in srgb, var(--bg-canvas) 70%, var(--bg-card)) !important;
}

body.logged-in .account-page #shared-users .sharing-table tbody td:first-child {
	font-weight: 400 !important;
}

body.logged-in .account-page #shared-users .sharing-table__actions-col,
body.logged-in .account-page #shared-users .sharing-table__actions {
	width: 1%;
	white-space: nowrap;
	text-align: right;
}

body.logged-in .account-page #shared-users .sharing-user {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2rem;
	min-width: 0;
}

body.logged-in .account-page #shared-users .sharing-user__name {
	display: block;
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--bg-ink);
	word-break: break-word;
}

body.logged-in .account-page #shared-users .sharing-user__email {
	display: block;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.35;
	color: var(--bg-muted);
	word-break: break-word;
}

body.logged-in .account-page #shared-users .sharing-user-card {
	gap: 0.85rem;
	padding: 0.95rem 1rem;
	border-color: var(--bg-line);
	background: var(--bg-card);
	box-shadow: none;
}

body.logged-in .account-page #shared-users .sharing-user-card .portal-list-card__actions {
	margin-top: 0;
}

body.logged-in .account-page #shared-users .sharing-user-list {
	gap: 0.65rem;
}

body.logged-in .account-page #shared-users .metabox-content {
	padding-top: 0.15rem;
}

/* HerdVision entry */
.herdvision-page .hv-subscription-btn {
	width: 100%;
}


/* Legacy style.css dark theme uses cold blue-grays — retarget to warm field tokens */
html[data-theme="dark"] body.logged-in .metabox,
html[data-theme="dark"] body.logged-in .data-usage-card,
html[data-theme="dark"] body.logged-in .form-wrapper,
html[data-theme="dark"] body.logged-in .callout-meta-box,
html[data-theme="dark"] body.logged-in .media-day,
html[data-theme="dark"] body.logged-in .media-viewer__empty,
html[data-theme="dark"] body.logged-in .media-filters,
html[data-theme="dark"] body.logged-in .viewer-controls,
html[data-theme="dark"] body.logged-in .account-hub-card,
html[data-theme="dark"] body.logged-in .camera-card,
html[data-theme="dark"] body.logged-in .portal-list-card,
html[data-theme="dark"] body.logged-in .device-detail-tabs,
html[data-theme="dark"] body.logged-in .content-surface-muted,
html[data-theme="dark"] body.logged-in table.dataTable,
html[data-theme="dark"] body.logged-in table.dataTable thead tr,
html[data-theme="dark"] body.logged-in table.dataTable tbody tr {
	background: var(--bg-card) !important;
	color: var(--bg-ink) !important;
	border-color: var(--bg-line) !important;
	box-shadow: var(--bg-shadow) !important;
}

html[data-theme="dark"] body.logged-in .metabox-header,
html[data-theme="dark"] body.logged-in .metabox-header h3,
html[data-theme="dark"] body.logged-in .header h1,
html[data-theme="dark"] body.logged-in .page-title h1,
html[data-theme="dark"] body.logged-in table td,
html[data-theme="dark"] body.logged-in table th,
html[data-theme="dark"] body.logged-in .data-usage-card__value,
html[data-theme="dark"] body.logged-in .data-usage-card__icon {
	color: var(--bg-ink) !important;
}

html[data-theme="dark"] body.logged-in .data-usage-card__hint,
html[data-theme="dark"] body.logged-in .data-usage-card__label,
html[data-theme="dark"] body.logged-in .metabox-content .list-group-item,
html[data-theme="dark"] body.logged-in .portal-meta-list dt,
html[data-theme="dark"] body.logged-in .portal-meta-list__secondary {
	color: var(--bg-muted) !important;
}

html[data-theme="dark"] body.logged-in .metabox hr,
html[data-theme="dark"] body.logged-in .header-hr,
html[data-theme="dark"] body.logged-in .metabox-content .list-group-item,
html[data-theme="dark"] body.logged-in .metabox-content .list-group,
html[data-theme="dark"] body.logged-in table.dataTable.row-border > tbody > tr > th,
html[data-theme="dark"] body.logged-in table.dataTable.row-border > tbody > tr > td {
	border-color: var(--bg-line) !important;
}

html[data-theme="dark"] body.logged-in a:not(.btn):not(.menuItem):not(.portal-local-nav__item):not(.portal-menu__link):not(.portal-profile-menu__action):not(.portal-profile-menu__logout) {
	color: var(--bg-link) !important;
}

html[data-theme="dark"] body.logged-in a:not(.btn):not(.menuItem):not(.portal-local-nav__item):not(.portal-menu__link):not(.portal-profile-menu__action):not(.portal-profile-menu__logout):hover {
	color: var(--bg-link-hover) !important;
}

/* Beat the dark global link rule (extra :not()s) — CMS/content links stay brand red */
html[data-theme="dark"] body.logged-in .metabox-content a:not(.btn):not(.menuItem):not(.portal-local-nav__item):not(.portal-menu__link):not(.portal-profile-menu__action):not(.portal-profile-menu__logout),
html[data-theme="dark"] body.logged-in .content-page__article a:not(.btn):not(.menuItem):not(.portal-local-nav__item):not(.portal-menu__link):not(.portal-profile-menu__action):not(.portal-profile-menu__logout),
html[data-theme="dark"] body.logged-in .main-content .metabox-content a:not(.btn):not(.menuItem):not(.portal-local-nav__item):not(.portal-menu__link):not(.portal-profile-menu__action):not(.portal-profile-menu__logout) {
	color: var(--bg-brand) !important;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

html[data-theme="dark"] body.logged-in .metabox-content a:not(.btn):not(.menuItem):not(.portal-local-nav__item):not(.portal-menu__link):not(.portal-profile-menu__action):not(.portal-profile-menu__logout):hover,
html[data-theme="dark"] body.logged-in .content-page__article a:not(.btn):not(.menuItem):not(.portal-local-nav__item):not(.portal-menu__link):not(.portal-profile-menu__action):not(.portal-profile-menu__logout):hover,
html[data-theme="dark"] body.logged-in .main-content .metabox-content a:not(.btn):not(.menuItem):not(.portal-local-nav__item):not(.portal-menu__link):not(.portal-profile-menu__action):not(.portal-profile-menu__logout):hover {
	color: var(--bg-brand-hover) !important;
}

html[data-theme="dark"] body.logged-in .btn-primary,
html[data-theme="dark"] body.logged-in a.btn-primary,
html[data-theme="dark"] body.logged-in .btn-primary:visited,
html[data-theme="dark"] body.logged-in a.btn-primary:visited,
html[data-theme="dark"] body.logged-in .btn-danger,
html[data-theme="dark"] body.logged-in a.btn-danger,
html[data-theme="dark"] body.logged-in .btn-danger:visited,
html[data-theme="dark"] body.logged-in a.btn-danger:visited {
	background: var(--bg-brand) !important;
	border-color: var(--bg-brand) !important;
	color: #fff !important;
}

html[data-theme="dark"] body.logged-in .btn-primary:hover,
html[data-theme="dark"] body.logged-in a.btn-primary:hover,
html[data-theme="dark"] body.logged-in .btn-danger:hover,
html[data-theme="dark"] body.logged-in a.btn-danger:hover {
	background: var(--bg-brand-hover) !important;
	border-color: var(--bg-brand-hover) !important;
	color: #fff !important;
}

html[data-theme="dark"] body.logged-in .btn-secondary,
html[data-theme="dark"] body.logged-in a.btn-secondary,
html[data-theme="dark"] body.logged-in .btn-secondary:visited,
html[data-theme="dark"] body.logged-in a.btn-secondary:visited,
html[data-theme="dark"] body.logged-in .btn-outline-secondary,
html[data-theme="dark"] body.logged-in a.btn-outline-secondary {
	background: var(--bg-input) !important;
	border-color: var(--bg-line) !important;
	color: var(--bg-ink) !important;
}

@media (max-width: 991px) {
	body.logged-in #sideBar .sideMenu a.menuItem.active::before,
	body.logged-in #sideBar .portal-menu__link.is-active::before {
		display: none;
	}
}

/* Top-bar cart */
body.logged-in .portal-top-bar__actions {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
}

body.logged-in .portal-top-cart {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--bg-line);
	border-radius: var(--bg-radius-sm);
	background: var(--bg-card);
	color: var(--bg-ink) !important;
	text-decoration: none !important;
	flex: 0 0 auto;
}

body.logged-in .portal-top-cart:hover,
body.logged-in .portal-top-cart:focus-visible {
	border-color: var(--bg-brand);
	color: var(--bg-brand) !important;
}

body.logged-in .portal-top-cart__icon {
	font-size: 1.25rem;
	line-height: 1;
}

body.logged-in .portal-top-cart__count {
	position: absolute;
	top: -0.35rem;
	right: -0.35rem;
	min-width: 1.15rem;
	height: 1.15rem;
	padding: 0 0.28rem;
	border-radius: 999px;
	background: var(--bg-brand, #8b1e1e);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1.15rem;
	text-align: center;
}

html[data-theme="dark"] body.logged-in .portal-top-cart {
	background: var(--bg-card);
	border-color: var(--bg-line);
	color: var(--bg-ink) !important;
}

/* Device plan cart page */
.bg-cart-empty {
	padding: 0.5rem 0 0.25rem;
}

.bg-cart-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bg-cart-item {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(10rem, 1.4fr) auto auto;
	gap: 0.75rem 1rem;
	align-items: center;
	padding: 1rem 0;
	border-bottom: 1px solid var(--bg-line, rgba(0, 0, 0, 0.08));
}

.bg-cart-item:first-child {
	padding-top: 0;
}

.bg-cart-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.bg-cart-item__device a {
	font-weight: 600;
	color: inherit !important;
	text-decoration: none !important;
}

.bg-cart-item__device a:hover {
	color: var(--bg-brand) !important;
}

.bg-cart-item__price {
	font-weight: 600;
	white-space: nowrap;
	text-align: right;
}

.bg-cart-item__remove {
	border: 0;
	background: transparent;
	color: var(--bg-muted, #6b7280);
	font-size: 0.85rem;
	padding: 0.25rem 0;
	cursor: pointer;
}

.bg-cart-item__remove:hover {
	color: #b42318;
}

.bg-cart-summary__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.45rem;
}

.bg-cart-summary__row--total {
	margin-top: 0.65rem;
	font-size: 1.05rem;
}

.bg-cart-summary__note {
	margin: 0.75rem 0 1rem;
	font-size: 0.85rem;
	color: var(--bg-muted, #6b7280);
}

.bg-cart-summary__actions {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

@media (max-width: 720px) {
	.bg-cart-item {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"device remove"
			"plan plan"
			"price price";
	}

	.bg-cart-item__device { grid-area: device; }
	.bg-cart-item__plan { grid-area: plan; }
	.bg-cart-item__price { grid-area: price; text-align: left; }
	.bg-cart-item__remove { grid-area: remove; }
}

/* Address city / state / zip — container-aware grid (avoids Bootstrap viewport wrap) */
.bg-form-address-row {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(7.5rem, 0.85fr);
	gap: 0.85rem 1rem;
	align-items: end;
}

.bg-form-address-row .form-group {
	margin-bottom: 0;
	min-width: 0;
}

.bg-form-address-row .form-control,
.bg-form-address-row .form-select {
	width: 100%;
}

@media (max-width: 575.98px) {
	.bg-form-address-row {
		grid-template-columns: 1fr;
	}
}

/* Metabox headers with primary actions (Invite shared user, etc.) */
body.logged-in .metabox-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
}

body.logged-in .metabox-header__copy {
	flex: 1 1 12rem;
	min-width: 0;
}

body.logged-in .metabox-header > .btn,
body.logged-in .metabox-header > a.btn,
body.logged-in .metabox-header__action {
	margin-left: auto;
	flex: 0 0 auto;
	align-self: center;
}

body.logged-in .metabox-header--actions {
	align-items: center;
}

/* Invoice history — reuse devices-table look; fix DataTables chrome */
body.logged-in .billing-page .invoices-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--bg-line);
	border-radius: var(--bg-radius-sm);
	background: var(--bg-card);
	box-shadow: none;
}

body.logged-in .billing-page #bgInvoicesTable_wrapper {
	font-family: var(--bg-font);
	color: var(--bg-ink);
}

body.logged-in .billing-page #bgInvoicesTable_wrapper .dataTables_length,
body.logged-in .billing-page #bgInvoicesTable_wrapper .dataTables_filter,
body.logged-in .billing-page #bgInvoicesTable_wrapper .dataTables_info,
body.logged-in .billing-page #bgInvoicesTable_wrapper .dataTables_paginate {
	padding: 0.75rem 0.85rem 0.65rem;
	font-size: 0.875rem;
	color: var(--bg-muted) !important;
}

body.logged-in .billing-page #bgInvoicesTable_wrapper .dataTables_paginate {
	padding-top: 0.5rem !important;
	padding-bottom: 0.75rem;
}

body.logged-in .billing-page #bgInvoicesTable_wrapper .dataTables_paginate .paginate_button {
	padding: 0.35rem 0.65rem !important;
	margin: 0 0.1rem !important;
	border: 1px solid transparent !important;
	border-radius: var(--bg-radius-sm) !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--bg-ink) !important;
}

body.logged-in .billing-page #bgInvoicesTable_wrapper .dataTables_paginate .paginate_button:hover {
	border-color: var(--bg-line) !important;
	background: var(--bg-canvas) !important;
	color: var(--bg-ink) !important;
}

body.logged-in .billing-page #bgInvoicesTable_wrapper .dataTables_paginate .paginate_button.current,
body.logged-in .billing-page #bgInvoicesTable_wrapper .dataTables_paginate .paginate_button.current:hover {
	border-color: var(--bg-brand) !important;
	background: color-mix(in srgb, var(--bg-brand) 14%, var(--bg-card)) !important;
	color: var(--bg-ink) !important;
	font-weight: 600;
}

body.logged-in .billing-page #bgInvoicesTable_wrapper .dataTables_paginate .paginate_button.disabled,
body.logged-in .billing-page #bgInvoicesTable_wrapper .dataTables_paginate .paginate_button.disabled:hover {
	opacity: 0.45;
	border-color: transparent !important;
	background: transparent !important;
	color: var(--bg-muted) !important;
}

/* Loading overlay — beat DataTables CDN white panel + dark-theme ink clash */
body.logged-in .billing-page #bgInvoicesTable_wrapper div.dataTables_processing,
body.logged-in .billing-page div.dataTables_wrapper div.dataTables_processing {
	position: absolute !important;
	width: auto !important;
	min-width: 10rem;
	margin: 0 !important;
	padding: 0.7rem 1.1rem !important;
	border: 1px solid var(--bg-line) !important;
	border-radius: var(--bg-radius-sm) !important;
	background: var(--bg-card) !important;
	background-color: var(--bg-card) !important;
	box-shadow: var(--bg-shadow) !important;
	color: var(--bg-ink) !important;
	font-family: var(--bg-font) !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em;
	opacity: 1 !important;
}

body.logged-in .billing-page table.devices-table.invoices-table,
body.logged-in .billing-page #bgInvoicesTable {
	width: 100% !important;
	border-collapse: separate;
	border-spacing: 0;
	margin-bottom: 0;
	background: var(--bg-card) !important;
	color: var(--bg-ink) !important;
	border: none !important;
	box-shadow: none !important;
}

body.logged-in .billing-page #bgInvoicesTable.no-footer,
body.logged-in .billing-page #bgInvoicesTable.dataTable {
	border-bottom: none !important;
}

body.logged-in .billing-page #bgInvoicesTable thead th,
body.logged-in .billing-page #bgInvoicesTable thead td {
	background: color-mix(in srgb, var(--bg-canvas) 72%, var(--bg-card)) !important;
	color: var(--bg-ink) !important;
	border-bottom: 1px solid var(--bg-line) !important;
	border-top: none !important;
	font-size: 0.82rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 12px 14px !important;
	vertical-align: middle;
	white-space: nowrap;
}

body.logged-in .billing-page #bgInvoicesTable tbody td,
body.logged-in .billing-page #bgInvoicesTable tbody th {
	background: var(--bg-card) !important;
	color: var(--bg-ink) !important;
	border-top: 1px solid var(--bg-line) !important;
	border-bottom: none !important;
	padding: 12px 14px !important;
	vertical-align: middle;
	font-size: 0.925rem !important;
}

body.logged-in .billing-page #bgInvoicesTable tbody tr.odd td,
body.logged-in .billing-page #bgInvoicesTable tbody tr:nth-child(even) td {
	background: color-mix(in srgb, var(--bg-canvas) 55%, var(--bg-card)) !important;
}

body.logged-in .billing-page #bgInvoicesTable tbody tr:hover td {
	background: color-mix(in srgb, var(--bg-canvas) 78%, var(--bg-card)) !important;
}

body.logged-in .billing-page #bgInvoicesTable tbody td:first-child {
	font-weight: 600;
}

body.logged-in .billing-page #bgInvoicesTable a:not(.btn) {
	color: var(--bg-brand) !important;
	font-weight: 600;
	text-decoration: none;
}

body.logged-in .billing-page #bgInvoicesTable a:not(.btn):hover {
	color: var(--bg-brand-hover) !important;
	text-decoration: underline;
}

body.logged-in .billing-page #bgInvoicesTable .btn,
body.logged-in .billing-page #bgInvoicesTable a.btn {
	min-height: 2.25rem;
	min-width: auto;
	padding: 0.35rem 0.75rem;
}

/* Status chips — align with device-status-chip tone */
body.logged-in .billing-page .invoice-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem 0.65rem;
	margin: 0;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
	background: color-mix(in srgb, var(--bg-ink) 8%, transparent);
	color: var(--bg-ink);
}

body.logged-in .billing-page .invoice-status.paid {
	background: color-mix(in srgb, var(--bg-success) 16%, transparent);
	border-color: color-mix(in srgb, var(--bg-success) 28%, transparent);
	color: var(--bg-success);
}

body.logged-in .billing-page .invoice-status.open {
	background: color-mix(in srgb, var(--bg-warning) 16%, transparent);
	border-color: color-mix(in srgb, var(--bg-warning) 28%, transparent);
	color: var(--bg-warning);
}

body.logged-in .billing-page .invoice-status.uncollectible,
body.logged-in .billing-page .invoice-status.past_due,
body.logged-in .billing-page .invoice-status.unpaid {
	background: color-mix(in srgb, var(--bg-danger) 14%, transparent);
	border-color: color-mix(in srgb, var(--bg-danger) 28%, transparent);
	color: var(--bg-danger);
}

body.logged-in .billing-page .invoice-status.void,
body.logged-in .billing-page .invoice-status.draft,
body.logged-in .billing-page .invoice-status.none {
	background: color-mix(in srgb, var(--bg-muted) 14%, transparent);
	border-color: var(--bg-line);
	color: var(--bg-muted);
}

/* Automatic / recurring invoice marker */
body.logged-in .billing-page .invoice-description {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	max-width: 100%;
}

body.logged-in .billing-page .invoice-description__icon {
	flex: 0 0 auto;
	font-size: 1.05rem;
	line-height: 1;
	color: var(--bg-brand);
}

body.logged-in .billing-page .invoice-description__text {
	min-width: 0;
}

body.logged-in .billing-page .invoice-auto-legend {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0 0 0.85rem;
	font-size: 0.82rem;
	color: var(--bg-muted);
}

body.logged-in .billing-page .invoice-auto-legend .bx {
	font-size: 1rem;
	color: var(--bg-brand);
}

body.logged-in .billing-page .invoices-filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem 0.85rem;
	margin: 0 0 0.85rem;
}

body.logged-in .billing-page .invoices-filter-bar__label {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bg-muted);
}

body.logged-in .billing-page .invoices-filter-bar__group {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	padding: 0.2rem;
	background: var(--bg-card);
	border: 1px solid var(--bg-line);
	border-radius: var(--bg-radius-sm);
}

body.logged-in .billing-page .invoices-filter-bar__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	min-height: 2.15rem;
	padding: 0.3rem 0.75rem;
	border: 1px solid transparent;
	border-radius: var(--bg-radius-sm);
	background: transparent;
	color: var(--bg-ink);
	font-family: var(--bg-font);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

body.logged-in .billing-page .invoices-filter-bar__btn .bx {
	font-size: 1rem;
	color: var(--bg-brand);
}

body.logged-in .billing-page .invoices-filter-bar__btn:hover,
body.logged-in .billing-page .invoices-filter-bar__btn:focus-visible {
	background: var(--bg-canvas);
	outline: none;
}

body.logged-in .billing-page .invoices-filter-bar__btn.is-active {
	background: color-mix(in srgb, var(--bg-brand) 12%, var(--bg-card));
	border-color: color-mix(in srgb, var(--bg-brand) 35%, var(--bg-line));
	color: var(--bg-ink);
}

body.logged-in .billing-page .invoices-filter-bar__select {
	display: none;
	min-width: 12rem;
	max-width: 100%;
}

@media (max-width: 575.98px) {
	body.logged-in .billing-page .invoices-filter-bar__group {
		display: none;
	}

	body.logged-in .billing-page .invoices-filter-bar__select {
		display: block;
	}
}