/* Phase 1 Share Page Styles */

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

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

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

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



/* Common Use Case Highlighting */
.phase1-share-use-case-item.is-common-use-case {
	display: none;
}

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

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

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

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

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

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

/* Common Use Cases Styles */
.phase1-share-use-cases-list-labels {
	border-bottom: 1px solid #999999;
}

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

.phase1-share-use-cases-list {
	max-height: 500px;
	overflow-y: auto;
}

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

.phase1-share-use-case-name {
	font-size: 16px;
	font-weight: 600;
	color: #333333;
}

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

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

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

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

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

.phase1-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 */
.phase1-share-group-border {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 25px;
}

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

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

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

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

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

/* Use Case Items */
.phase1-share-audience-card .phase1-share-percent-label {
	width: 60px;
}
.phase1-share-use-case-item {
	display: flex;
	align-items: center;
}

.phase1-share-use-case-item .row.items-center {
	flex-wrap: nowrap;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Print Styles */
@media print {
	body {
		zoom: 0.8;
	}
	
	.q-btn {
		display: none !important;
	}
	
	.phase1-share-page {
		font-size: 12px;
	}
	
	.phase1-share-title {
		font-size: 1.8rem;
	}

	.usecase-select {
		display: none;
	}
	
	.phase1-share-chart-title {
		font-size: 16px;
	}
	
	.phase1-share-overview-section {
		page-break-inside: avoid;
		transform: scale(0.75);
		transform-origin: top left;
		width: 133.33%;
		margin-bottom: -80px;
	}
	
	.phase1-share-overview-section.row {
		align-items: flex-start !important;
	}
	
	.phase1-share-chart-container {
		page-break-inside: avoid;
		height: auto !important;
		padding: 0 !important;
		margin: 0 !important;
		position: relative !important;
	}
	
	.phase1-share-chart {
		max-height: 350px !important;
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
	}
	
	.phase1-share-chart-column {
		padding: 0 !important;
	}
	
	.print-chart-image {
		width: 500px !important;
		height: 500px !important;
		object-fit: contain;
		display: block !important;
		margin: 0 !important;
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
	}
	
	.phase1-share-group-title {
		font-size: 1.2rem;
	}
	
	.phase1-share-audience-name {
		font-size: 16px;
	}

	.phase1-share-audience-card .phase1-share-percent-label {
		width: 50px;
	}

	.phase1-share-use-case-percent {
		width: 40px;
	}
	
	.phase1-share-use-case-text {
		font-size: 0.85rem;
	}
	
	.phase1-share-audience-group {
		page-break-inside: avoid;
		break-inside: avoid;
	}
	
	.phase1-share-group-card {
		box-shadow: none !important;
		border: none !important;
	}
	
	.phase1-share-audience-item {
		page-break-inside: avoid;
		break-inside: avoid;
	}
	
	.phase1-share-audience-card {
		box-shadow: none !important;
		border: none !important;
		margin: 0 0.5rem 0.5rem 0.5rem;
	}
	
	.q-card {
		box-shadow: none !important;
	}
}