/**
 * JP Dashboard — Sejoli Member Area sync
 * Scoped to body.jp-dashboard-member-sync
 */

body.jp-dashboard-member-sync {
	--tm-shell-bg: var(--tm-a-surface, #ffffff);
	--tm-shell-bg-hover: #f1f5f9;
	--tm-shell-bg-active: rgba(var(--tm-a-primary-rgb, 0, 170, 91), 0.1);
	--tm-shell-border: var(--tm-a-border, #e8eef5);
	--tm-shell-text: #475569;
	--tm-shell-text-muted: #94a3b8;
	--tm-shell-text-strong: var(--tm-a-text, #1a1a2e);
	--tm-shell-bg-soft: #f8fafc;
	--tm-shell-primary: var(--tm-a-primary, #00aa5b);
	--tm-shell-primary-dark: var(--tm-a-primary-dark, #008f4c);
	--tm-shell-primary-rgb: var(--tm-a-primary-rgb, 0, 170, 91);
	--tm-shell-icon-bg: rgba(var(--tm-shell-primary-rgb), 0.12);
	--tm-shell-radius: var(--tm-a-radius-sm, 8px);
	--tm-shell-width: 220px;
	background: var(--tm-a-bg, #f0f3f7) !important;
	color: var(--tm-a-text, #1a1a2e);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Hide WordPress admin bar — clean member area shell */
body.jp-dashboard-member-sync #wpadminbar {
	display: none !important;
}

html:has(body.jp-dashboard-member-sync),
html.wp-toolbar:has(body.jp-dashboard-member-sync) {
	margin-top: 0 !important;
}

body.jp-dashboard-member-sync.admin-bar {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

body.jp-dashboard-member-sync:not(.jp-member-shell-ready) .sejolisa-memberarea-menu .tm-shell-brand,
body.jp-dashboard-member-sync:not(.jp-member-shell-ready) .sejolisa-memberarea-menu .tm-shell-user {
	opacity: 0;
}

/* --------------------------------------------------------------------------
   Sidebar — mirror JP Dashboard admin shell (#adminmenu)
   -------------------------------------------------------------------------- */

body.jp-dashboard-member-sync .sejolisa-memberarea-menu.ui.inverted.menu,
body.jp-dashboard-member-sync .sejolisa-memberarea-menu.ui.inverted.menu.sidebar {
	position: fixed !important;
	top: 0 !important;
	left: 0;
	bottom: 0;
	width: var(--tm-shell-width) !important;
	background: var(--tm-shell-bg) !important;
	border-right: 1px solid var(--tm-shell-border) !important;
	box-shadow: 4px 0 24px rgba(15, 23, 42, 0.04);
	overflow-x: hidden;
	overflow-y: hidden;
	z-index: 9990;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--tm-shell-primary-rgb), 0.35) transparent;
	height: 100vh !important;
	min-height: 100vh !important;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu > .item.header-menu {
	display: none !important;
}

/* Brand header */
body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-brand {
	flex: 0 0 auto;
	order: -2;
	margin: 0 0 8px !important;
	padding: 14px 12px 12px !important;
	border-bottom: 1px solid var(--tm-shell-border);
	background: var(--tm-shell-bg) !important;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-brand__inner {
	display: flex;
	align-items: center;
	gap: 10px;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-brand__logo {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--tm-shell-primary), var(--tm-shell-primary-dark));
	color: #fff;
	flex-shrink: 0;
	box-shadow: 0 8px 16px rgba(var(--tm-shell-primary-rgb), 0.28);
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-brand__logo .dashicons {
	width: 22px;
	height: 22px;
	font-size: 22px;
	line-height: 1;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-brand__logo--site {
	background: #fff;
	padding: 4px;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
	border: 1px solid var(--tm-shell-border);
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-brand__logo--site img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 8px;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-brand__text {
	min-width: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-brand__name {
	font-size: 15px;
	font-weight: 800;
	color: var(--tm-shell-text-strong);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-brand__site {
	font-size: 11px;
	font-weight: 500;
	color: var(--tm-shell-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Scrollable nav */
body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-menu-scroll {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 10px !important;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-menu-scroll__list {
	flex: 1 1 auto;
	min-height: 0;
	display: block;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 4px 0 10px;
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--tm-shell-primary-rgb), 0.35) transparent;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-menu-scroll__list::-webkit-scrollbar {
	width: 6px;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-menu-scroll__list::-webkit-scrollbar-thumb {
	background: rgba(var(--tm-shell-primary-rgb), 0.28);
	border-radius: 999px;
}

/* User footer */
body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-user {
	flex: 0 0 auto !important;
	margin-top: auto !important;
	margin-bottom: 0 !important;
	padding: 12px 12px 14px !important;
	border-top: 1px solid var(--tm-shell-border);
	background: var(--tm-shell-bg) !important;
	box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.04);
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-user__inner {
	display: flex;
	align-items: center;
	gap: 10px;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-user__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px var(--tm-shell-border);
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-user__meta {
	min-width: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-user__name {
	font-size: 13px;
	font-weight: 700;
	color: var(--tm-shell-text-strong);
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-user__email {
	font-size: 11px;
	font-weight: 500;
	color: var(--tm-shell-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-user__logout {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	color: var(--tm-shell-text-muted) !important;
	background: var(--tm-shell-bg-soft) !important;
	flex-shrink: 0;
	text-decoration: none;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-user__logout:hover,
body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-user__logout:focus {
	background: #fee2e2 !important;
	color: #dc2626 !important;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-user__logout .dashicons {
	width: 18px;
	height: 18px;
	font-size: 18px;
	line-height: 1;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu.ui.inverted.menu::-webkit-scrollbar {
	width: 6px;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu.ui.inverted.menu::-webkit-scrollbar-thumb {
	background: rgba(var(--tm-shell-primary-rgb), 0.28);
	border-radius: 999px;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu.ui.inverted.menu .item.header-menu {
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 14px 12px 12px !important;
	border-bottom: 1px solid var(--tm-shell-border) !important;
	border-radius: 0 !important;
	background: var(--tm-shell-bg) !important;
	text-align: left;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu.ui.inverted.menu .item.header-menu {
	display: none !important;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .item.header-menu a {
	color: var(--tm-shell-text-strong) !important;
	font-weight: 800;
	font-size: 15px;
	line-height: 1.2;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .item.header-menu .ui.logo.icon.image img {
	border-radius: 10px;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-menu-scroll__list > a.item,
body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-menu-scroll__list > .master-menu {
	flex: 0 0 auto;
	width: 100%;
	box-sizing: border-box;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-menu-scroll__list > .master-menu {
	display: block !important;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-menu-scroll__list > a.item,
body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-menu-scroll__list > .master-menu > a.item {
	display: flex !important;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	margin: 2px 0 !important;
	padding: 8px 12px 8px 10px !important;
	border-radius: var(--tm-shell-radius) !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--tm-shell-text) !important;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-menu-scroll__list > a.item > i.icon,
body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-menu-scroll__list > .master-menu > a.item > i.icon {
	order: -1;
	float: none !important;
	width: 34px !important;
	height: 34px !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background-color: var(--tm-shell-icon-bg) !important;
	color: var(--tm-shell-primary) !important;
	font-size: 16px !important;
	opacity: 1 !important;
	flex-shrink: 0;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-menu-scroll__list > a.item:hover,
body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-menu-scroll__list > .master-menu > a.item:hover {
	background: var(--tm-shell-bg-hover) !important;
	color: var(--tm-shell-text-strong) !important;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-menu-scroll__list > a.item:hover > i.icon,
body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-menu-scroll__list > .master-menu > a.item:hover > i.icon {
	background-color: rgba(var(--tm-shell-primary-rgb), 0.16) !important;
	color: var(--tm-shell-primary) !important;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-menu-scroll__list > a.item.active,
body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-menu-scroll__list > .master-menu > a.item.active {
	background: var(--tm-shell-bg-active) !important;
	color: var(--tm-shell-primary-dark) !important;
	box-shadow: inset 3px 0 0 var(--tm-shell-primary) !important;
	font-weight: 700;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-menu-scroll__list > a.item.active > i.icon,
body.jp-dashboard-member-sync .sejolisa-memberarea-menu .tm-shell-menu-scroll__list > .master-menu > a.item.active > i.icon {
	background-color: var(--tm-shell-primary) !important;
	color: #fff !important;
	box-shadow: 0 6px 14px rgba(var(--tm-shell-primary-rgb), 0.28);
}

/* Semantic UI inverted — reset nested items inside scroll list */
body.jp-dashboard-member-sync .sejolisa-memberarea-menu.ui.inverted.menu .tm-shell-menu-scroll__list a.item,
body.jp-dashboard-member-sync .sejolisa-memberarea-menu.ui.inverted.menu .tm-shell-menu-scroll__list .item {
	background-image: none !important;
	color: var(--tm-shell-text) !important;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu.ui.inverted.menu .tm-shell-menu-scroll__list a.item:hover,
body.jp-dashboard-member-sync .sejolisa-memberarea-menu.ui.inverted.menu .tm-shell-menu-scroll__list a.item.active {
	color: var(--tm-shell-primary-dark) !important;
}

body.jp-dashboard-member-sync .master-menu {
	border-bottom: 0;
	padding: 0;
	margin: 0;
	position: relative;
	display: block !important;
	width: 100%;
}

body.jp-dashboard-member-sync .master-menu > a.item {
	display: flex !important;
	align-items: center;
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	width: 100%;
	min-height: 44px;
	height: auto !important;
}

body.jp-dashboard-member-sync .master-menu.submenu-open > a.item {
	background: var(--tm-shell-bg-active) !important;
	color: var(--tm-shell-primary-dark) !important;
	box-shadow: inset 3px 0 0 var(--tm-shell-primary) !important;
	font-weight: 700;
}

body.jp-dashboard-member-sync .master-menu.submenu-open > a.item > i.icon {
	background-color: var(--tm-shell-primary) !important;
	color: #fff !important;
	box-shadow: 0 6px 14px rgba(var(--tm-shell-primary-rgb), 0.28);
}

body.jp-dashboard-member-sync .master-menu ul.menu {
	list-style: none;
	position: relative;
	display: none !important;
	width: 100%;
	margin: 0 0 4px !important;
	padding: 4px 0 6px 8px !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

body.jp-dashboard-member-sync .master-menu.submenu-open > ul.menu {
	display: block !important;
}

body.jp-dashboard-member-sync .master-menu ul.menu > li {
	margin: 0;
	padding: 0;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .master-menu ul.menu li a.item {
	display: flex !important;
	align-items: center;
	gap: 10px;
	min-height: 34px;
	margin: 1px 10px 1px 14px !important;
	padding: 7px 12px !important;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	border-radius: 10px !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--tm-shell-text) !important;
	box-shadow: none !important;
	text-decoration: none;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .master-menu ul.menu li a.item::before {
	content: "" !important;
	display: block !important;
	position: static !important;
	flex: 0 0 6px;
	width: 6px !important;
	height: 6px !important;
	margin: 0 !important;
	border-radius: 50%;
	background: #cbd5e1 !important;
	transform: none !important;
	opacity: 1 !important;
	transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .master-menu ul.menu li a.item > i.icon {
	display: none !important;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .master-menu ul.menu li a.item:hover,
body.jp-dashboard-member-sync .sejolisa-memberarea-menu .master-menu ul.menu li a.item:focus {
	background: var(--tm-shell-bg-active) !important;
	color: var(--tm-shell-primary-dark) !important;
	box-shadow: none !important;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .master-menu ul.menu li a.item:hover::before,
body.jp-dashboard-member-sync .sejolisa-memberarea-menu .master-menu ul.menu li a.item:focus::before {
	background: var(--tm-shell-primary) !important;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .master-menu ul.menu li a.item.active {
	background: var(--tm-shell-bg-active) !important;
	color: var(--tm-shell-primary-dark) !important;
	font-weight: 700;
	box-shadow: none !important;
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu .master-menu ul.menu li a.item.active::before {
	background: var(--tm-shell-primary) !important;
	box-shadow: 0 0 0 3px rgba(var(--tm-shell-primary-rgb), 0.16);
}

body.jp-dashboard-member-sync .sejolisa-memberarea-menu.ui.visible.left.sidebar ~ .pusher.sejolisa-memberarea-content,
body.jp-dashboard-member-sync .sejolisa-memberarea-menu.ui.visible.left.vertical.menu.sidebar ~ .pusher.sejolisa-memberarea-content {
	transform: none !important;
	-webkit-transform: none !important;
}

@media screen and (min-width: 783px) {
	body.jp-dashboard-member-sync .sejolisa-memberarea-menu.ui.visible.left.sidebar ~ .pusher.sejolisa-memberarea-content,
	body.jp-dashboard-member-sync .sejolisa-memberarea-menu.ui.visible.left.vertical.menu.sidebar ~ .pusher.sejolisa-memberarea-content {
		margin-left: var(--tm-shell-width) !important;
	}
}

/* Content */
body.jp-dashboard-member-sync .pusher.sejolisa-memberarea-content {
	min-height: 100vh;
	box-sizing: border-box;
}
body.jp-dashboard-member-sync .sejolisa-memberarea-content .ui.basic.segment {
	background: transparent;
	padding: 20px 24px 32px;
}

body.jp-dashboard-member-sync .sejolisa-menubars {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	min-height: 0 !important;
}

body.jp-dashboard-member-sync button.ui.button.sidebar-toggle {
	display: none !important;
}

/* Cards & segments */
body.jp-dashboard-member-sync .ui.card,
body.jp-dashboard-member-sync .ui.segment:not(.basic) {
	background: var(--tm-a-surface, #fff) !important;
	border: 1px solid var(--tm-a-border, #e4e7eb) !important;
	border-radius: var(--tm-a-radius, 12px) !important;
	box-shadow: var(--tm-a-shadow, 0 1px 3px rgba(26, 26, 46, 0.06), 0 4px 12px rgba(26, 26, 46, 0.04)) !important;
}

body.jp-dashboard-member-sync .ui.card > .content,
body.jp-dashboard-member-sync .ui.segment:not(.basic) {
	color: var(--tm-a-text, #1a1a2e);
}

body.jp-dashboard-member-sync .ui.card .header,
body.jp-dashboard-member-sync .ui.card .content h4.ui.sub.header {
	color: var(--tm-a-text, #1a1a2e);
	font-weight: 700;
}

/* Buttons */
body.jp-dashboard-member-sync .ui.primary.button,
body.jp-dashboard-member-sync .ui.green.button,
body.jp-dashboard-member-sync button.ui.primary.button.show-filter-form,
body.jp-dashboard-member-sync button.ui.primary.button.show-add-coupon-form {
	background-color: var(--tm-a-primary) !important;
	color: #fff !important;
	border-radius: var(--tm-a-radius-sm, 8px) !important;
	border: none !important;
	box-shadow: 0 4px 12px rgba(var(--tm-shell-primary-rgb), 0.22) !important;
}

body.jp-dashboard-member-sync .ui.primary.button:hover,
body.jp-dashboard-member-sync .ui.green.button:hover {
	background-color: var(--tm-a-primary-dark) !important;
}

body.jp-dashboard-member-sync .ui.button:not(.primary):not(.green) {
	border-radius: var(--tm-a-radius-sm, 8px);
}

/* Tables */
body.jp-dashboard-member-sync .ui.table {
	border: 1px solid var(--tm-a-border, #e4e7eb);
	border-radius: var(--tm-a-radius, 12px);
	overflow: hidden;
}

body.jp-dashboard-member-sync .ui.table thead th {
	background: var(--tm-a-bg, #f0f3f7) !important;
	color: var(--tm-a-muted, #6d7588) !important;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-bottom: 1px solid var(--tm-a-border, #e4e7eb) !important;
}

body.jp-dashboard-member-sync .ui.table tbody td {
	border-top: 1px solid #eef2f6 !important;
	color: var(--tm-a-text, #1a1a2e);
}

body.jp-dashboard-member-sync .ui.selection.list .list > .item,
body.jp-dashboard-member-sync .ui.selection.list > .item {
	color: var(--tm-a-text, #1a1a2e);
}

/* Messages */
body.jp-dashboard-member-sync .ui.message {
	border-radius: var(--tm-a-radius-sm, 8px) !important;
	border: 1px solid var(--tm-a-border, #e4e7eb) !important;
	box-shadow: var(--tm-a-shadow) !important;
}

body.jp-dashboard-member-sync .ui.positive.message,
body.jp-dashboard-member-sync .ui.success.message {
	border-color: rgba(var(--tm-shell-primary-rgb), 0.25) !important;
	background: rgba(var(--tm-shell-primary-rgb), 0.08) !important;
	color: var(--tm-shell-primary-dark) !important;
}

/* Login / register */
body.jp-dashboard-member-sync.sejoli-member-area .sejoli.login .ui.segment,
body.jp-dashboard-member-sync.sejoli-member-area .sejoli.register .ui.segment {
	max-width: 420px;
	margin: 40px auto;
}

body.jp-dashboard-member-sync .ui.input input,
body.jp-dashboard-member-sync .ui.form input:not([type="checkbox"]):not([type="radio"]),
body.jp-dashboard-member-sync .ui.form textarea,
body.jp-dashboard-member-sync .ui.form select {
	border-radius: var(--tm-a-radius-sm, 8px) !important;
	border-color: var(--tm-a-border, #e4e7eb) !important;
}

body.jp-dashboard-member-sync .ui.input input:focus,
body.jp-dashboard-member-sync .ui.form input:focus,
body.jp-dashboard-member-sync .ui.form textarea:focus,
body.jp-dashboard-member-sync .ui.form select:focus {
	border-color: var(--tm-a-primary) !important;
}

@media screen and (max-width: 782px) {
	html:has(body.jp-dashboard-member-sync),
	body.jp-dashboard-member-sync {
		overflow-x: hidden;
	}

	body.jp-dashboard-member-sync .sejolisa-memberarea-menu.ui.inverted.menu,
	body.jp-dashboard-member-sync .sejolisa-memberarea-menu.ui.inverted.menu.sidebar {
		width: min(88vw, 280px) !important;
		transform: translate3d(-100%, 0, 0);
		transition: transform 0.24s ease, box-shadow 0.24s ease;
		visibility: visible !important;
		box-shadow: none;
	}

	body.jp-dashboard-member-sync .sejolisa-memberarea-menu.ui.inverted.menu.uncover.visible,
	body.jp-dashboard-member-sync .sejolisa-memberarea-menu.ui.inverted.menu.sidebar.uncover.visible,
	body.jp-dashboard-member-sync.jp-member-sidebar-open .sejolisa-memberarea-menu.ui.inverted.menu.sidebar {
		transform: translate3d(0, 0, 0);
		box-shadow: 8px 0 32px rgba(15, 23, 42, 0.18);
	}

	body.jp-dashboard-member-sync .sejolisa-memberarea-content .ui.basic.segment {
		padding:
			calc(18px + env(safe-area-inset-top, 0px))
			16px
			calc(96px + env(safe-area-inset-bottom, 0px)) !important;
	}

	body.jp-dashboard-member-sync .sejolisa-memberarea-menu.ui.visible.left.sidebar ~ .pusher.sejolisa-memberarea-content,
	body.jp-dashboard-member-sync .sejolisa-memberarea-menu.ui.visible.left.vertical.menu.sidebar ~ .pusher.sejolisa-memberarea-content,
	body.jp-dashboard-member-sync .sejolisa-memberarea-menu.ui.uncover.visible.left.sidebar ~ .pusher.sejolisa-memberarea-content,
	body.jp-dashboard-member-sync .sejolisa-memberarea-menu.ui.uncover.visible.left.vertical.menu.sidebar ~ .pusher.sejolisa-memberarea-content {
		margin-left: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		transform: none !important;
		-webkit-transform: none !important;
	}

	body.jp-dashboard-member-sync .sejolisa-memberarea-menu.ui.uncover.visible.left.sidebar ~ .pusher.sejolisa-memberarea-content:after,
	body.jp-dashboard-member-sync .sejolisa-memberarea-menu.ui.uncover.visible.left.vertical.menu.sidebar ~ .pusher.sejolisa-memberarea-content:after {
		left: 0 !important;
	}

	body.jp-dashboard-member-sync .pusher.sejolisa-memberarea-content.dimmed {
		overflow: hidden;
	}

	body.jp-dashboard-member-sync .sejolisa-menubars {
		display: block !important;
		position: fixed;
		right: calc(16px + env(safe-area-inset-right, 0px));
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		left: auto;
		top: auto;
		width: auto;
		height: auto;
		margin: 0 !important;
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
		z-index: 10001;
		pointer-events: none;
	}

	body.jp-dashboard-member-sync button.ui.button.sidebar-toggle {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: 56px;
		min-height: 56px;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 999px !important;
		background: linear-gradient(145deg, var(--tm-shell-primary), var(--tm-shell-primary-dark)) !important;
		color: #fff !important;
		box-shadow:
			0 10px 24px rgba(var(--tm-shell-primary-rgb), 0.34),
			0 2px 6px rgba(15, 23, 42, 0.12) !important;
		font-size: 0;
		font-weight: 600;
		line-height: 1;
		pointer-events: auto;
		transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
		-webkit-tap-highlight-color: transparent;
	}

	body.jp-dashboard-member-sync button.ui.button.sidebar-toggle .icon,
	body.jp-dashboard-member-sync button.ui.button.sidebar-toggle .bars.icon {
		margin: 0 !important;
		width: 22px !important;
		height: 22px !important;
		font-size: 22px !important;
		line-height: 1 !important;
		opacity: 1 !important;
	}

	body.jp-dashboard-member-sync button.ui.button.sidebar-toggle:active {
		transform: scale(0.96);
	}

	body.jp-dashboard-member-sync.jp-member-sidebar-open button.ui.button.sidebar-toggle {
		background: var(--tm-a-surface, #fff) !important;
		color: var(--tm-shell-primary-dark) !important;
		box-shadow:
			0 10px 24px rgba(15, 23, 42, 0.14),
			0 0 0 1px rgba(var(--tm-shell-primary-rgb), 0.18) !important;
	}

	body.jp-dashboard-member-sync.jp-member-sidebar-open button.ui.button.sidebar-toggle .bars.icon {
		display: none !important;
	}

	body.jp-dashboard-member-sync.jp-member-sidebar-open button.ui.button.sidebar-toggle::after {
		content: "\00d7";
		font-size: 30px;
		font-weight: 300;
		line-height: 1;
	}
}