/* Form Components */

/* Status Badge Styles */
.status-badge {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 1rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: lowercase;
	letter-spacing: 0.025em;
	transition: all 0.3s ease;
}

.status-badge.public {
	background: rgba(34, 197, 94, 0.15);
	color: #22c55e;
	border: 1px solid rgba(34, 197, 94, 0.3);
}

[data-theme="light"] .status-badge.public {
	background: rgba(34, 197, 94, 0.1);
	color: #16a34a;
	border: 1px solid rgba(34, 197, 94, 0.2);
}

/* Topic Label Styles - Theme Adaptive */
.topic-label {
	background: var(--suggestion-bg) !important;
	color: var(--text-secondary) !important;
	border: 1px solid var(--suggestion-border) !important;
	transition: all 0.3s ease !important;
}

.topic-label:hover {
	background: var(--suggestion-hover) !important;
	color: var(--text-primary) !important;
	border-color: var(--border-color) !important;
}

/* Segmented Control Styles */
.segmented-control {
	display: flex;
	justify-content: space-around;
	border: 1px solid var(--border-color);
	border-radius: 6px;
	overflow: hidden;
}

.segmented-control button {
	background: none;
	border: none;
	color: var(--text-primary);
	padding: 8px 16px;
	font-size: 0.9rem;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
	flex: 1;
	text-align: center;
}

.segmented-control button.active {
	background-color: var(--accent-color);
	color: white;
}

.segmented-control button:hover {
	background-color: var(--suggestion-hover);
}

/* Conditional Detail Section Styles */
.detail-section {
	margin-top: 1rem;
	padding: 1rem;
	border: 1px solid var(--border-color);
	border-radius: 6px;
	transition: opacity 0.3s ease, height 0.3s ease;
}

.fade-enter {
	opacity: 0;
	height: 0;
}

.fade-enter-active {
	opacity: 1;
	height: auto;
}

.fade-exit {
	opacity: 1;
	height: auto;
}

.fade-exit-active {
	opacity: 0;
	height: 0;
}

.suggestion-item:hover {
	background-color: #f0f8ff;
	border-color: #8A2BE2;
}