/* ===== ACCESSGUARD AI - STANDARDIZED DESIGN SYSTEM ===== */
/*
 * Professional, accessible, and consistent styling for enterprise applications
 *
 * DESIGN PRINCIPLES:
 * - Consistent spacing using CSS custom properties
 * - WCAG AAA accessible color combinations
 * - Semantic color usage for clear meaning
 * - Standardized border radius for clean appearance
 * - Readable typography with proper line heights
 * - Unified badge/tag system for consistency
 *
 * TAG/BADGE SYSTEM:
 * - All badges use consistent padding and radius (--radius-sm)
 * - Entitlement tags are minimal for better readability
 * - Role badges use semantic colors based on function
 * - Status badges follow standard success/warning/error patterns
 * - No excessive rounded corners (bubble effects) for better text readability
 *
 * STANDARDIZED COMPONENTS:
 * - .tag, .badge: Base styling for all labels
 * - .role-badge: User role indicators
 * - .status-badge: Status indicators (active/inactive/processing)
 * - .type-badge: Content type classification
 * - .risk-indicator: Risk level indicators
 * - .provider-badge: Authentication provider labels
 */

/* ===== CSS CUSTOM PROPERTIES (VARIABLES) ===== */
:root {
	/* Primary Brand Colors */
	--primary-50: #e3f2fd;
	--primary-100: #bbdefb;
	--primary-200: #90caf9;
	--primary-300: #64b5f6;
	--primary-400: #42a5f5;
	--primary-500: #2196f3;
	--primary-600: #1976d2;
	--primary-700: #1565c0;
	--primary-800: #0d47a1;
	--primary-900: #0a237a;

	/* Neutral Colors - Enhanced contrast for accessibility */
	--neutral-50: #ffffff;
	--neutral-100: #f8f9fa;
	--neutral-200: #e9ecef;
	--neutral-300: #dee2e6;
	--neutral-400: #ced4da;
	--neutral-500: #adb5bd;
	--neutral-600: #6c757d;
	--neutral-700: #495057;
	--neutral-800: #343a40;
	--neutral-900: #212529;

	/* Semantic Colors - WCAG AAA compliant */
	--success-50: #d1edcc;
	--success-100: #a3db99;
	--success-200: #75c46c;
	--success-500: #198754;
	--success-600: #157347;
	--success-700: #146c43;

	--warning-50: #fff3cd;
	--warning-100: #ffecb5;
	--warning-200: #ffe69c;
	--warning-500: #fd7e14;
	--warning-600: #fd6500;
	--warning-700: #dc5500;

	--error-50: #f8d7da;
	--error-100: #f1aeb5;
	--error-200: #ea868f;
	--error-500: #dc3545;
	--error-600: #c82333;
	--error-700: #bd2130;

	--info-50: #d1ecf1;
	--info-100: #b3d9e3;
	--info-200: #9fc9d6;
	--info-500: #0dcaf0;
	--info-600: #0bb3d3;
	--info-700: #0aa1c0;

	/* Text Colors */
	--text-primary: #212529;
	--text-secondary: #6c757d;
	--text-muted: #adb5bd;
	--text-disabled: #ced4da;
	--text-inverse: #ffffff;

	/* Background Colors */
	--bg-primary: #ffffff;
	--bg-secondary: #f8f9fa;
	--bg-tertiary: #e9ecef;
	--bg-muted: #f1f3f4;
	--bg-app: #fafbfc;

	/* Border Colors */
	--border-color: #dee2e6;
	--border-light: #e9ecef;
	--border-focus: #86b7fe;

	/* Shadow Colors */
	--shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
	--shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	--shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);

	/* Spacing Scale */
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;

	/* Typography Scale */
	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;
	--font-size-2xl: 1.5rem;

	/* Border Radius */
	--radius-sm: 0.25rem;
	--radius: 0.375rem;
	--radius-lg: 0.5rem;
	--radius-xl: 0.75rem;
}

/* ===== ENHANCED DARK MODE SYSTEM ===== */
/* Default to dark mode for users with dark Chrome/system preference */
:root {
	/* These will be overridden by light mode if needed */
	color-scheme: dark;
}

/* System Dark Mode - Default behavior */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		/* Enhanced Dark Theme Colors - Better contrast and readability */
		--neutral-50: #0d1117;
		--neutral-100: #161b22;
		--neutral-200: #21262d;
		--neutral-300: #30363d;
		--neutral-400: #484f58;
		--neutral-500: #656d76;
		--neutral-600: #8b949e;
		--neutral-700: #b1bac4;
		--neutral-800: #c9d1d9;
		--neutral-900: #f0f6fc;

		/* High contrast text for better readability */
		--text-primary: #f0f6fc;
		--text-secondary: #8b949e;
		--text-muted: #656d76;
		--text-disabled: #484f58;
		--text-inverse: #0d1117;

		/* Dark backgrounds with proper hierarchy */
		--bg-primary: #0d1117;
		--bg-secondary: #161b22;
		--bg-tertiary: #21262d;
		--bg-muted: #30363d;
		--bg-app: #010409;

		/* Enhanced borders for dark mode */
		--border-color: #30363d;
		--border-light: #21262d;
		--border-focus: #58a6ff;

		/* Adjusted shadows for dark backgrounds */
		--shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4);
		--shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.6);
		--shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.7);

		/* Adjusted semantic colors for dark mode */
		--primary-50: #0d2947;
		--primary-100: #1e3a5f;
		--primary-200: #2d4a75;
		--primary-600: #58a6ff;
		--primary-700: #79c0ff;

		--success-50: #0f2419;
		--success-100: #1a332b;
		--success-600: #56d364;
		--success-700: #7ee787;

		--warning-50: #2c1e00;
		--warning-100: #3d2c00;
		--warning-600: #f2cc60;
		--warning-700: #f7d966;

		--error-50: #2f1619;
		--error-100: #421e25;
		--error-600: #f85149;
		--error-700: #ff7b72;

		--info-50: #0a1821;
		--info-100: #142536;
		--info-600: #79c0ff;
		--info-700: #9ecbff;
	}
}

/* System Light Mode */
@media (prefers-color-scheme: light) {
	:root:not([data-theme='dark']) {
		/* Original light theme colors */
		--neutral-50: #ffffff;
		--neutral-100: #f8f9fa;
		--neutral-200: #e9ecef;
		--neutral-300: #dee2e6;
		--neutral-400: #ced4da;
		--neutral-500: #adb5bd;
		--neutral-600: #6c757d;
		--neutral-700: #495057;
		--neutral-800: #343a40;
		--neutral-900: #212529;

		--text-primary: #212529;
		--text-secondary: #6c757d;
		--text-muted: #adb5bd;
		--text-disabled: #ced4da;
		--text-inverse: #ffffff;

		--bg-primary: #ffffff;
		--bg-secondary: #f8f9fa;
		--bg-tertiary: #e9ecef;
		--bg-muted: #f1f3f4;
		--bg-app: #fafbfc;

		--border-color: #dee2e6;
		--border-light: #e9ecef;
		--border-focus: #86b7fe;

		--shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
		--shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
		--shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
	}
}

/* Manual Dark Mode Override - when user clicks dark mode toggle */
[data-theme='dark'] {
	/* Force dark mode regardless of system preference */
	--neutral-50: #0d1117;
	--neutral-100: #161b22;
	--neutral-200: #21262d;
	--neutral-300: #30363d;
	--neutral-400: #484f58;
	--neutral-500: #656d76;
	--neutral-600: #8b949e;
	--neutral-700: #b1bac4;
	--neutral-800: #c9d1d9;
	--neutral-900: #f0f6fc;

	--text-primary: #f0f6fc;
	--text-secondary: #8b949e;
	--text-muted: #656d76;
	--text-disabled: #484f58;
	--text-inverse: #0d1117;

	--bg-primary: #0d1117;
	--bg-secondary: #161b22;
	--bg-tertiary: #21262d;
	--bg-muted: #30363d;
	--bg-app: #010409;

	--border-color: #30363d;
	--border-light: #21262d;
	--border-focus: #58a6ff;

	--shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4);
	--shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.6);
	--shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.7);

	/* Enhanced semantic colors for manual dark mode */
	--primary-50: #0d2947;
	--primary-600: #58a6ff;
	--primary-700: #79c0ff;

	--success-50: #0f2419;
	--success-600: #56d364;
	--success-700: #7ee787;

	--warning-50: #2c1e00;
	--warning-600: #f2cc60;
	--warning-700: #f7d966;

	--error-50: #2f1619;
	--error-600: #f85149;
	--error-700: #ff7b72;

	--info-50: #0a1821;
	--info-600: #79c0ff;
	--info-700: #9ecbff;
}

/* Manual Light Mode Override - when user clicks light mode toggle */
[data-theme='light'] {
	/* Force light mode regardless of system preference */
	--neutral-50: #ffffff;
	--neutral-100: #f8f9fa;
	--neutral-200: #e9ecef;
	--neutral-300: #dee2e6;
	--neutral-400: #ced4da;
	--neutral-500: #adb5bd;
	--neutral-600: #6c757d;
	--neutral-700: #495057;
	--neutral-800: #343a40;
	--neutral-900: #212529;

	--text-primary: #212529;
	--text-secondary: #6c757d;
	--text-muted: #adb5bd;
	--text-disabled: #ced4da;
	--text-inverse: #ffffff;

	--bg-primary: #ffffff;
	--bg-secondary: #f8f9fa;
	--bg-tertiary: #e9ecef;
	--bg-muted: #f1f3f4;
	--bg-app: #fafbfc;

	--border-color: #dee2e6;
	--border-light: #e9ecef;
	--border-focus: #86b7fe;

	--shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
	--shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	--shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);

	/* Original semantic colors for light mode */
	--primary-50: #e3f2fd;
	--primary-600: #1976d2;
	--primary-700: #1565c0;

	--success-50: #d1edcc;
	--success-600: #157347;
	--success-700: #146c43;

	--warning-50: #fff3cd;
	--warning-600: #fd6500;
	--warning-700: #dc5500;

	--error-50: #f8d7da;
	--error-600: #c82333;
	--error-700: #bd2130;

	--info-50: #d1ecf1;
	--info-600: #0bb3d3;
	--info-700: #0aa1c0;
}
/* ===== BASE STYLES ===== */
* {
	box-sizing: border-box;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	line-height: 1.6;
	color: var(--text-primary);
	background-color: var(--bg-app);
	margin: 0;
	padding: 0;
	transition: color 0.2s ease, background-color 0.2s ease;
}

/* ===== LAYOUT COMPONENTS ===== */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--space-xl);
}

.sidebar {
	position: fixed;
	top: 0;
	left: 0;
	width: 280px;
	height: 100vh;
	background-color: var(--bg-primary);
	border-right: 1px solid var(--border-color);
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
	z-index: 1000;
	transition: all 0.2s ease;
	overflow: hidden;
}

.main-content {
	margin-left: 280px;
	min-height: 100vh;
	background-color: var(--bg-app);
}

/* ===== CARDS AND CONTAINERS ===== */
.card {
	background-color: var(--bg-primary);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	margin-bottom: var(--space-lg);
	box-shadow: var(--shadow-sm);
	transition: all 0.2s ease;
}

.card:hover {
	box-shadow: var(--shadow);
	transform: translateY(-1px);
}

.card h3 {
	margin-top: 0;
	margin-bottom: var(--space-md);
	color: var(--text-primary);
	font-size: var(--font-size-lg);
	font-weight: 600;
}

/* ===== STANDARDIZED BUTTONS ===== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-md);
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-size: var(--font-size-sm);
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.btn-primary {
	color: var(--text-inverse);
	background-color: var(--primary-600);
	border-color: var(--primary-600);
}

.btn-primary:hover {
	background-color: var(--primary-700);
	border-color: var(--primary-700);
	transform: translateY(-1px);
	box-shadow: var(--shadow);
}

.btn-secondary {
	color: var(--text-primary);
	background-color: var(--bg-secondary);
	border-color: var(--border-color);
}

.btn-secondary:hover {
	background-color: var(--bg-tertiary);
	border-color: var(--neutral-400);
}

.btn-success {
	color: var(--text-inverse);
	background-color: var(--success-600);
	border-color: var(--success-600);
}

.btn-success:hover {
	background-color: var(--success-700);
	border-color: var(--success-700);
}

.btn-danger {
	color: var(--text-inverse);
	background-color: var(--error-600);
	border-color: var(--error-600);
}

.btn-danger:hover {
	background-color: var(--error-700);
	border-color: var(--error-700);
}

.btn-warning {
	color: var(--text-inverse);
	background-color: var(--warning-600);
	border-color: var(--warning-600);
}

.btn-warning:hover {
	background-color: var(--warning-700);
	border-color: var(--warning-700);
}

.btn-sm {
	padding: var(--space-xs) var(--space-sm);
	font-size: var(--font-size-xs);
}

.btn-lg {
	padding: var(--space-md) var(--space-lg);
	font-size: var(--font-size-lg);
}

/* Legacy button class support */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-md);
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-size: var(--font-size-sm);
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
	color: var(--text-inverse);
	background-color: var(--primary-600);
	border-color: var(--primary-600);
}

.button:hover {
	background-color: var(--primary-700);
	border-color: var(--primary-700);
	transform: translateY(-1px);
	box-shadow: var(--shadow);
	text-decoration: none;
	color: var(--text-inverse);
}

.button.secondary {
	color: var(--text-primary);
	background-color: var(--bg-secondary);
	border-color: var(--border-color);
}

.button.secondary:hover {
	background-color: var(--bg-tertiary);
	border-color: var(--neutral-400);
	color: var(--text-primary);
}

.button.danger {
	color: var(--text-inverse);
	background-color: var(--error-600);
	border-color: var(--error-600);
}

.button.danger:hover {
	background-color: var(--error-700);
	border-color: var(--error-700);
	color: var(--text-inverse);
}

/* ===== STANDARDIZED TAGS/BADGES SYSTEM ===== */
.tag,
.badge {
	display: inline-flex;
	align-items: center;
	padding: var(--space-xs) var(--space-sm);
	font-size: var(--font-size-xs);
	font-weight: 500;
	line-height: 1.4;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	text-decoration: none;
	margin: 0 var(--space-xs) var(--space-xs) 0;
}

/* Entitlement tags - Clean, minimal styling for better readability */
.tag-entitlement,
.entitlement-tag {
	color: var(--text-primary);
	background-color: var(--bg-secondary);
	border-color: var(--border-color);
	border-radius: var(--radius-sm);
	padding: var(--space-xs) var(--space-sm);
	font-size: var(--font-size-sm);
	font-weight: 400;
}

.tag-entitlement:hover,
.entitlement-tag:hover {
	background-color: var(--bg-tertiary);
	border-color: var(--border-color);
}

/* Role badges - Simplified styling */
.role-badge {
	display: inline-flex;
	align-items: center;
	padding: var(--space-xs) var(--space-sm);
	font-size: var(--font-size-xs);
	font-weight: 500;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	margin: 0 var(--space-xs) var(--space-xs) 0;
}

/* Consolidated role badge colors - using semantic naming */
.role-badge.admin,
.role-badge.system-admin {
	background-color: var(--error-50);
	color: var(--error-700);
	border-color: var(--error-200);
}

.role-badge.manager,
.role-badge.business-unit-manager {
	background-color: var(--warning-50);
	color: var(--warning-700);
	border-color: var(--warning-200);
}

.role-badge.reviewer,
.role-badge.access-reviewer {
	background-color: var(--success-50);
	color: var(--success-700);
	border-color: var(--success-200);
}

.role-badge.analyst,
.role-badge.it-security-analyst,
.role-badge.help-desk-analyst {
	background-color: var(--info-50);
	color: var(--info-700);
	border-color: var(--info-200);
}

.role-badge.officer,
.role-badge.compliance-officer,
.role-badge.data-protection-officer {
	background-color: var(--primary-50);
	color: var(--primary-700);
	border-color: var(--primary-200);
}

.role-badge.auditor {
	background-color: var(--info-50);
	color: var(--info-700);
	border-color: var(--info-200);
}

.role-badge.executive {
	background-color: var(--success-50);
	color: var(--success-700);
	border-color: var(--success-200);
}

.role-badge.user,
.role-badge.end-user {
	background-color: var(--neutral-100);
	color: var(--neutral-700);
	border-color: var(--neutral-200);
}

.role-badge.risk-manager {
	background-color: var(--warning-50);
	color: var(--warning-700);
	border-color: var(--warning-200);
}

.role-badge.identity-governance-admin {
	background-color: var(--primary-50);
	color: var(--primary-700);
	border-color: var(--primary-200);
}

/* Status badges */
.badge-success,
.status-badge.active {
	color: var(--success-700);
	background-color: var(--success-50);
	border-color: var(--success-200);
}

.badge-warning,
.status-badge.warning {
	color: var(--warning-700);
	background-color: var(--warning-50);
	border-color: var(--warning-200);
}

.badge-error,
.status-badge.inactive,
.status-badge.failed {
	color: var(--error-700);
	background-color: var(--error-50);
	border-color: var(--error-200);
}

.badge-info,
.status-badge.processing {
	color: var(--info-700);
	background-color: var(--info-50);
	border-color: var(--info-200);
}

.badge-neutral,
.status-badge.processed {
	color: var(--text-secondary);
	background-color: var(--neutral-100);
	border-color: var(--neutral-200);
}

/* Provider badges */
.provider-badge {
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-xs);
	font-weight: 500;
	border: 1px solid transparent;
}

.provider-badge.azure {
	background-color: var(--info-50);
	color: var(--info-700);
	border-color: var(--info-200);
}

.provider-badge.local {
	background-color: var(--neutral-100);
	color: var(--neutral-700);
	border-color: var(--neutral-200);
}

/* Type badges for knowledge management */
.type-badge {
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-xs);
	font-weight: 500;
	border: 1px solid transparent;
}

.type-badge.policy,
.type-policy {
	background-color: var(--info-50);
	color: var(--info-700);
	border-color: var(--info-200);
}

.type-badge.compliance,
.type-compliance {
	background-color: var(--neutral-100);
	color: var(--neutral-700);
	border-color: var(--neutral-200);
}

.type-badge.procedure,
.type-procedure {
	background-color: var(--success-50);
	color: var(--success-700);
	border-color: var(--success-200);
}

.type-badge.guideline,
.type-guideline {
	background-color: var(--warning-50);
	color: var(--warning-700);
	border-color: var(--warning-200);
}

/* Risk indicators - Subtle but clear */
.risk-indicator {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	display: inline-flex;
	align-items: center;
	padding: var(--space-xs) var(--space-sm);
	font-size: var(--font-size-xs);
	line-height: 1.4;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
}

.risk-high {
	color: var(--error-700);
	background-color: var(--error-50);
	border-color: var(--error-200);
}

.risk-medium {
	color: var(--warning-700);
	background-color: var(--warning-50);
	border-color: var(--warning-200);
}

.risk-low {
	color: var(--success-700);
	background-color: var(--success-50);
	border-color: var(--success-200);
}

/* ===== FORM ELEMENTS ===== */
.form-group {
	margin-bottom: var(--space-md);
}

.form-label {
	display: block;
	margin-bottom: var(--space-xs);
	font-weight: 500;
	color: var(--text-primary);
	font-size: var(--font-size-sm);
}

.form-control {
	display: block;
	width: 100%;
	padding: var(--space-sm) var(--space-md);
	font-size: var(--font-size-base);
	line-height: 1.5;
	color: var(--text-primary);
	background-color: var(--bg-primary);
	background-clip: padding-box;
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
	color: var(--text-primary);
	background-color: var(--bg-primary);
	border-color: var(--border-focus);
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
}

.form-control:disabled,
.form-control[readonly] {
	background-color: var(--bg-muted);
	opacity: 1;
}

.form-select {
	display: block;
	width: 100%;
	padding: var(--space-sm) var(--space-md);
	font-size: var(--font-size-base);
	line-height: 1.5;
	color: var(--text-primary);
	background-color: var(--bg-primary);
	background-clip: padding-box;
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right var(--space-sm) center;
	background-size: 16px 12px;
	padding-right: 2.5rem;
}

.form-select:focus {
	color: var(--text-primary);
	background-color: var(--bg-primary);
	border-color: var(--border-focus);
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
}

.form-check {
	display: block;
	margin-bottom: var(--space-sm);
	padding-left: 1.5rem;
	position: relative;
}

.form-check-input {
	position: absolute;
	left: 0;
	margin-top: 0.25rem;
	margin-left: -1.5rem;
}

.form-check-label {
	font-size: var(--font-size-sm);
	color: var(--text-primary);
	cursor: pointer;
}

/* ===== DATA TABLES ===== */
.data-table-container {
	overflow-x: auto;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-color);
	background-color: var(--bg-primary);
	box-shadow: var(--shadow-sm);
}

.data-table {
	width: 100%;
	border-collapse: collapse;
	background-color: var(--bg-primary);
	margin: 0;
}

.data-table th {
	background-color: var(--bg-secondary);
	color: var(--text-primary);
	font-weight: 600;
	text-align: left;
	padding: var(--space-md);
	border-bottom: 2px solid var(--border-color);
	position: sticky;
	top: 0;
	z-index: 10;
}

.data-table td {
	padding: var(--space-md);
	border-bottom: 1px solid var(--border-light);
	vertical-align: top;
}

.data-table tbody tr:hover {
	background-color: var(--bg-secondary);
}

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

/* ===== NAVIGATION AND SIDEBAR ===== */
/* Sidebar h2 styles removed - logo moved to top bar */

.sidebar nav {
	flex: 1;
	padding: var(--space-sm) 0;
	min-height: 0;
}

.sidebar nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sidebar nav ul li {
	margin-bottom: 2px;
}

.sidebar nav ul li a {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-xs) var(--space-lg);
	color: var(--text-primary);
	text-decoration: none;
	border-radius: 0;
	transition: all 0.2s ease;
	font-size: var(--font-size-sm);
	font-weight: 500;
}

.sidebar nav ul li a:hover {
	background-color: var(--bg-secondary);
	color: var(--primary-600);
}

.sidebar nav ul li a.active {
	background-color: var(--primary-50);
	color: var(--primary-700);
	border-right: 3px solid var(--primary-600);
}

/* Navigation section headers */
.nav-section {
	margin-top: var(--space-sm);
	margin-bottom: var(--space-xs);
}

.nav-section-title {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--text-secondary);
	letter-spacing: 0.5px;
	padding: var(--space-xs) var(--space-lg);
	display: block;
}

/* User card styles removed - moved to top bar profile dropdown */

/* ===== THEME TOGGLE ===== */
/* Theme toggle styles moved to layout.html - positioned in top bar */

/* ===== UTILITY CLASSES ===== */
.text-center {
	text-align: center;
}
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}

.mb-0 {
	margin-bottom: 0;
}
.mb-1 {
	margin-bottom: var(--space-xs);
}
.mb-2 {
	margin-bottom: var(--space-sm);
}
.mb-3 {
	margin-bottom: var(--space-md);
}
.mb-4 {
	margin-bottom: var(--space-lg);
}

.mt-0 {
	margin-top: 0;
}
.mt-1 {
	margin-top: var(--space-xs);
}
.mt-2 {
	margin-top: var(--space-sm);
}
.mt-3 {
	margin-top: var(--space-md);
}
.mt-4 {
	margin-top: var(--space-lg);
}

.p-0 {
	padding: 0;
}
.p-1 {
	padding: var(--space-xs);
}
.p-2 {
	padding: var(--space-sm);
}
.p-3 {
	padding: var(--space-md);
}
.p-4 {
	padding: var(--space-lg);
}

.d-flex {
	display: flex;
}
.d-block {
	display: block;
}
.d-inline-block {
	display: inline-block;
}
.d-none {
	display: none;
}

.gap-1 {
	gap: var(--space-xs);
}
.gap-2 {
	gap: var(--space-sm);
}
.gap-3 {
	gap: var(--space-md);
}
.gap-4 {
	gap: var(--space-lg);
}

.w-100 {
	width: 100%;
}
.h-100 {
	height: 100%;
}

/* Consistent border radius utilities */
.rounded-sm {
	border-radius: var(--radius-sm);
}
.rounded {
	border-radius: var(--radius);
}
.rounded-lg {
	border-radius: var(--radius-lg);
}
.rounded-xl {
	border-radius: var(--radius-xl);
}

/* Text styling utilities */
.text-muted {
	color: var(--text-muted);
}
.text-secondary {
	color: var(--text-secondary);
}
.text-primary {
	color: var(--text-primary);
}

/* Background utilities */
.bg-secondary {
	background-color: var(--bg-secondary);
}
.bg-tertiary {
	background-color: var(--bg-tertiary);
}

/* Tag and badge container utilities */
.tags-container,
.badges-container {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	align-items: flex-start;
}

.tags-container.inline,
.badges-container.inline {
	display: inline-flex;
}

/* ===== PROGRESS BARS ===== */
.progress {
	width: 100%;
	height: 8px;
	background-color: var(--bg-tertiary);
	border-radius: var(--radius);
	overflow: hidden;
}

.progress-bar {
	height: 100%;
	background-color: var(--primary-600);
	border-radius: var(--radius);
	transition: width 0.3s ease;
}

.progress-bar.bg-success {
	background-color: var(--success-600);
}

.progress-bar.bg-warning {
	background-color: var(--warning-600);
}

.progress-bar.bg-danger {
	background-color: var(--error-600);
}

/* ===== STATISTICS CARDS ===== */
.stats-section {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-lg);
	margin-bottom: var(--space-xl);
}

.stats-card {
	background-color: var(--bg-primary);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	text-align: center;
	box-shadow: var(--shadow-sm);
	transition: all 0.2s ease;
}

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

.stats-card h3 {
	margin: 0 0 var(--space-sm) 0;
	font-size: var(--font-size-sm);
	font-weight: 500;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.stats-card .value {
	font-size: var(--font-size-2xl);
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: var(--space-xs);
}

.stats-card .change {
	font-size: var(--font-size-sm);
	font-weight: 500;
}

.stats-card .change.positive {
	color: var(--success-600);
}

.stats-card .change.negative {
	color: var(--error-600);
}

/* ===== FLASH MESSAGES ===== */
.flash-section {
	margin-bottom: var(--space-lg);
}

.flash {
	padding: var(--space-md);
	border-radius: var(--radius);
	margin-bottom: var(--space-sm);
	border: 1px solid transparent;
	font-weight: 500;
}

.flash.success {
	color: var(--success-700);
	background-color: var(--success-50);
	border-color: var(--success-200);
}

.flash.error {
	color: var(--error-700);
	background-color: var(--error-50);
	border-color: var(--error-200);
}

.flash.warning {
	color: var(--warning-700);
	background-color: var(--warning-50);
	border-color: var(--warning-200);
}

.flash.info {
	color: var(--info-700);
	background-color: var(--info-50);
	border-color: var(--info-200);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
	.sidebar {
		transform: translateX(-100%);
		transition: transform 0.3s ease;
	}

	.main-content {
		margin-left: 0;
	}

	.container {
		padding: var(--space-md);
	}

	.stats-section {
		grid-template-columns: 1fr;
	}

	.theme-toggle {
		top: var(--space-sm);
		right: var(--space-sm);
		width: 44px;
		height: 44px;
	}

	.data-table-container {
		overflow-x: auto;
	}

	.entitlements-container {
		gap: var(--space-xs);
	}

	.btn,
	.button {
		font-size: var(--font-size-xs);
		padding: var(--space-xs) var(--space-sm);
	}
}

/* ===== COMPONENT-SPECIFIC STYLES ===== */

/* Chat Interface */
.chat-container {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 4rem);
	max-width: 1000px;
	margin: 0 auto;
	background-color: var(--bg-primary);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	overflow: hidden;
}

.chat-header {
	background: linear-gradient(135deg, var(--primary-600), var(--primary-800));
	color: var(--text-inverse);
	padding: var(--space-xl);
	text-align: center;
}

.chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-lg);
	background-color: var(--bg-secondary);
}

.user-message,
.ai-message {
	margin-bottom: var(--space-lg);
}

.message-content {
	padding: var(--space-md) var(--space-lg);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.user-message .message-content {
	background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
	color: var(--text-inverse);
	margin-left: 20%;
	border-bottom-right-radius: var(--radius-sm);
}

.ai-message .message-content {
	background-color: var(--bg-primary);
	color: var(--text-primary);
	margin-right: 20%;
	border: 1px solid var(--border-color);
	border-bottom-left-radius: var(--radius-sm);
}

.message-time {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
	margin-top: var(--space-sm);
}

.chat-input-container {
	padding: var(--space-lg);
	background-color: var(--bg-primary);
	border-top: 1px solid var(--border-color);
}

.input-group {
	display: flex;
	gap: var(--space-sm);
}

.input-group .form-control {
	border-radius: var(--radius-lg);
}

.send-button {
	background: linear-gradient(135deg, var(--primary-600), var(--primary-800));
	color: var(--text-inverse);
	border: none;
	border-radius: var(--radius-lg);
	padding: var(--space-sm) var(--space-lg);
	cursor: pointer;
	font-weight: 500;
	transition: all 0.2s ease;
}

.send-button:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow);
}

/* Suggestions */
.suggestion-card {
	border-left: 4px solid var(--primary-600);
	background-color: var(--primary-50);
	padding: var(--space-lg);
	border-radius: var(--radius);
	margin-bottom: var(--space-lg);
}

.suggestion-btn {
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	padding: var(--space-xs) var(--space-md);
	cursor: pointer;
	font-size: var(--font-size-sm);
	transition: all 0.2s ease;
	color: var(--text-primary);
	margin-right: var(--space-sm);
	margin-bottom: var(--space-sm);
}

.suggestion-btn:hover {
	background-color: var(--bg-tertiary);
	border-color: var(--primary-600);
	color: var(--primary-600);
}

/* Icons (using emoji) */
.icon-dashboard::before {
	content: '📊 ';
}
.icon-review::before {
	content: '🔍 ';
}
.icon-reports::before {
	content: '📈 ';
}
.icon-settings::before {
	content: '⚙️ ';
}
.icon-chat::before {
	content: '💬 ';
}
.icon-users::before {
	content: '👥 ';
}
.icon-security::before {
	content: '🔒 ';
}
.icon-audit::before {
	content: '📋 ';
}
.icon-export::before {
	content: '📤 ';
}
.icon-edit::before {
	content: '✏️ ';
}
.icon-delete::before {
	content: '🗑️ ';
}
.icon-view::before {
	content: '👁️ ';
}

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

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

.fade-in {
	animation: fadeIn 0.3s ease-in;
}

.pulse {
	animation: pulse 1.5s infinite;
}

/*
 * RECENT IMPROVEMENTS (Standardization Update):
 *
 * 1. UNIFIED TAG/BADGE SYSTEM:
 *    - Consolidated all badge styling into consistent classes
 *    - Removed excessive border-radius (bubble effects) for better readability
 *    - Standardized padding, colors, and typography
 *
 * 2. IMPROVED ENTITLEMENT DISPLAY:
 *    - Simplified .tag-entitlement styling for better text readability
 *    - Reduced visual noise with subtle borders and backgrounds
 *    - Added proper spacing and container utilities
 *
 * 3. ROLE BADGE CONSOLIDATION:
 *    - Merged multiple role-specific classes into semantic groups
 *    - Consistent color coding based on role function
 *    - Improved accessibility with proper contrast ratios
 *
 * 4. STATUS INDICATOR STANDARDIZATION:
 *    - Unified .status-badge classes for all status types
 *    - Clear visual hierarchy for different states
 *    - Removed inline styles from templates
 *
 * 5. DESIGN SYSTEM DOCUMENTATION:
 *    - Added comprehensive comments explaining design principles
 *    - Documented component usage patterns
 *    - Included accessibility considerations
 */

/* Sidebar styling */
.sidebar {
	width: 260px;
	background: var(--bg-primary);
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	padding: 1rem;
	box-shadow: 2px 0 8px var(--shadow-light);
	border-right: 1px solid var(--border-light);
	z-index: 1000;
	transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Sidebar and user styles moved to layout.html - using top bar design */

.sidebar nav {
	flex: 1;
	overflow: hidden;
	margin-bottom: 0.5rem;
	min-height: 0;
	padding-bottom: 1rem;
}

/* Navigation separator */
.nav-separator {
	margin: 1rem 0 0.5rem 0;
	padding-top: 1rem;
	border-top: 1px solid var(--border-light);
}

.nav-separator span {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--text-secondary);
	letter-spacing: 0.5px;
}

/* Main content next to sidebar */
.main-content {
	margin-left: 280px;
	padding: 2rem;
	min-height: 100vh;
}

/* Stats cards for automated review */
.stats-section {
	margin-bottom: 2rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.5rem;
}

.stats-card {
	display: inline-block;
	width: 150px;
	background-color: var(--bg-primary);
	padding: 1rem;
	margin-right: 1rem;
	border-radius: 4px;
	box-shadow: 0 1px 3px var(--shadow-light);
	text-align: center;
}

/* Suggestion card styling */
.suggestion-card {
	border-left: 4px solid var(--primary-600);
	background-color: var(--primary-50);
	padding: 1rem;
	margin-bottom: 1rem;
}

/* Sidebar navigation styling */
.sidebar nav ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.sidebar nav ul li {
	margin-bottom: 0.125rem;
}

.sidebar nav ul li a {
	color: var(--text-primary);
	text-decoration: none;
	display: flex;
	align-items: center;
	padding: 0.5rem 1rem;
	border-radius: 6px;
	transition: all 0.2s ease;
	font-size: 0.85rem;
}

.sidebar nav ul li a:hover {
	background-color: var(--bg-secondary);
	color: var(--primary-600);
	transform: translateX(4px);
}

.sidebar nav ul li a.active {
	background-color: var(--primary-100);
	color: var(--primary-700);
	font-weight: 600;
	border-left: 3px solid var(--primary-600);
}

.sidebar nav ul li a i {
	margin-right: 0.75rem;
	width: 1.2rem;
	text-align: center;
}

/* Navigation section headers */
.nav-section {
	margin-top: 0.75rem;
	margin-bottom: 0.25rem;
}

.nav-section-title {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--text-secondary);
	letter-spacing: 0.5px;
	padding: 0.25rem 1rem;
	display: block;
}

/* Sidebar footer */
.sidebar-footer {
	padding: var(--space-sm);
	border-top: 1px solid var(--border-light);
	background-color: var(--bg-secondary);
}

.data-source-status {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.status-indicator {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-xs);
	border-radius: var(--radius-sm);
	font-size: 0.75rem;
}

.status-indicator.connected {
	background-color: var(--success-50);
	color: var(--success-700);
}

.status-indicator.demo {
	background-color: var(--warning-50);
	color: var(--warning-700);
}

.status-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.status-title {
	font-weight: 600;
	line-height: 1.2;
}

.status-subtitle {
	font-size: 0.7rem;
	opacity: 0.8;
	line-height: 1.2;
}

/* Flash message styling */
.flash-section {
	margin-bottom: 1rem;
}

.flash {
	background-color: var(--success-50);
	color: var(--success-700);
	padding: 0.75rem;
	border-radius: 2px;
	margin-bottom: 0.5rem;
	border: 1px solid var(--success-500);
}

/* Chat Interface Styles */
.chat-container {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 4rem);
	max-width: 1000px;
	margin: 0 auto;
	background: var(--bg-primary);
	border-radius: 12px;
	box-shadow: 0 4px 20px var(--shadow-medium);
	overflow: hidden;
}

.chat-header {
	background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-800) 100%);
	color: var(--text-inverse);
	padding: 2rem;
	text-align: center;
}

.chat-header h2 {
	margin: 0 0 0.5rem 0;
	font-size: 1.8rem;
	font-weight: 600;
}

.chat-header p {
	margin: 0;
	opacity: 0.9;
	font-size: 1rem;
}

.chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 1.5rem;
	background: var(--bg-secondary);
}

.user-message,
.ai-message {
	margin-bottom: 1.5rem;
	animation: fadeIn 0.3s ease-in;
}

.user-message .message-content {
	background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
	color: var(--text-inverse);
	padding: 1rem 1.5rem;
	border-radius: 18px 18px 4px 18px;
	margin-left: 20%;
	box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
	font-weight: 500;
}

.ai-message .message-content {
	background: var(--bg-primary);
	color: var(--text-primary);
	padding: 1rem 1.5rem;
	border-radius: 18px 18px 18px 4px;
	margin-right: 20%;
	box-shadow: 0 2px 8px var(--shadow-light);
	border: 1px solid var(--border-light);
}

.message-time {
	font-size: 0.8rem;
	color: var(--text-secondary);
	margin-top: 0.5rem;
	text-align: right;
}

.user-message .message-time {
	text-align: left;
	margin-left: 20%;
}

.ai-message .message-time {
	margin-right: 20%;
}

.typing-indicator {
	display: inline-block;
	animation: pulse 1.5s infinite;
}

.chat-input-container {
	padding: 1.5rem;
	background: var(--bg-primary);
	border-top: 1px solid var(--border-light);
}

.chat-form {
	margin-bottom: 1rem;
}

.input-group {
	display: flex;
	gap: 1rem;
}

.input-group input {
	flex: 1;
	padding: 1rem;
	border: 2px solid var(--border-light);
	border-radius: 25px;
	font-size: 1rem;
	outline: none;
	transition: border-color 0.3s ease;
	background: var(--bg-primary);
	color: var(--text-primary);
}

.input-group input:focus {
	border-color: var(--primary-600);
}

.send-button {
	background: linear-gradient(135deg, var(--primary-600), var(--primary-800));
	color: var(--text-inverse);
	border: none;
	border-radius: var(--radius-lg);
	padding: 1rem 2rem;
	cursor: pointer;
	font-weight: 500;
	transition: all 0.3s ease;
}

.send-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(25, 118, 210, 0.4);
}

.quick-suggestions,
.follow-up-suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.suggestion-label {
	font-weight: 500;
	color: var(--text-secondary);
	margin-right: 0.5rem;
}

.suggestion-btn {
	background: var(--bg-secondary);
	border: 1px solid var(--border-light);
	border-radius: var(--radius);
	padding: 0.5rem 1rem;
	cursor: pointer;
	font-size: 0.9rem;
	transition: all 0.3s ease;
	color: var(--text-primary);
}

.suggestion-btn:hover {
	background: var(--bg-tertiary);
	border-color: var(--primary-600);
	color: var(--primary-600);
}

.follow-up-suggestions {
	margin-top: 1rem;
	padding: 1rem;
	background: var(--bg-secondary);
	border-radius: 8px;
	margin-right: 20%;
}

/* Risk indicator styling - Consistent with main risk-indicator class */
.risk-indicator {
	display: inline-block;
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	border: 1px solid transparent;
}

.risk-high {
	background-color: var(--error-50);
	color: var(--error-700);
	border-color: var(--error-200);
}

.risk-medium {
	background-color: var(--warning-50);
	color: var(--warning-700);
	border-color: var(--warning-200);
}

.risk-low {
	background-color: var(--success-50);
	color: var(--success-700);
	border-color: var(--success-200);
}

/* Table styling */
.data-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--bg-primary);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px var(--shadow-light);
	border: 1px solid var(--border-light);
}

.data-table th,
.data-table td {
	padding: 1rem;
	text-align: left;
	border-bottom: 1px solid var(--border-light);
}

.data-table th {
	background: var(--bg-secondary);
	color: var(--text-primary);
	font-weight: 600;
}

.data-table tbody tr:hover {
	background: var(--bg-secondary);
}

/* ===== NEW FEATURES STYLING ===== */

/* Review creation form styling */
.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.form-label {
	display: block;
	font-weight: 500;
	margin-bottom: 0.5rem;
	color: var(--text-primary);
}

.form-input {
	width: 100%;
	padding: 0.75rem;
	border: 1px solid var(--border-light);
	border-radius: 4px;
	background-color: var(--bg-primary);
	color: var(--text-primary);
	font-size: 0.9rem;
	transition: border-color 0.3s ease;
}

.form-input:focus {
	outline: none;
	border-color: var(--primary-500);
	box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}

/* Integration status indicators - Clean styling */
.integration-status {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-xs);
	font-weight: 500;
	border: 1px solid transparent;
}

.integration-status.connected {
	background-color: var(--success-50);
	color: var(--success-700);
	border-color: var(--success-200);
}

.integration-status.available {
	background-color: var(--neutral-100);
	color: var(--neutral-700);
	border-color: var(--neutral-200);
}

/* Settings form improvements */
.settings-section {
	margin-bottom: 2rem;
}

.settings-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}

.checkbox-group {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.checkbox-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.checkbox-item input[type='checkbox'] {
	margin: 0;
}

/* Progress bars for reviews */
.progress-bar {
	width: 100%;
	height: 6px;
	background: var(--neutral-200);
	border-radius: 3px;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	background: var(--primary-500);
	transition: width 0.3s ease;
}

.progress-fill.completed {
	background: var(--success-500);
}

.progress-fill.overdue {
	background: var(--error-500);
}

/* Activity log styling */
.activity-log {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-height: 300px;
	overflow-y: auto;
}

.activity-item {
	padding: 0.75rem;
	background: var(--bg-secondary);
	border-radius: 6px;
	border-left: 3px solid var(--primary-500);
}

.activity-item.success {
	border-left-color: var(--success-500);
}

.activity-item.warning {
	border-left-color: var(--warning-500);
}

.activity-item.error {
	border-left-color: var(--error-500);
}

.activity-time {
	color: var(--text-secondary);
	font-size: 0.8rem;
}

/* Status indicators */
.status-indicator {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-weight: 500;
	font-size: 0.9rem;
}

.status-indicator.healthy {
	color: var(--success-700);
}

.status-indicator.warning {
	color: var(--warning-700);
}

.status-indicator.error {
	color: var(--error-700);
}

/* Enhanced button variants */
.button.create {
	background: linear-gradient(135deg, var(--success-500) 0%, var(--success-700) 100%);
	color: var(--text-inverse);
}

.button.create:hover {
	background: linear-gradient(135deg, var(--success-600) 0%, var(--success-800) 100%);
}

/* Enhanced data table styling */
.data-table th {
	background: var(--bg-secondary);
	border-bottom: 2px solid var(--border-light);
	padding: 0.75rem;
	text-align: left;
	font-weight: 600;
	color: var(--text-primary);
	position: sticky;
	top: 0;
	z-index: 10;
}

.data-table th:hover {
	background: var(--bg-tertiary);
}

.data-table td {
	padding: 0.75rem;
	border-bottom: 1px solid var(--border-light);
	vertical-align: top;
}

.data-table tr:hover {
	background: var(--bg-secondary);
}

/* Knowledge Management specific styles */
.drop-zone {
	border: 2px dashed var(--border-medium);
	border-radius: 8px;
	padding: 2rem;
	text-align: center;
	background: var(--bg-secondary);
	transition: all 0.3s ease;
	cursor: pointer;
}

.drop-zone:hover,
.drop-zone.drag-over {
	background: var(--primary-50);
	border-color: var(--primary-600);
}

.integration-tile {
	transition: all 0.3s ease;
	cursor: pointer;
}

.integration-tile:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 20px var(--shadow-medium);
}

/* Dropdown styles */
.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown-content {
	position: absolute;
	background-color: var(--bg-primary);
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px var(--shadow-medium);
	z-index: 1000;
	border-radius: 4px;
	border: 1px solid var(--border-light);
}

.dropdown-content button {
	color: var(--text-primary);
	padding: 8px 12px;
	text-decoration: none;
	display: block;
	border: none;
	background: none;
	width: 100%;
	text-align: left;
	cursor: pointer;
	font-size: 0.9rem;
}

.dropdown-content button:hover {
	background-color: var(--bg-secondary);
}

/* Progress bars */
.progress-bar {
	width: 100%;
	height: 8px;
	background: var(--bg-tertiary);
	border-radius: 4px;
	overflow: hidden;
}

.progress-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--primary-600) 0%, var(--primary-800) 100%);
	border-radius: 4px;
	transition: width 0.3s ease;
}

/* Sort arrows */
.sort-arrow {
	font-size: 0.8rem;
	color: var(--text-secondary);
	margin-left: 0.25rem;
}

/* Filter controls */
.filter-controls {
	display: flex;
	gap: 1rem;
	align-items: center;
	margin-bottom: 1rem;
}

.filter-controls label {
	font-weight: 500;
	color: var(--text-primary);
}

.filter-controls select,
.filter-controls input {
	padding: 0.25rem 0.5rem;
	border: 1px solid var(--border-light);
	border-radius: 4px;
	font-size: 0.9rem;
	background: var(--bg-primary);
	color: var(--text-primary);
}

/* File upload progress */
.upload-progress-item {
	margin-bottom: 0.5rem;
	padding: 0.75rem;
	background: #f8f9fa;
	border-radius: 6px;
	border-left: 3px solid #0078d4;
}

.upload-progress-bar {
	width: 100%;
	height: 4px;
	background: #e9ecef;
	border-radius: 2px;
	margin-top: 0.5rem;
	overflow: hidden;
}

.upload-progress-fill {
	height: 100%;
	background: #0078d4;
	border-radius: 2px;
	transition: width 0.3s ease;
}

/* URL queue items */
.url-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem;
	background: var(--bg-secondary);
	border-radius: 6px;
	margin-bottom: 0.5rem;
	border-left: 3px solid var(--success-500);
}

.url-item .remove-btn {
	background: none;
	border: none;
	color: var(--error-500);
	cursor: pointer;
	font-size: 1.2rem;
	font-weight: bold;
	padding: 0.25rem;
	border-radius: 4px;
	transition: background-color 0.2s ease;
}

.url-item .remove-btn:hover {
	background-color: var(--error-50);
}

/* Knowledge base status indicators - Consistent styling */
.status-badge {
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-xs);
	font-weight: 500;
	text-transform: capitalize;
	border: 1px solid transparent;
}

.status-processed {
	background-color: var(--success-50);
	color: var(--success-700);
	border-color: var(--success-200);
}

.status-processing {
	background-color: var(--warning-50);
	color: var(--warning-700);
	border-color: var(--warning-200);
}

.status-failed {
	background-color: var(--error-50);
	color: var(--error-700);
	border-color: var(--error-200);
}

/* Type badges - Consistent with main badge system */
.type-badge {
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-xs);
	font-weight: 500;
	border: 1px solid transparent;
}

.type-policy {
	background-color: var(--info-50);
	color: var(--info-700);
	border-color: var(--info-200);
}

.type-compliance {
	background-color: var(--neutral-100);
	color: var(--neutral-700);
	border-color: var(--neutral-200);
}

.type-procedure {
	background-color: var(--success-50);
	color: var(--success-700);
	border-color: var(--success-200);
}

.type-guideline {
	background-color: var(--warning-50);
	color: var(--warning-700);
	border-color: var(--warning-200);
}

/* Theme toggle button */
.theme-toggle {
	position: fixed;
	top: 1rem;
	right: 1rem;
	z-index: 1000;
	background: var(--bg-primary);
	border: 2px solid var(--border-medium);
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px var(--shadow-medium);
}

.theme-toggle:hover {
	background: var(--bg-secondary);
	transform: scale(1.1);
}

.theme-toggle .icon {
	font-size: 1.2rem;
	color: var(--text-primary);
}

/* User card in sidebar */
.user-card {
	margin: 1rem 0;
	padding: 1rem;
	background: var(--bg-secondary);
	border: 1px solid var(--border-light);
	border-radius: 8px;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.user-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--primary-500);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-inverse);
	font-weight: bold;
	font-size: 1rem;
}

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

.user-name {
	font-weight: 600;
	color: var(--text-primary);
	font-size: 0.9rem;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.user-email {
	font-size: 0.75rem;
	color: var(--text-secondary);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.user-role {
	font-size: 0.7rem;
	color: var(--primary-600);
	margin: 0;
	text-transform: uppercase;
	font-weight: 500;
}

/* ===== ENHANCED DARK MODE COMPONENT SUPPORT ===== */
/* Better visibility and contrast for dark mode users */

/* Enhanced button styling for dark mode */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) .btn-secondary,
	:root:not([data-theme='light']) .button.secondary {
		background-color: var(--bg-tertiary);
		border-color: var(--border-color);
		color: var(--text-primary);
	}

	:root:not([data-theme='light']) .btn-secondary:hover,
	:root:not([data-theme='light']) .button.secondary:hover {
		background-color: var(--bg-muted);
		border-color: var(--neutral-500);
	}
}

[data-theme='dark'] .btn-secondary,
[data-theme='dark'] .button.secondary {
	background-color: var(--bg-tertiary);
	border-color: var(--border-color);
	color: var(--text-primary);
}

[data-theme='dark'] .btn-secondary:hover,
[data-theme='dark'] .button.secondary:hover {
	background-color: var(--bg-muted);
	border-color: var(--neutral-500);
}

/* Enhanced table styling for dark mode */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) .data-table {
		background-color: var(--bg-primary);
		border-color: var(--border-color);
	}

	:root:not([data-theme='light']) .data-table th {
		background-color: var(--bg-secondary);
		border-color: var(--border-color);
		color: var(--text-primary);
	}

	:root:not([data-theme='light']) .data-table tbody tr:hover {
		background-color: var(--bg-secondary);
	}

	:root:not([data-theme='light']) .data-table td {
		border-color: var(--border-light);
		color: var(--text-primary);
	}
}

[data-theme='dark'] .data-table {
	background-color: var(--bg-primary);
	border-color: var(--border-color);
}

[data-theme='dark'] .data-table th {
	background-color: var(--bg-secondary);
	border-color: var(--border-color);
	color: var(--text-primary);
}

[data-theme='dark'] .data-table tbody tr:hover {
	background-color: var(--bg-secondary);
}

[data-theme='dark'] .data-table td {
	border-color: var(--border-light);
	color: var(--text-primary);
}

/* Enhanced sidebar styling for dark mode */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) .sidebar {
		background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
		border-color: var(--border-color);
	}

	:root:not([data-theme='light']) .sidebar nav ul li a {
		color: var(--text-primary);
	}

	:root:not([data-theme='light']) .sidebar nav ul li a:hover {
		background-color: var(--bg-secondary);
		color: var(--primary-600);
	}

	:root:not([data-theme='light']) .sidebar nav ul li a.active {
		background-color: var(--primary-50);
		color: var(--primary-700);
	}
}

[data-theme='dark'] .sidebar {
	background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
	border-color: var(--border-color);
}

[data-theme='dark'] .sidebar nav ul li a {
	color: var(--text-primary);
}

[data-theme='dark'] .sidebar nav ul li a:hover {
	background-color: var(--bg-secondary);
	color: var(--primary-600);
}

[data-theme='dark'] .sidebar nav ul li a.active {
	background-color: var(--primary-50);
	color: var(--primary-700);
}

/* Enhanced card styling for dark mode */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) .card {
		background-color: var(--bg-primary);
		border-color: var(--border-color);
		color: var(--text-primary);
	}

	:root:not([data-theme='light']) .card h3,
	:root:not([data-theme='light']) .card h4 {
		color: var(--text-primary);
	}
}

[data-theme='dark'] .card {
	background-color: var(--bg-primary);
	border-color: var(--border-color);
	color: var(--text-primary);
}

[data-theme='dark'] .card h3,
[data-theme='dark'] .card h4 {
	color: var(--text-primary);
}

/* Enhanced progress bars for dark mode */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) .progress {
		background-color: var(--bg-tertiary);
	}

	:root:not([data-theme='light']) .progress-bar {
		background-color: var(--primary-600);
	}
}

[data-theme='dark'] .progress {
	background-color: var(--bg-tertiary);
}

[data-theme='dark'] .progress-bar {
	background-color: var(--primary-600);
}