/* CSS Reset-ish */
*,*::before,*::after { box-sizing:border-box; }
body { 
    margin:0; 
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; 
    -webkit-font-smoothing:antialiased; 
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
    background:var(--bg); 
    color:var(--fg); 
    line-height:1.5; 
    font-size: 14px;
}

/* Fluent UI Design Tokens */
:root {
	/* Fluent UI Color Palette - Dark Theme */
	--bg: #1e1e1e;
	--bg-alt: #2d2d30;
	--bg-elev: #3e3e42;
	--fg: #ffffff;
	--fg-dim: #cccccc;
	--fg-subtle: #8a8886;
	
	/* Fluent UI Semantic Colors */
	--accent: #0078d4;
	--accent-hover: #106ebe;
	--accent-pressed: #005a9e;
	--accent-subtle: rgba(0, 120, 212, 0.1);
	
	/* Status Colors */
	--success: #107c10;
	--warning: #ff8c00;
	--danger: #d13438;
	--info: #0078d4;
	
	/* Surface Colors */
	--surface-primary: #1e1e1e;
	--surface-secondary: #2d2d30;
	--surface-tertiary: #3e3e42;
	
	/* Fluent UI Spacing Scale (8px base) */
	--space-xs: 4px;
	--space-s: 8px;
	--space-m: 16px;
	--space-l: 24px;
	--space-xl: 32px;
	--space-xxl: 48px;
	
	/* Border Radius */
	--radius-xs: 2px;
	--radius-s: 4px;
	--radius-m: 6px;
	--radius-l: 8px;
	--radius-xl: 12px;
	
	/* Shadows - Fluent UI Elevation */
	--shadow-2: 0 1px 2px rgba(0, 0, 0, 0.14), 0 0px 2px rgba(0, 0, 0, 0.12);
	--shadow-4: 0 2px 4px rgba(0, 0, 0, 0.14), 0 0px 4px rgba(0, 0, 0, 0.12);
	--shadow-8: 0 4px 8px rgba(0, 0, 0, 0.14), 0 0px 8px rgba(0, 0, 0, 0.12);
	--shadow-16: 0 8px 16px rgba(0, 0, 0, 0.14), 0 0px 16px rgba(0, 0, 0, 0.12);
	
	/* Focus */
	--focus-outline: 0 0 0 2px var(--accent);
	--focus-outline-offset: 2px;
	
	/* Legacy compatibility */
	--radius: var(--radius-l);
	--border: 1px solid rgba(255,255,255,0.1);
	--shadow: var(--shadow-8);
	--grad-accent: linear-gradient(135deg, var(--accent), var(--accent-hover));
	--focus: var(--focus-outline);
}
/* Light Theme - Fluent UI Colors */
.light-theme:root, .light-theme body {
	--bg: #ffffff;
	--bg-alt: #faf9f8;
	--bg-elev: #f3f2f1;
	--fg: #323130;
	--fg-dim: #605e5c;
	--fg-subtle: #8a8886;
	
	--accent: #0078d4;
	--accent-hover: #106ebe;
	--accent-pressed: #005a9e;
	--accent-subtle: rgba(0, 120, 212, 0.1);
	
	--success: #107c10;
	--warning: #ff8c00;
	--danger: #d13438;
	--info: #0078d4;
	
	--surface-primary: #ffffff;
	--surface-secondary: #faf9f8;
	--surface-tertiary: #f3f2f1;
	
	--shadow-2: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0px 2px rgba(0, 0, 0, 0.06);
	--shadow-4: 0 2px 4px rgba(0, 0, 0, 0.08), 0 0px 4px rgba(0, 0, 0, 0.06);
	--shadow-8: 0 4px 8px rgba(0, 0, 0, 0.08), 0 0px 8px rgba(0, 0, 0, 0.06);
	--shadow-16: 0 8px 16px rgba(0, 0, 0, 0.08), 0 0px 16px rgba(0, 0, 0, 0.06);
	
	--border: 1px solid #e1dfdd;
	--shadow: var(--shadow-8);
}

/* Fluent UI Enhanced Header & Navigation */
.app-header { 
	position: sticky; 
	top: 0; 
	display: block; 
	padding: 0; 
	background: rgba(30, 30, 30, 0.95); 
	backdrop-filter: blur(24px) saturate(180%); 
	border-bottom: 1px solid var(--surface-tertiary); 
	z-index: 50; 
	box-shadow: var(--shadow-4);
}

.header-inner { 
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center; 
	padding: var(--space-s) var(--space-m); 
	gap: var(--space-l);
	min-height: 64px;
}

.light-theme .app-header { 
	background: rgba(255, 255, 255, 0.95); 
	border-bottom: 1px solid var(--surface-tertiary);
}

.brand { 
	display: flex; 
	align-items: center; 
	gap: var(--space-s); 
	text-decoration: none;
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	padding: var(--space-xs);
	border-radius: var(--radius-m);
}

.brand:hover {
	background: var(--accent-subtle);
}

.logo-circle { 
	width: 40px; 
	height: 40px; 
	border-radius: var(--radius-xl); 
	background: var(--grad-accent); 
	display: inline-flex; 
	align-items: center; 
	justify-content: center; 
	font-weight: 600; 
	color: #fff; 
	font-size: 16px; 
	box-shadow: var(--shadow-4); 
}

.logo-image { 
	width: 95px; 
	height: 45px; 
	object-fit: contain; 
	object-position: center;
	border-radius: var(--radius-s);
}

.app-header h1 { 
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	margin: 0; 
	color: var(--fg); 
}

.light-theme .app-header h1 { 
	color: var(--fg); 
}

/* Enhanced Main Navigation */
.main-nav { 
	display: flex; 
	align-items: center; 
	justify-content: center;
	gap: var(--space-xs); 
	flex-wrap: wrap; 
}

.nav-link { 
	position: relative; 
	text-decoration: none; 
	color: var(--fg-dim); 
	font-size: 14px;
	font-weight: 500;
	padding: var(--space-s) var(--space-m); 
	border-radius: var(--radius-m); 
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); 
	line-height: 20px;
	white-space: nowrap;
}

.nav-link:hover { 
	color: var(--fg); 
	background: var(--accent-subtle); 
}

.nav-link:focus-visible { 
	outline: none; 
	box-shadow: var(--focus-outline); 
	outline-offset: var(--focus-outline-offset);
}

.nav-link.active {
	color: var(--accent);
	background: var(--accent-subtle);
	font-weight: 600;
}

.nav-link.active::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 50%;
	transform: translateX(-50%);
	width: 20px;
	height: 2px;
	background: var(--accent);
	border-radius: 1px;
}

/* User Actions Section */
.user-actions {
	display: flex;
	align-items: center;
	gap: var(--space-s);
}

.user-indicator { 
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	background: var(--surface-secondary); 
	padding: var(--space-xs) var(--space-s); 
	border-radius: 20px; 
	border: 1px solid var(--surface-tertiary); 
	color: var(--fg-dim); 
	white-space: nowrap;
}

/* Enhanced Theme Toggle */
.theme-toggle { 
	background: var(--surface-secondary); 
	color: var(--fg-dim); 
	padding: var(--space-s); 
	border: 1px solid var(--surface-tertiary); 
	border-radius: var(--radius-m); 
	width: 40px; 
	height: 40px; 
	display: inline-flex; 
	align-items: center; 
	justify-content: center; 
	font-size: 16px; 
	line-height: 1; 
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
}

.theme-toggle:hover { 
	color: var(--fg); 
	background: var(--surface-tertiary); 
	border-color: var(--fg-dim);
}

.theme-toggle:focus-visible {
	outline: none;
	box-shadow: var(--focus-outline);
}

/* Enhanced Fluent UI Metrics Bar */
.metrics-bar { 
	display: block; 
	background: var(--surface-secondary); 
	border-bottom: 1px solid var(--surface-tertiary); 
	box-shadow: var(--shadow-2);
}

.metrics-inner { 
	display: flex; 
	gap: var(--space-l); 
	padding: var(--space-m); 
	flex-wrap: wrap; 
	justify-content: center;
	max-width: 1200px;
	margin: 0 auto;
}

.metrics-bar .metric { 
	display: flex; 
	flex-direction: column; 
	align-items: center;
	min-width: 80px; 
	text-align: center;
}

.metrics-bar .label { 
	font-size: 12px; 
	font-weight: 600; 
	line-height: 16px;
	text-transform: uppercase; 
	color: var(--fg-subtle); 
	margin-bottom: var(--space-xs);
	letter-spacing: 0.5px;
}

.metrics-bar .value { 
	font-size: 20px; 
	font-weight: 600; 
	line-height: 28px;
	color: var(--fg); 
	font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
	.metrics-inner {
		gap: var(--space-m);
		padding: var(--space-s);
	}
	
	.metrics-bar .metric {
		min-width: 60px;
	}
	
	.metrics-bar .value {
		font-size: 18px;
		line-height: 24px;
	}
}

/* Fluent UI Typography Scale */
.fluent-display {
	font-size: 68px;
	font-weight: 600;
	line-height: 92px;
}

.fluent-title-large {
	font-size: 40px;
	font-weight: 600;
	line-height: 52px;
}

.fluent-title {
	font-size: 28px;
	font-weight: 600;
	line-height: 36px;
}

.fluent-subtitle {
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
}

.fluent-body-large {
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
}

.fluent-body {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}

.fluent-body-strong {
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
}

.fluent-caption {
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
}

.fluent-caption-strong {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
}

/* Apply Fluent typography to semantic elements */
h1 { 
	font-size: 28px;
	font-weight: 600;
	line-height: 36px;
	margin: 0 0 var(--space-m);
	color: var(--fg);
}

h2 { 
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
	margin: 0 0 var(--space-m);
	color: var(--fg);
}

h3 { 
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	margin: 0 0 var(--space-s);
	color: var(--fg);
}

h4 { 
	font-size: 16px;
	font-weight: 600;
	line-height: 22px;
	margin: 0 0 var(--space-s);
	color: var(--fg);
}

h5, h6 { 
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	margin: 0 0 var(--space-xs);
	color: var(--fg);
}

p { 
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	margin: 0 0 var(--space-m);
	max-width: 75ch;
	color: var(--fg);
}

/* Enhanced Layout System - Fluent UI Page Structure */
.app-main { 
	padding: 0;
	max-width: 1480px; 
	margin-inline: auto; 
	width: 100%; 
	min-height: calc(100vh - 140px);
}

.page-container {
	padding: var(--space-l) var(--space-m) var(--space-xxl);
}

.page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-l);
	flex-wrap: wrap;
	gap: var(--space-m);
}

.page-title {
	font-size: 28px;
	font-weight: 600;
	line-height: 36px;
	margin: 0;
	color: var(--fg);
}

.page-subtitle {
	font-size: 16px;
	font-weight: 400;
	line-height: 22px;
	margin: var(--space-xs) 0 0 0;
	color: var(--fg-dim);
}

.page-actions {
	display: flex;
	gap: var(--space-s);
	align-items: center;
}

/* Fluent UI Breadcrumb Navigation */
.breadcrumb {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	margin-bottom: var(--space-m);
	padding: var(--space-s) 0;
	font-size: 14px;
	line-height: 20px;
}

.breadcrumb-item {
	display: flex;
	align-items: center;
	color: var(--fg-dim);
}

.breadcrumb-item a {
	color: var(--accent);
	text-decoration: none;
	transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.breadcrumb-item a:hover {
	color: var(--accent-hover);
	text-decoration: underline;
}

.breadcrumb-item:not(:last-child)::after {
	content: "›";
	margin-left: var(--space-s);
	margin-right: var(--space-xs);
	color: var(--fg-subtle);
	font-weight: 400;
}

.breadcrumb-item:last-child {
	color: var(--fg);
	font-weight: 500;
}

/* Enhanced Content Layouts */
.content-grid {
	display: grid;
	gap: var(--space-l);
	margin-top: var(--space-l);
}

.content-grid.two-column {
	grid-template-columns: 1fr 320px;
	align-items: start;
}

.content-grid.three-column {
	grid-template-columns: 240px 1fr 320px;
	align-items: start;
}

@media (max-width: 1024px) {
	.content-grid.two-column,
	.content-grid.three-column {
		grid-template-columns: 1fr;
		gap: var(--space-m);
	}
}

.content-section {
	background: var(--surface-primary);
	border: 1px solid var(--surface-tertiary);
	border-radius: var(--radius-l);
	padding: var(--space-l);
	box-shadow: var(--shadow-2);
}

.content-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-m);
}

.content-section-title {
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	margin: 0;
	color: var(--fg);
}

.content-section-actions {
	display: flex;
	gap: var(--space-xs);
}

.inner { 
	max-width: 1480px; 
	margin: 0 auto; 
	width: 100%; 
}

/* Fluent UI Spacing Utilities */
.mb-xs { margin-bottom: var(--space-xs); }
.mb-s { margin-bottom: var(--space-s); }
.mb-m { margin-bottom: var(--space-m); }
.mb-l { margin-bottom: var(--space-l); }
.mb-xl { margin-bottom: var(--space-xl); }

.mt-xs { margin-top: var(--space-xs); }
.mt-s { margin-top: var(--space-s); }
.mt-m { margin-top: var(--space-m); }
.mt-l { margin-top: var(--space-l); }
.mt-xl { margin-top: var(--space-xl); }

.p-xs { padding: var(--space-xs); }
.p-s { padding: var(--space-s); }
.p-m { padding: var(--space-m); }
.p-l { padding: var(--space-l); }
.p-xl { padding: var(--space-xl); }
/* Enhanced Responsive Grid System */
.areas-grid { 
	--min: 280px; 
	display: grid; 
	gap: var(--space-m); 
	grid-template-columns: repeat(auto-fill, minmax(var(--min), 1fr)); 
	margin-top: var(--space-m); 
}

@media (min-width: 640px) {
	.areas-grid {
		--min: 320px;
		gap: var(--space-l);
	}
}

@media (min-width: 1024px) {
	.areas-grid {
		--min: 350px;
		gap: var(--space-xl);
	}
}

/* Enhanced Data Tables */
.table-container {
	background: var(--surface-primary);
	border: 1px solid var(--surface-tertiary);
	border-radius: var(--radius-l);
	overflow: hidden;
	box-shadow: var(--shadow-2);
	margin-top: var(--space-m);
}

table { 
	width: 100%; 
	border-collapse: collapse; 
	margin: 0;
}

thead {
	background: var(--surface-secondary);
	border-bottom: 1px solid var(--surface-tertiary);
}

thead th { 
	text-align: left; 
	font-size: 12px;
	font-weight: 600; 
	line-height: 16px;
	letter-spacing: 0.5px; 
	text-transform: uppercase; 
	color: var(--fg-subtle); 
	padding: var(--space-m) var(--space-s);
	border-right: 1px solid var(--surface-tertiary);
}

thead th:last-child {
	border-right: none;
}

tbody td { 
	background: var(--surface-primary); 
	padding: var(--space-m) var(--space-s); 
	font-size: 14px; 
	line-height: 20px;
	border-bottom: 1px solid var(--surface-tertiary);
	border-right: 1px solid var(--surface-tertiary);
	color: var(--fg);
}

tbody td:last-child {
	border-right: none;
}

tbody tr:last-child td {
	border-bottom: none;
}

tbody tr:hover td { 
	background: var(--surface-secondary); 
}

tbody a { 
	color: var(--accent); 
	text-decoration: none; 
	font-weight: 500;
}

tbody a:hover { 
	text-decoration: underline; 
	color: var(--accent-hover);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
	.header-inner {
		grid-template-columns: 1fr;
		gap: var(--space-m);
		text-align: center;
	}
	
	.brand {
		justify-content: center;
	}
	
	.main-nav {
		justify-content: center;
		flex-wrap: wrap;
		gap: var(--space-xs);
	}
	
	.user-actions {
		justify-content: center;
		flex-wrap: wrap;
	}
	
	.metrics-inner {
		justify-content: space-around;
		gap: var(--space-s);
		padding: var(--space-s);
	}
	
	.page-container {
		padding: var(--space-m);
	}
	
	.page-header {
		text-align: center;
		flex-direction: column;
		gap: var(--space-s);
	}
	
	.page-actions {
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.app-header h1 {
		font-size: 16px;
	}
	
	.nav-link {
		padding: var(--space-xs) var(--space-s);
		font-size: 13px;
	}
	
	.user-indicator {
		font-size: 11px;
		padding: 4px var(--space-xs);
	}
	
	.page-title {
		font-size: 24px;
		line-height: 32px;
	}
	
	.areas-grid {
		--min: 240px;
		gap: var(--space-s);
	}
}
/* Fluent UI Card System */
.fluent-card {
	background: var(--surface-primary);
	border: 1px solid var(--surface-tertiary);
	border-radius: var(--radius-l);
	padding: var(--space-m);
	box-shadow: var(--shadow-2);
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.fluent-card:hover {
	box-shadow: var(--shadow-4);
	border-color: var(--surface-secondary);
}

.fluent-card-elevated {
	background: var(--surface-secondary);
	border: 1px solid var(--surface-tertiary);
	border-radius: var(--radius-l);
	padding: var(--space-m);
	box-shadow: var(--shadow-4);
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.fluent-card-elevated:hover {
	box-shadow: var(--shadow-8);
	transform: translateY(-2px);
}

.card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-m);
}

.card-title {
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	margin: 0;
	color: var(--fg);
}

.card-subtitle {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	margin: var(--space-xs) 0 0 0;
	color: var(--fg-dim);
}

.card-content {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: var(--fg);
}

.card-footer {
	margin-top: var(--space-m);
	padding-top: var(--space-m);
	border-top: 1px solid var(--surface-tertiary);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s);
}

/* Updated Area Cards with Fluent UI */
.area-card { 
	position: relative; 
	padding: var(--space-m); 
	border-radius: var(--radius-l); 
	background: var(--surface-primary); 
	border: 1px solid var(--surface-tertiary); 
	display: flex; 
	flex-direction: column; 
	gap: var(--space-s); 
	text-decoration: none; 
	color: inherit; 
	overflow: hidden; 
	isolation: isolate; 
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); 
	box-shadow: var(--shadow-2);
}

.area-card:hover { 
	transform: translateY(-2px); 
	box-shadow: var(--shadow-8); 
	border-color: var(--surface-secondary);
}

.area-card h3 { 
	margin: 0 0 var(--space-xs) 0; 
	font-size: 16px; 
	font-weight: 600; 
	line-height: 22px; 
	color: var(--fg);
}

.area-card::before { 
	content: ""; 
	position: absolute; 
	inset: 0; 
	background: linear-gradient(125deg, var(--accent-subtle), transparent 40%); 
	opacity: 0; 
	transition: 0.15s opacity; 
	pointer-events: none; 
}

.area-card:hover::before { 
	opacity: 1; 
}

.area-card::after { 
	content: ""; 
	position: absolute; 
	left: 0; 
	top: 0; 
	height: 4px; 
	width: calc(var(--sev, 0) * 1%); 
	background: linear-gradient(90deg, var(--warning), var(--danger)); 
	border-top-left-radius: var(--radius-l); 
	border-top-right-radius: var(--radius-l); 
}

.area-card ul { 
	list-style: none; 
	padding: 0; 
	margin: var(--space-xs) 0 var(--space-s) 0; 
	font-size: 12px; 
	font-weight: 400; 
	line-height: 16px;
	display: grid; 
	gap: var(--space-xs); 
}

.area-card li { 
	color: var(--fg-dim); 
}

.area-card svg { 
	margin-top: auto; 
	width: 100%; 
	height: auto; 
	aspect-ratio: 6/1; 
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.area-card svg path { 
	vector-effect: non-scaling-stroke; 
}

/* Product area icon styling */
.area-card .icon { 
	width: 48px; 
	height: 48px; 
	border-radius: var(--radius-l); 
	background: var(--surface-secondary); 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	box-shadow: var(--shadow-2);
	margin: 0 0 var(--space-s) 0; 
}

.area-card .icon img { 
	width: 60%; 
	height: 60%; 
	object-fit: contain; 
}

/* Enhanced Status and Priority Indicators */
.status-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-xs) var(--space-s);
	border-radius: var(--radius-s);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border: 1px solid transparent;
	min-height: 24px;
	white-space: nowrap;
}

/* Status Icons */
.status-badge::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.status-badge.new {
	background: var(--info);
	color: #ffffff;
}

.status-badge.triaged {
	background: var(--warning);
	color: #000000;
}

.status-badge.in-progress,
.status-badge.inprogress {
	background: var(--primary);
	color: #ffffff;
}

.status-badge.resolved,
.status-badge.closed {
	background: var(--success);
	color: #ffffff;
}

.status-badge.rejected {
	background: var(--danger);
	color: #ffffff;
}

/* Severity Badges */
.severity-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-xs) var(--space-s);
	border-radius: var(--radius-s);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-semibold);
	text-transform: capitalize;
	min-height: 24px;
	white-space: nowrap;
}

.severity-badge.low {
	background: var(--success);
	color: #ffffff;
}

.severity-badge.medium {
	background: var(--warning);
	color: #000000;
}

.severity-badge.high {
	background: var(--danger);
	color: #ffffff;
}

.severity-badge.critical {
	background: #8B0000;
	color: #ffffff;
}

/* Type Badges */
.type-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-xs) var(--space-s);
	border-radius: var(--radius-s);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-semibold);
	min-height: 24px;
	white-space: nowrap;
	transition: all 0.2s ease;
	cursor: default;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.type-badge:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.type-badge.bug {
	background: var(--danger);
	color: #ffffff;
}

.type-badge.bug:hover {
	background: #c42e3a;
	box-shadow: 0 4px 8px rgba(212, 47, 58, 0.3);
}

.type-badge.idea {
	background: var(--accent);
	color: #ffffff;
}

.type-badge.idea:hover {
	background: var(--accent-pressed);
	box-shadow: 0 4px 8px rgba(0, 120, 212, 0.3);
}

/* Enhanced Content Display Components */
.meta-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-m);
	margin-bottom: var(--space-l);
}

.meta-item {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.meta-label {
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-semibold);
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.meta-value {
	font-size: var(--font-size-body);
	color: var(--text-primary);
	font-weight: var(--font-weight-medium);
}

/* Enhanced Description Display */
.description-content {
	background: var(--surface-secondary);
	border: 1px solid var(--surface-tertiary);
	border-radius: var(--radius-m);
	padding: var(--space-m);
	font-family: var(--font-monospace);
	font-size: var(--font-size-body);
	line-height: var(--line-height-relaxed);
	color: var(--text-primary);
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Priority Indicators */
.priority-indicator {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-semibold);
}

.priority-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
}

.priority-indicator.high .priority-dot {
	background: var(--danger);
	box-shadow: 0 0 0 2px var(--danger-light);
}

.priority-indicator.medium .priority-dot {
	background: var(--warning);
	box-shadow: 0 0 0 2px var(--warning-light);
}

.priority-indicator.low .priority-dot {
	background: var(--success);
	box-shadow: 0 0 0 2px var(--success-light);
}

/* Enhanced Form Styling */
.edit-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-l);
}

.form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--space-m);
}

.form-group.full-width {
	grid-column: 1 / -1;
}

.form-actions {
	display: flex;
	gap: var(--space-s);
	justify-content: flex-start;
	align-items: center;
	margin-top: var(--space-m);
}

.form-message {
	padding: var(--space-s) var(--space-m);
	border-radius: var(--radius-s);
	background: var(--color-success-background);
	color: var(--color-success-foreground);
	border: 1px solid var(--color-success-border);
	font-size: var(--font-size-caption);
}

/* Enhanced File Display */
.file-details {
	color: var(--text-secondary);
	font-size: var(--font-size-caption);
	margin-left: var(--space-xs);
}

.upload-section {
	margin-top: var(--space-m);
	padding: var(--space-m);
	border: 2px dashed var(--surface-tertiary);
	border-radius: var(--radius-m);
	background: var(--surface-secondary);
	text-align: center;
}

.upload-status {
	margin-top: var(--space-s);
	font-size: var(--font-size-caption);
	color: var(--text-secondary);
}

.file-input {
	margin-bottom: var(--space-s);
}

/* Empty State Styling */
.empty-state {
	text-align: center;
	color: var(--text-secondary);
	font-style: italic;
	padding: var(--space-xl);
}

/* Triage Controls */
.triage-controls {
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
}

.status-message {
	padding: var(--space-s) var(--space-m);
	border-radius: var(--radius-s);
	background: var(--color-info-background);
	color: var(--color-info-foreground);
	border: 1px solid var(--color-info-border);
	font-size: var(--font-size-caption);
}

.triage-notes {
	margin-top: var(--space-l);
}

.triage-notes h4 {
	font-size: var(--font-size-subtitle);
	font-weight: var(--font-weight-semibold);
	margin-bottom: var(--space-s);
	color: var(--text-primary);
}

/* Enhanced Attachment Styling */
.attachment-fieldset {
	border: 1px solid var(--surface-tertiary);
	border-radius: var(--radius-m);
	padding: var(--space-l);
	margin: var(--space-l) 0;
	background: var(--surface-secondary);
}

.attachment-fieldset legend {
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	padding: 0 var(--space-s);
}

.screenshot-preview {
	max-width: 120px;
	max-height: 90px;
	display: block;
	margin-top: var(--space-xs);
	border: 1px solid var(--surface-tertiary);
	border-radius: var(--radius-s);
}

/* Enhanced Area Card Metrics */
.metrics-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	margin: var(--space-m) 0;
}

.metric-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-xs) 0;
}

.metric-label {
	font-size: var(--font-size-caption);
	color: var(--text-secondary);
	font-weight: var(--font-weight-medium);
}

.metric-value {
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
}

.metric-value.has-issues {
	color: var(--danger);
}

.metric-value.has-ideas {
	color: var(--primary);
}

/* Phase 5: Micro-interactions & Polish */

/* Global Smooth Transitions */
* {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, 
	            box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

/* Enhanced Button Interactions */
.btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-4);
}

.btn:active {
	transform: translateY(0);
	box-shadow: var(--shadow-2);
}

.btn:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

/* Enhanced Content Section Hover */
.content-section:hover {
	border-color: var(--primary-light);
	box-shadow: var(--shadow-4);
}

/* Enhanced Table Row Animations */
.data-table tbody tr {
	transition: all 0.2s ease;
}

.data-table tbody tr:hover {
	background: var(--surface-hover);
	transform: scale(1.002);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Form Input Focus Effects */
.form-control:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 2px var(--primary-light);
	transform: scale(1.02);
}

/* Loading States */
.loading {
	position: relative;
	overflow: hidden;
}

.loading::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
	animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
	0% { left: -100%; }
	100% { left: 100%; }
}

/* Smooth Page Entry */
.page-content {
	animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Badge Pulse for New Items */
.badge-pulse {
	animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}

/* Chip Select Animation */
@keyframes chipSelect {
	0% { transform: scale(1); }
	50% { transform: scale(1.1); }
	100% { transform: scale(1.05); }
}

/* Vote Button Animation */
.vote-btn:hover {
	transform: scale(1.1);
}

.vote-btn[aria-pressed="true"] {
	animation: voteSuccess 0.4s ease-out;
}

@keyframes voteSuccess {
	0% { transform: scale(1); }
	50% { transform: scale(1.2); }
	100% { transform: scale(1.1); }
}

/* Progress Indicators */
.progress-ring {
	width: 16px;
	height: 16px;
	border: 2px solid transparent;
	border-top: 2px solid currentColor;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	display: inline-block;
	margin-right: var(--space-xs);
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Enhanced Button Loading States */
.btn.loading {
	position: relative;
	pointer-events: none;
}

.btn.loading::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.1);
	border-radius: inherit;
	animation: shimmer 1.5s infinite;
}

/* Notification Animations */
.notification {
	animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
	from { transform: translateX(100%); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}

/* Success Message Pop */
.success-message {
	animation: successPop 0.5s ease-out;
}

@keyframes successPop {
	0% { opacity: 0; transform: scale(0.8) translateY(-10px); }
	100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Staggered Metric Animations */
.metrics-list .metric-item:nth-child(1) { animation-delay: 0.1s; }
.metrics-list .metric-item:nth-child(2) { animation-delay: 0.2s; }
.metrics-list .metric-item:nth-child(3) { animation-delay: 0.3s; }
.metrics-list .metric-item:nth-child(4) { animation-delay: 0.4s; }

.metric-item-animate {
	animation: slideInUp 0.3s ease-out;
}

@keyframes slideInUp {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Enhanced Focus Indicators */
.nav-link:focus-visible,
.chip:focus-visible,
a:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
	border-radius: var(--radius-s);
}

/* Drag and Drop Enhancement */
.drop-zone.drag-over {
	border-color: var(--primary);
	background: var(--primary-light);
	transform: scale(1.02);
}

/* Status Change Glow Effect */
.status-changing::before {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: linear-gradient(45deg, var(--primary), var(--secondary));
	border-radius: var(--radius-s);
	z-index: -1;
	animation: statusGlow 1s ease-in-out;
}

@keyframes statusGlow {
	0%, 100% { opacity: 0; }
	50% { opacity: 0.6; }
}

.pager-info {
	color: var(--text-secondary);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-medium);
}

/* Fluent UI Forms System */
.form-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	margin-bottom: var(--space-m);
}

.form-group label {
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--fg);
	margin: 0;
}

.form-description {
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	color: var(--fg-subtle);
	margin-top: var(--space-xs);
}

/* Fluent UI Input Controls */
input, select, textarea {
	font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: var(--fg);
	background: var(--surface-secondary);
	border: 1px solid var(--fg-subtle);
	border-radius: var(--radius-s);
	padding: var(--space-s) 12px;
	width: 100%;
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	outline: none;
}

input:hover, select:hover, textarea:hover {
	border-color: var(--fg-dim);
}

input:focus, select:focus, textarea:focus {
	border-color: var(--accent);
	box-shadow: inset 0 0 0 1px var(--accent);
}

input:disabled, select:disabled, textarea:disabled {
	background: var(--bg-alt);
	border-color: var(--fg-subtle);
	color: var(--fg-subtle);
	cursor: not-allowed;
}

textarea {
	resize: vertical;
	min-height: 80px;
}

select {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
	background-position: right 12px center;
	background-repeat: no-repeat;
	background-size: 16px 12px;
	padding-right: 40px;
}

/* Form Validation */
.validation-summary {
	background: rgba(209, 52, 56, 0.1);
	border: 1px solid var(--danger);
	border-radius: var(--radius-s);
	padding: var(--space-s) var(--space-m);
	margin-bottom: var(--space-m);
	font-size: 14px;
	line-height: 20px;
	display: none; /* Hide by default, only show when validation errors exist */
}

.validation-summary:not(:empty) {
	display: block; /* Show when it contains content */
}

.validation-summary ul {
	margin: 0;
	padding: 0 0 0 var(--space-m);
}

.validation-summary li {
	color: var(--danger);
	font-weight: 400;
}

/* Inline Editing Styles */
.inline-edit-form {
	width: 100%;
	margin: 0;
}

.title-input {
	font-size: var(--font-size-title-2);
	font-weight: var(--font-weight-semibold);
	padding: var(--space-s);
	margin: 0;
	width: 100%;
	background: var(--bg-elev);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-s);
	color: var(--fg);
}

.title-input:focus {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

.inline-edit-content {
	width: 100%;
}

.inline-edit-content .form-group {
	margin-bottom: var(--space-m);
}

.inline-edit-content .meta-grid .form-control {
	font-size: var(--font-size-body);
	padding: var(--space-xs) var(--space-s);
	min-height: auto;
}

/* Fluent People Cards */
.people-card {
	display: inline-flex;
	align-items: center;
	gap: var(--space-s);
	position: relative;
	cursor: pointer;
	transition: all 0.2s ease;
	border-radius: var(--radius-s);
	padding: var(--space-xs);
}

.people-card:hover {
	background: var(--bg-elev);
}

.people-avatar {
	position: relative;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
}

.people-card.large .people-avatar {
	width: 40px;
	height: 40px;
}

.people-card.small .people-avatar {
	width: 24px;
	height: 24px;
}

.avatar-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.avatar-initials {
	color: #ffffff;
	font-weight: var(--font-weight-semibold);
	font-size: 14px;
	line-height: 1;
}

.people-card.large .avatar-initials {
	font-size: 16px;
}

.people-card.small .avatar-initials {
	font-size: 12px;
}

.people-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.people-name {
	font-weight: var(--font-weight-medium);
	color: var(--fg);
	font-size: var(--font-size-body);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.people-details {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.people-title,
.people-department {
	font-size: var(--font-size-caption);
	color: var(--fg-subtle);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Hover Card */
.people-hover-card {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	background: var(--bg-elev);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-16);
	padding: var(--space-m);
	min-width: 280px;
	margin-top: var(--space-xs);
	animation: fadeIn 0.2s ease;
}

.hover-card-content {
	display: flex;
	align-items: flex-start;
	gap: var(--space-m);
}

.hover-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.hover-avatar-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hover-avatar-initials {
	color: #ffffff;
	font-weight: var(--font-weight-semibold);
	font-size: 24px;
	line-height: 1;
}

.hover-info {
	flex: 1;
	min-width: 0;
}

.hover-name {
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-semibold);
	color: var(--fg);
	margin: 0 0 var(--space-xs) 0;
	line-height: 1.3;
}

.hover-title,
.hover-department,
.hover-location,
.hover-email,
.hover-phone {
	font-size: var(--font-size-caption);
	color: var(--fg-subtle);
	margin: 0 0 4px 0;
	line-height: 1.2;
	display: flex;
	align-items: center;
	gap: 4px;
}

.hover-email {
	color: var(--accent);
}

@keyframes fadeIn {
	from { 
		opacity: 0; 
		transform: translateY(-4px); 
	}
	to { 
		opacity: 1; 
		transform: translateY(0); 
	}
}

/* Compact People Card Variants */
.people-card.inline {
	padding: 0;
	background: none;
}

.people-card.inline:hover {
	background: none;
}

.people-card.inline .people-name {
	color: var(--accent);
	font-weight: var(--font-weight-medium);
}

.people-card.inline .people-name:hover {
	text-decoration: underline;
}

.field-validation-error {
	color: var(--danger);
	font-size: 12px;
	font-weight: 400;
	margin-top: var(--space-xs);
}

.input-validation-error {
	border-color: var(--danger) !important;
	box-shadow: inset 0 0 0 1px var(--danger) !important;
}

/* Legacy form styling for existing forms */
label { 
	font-size: 14px; 
	font-weight: 600; 
	line-height: 20px; 
	color: var(--fg); 
	display: inline-block; 
	margin-bottom: var(--space-xs); 
}

fieldset { 
	border: 1px solid var(--fg-subtle); 
	border-radius: var(--radius-m); 
	padding: var(--space-m); 
	margin-top: var(--space-l); 
}

legend { 
	padding: 0 var(--space-s); 
	font-size: 14px; 
	font-weight: 600; 
	line-height: 20px; 
	color: var(--fg); 
}

/* Fluent UI Button System */
button {
	font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	cursor: pointer;
	border: none;
	border-radius: var(--radius-s);
	padding: var(--space-s) var(--space-m);
	background: var(--accent);
	color: #ffffff;
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	outline: none;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	min-height: 32px;
}

button:hover {
	background: var(--accent-hover);
	transform: none;
}

button:active {
	background: var(--accent-pressed);
	transform: none;
}

button:focus-visible {
	box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px rgba(0, 120, 212, 0.3);
}

button:disabled {
	background: var(--fg-subtle);
	color: var(--surface-secondary);
	cursor: not-allowed;
	opacity: 1;
}

/* Button Variants */
.btn-secondary {
	background: var(--surface-secondary);
	color: var(--fg);
	border: 1px solid var(--fg-subtle);
}

.btn-secondary:hover {
	background: var(--surface-tertiary);
	border-color: var(--fg-dim);
}

.btn-secondary:active {
	background: var(--bg-alt);
}

.btn-subtle {
	background: transparent;
	color: var(--fg);
	border: 1px solid transparent;
}

.btn-subtle:hover {
	background: var(--surface-secondary);
}

.btn-subtle:active {
	background: var(--surface-tertiary);
}

.btn-danger {
	background: var(--danger);
	color: #ffffff;
}

.btn-danger:hover {
	background: #b92b2b;
}

.btn-danger:active {
	background: #a02626;
}

.btn-sm {
	font-size: 12px;
	line-height: 16px;
	padding: 6px var(--space-s);
	min-height: 24px;
}

.btn-lg {
	font-size: 16px;
	line-height: 22px;
	padding: 12px var(--space-l);
	min-height: 40px;
}

/* Button Groups */
.triage-buttons { 
	display: flex; 
	gap: var(--space-s); 
	flex-wrap: wrap; 
	margin: var(--space-m) 0; 
}

.triage-buttons button { 
	flex: 1 1 140px; 
}

.btn-group {
	display: inline-flex;
	border-radius: var(--radius-s);
	overflow: hidden;
}

.btn-group button {
	border-radius: 0;
	border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-group button:first-child {
	border-radius: var(--radius-s) 0 0 var(--radius-s);
}

.btn-group button:last-child {
	border-radius: 0 var(--radius-s) var(--radius-s) 0;
	border-right: none;
}

.btn-group button:only-child {
	border-radius: var(--radius-s);
	border-right: none;
}

/* Link-like buttons */
.linklike { 
	background: transparent; 
	color: var(--accent); 
	border: none;
	padding: 0 var(--space-xs); 
	font-weight: 400;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.linklike:hover { 
	color: var(--accent-hover);
	background: transparent;
}

.linklike:active {
	color: var(--accent-pressed);
	background: transparent;
}

/* Fluent UI Pager */
.pager { 
	margin-top: var(--space-l); 
	display: flex; 
	gap: var(--space-s); 
	align-items: center; 
	font-size: 14px; 
	font-weight: 400; 
	line-height: 20px; 
}

.pager a { 
	color: var(--accent); 
	text-decoration: none; 
	font-weight: 600; 
	padding: var(--space-xs) var(--space-s);
	border-radius: var(--radius-s);
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.pager a:hover { 
	background: var(--accent-subtle);
	text-decoration: none; 
}

/* Fluent UI Chips and Tags */
.filter-bar { 
	margin-top: var(--space-m); 
	background: var(--surface-secondary); 
	padding: var(--space-s) var(--space-m); 
	border: 1px solid var(--surface-tertiary); 
	border-radius: var(--radius-m); 
	display: flex; 
	align-items: center; 
	justify-content: space-between; 
	flex-wrap: wrap; 
	gap: var(--space-s); 
}

.filter-bar .chips { 
	display: flex; 
	gap: var(--space-xs); 
	flex-wrap: wrap; 
	align-items: center; 
}

.chip { 
	background: var(--surface-primary); 
	border: 1px solid var(--surface-tertiary); 
	padding: 4px var(--space-s); 
	border-radius: 16px; 
	font-size: 12px; 
	font-weight: 600; 
	line-height: 16px; 
	text-decoration: none; 
	color: var(--fg-dim); 
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); 
}

.chip:hover { 
	background: var(--surface-tertiary); 
	color: var(--fg); 
	border-color: var(--fg-dim);
}

.chip.active {
	background: var(--accent);
	color: #ffffff;
	border-color: var(--accent);
}

/* Themed chip styles for filter bar */
.chip.theme-product-area {
    background: rgba(0, 102, 204, 0.1);
    border-color: rgba(0, 102, 204, 0.2);
    color: #0066cc;
}

.chip.theme-product-area:hover {
    background: rgba(0, 102, 204, 0.15);
    border-color: rgba(0, 102, 204, 0.3);
    color: #004499;
}

.chip.theme-product-area.active {
    background: #0066cc;
    border-color: #0066cc;
    color: #ffffff;
}

.chip.theme-severity {
    background: rgba(255, 107, 53, 0.1);
    border-color: rgba(255, 107, 53, 0.2);
    color: #ff6b35;
}

.chip.theme-severity:hover {
    background: rgba(255, 107, 53, 0.15);
    border-color: rgba(255, 107, 53, 0.3);
    color: #e55a2e;
}

.chip.theme-severity.active {
    background: #ff6b35;
    border-color: #ff6b35;
    color: #ffffff;
}

.chip.theme-environment {
    background: rgba(40, 167, 69, 0.1);
    border-color: rgba(40, 167, 69, 0.2);
    color: #28a745;
}

.chip.theme-environment:hover {
    background: rgba(40, 167, 69, 0.15);
    border-color: rgba(40, 167, 69, 0.3);
    color: #1e7e34;
}

.chip.theme-environment.active {
    background: #28a745;
    border-color: #28a745;
    color: #ffffff;
}.chip.clear { 
	background: var(--danger); 
	color: #ffffff; 
	border-color: var(--danger);
}

.chip.clear:hover { 
	background: #b92b2b; 
	border-color: #b92b2b;
}

.filter-bar .sep { 
	width: 1px; 
	height: 18px; 
	background: var(--surface-tertiary); 
	margin: 0 var(--space-xs); 
}

/* Fluent UI Small Buttons */
.btn-small { 
	display: inline-flex; 
	align-items: center; 
	background: var(--surface-secondary); 
	border: 1px solid var(--surface-tertiary); 
	padding: 6px var(--space-s); 
	border-radius: var(--radius-s); 
	font-size: 12px; 
	font-weight: 600; 
	line-height: 16px; 
	text-decoration: none; 
	color: var(--fg-dim); 
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); 
}

.btn-small:hover { 
	background: var(--surface-tertiary); 
	color: var(--fg); 
	border-color: var(--fg-dim);
}
/* Fluent UI File Upload and Drop Zone */
.drop-zone { 
	background: var(--surface-secondary); 
	padding: var(--space-l); 
	border: 2px dashed var(--surface-tertiary); 
	border-radius: var(--radius-m); 
	font-size: 14px; 
	font-weight: 400; 
	line-height: 20px; 
	color: var(--fg-dim); 
	margin: var(--space-s) 0 var(--space-m) 0; 
	text-align: center; 
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.drop-zone:hover { 
	border-color: var(--accent); 
	color: var(--fg); 
	background: var(--surface-tertiary);
}

/* Fluent UI Attachment Previews */
.attachment-previews { 
	display: flex; 
	gap: var(--space-s); 
	flex-wrap: wrap; 
	margin: var(--space-s) 0 var(--space-m) 0; 
}

.preview-thumb { 
	display: inline-block; 
	width: 160px; 
	height: 120px; 
	border: 1px solid var(--surface-tertiary); 
	border-radius: var(--radius-m); 
	overflow: hidden; 
	position: relative; 
	background: var(--surface-secondary); 
}

.preview-thumb img { 
	width: 100%; 
	height: 100%; 
	object-fit: cover; 
	display: block; 
}

ul.attachment-list { 
	margin-top: var(--space-xs); 
	font-size: 14px; 
	line-height: 20px;
}

img[alt="screenshot preview"] { 
	border-radius: var(--radius-s); 
	box-shadow: var(--shadow-2);
}

/* Submissions header & filters */
.submissions-header { 
	display: flex; 
	align-items: center; 
	justify-content: space-between; 
	gap: var(--space-m); 
	flex-wrap: wrap; 
}

.submissions-actions { 
	display: flex; 
	gap: var(--space-s); 
}

/* Code blocks and pre */
pre { 
	background: var(--surface-secondary); 
	padding: var(--space-m); 
	border-radius: var(--radius-m); 
	border: 1px solid var(--surface-tertiary); 
	max-width: 100%; 
	overflow: auto; 
	font-size: 12px; 
	font-weight: 400; 
	line-height: 16px; 
	font-family: "Cascadia Code", "Consolas", "Courier New", monospace;
}

/* Animations */
@media (prefers-reduced-motion:no-preference){
	.area-card { transition:transform .35s cubic-bezier(.4,0,.2,1), box-shadow .4s; }
	button { transition:filter .25s; }
}

/* Scrollbar (webkit) */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:linear-gradient(var(--bg-alt),var(--bg-elev)); border-radius:20px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background:var(--bg-elev); }

/* Utility */
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); overflow:hidden; white-space:nowrap; }
/* Submission detail layout */
.detail-layout { display:flex; flex-direction:column; gap:2rem; }
@media (min-width: 980px){ .detail-layout { display:grid; grid-template-columns:1fr 300px; align-items:start; } }
.side-col { display:flex; flex-direction:column; gap:1.25rem; }

/* Vote and Comment Cards - Fluent UI Style */
.vote-box, .comments-box { 
	background: var(--surface-primary); 
	border: 1px solid var(--surface-tertiary); 
	border-radius: var(--radius-l); 
	padding: var(--space-m); 
	box-shadow: var(--shadow-2); 
}

.vote-box { 
	text-align: center; 
}

.vote-count { 
	font-size: 32px; 
	font-weight: 600; 
	line-height: 44px; 
	color: var(--accent); 
	margin: 0 0 var(--space-s) 0; 
}

.vote-btn { 
	width: 100%; 
	margin-bottom: var(--space-s); 
}

.vote-hint { 
	font-size: 12px; 
	font-weight: 400; 
	line-height: 16px; 
	color: var(--fg-subtle); 
	margin: 0; 
}

.comments-box h4 { 
	margin: 0 0 var(--space-m) 0; 
	font-size: 16px; 
	font-weight: 600; 
	line-height: 22px; 
	color: var(--fg);
}

.comment-list { 
	display: flex; 
	flex-direction: column; 
	gap: var(--space-s); 
	max-height: 420px; 
	overflow: auto; 
	margin-bottom: var(--space-m); 
}

.comment-item { 
	background: var(--surface-secondary); 
	border: 1px solid var(--surface-tertiary); 
	border-radius: var(--radius-m); 
	padding: var(--space-s); 
	font-size: 12px; 
	font-weight: 400; 
	line-height: 16px; 
}

.comment-meta { 
	font-size: 12px; 
	font-weight: 600; 
	line-height: 16px; 
	color: var(--fg-dim); 
	display: flex; 
	justify-content: space-between; 
	margin-bottom: var(--space-xs); 
}

.comment-body { 
	font-size: 14px; 
	font-weight: 400; 
	line-height: 20px; 
	color: var(--fg);
}

.comment-status { 
	font-size: 12px; 
	font-weight: 400; 
	line-height: 16px; 
	margin: var(--space-xs) 0 0 0; 
	color: var(--fg-subtle); 
}

.comments-box textarea { 
	font-size: 14px; 
	font-weight: 400; 
	line-height: 20px; 
}
.empty { font-size:.65rem; color:var(--fg-dim); }
.meta-line { font-size:.7rem; color:var(--fg-dim); margin-top:-.4rem; }

/* Button Group Component with Themes */
.button-group {
    margin-bottom: var(--space-m);
}

.button-group-label {
    display: block;
    margin-bottom: var(--space-xs);
    font-size: 14px;
    font-weight: 600;
    color: var(--fg);
}

.button-group-options {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.button-group-option {
    background: var(--surface-primary);
    border: 1px solid var(--surface-tertiary);
    padding: 6px var(--space-s);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    text-decoration: none;
    color: var(--fg-dim);
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.button-group-option:hover {
    background: var(--surface-tertiary);
    color: var(--fg);
    border-color: var(--fg-dim);
}

.button-group-option.active {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}

/* Theme: Product Area (Blue) */
.button-group.theme-product-area .button-group-option {
    background: rgba(0, 102, 204, 0.1);
    border-color: rgba(0, 102, 204, 0.2);
    color: #0066cc;
}

.button-group.theme-product-area .button-group-option:hover {
    background: rgba(0, 102, 204, 0.15);
    border-color: rgba(0, 102, 204, 0.3);
    color: #004499;
}

.button-group.theme-product-area .button-group-option.active {
    background: #0066cc;
    border-color: #0066cc;
    color: #ffffff;
}

/* Theme: Severity (Amber/Orange) */
.button-group.theme-severity .button-group-option {
    background: rgba(255, 107, 53, 0.1);
    border-color: rgba(255, 107, 53, 0.2);
    color: #ff6b35;
}

.button-group.theme-severity .button-group-option:hover {
    background: rgba(255, 107, 53, 0.15);
    border-color: rgba(255, 107, 53, 0.3);
    color: #e55a2e;
}

.button-group.theme-severity .button-group-option.active {
    background: #ff6b35;
    border-color: #ff6b35;
    color: #ffffff;
}

/* Theme: Environment (Green) */
.button-group.theme-environment .button-group-option {
    background: rgba(40, 167, 69, 0.1);
    border-color: rgba(40, 167, 69, 0.2);
    color: #28a745;
}

.button-group.theme-environment .button-group-option:hover {
    background: rgba(40, 167, 69, 0.15);
    border-color: rgba(40, 167, 69, 0.3);
    color: #1e7e34;
}

.button-group.theme-environment .button-group-option.active {
    background: #28a745;
    border-color: #28a745;
    color: #ffffff;
}

/* Theme: Default (existing accent color) */
.button-group.theme-default .button-group-option.active {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}

/* Skeletons */
.skeleton { --pulse: linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent); background:var(--bg-elev); position:relative; overflow:hidden; border-radius:6px; }
.skeleton::after { content:""; position:absolute; inset:0; background:var(--pulse); animation:pulse 1.4s linear infinite; }
@keyframes pulse { from { transform:translateX(-100%);} to { transform:translateX(100%);} }