/* Phase 2 Share Page Styles */

html {
	--chart-color-1: #5FC3C0;
	--chart-color-2: #E57373;
	--chart-color-3: #F9A825;
	--chart-color-4: #4A90E2;
	--chart-color-5: #B86B77;
	--chart-color-6: #81C784;
	--chart-color-7: #795548;
	--chart-color-8: #FFA726;
	--chart-color-9: #9E9E9E;
	--chart-color-10: #7E57C2;

	--audience-color: var(--chart-color-9);
}

.main-content {
	max-width: unset;
}

/* Header Styles */
.phase2-share-header {
	margin-bottom: 2rem;
}

.phase2-share-title {
	font-size: 2.5rem;
	font-weight: 600;
	color: #333;
	margin-bottom: 0.5rem;
}

.phase2-share-client-name {
	font-size: 1.25rem;
	color: #666;
}



/* Common Goal Highlighting */
.phase2-share-goal-item.is-common-goal {
	display: none;
}

.phase2-share-common-icon {
	color: #F9A825;
	font-size: 18px;
	margin-left: auto;
}

/* Overview Card */
.phase2-share-chart-container {
	width: 100%;
	height: 400px;
	position: relative;
}

.phase2-share-chart {
	max-width: 100%;
	max-height: 100%;
}

.phase2-share-chart-title {
	gap: 25px;
	font-size: 18px;
	font-weight: 600;
	color: #333333;
	margin-bottom: 10px;
}

.phase2-share-chart-title .goal-select .q-field__control, .phase2-share-chart-title .goal-select .q-field__native, .phase2-share-chart-title .goal-select .q-field__marginal {
	min-height: unset;
	height: unset;
}

.apexcharts-legend.apexcharts-align-center.apx-legend-position-right {
	justify-content: center;
}

/* Common Goals Styles */
.phase2-share-goals-list-labels {
	border-bottom: 1px solid #999999;
}

.phase2-share-percent-label {
	width: 75px;
	text-align: right;
}

.phase2-share-goals-list {
	max-height: 500px;
	overflow-y: auto;
}

.phase2-share-percent-badge {
	font-size: 16px;
	font-weight: 500;
	color: #999999;
	width: 75px;
	text-align: right;
}

.phase2-share-goal-name {
	font-size: 16px;
	font-weight: 600;
	color: #333333;
}

/* Audience Groups Container */
.phase2-share-audience-container {
	margin-top: 25px;
	/* columns: 2;
	column-gap: 50px; */
}

.phase2-share-audience-group {
	margin-bottom: 1.5rem;
}

.phase2-share-group-card {
	border-radius: 0;
	overflow: hidden;
}

.phase2-share-group-header {
	padding: 0;
}

.phase2-share-group-title {
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.phase2-share-group-number {
	background-color: rgba(255, 255, 255, 0.3);
	color: #ffffff;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 1rem;
	font-weight: 700;
}

/* Audience Items */
.phase2-share-group-border {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 25px;
}

.phase2-share-audience-item {
	/* flex: 1; */
}

.phase2-share-audience-card {
	background-color: #FFFFFF;
	border: 0px solid white;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.phase2-share-audience-header {
	padding: 0;
}

.phase2-share-audience-percent {
	width: 50px;
	aspect-ratio: 1/1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	border-radius: 50px;
	border: 2px solid #2196F3;
	color: #2196F3;
	margin-right: 10px;
}

.phase2-share-audience-name {
	font: 800 18px/22px 'Albert Sans', sans-serif;
	color: #333333;
}

/* Goal Items */
.phase2-share-audience-card .phase2-share-percent-label {
	width: 60px;
}
.phase2-share-goal-item {
	display: flex;
	align-items: center;
}

.phase2-share-goal-item .row.items-center {
	flex-wrap: nowrap;
}

.phase2-share-goal-percent {
	width: 60px;
	font-weight: 600;
	color: #1976d2;
	font-size: 0.95rem;
	text-align: right;
}

.phase2-share-goal-number {
	width: 40px;
	font-weight: 600;
	font-size: 0.8rem;
	margin-right: 5px;
}

.phase2-share-goal-text {
	flex: 1;
	font: 300 14px/16px 'Albert Sans', sans-serif;
	color: #444444;
}

/* Empty State */
.phase2-share-empty-state {
	text-align: center;
	padding: 4rem 2rem;
}

.phase2-share-empty-icon {
	color: #bdbdbd;
	font-size: 4rem;
	margin-bottom: 1rem;
}

.phase2-share-empty-title {
	color: #757575;
	font-size: 1.25rem;
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}

.phase2-share-empty-text {
	color: #9e9e9e;
	font-size: 1rem;
}

/* Loading State */
.phase2-share-loading {
	text-align: center;
	padding: 3rem;
}

/* Error State */
.phase2-share-error {
	background-color: #f44336;
	color: white;
	padding: 2rem;
	border-radius: 8px;
	text-align: center;
}

.phase2-share-error-icon {
	font-size: 4rem;
	margin-bottom: 1rem;
}

.phase2-share-error-title {
	font-size: 1.5rem;
	font-weight: 600;
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}

.phase2-share-error-text {
	font-size: 1rem;
	opacity: 0.9;
}

/* Responsive Design */
@media (max-width: 768px) {
	.phase2-share-title {
		font-size: 2rem;
	}
	
	.phase2-share-group-title {
		font-size: 1.25rem;
	}
	
	.phase2-share-audience-card {
		margin: 0 0.5rem 0.75rem 0.5rem;
	}
	
	.phase2-share-goal-item {
		margin: 0 0.5rem 0.5rem 0.5rem;
	}
}


/* Print Styles */
@media print {
	body:has( .phase2-page) {
		zoom: 0.8;
	}
	body:has( .phase2-page) .app-toolbar {
		position: relative;
		background-color: transparent;
		border: unset;
		justify-content: flex-start;
	}
	body:has( .phase2-page) .app-toolbar button, body:has( .phase2-page) .app-toolbar .phase-settings, body:has( .phase2-page) .app-toolbar .phase-toolbar-settings {
		display: none;
	}
	body:has( .phase2-page) .app-navigation {
		display: none;
	}
	body:has( .phase2-page) .page-content {
		margin-top: 0;
		margin-left: 0;
		width: 100%;
	}

	/* overview card */
	.phase2-page .overview-card {
		border: unset;
	}
	.phase2-page .overview-card > div:first-child, .phase2-page .overview-card hr {
		display: none;
	}
	.phase2-page .overview-card > div:nth-child(2) {
		display: block !important;
	}
	.phase2-page .overview-container .overview-item .text-subtitle1 .q-icon, 
	.phase2-page .overview-container .overview-item .text-subtitle1 .goal-select {
		display: none;
	}

	/* general draggable edits */
	body:has( .phase2-page) .navigable-input:not(.percent-field) {
		background-color: transparent !important;
		border: unset !important;
		border-radius: unset !important;
	}
	body:has( .phase2-page) button {
		display: none;
	}
	body:has( .phase2-page) .navigable-input.view-mode .input-display {
		border: unset;
		padding: 0;
	}

	/* audience group level */
	body:has( .phase2-page) .group-header {
		background-color: transparent !important;
		border-radius: unset !important;
	}
	/* audience level */
	body:has( .phase2-page) .audience-container {
		max-width: unset;
	}
	body:has( .phase2-page) .audience-container .audiences-wrapper {
		display: flex;
		flex-wrap: wrap;
		gap: 25px;
	}
	body:has( .phase2-page) .audience-container .audiences-wrapper .audience-item {
		width: calc((100% - 25px) / 2);
	}
	body:has( .phase2-page) .audience-container .audiences-wrapper .audience-item:nth-child(1) {--audience-color: var(--chart-color-1);}
	body:has( .phase2-page) .audience-container .audiences-wrapper .audience-item:nth-child(2) {--audience-color: var(--chart-color-2);}
	body:has( .phase2-page) .audience-container .audiences-wrapper .audience-item:nth-child(3) {--audience-color: var(--chart-color-3);}
	body:has( .phase2-page) .audience-container .audiences-wrapper .audience-item:nth-child(4) {--audience-color: var(--chart-color-4);}
	body:has( .phase2-page) .audience-container .audiences-wrapper .audience-item:nth-child(5) {--audience-color: var(--chart-color-5);}
	body:has( .phase2-page) .audience-container .audiences-wrapper .audience-item:nth-child(6) {--audience-color: var(--chart-color-6);}
	body:has( .phase2-page) .audience-container .audiences-wrapper .audience-item:nth-child(7) {--audience-color: var(--chart-color-7);}
	body:has( .phase2-page) .audience-container .audiences-wrapper .audience-item:nth-child(8) {--audience-color: var(--chart-color-8);}
	body:has( .phase2-page) .audience-container .audiences-wrapper .audience-item:nth-child(9) {--audience-color: var(--chart-color-9);}
	body:has( .phase2-page) .audience-container .audiences-wrapper .audience-item:nth-child(10) {--audience-color: var(--chart-color-10);}

	body:has( .phase2-page) .audience-container .audiences-wrapper .navigable-input.percent-field {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50px;
		aspect-ratio: 1/1;
		border-radius: 30px;
		border: 2px solid var(--audience-color);
	}
	body:has( .phase2-page) .audience-container .audiences-wrapper .navigable-input.percent-field .input-display {
		padding: unset;
		height: unset;
		color: var(--audience-color);
		font-weight: 600;
	}
	body:has( .phase2-page) .audience-header .navigable-input.view-mode:not(.percent-field) {
		border-bottom: 1px solid #999999 !important;
		order: 3;
	}
	body:has( .phase2-page) .audience-header .audience-number {
		display: block;
		order: 2;
		margin-right: 5px;
	}
	body:has( .phase2-page) .draggable-list .draggable-list .q-btn {
		display: none;
	}
	body:has( .phase2-page) .audience-container .audience-item .q-card__section {
		padding: 0;
	}
	
	/* use case level */
	body:has( .phase2-page) .audience-container .goals-wrapper .goal-item {
		margin: 4px 0 0 0;
	}
	body:has( .phase2-page) .audience-container .goals-wrapper .goal-item > .row {
		padding: 0;
	}
	body:has( .phase2-page) .audience-container .goals-wrapper .navigable-input.percent-field {
		width: 75px;
		aspect-ratio: unset;
		border: unset;
		justify-content: end;
	}
	body:has( .phase2-page) .audience-container .goals-wrapper .goal-item:first-child > .row > div:before {
		position: absolute;
		content: 'use case';
		letter-spacing: 0;
		width: 100%;
		top: -25px;
		left: 0;
	}
	body:has( .phase2-page) .audience-container .goals-wrapper .goal-item:first-child > .row > div.percent-field:before {
		content: '% of aud';
		left: unset;
		right: 0;
	}
}