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

body.jp-member-dashboard-screen.jp-dashboard-member-sync {
	background: var(--tm-a-bg, #f0f3f7) !important;
}

body.jp-member-dashboard-screen .sejolisa-memberarea-content .ui.basic.segment {
	max-width: 1280px;
	margin: 0 auto;
	padding: 20px 24px 40px !important;
}

/* Page header */
body.jp-member-dashboard-screen .sejolisa-memberarea-content .ui.basic.segment > h2.ui.header {
	margin: 0 0 6px !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: 1.65rem !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	color: var(--tm-a-text, #1a1a2e) !important;
}

body.jp-member-dashboard-screen .sejolisa-memberarea-content .ui.basic.segment > p {
	margin: 0 0 22px !important;
	font-size: 14px;
	line-height: 1.55;
	color: var(--tm-a-muted, #6d7588);
}

body.jp-member-dashboard-screen .sejolisa-memberarea-content .ui.basic.segment > p a {
	color: var(--tm-a-primary, #00aa5b);
	font-weight: 600;
	text-decoration: none;
}

body.jp-member-dashboard-screen .sejolisa-memberarea-content .ui.basic.segment > p a:hover,
body.jp-member-dashboard-screen .sejolisa-memberarea-content .ui.basic.segment > p a:focus {
	text-decoration: underline;
}

/* Section panels */
body.jp-member-dashboard-screen .jp-member-dash-section {
	margin: 0 0 18px;
	background: var(--tm-a-surface, #fff);
	border: 1px solid var(--tm-a-border, #e4e7eb);
	border-radius: var(--tm-a-radius, 12px);
	box-shadow: var(--tm-a-shadow, 0 1px 3px rgba(26, 26, 46, 0.06), 0 4px 12px rgba(26, 26, 46, 0.04));
	overflow: hidden;
}

body.jp-member-dashboard-screen .jp-member-dash-section__head {
	padding: 16px 20px;
	border-bottom: 1px solid var(--tm-a-border, #e4e7eb);
	background: var(--tm-a-surface, #fff);
}

body.jp-member-dashboard-screen .jp-member-dash-section__head h3.ui.header {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	color: var(--tm-a-text, #1a1a2e) !important;
}

body.jp-member-dashboard-screen .jp-member-dash-section__body {
	padding: 16px 20px 20px;
}

/* Stat cards grid */
body.jp-member-dashboard-screen .ui.cards.information {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

body.jp-member-dashboard-screen .ui.cards.information .ui.card {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	border: 1px solid var(--tm-a-border, #e4e7eb) !important;
	border-radius: var(--tm-a-radius-sm, 8px) !important;
	box-shadow: none !important;
	background: var(--tm-a-surface, #fff) !important;
	background-color: var(--tm-a-surface, #fff) !important;
	overflow: hidden;
}

body.jp-member-dashboard-screen .ui.cards.information .ui.card > .content,
body.jp-member-dashboard-screen .ui.cards.information.daily .ui.card > .content,
body.jp-member-dashboard-screen .ui.cards.information.monthly .ui.card > .content,
body.jp-member-dashboard-screen .ui.cards.information.all .ui.card > .content {
	padding: 14px 16px !important;
	border: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--tm-a-text, #1a1a2e) !important;
}

body.jp-member-dashboard-screen .ui.cards.information .ui.card > .content:first-child {
	padding-bottom: 8px !important;
}

body.jp-member-dashboard-screen .ui.cards.information .ui.card .content .header,
body.jp-member-dashboard-screen .ui.cards.information.daily .content .header,
body.jp-member-dashboard-screen .ui.cards.information.monthly .content .header,
body.jp-member-dashboard-screen .ui.cards.information.all .content .header {
	margin: 0 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	text-align: left !important;
	color: var(--tm-a-muted, #6d7588) !important;
}

body.jp-member-dashboard-screen .ui.cards.information .ui.card .content.value,
body.jp-member-dashboard-screen .ui.cards.information.daily .content.value,
body.jp-member-dashboard-screen .ui.cards.information.monthly .content.value,
body.jp-member-dashboard-screen .ui.cards.information.all .content.value {
	padding-top: 0 !important;
	font-size: 24px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	text-align: left !important;
	color: var(--tm-a-text, #1a1a2e) !important;
	background: transparent !important;
}

body.jp-member-dashboard-screen .ui.cards.information .ui.card.orange,
body.jp-member-dashboard-screen .ui.cards.information.daily .ui.card.orange .content:first-child,
body.jp-member-dashboard-screen .ui.cards.information.monthly .ui.card.orange,
body.jp-member-dashboard-screen .ui.cards.information.all .ui.card.orange {
	background: var(--tm-a-surface, #fff) !important;
	background-color: var(--tm-a-surface, #fff) !important;
	border-top: 3px solid var(--tm-a-warn, #f59e0b) !important;
}

body.jp-member-dashboard-screen .ui.cards.information .ui.card.green,
body.jp-member-dashboard-screen .ui.cards.information.daily .ui.card.green .content:first-child,
body.jp-member-dashboard-screen .ui.cards.information.monthly .ui.card.green,
body.jp-member-dashboard-screen .ui.cards.information.all .ui.card.green {
	background: var(--tm-a-surface, #fff) !important;
	background-color: var(--tm-a-surface, #fff) !important;
	border-top: 3px solid var(--tm-a-primary, #00aa5b) !important;
}

body.jp-member-dashboard-screen .ui.cards.information .ui.card.blue,
body.jp-member-dashboard-screen .ui.cards.information.daily .ui.card.blue .content:first-child,
body.jp-member-dashboard-screen .ui.cards.information.monthly .ui.card.blue,
body.jp-member-dashboard-screen .ui.cards.information.all .ui.card.blue {
	background: var(--tm-a-surface, #fff) !important;
	background-color: var(--tm-a-surface, #fff) !important;
	border-top: 3px solid #2563eb !important;
}

body.jp-member-dashboard-screen .ui.cards.information .ui.card.light-green,
body.jp-member-dashboard-screen .ui.cards.information.daily .ui.card.light-green .content:first-child,
body.jp-member-dashboard-screen .ui.cards.information.monthly .ui.card.light-green,
body.jp-member-dashboard-screen .ui.cards.information.all .ui.card.light-green {
	background: var(--tm-a-surface, #fff) !important;
	background-color: var(--tm-a-surface, #fff) !important;
	border-top: 3px solid var(--tm-a-accent, #ff5722) !important;
}

/* Charts */
body.jp-member-dashboard-screen .jp-member-dash-chart {
	background: var(--tm-a-surface, #fff);
	border: 1px solid var(--tm-a-border, #e4e7eb);
	border-radius: var(--tm-a-radius-sm, 8px);
	border-top: 3px solid var(--tm-a-primary, #00aa5b);
	padding: 16px;
	box-sizing: border-box;
}

body.jp-member-dashboard-screen .jp-member-dash-chart canvas {
	display: block;
	width: 100% !important;
	max-width: 100%;
	height: 320px !important;
	max-height: 360px;
}

body.jp-member-dashboard-screen .ui.cards.acquisition .ui.card .content canvas,
body.jp-member-dashboard-screen .ui.cards.acquisition #acquisition-pie {
	display: block;
	width: 100% !important;
	max-width: 100%;
	max-height: 280px;
	margin-top: 8px;
}

/* Top 10 & acquisition grids */
body.jp-member-dashboard-screen .ui.cards.top-ten,
body.jp-member-dashboard-screen .ui.cards.acquisition {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.jp-member-dashboard-screen .ui.cards.top-ten .ui.card,
body.jp-member-dashboard-screen .ui.cards.acquisition .ui.card {
	width: auto !important;
	margin: 0 !important;
	border: 1px solid var(--tm-a-border, #e4e7eb) !important;
	border-radius: var(--tm-a-radius-sm, 8px) !important;
	box-shadow: none !important;
	background: var(--tm-a-surface, #fff) !important;
}

body.jp-member-dashboard-screen .ui.cards.top-ten .ui.card > .content,
body.jp-member-dashboard-screen .ui.cards.acquisition .ui.card > .content {
	padding: 16px !important;
	color: var(--tm-a-text, #1a1a2e) !important;
}

body.jp-member-dashboard-screen .ui.cards.top-ten .ui.card .header,
body.jp-member-dashboard-screen .ui.cards.acquisition .ui.card .header {
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--tm-a-text, #1a1a2e) !important;
}

body.jp-member-dashboard-screen .ui.cards.top-ten .content.value .item .content .product-name,
body.jp-member-dashboard-screen .ui.cards.top-ten .content.value .item .content .product-value {
	color: var(--tm-a-text, #1a1a2e) !important;
}

body.jp-member-dashboard-screen .ui.cards.acquisition table {
	width: 100% !important;
	border-collapse: collapse;
	font-size: 13px;
}

body.jp-member-dashboard-screen .ui.cards.acquisition table thead th {
	padding: 10px 12px;
	font-size: 12px;
	font-weight: 700;
	color: var(--tm-a-muted, #6d7588);
	background: var(--tm-a-bg, #f0f3f7);
	border-bottom: 1px solid var(--tm-a-border, #e4e7eb);
}

body.jp-member-dashboard-screen .ui.cards.acquisition table tbody td {
	padding: 10px 12px;
	color: var(--tm-a-text, #1a1a2e) !important;
	border-bottom: 1px solid #eef2f6;
}

/* Responsive */
@media (max-width: 1100px) {
	body.jp-member-dashboard-screen .ui.cards.information {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 782px) {
	body.jp-member-dashboard-screen .sejolisa-memberarea-content .ui.basic.segment {
		max-width: none;
		margin: 0;
		padding:
			calc(20px + env(safe-area-inset-top, 0px))
			16px
			calc(96px + env(safe-area-inset-bottom, 0px)) !important;
	}

	body.jp-member-dashboard-screen .sejolisa-memberarea-content .ui.basic.segment > h2.ui.header {
		font-size: 1.35rem !important;
		margin-bottom: 6px !important;
	}

	body.jp-member-dashboard-screen .sejolisa-memberarea-content .ui.basic.segment > p {
		margin-bottom: 20px !important;
	}

	body.jp-member-dashboard-screen .jp-member-dash-section {
		margin-bottom: 14px;
		border-radius: var(--tm-a-radius-sm, 8px);
	}

	body.jp-member-dashboard-screen .jp-member-dash-section__head,
	body.jp-member-dashboard-screen .jp-member-dash-section__body {
		padding-left: 16px;
		padding-right: 16px;
	}

	body.jp-member-dashboard-screen .ui.cards.information,
	body.jp-member-dashboard-screen .ui.cards.top-ten,
	body.jp-member-dashboard-screen .ui.cards.acquisition {
		grid-template-columns: 1fr;
		gap: 12px !important;
	}

	body.jp-member-dashboard-screen .ui.cards.information .ui.card .content.value,
	body.jp-member-dashboard-screen .ui.cards.information.daily .content.value,
	body.jp-member-dashboard-screen .ui.cards.information.monthly .content.value,
	body.jp-member-dashboard-screen .ui.cards.information.all .content.value {
		font-size: 20px !important;
	}

	body.jp-member-dashboard-screen .jp-member-dash-chart {
		padding: 12px;
	}

	body.jp-member-dashboard-screen .jp-member-dash-chart canvas {
		height: 240px !important;
		max-height: 280px;
	}

	body.jp-member-dashboard-screen .ui.cards.acquisition .ui.card .content canvas,
	body.jp-member-dashboard-screen .ui.cards.acquisition #acquisition-pie {
		max-height: 220px;
	}
}

@media (max-width: 480px) {
	body.jp-member-dashboard-screen .sejolisa-memberarea-content .ui.basic.segment {
		padding:
			calc(16px + env(safe-area-inset-top, 0px))
			14px
			calc(92px + env(safe-area-inset-bottom, 0px)) !important;
	}

	body.jp-member-dashboard-screen .sejolisa-memberarea-content .ui.basic.segment > h2.ui.header {
		font-size: 1.2rem !important;
	}

	body.jp-member-dashboard-screen .jp-member-dash-section__head,
	body.jp-member-dashboard-screen .jp-member-dash-section__body {
		padding-left: 14px;
		padding-right: 14px;
	}

	body.jp-member-dashboard-screen .jp-member-dash-section__head h3.ui.header {
		font-size: 14px !important;
	}

	body.jp-member-dashboard-screen .ui.cards.information .ui.card > .content,
	body.jp-member-dashboard-screen .ui.cards.information.daily .ui.card > .content,
	body.jp-member-dashboard-screen .ui.cards.information.monthly .ui.card > .content,
	body.jp-member-dashboard-screen .ui.cards.information.all .ui.card > .content {
		padding: 12px 14px !important;
	}
}