/**
 * Mission Control Design System
 * Shared components for the new dashboard UI
 * Supports both dark (.darkTheme) and light modes
 */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
	/* Light theme (default) */
	--mc-bg-primary: #ffffff;
	--mc-bg-secondary: #f5f5f7;
	--mc-bg-tertiary: #fafafa;
	--mc-bg-hover: #f5f5f7;
	--mc-border: #e5e5e7;
	--mc-border-hover: #d1d1d6;
	--mc-text-primary: #505050;
	--mc-text-secondary: #48484a;
	--mc-text-muted: #8e8e93;
	--mc-text-dimmed: #aeaeb2;

	/* Accent colors */
	--mc-blue: #007aff;
	--mc-blue-hover: #0066d6;
	--mc-green: #34c759;
	--mc-green-hover: #2db14d;
	--mc-red: #ff3b30;
	--mc-red-hover: #d63029;
	--mc-amber: #ff9500;
	--mc-yellow: #ffcc00;
	--mc-teal: #5ac8fa;
	--mc-purple: #af52de;
	--mc-gray: #636366;
}

/* Dark theme overrides */
body.darkTheme {
	--mc-bg-primary: #1e1e1e;
	--mc-bg-secondary: #252526;
	--mc-bg-tertiary: #2a2a2a;
	--mc-bg-hover: #2a2a2a;
	--mc-border: #333;
	--mc-border-hover: #444;
	--mc-text-primary: #ffffff;
	--mc-text-secondary: #d1d1d6;
	--mc-text-muted: #8e8e93;
	--mc-text-dimmed: #636366;
}


/* ==========================================================================
   Base Container
   ========================================================================== */

.mc-dashboard {
	padding: 24px 0;
}


/* ==========================================================================
   Cards
   ========================================================================== */

.mc-card {
	background: var(--mc-bg-primary);
	border-radius: 12px;
	padding: 20px 24px;
	border: 1px solid var(--mc-border);
	transition: all 0.15s ease;
}

.mc-card.clickable {
	cursor: pointer;
}

.mc-card.clickable:hover {
	background: var(--mc-bg-hover);
	border-color: var(--mc-border-hover);
}


/* ==========================================================================
   Stat Cards
   ========================================================================== */

.mc-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 24px;
}

@media (max-width: 768px) {
	.mc-stats {
		grid-template-columns: 1fr;
	}
}

.mc-stat-card {
	background: var(--mc-bg-primary);
	border-radius: 12px;
	padding: 20px 24px;
	border: 1px solid var(--mc-border);
	cursor: pointer;
	transition: all 0.15s ease;
}

.mc-stat-card:hover {
	background: var(--mc-bg-hover);
	border-color: var(--mc-border-hover);
}

.mc-stat-label {
	font-size: 11px;
	font-weight: 500;
	color: var(--mc-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.3px;
	margin-bottom: 8px;
}

.mc-stat-value {
	font-size: 24px;
	font-weight: 700;
	color: var(--mc-text-primary);
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.mc-stat-value.small {
	font-size: 16px;
	font-weight: 500;
}

.mc-stat-trend {
	font-size: 12px;
	display: none;
	align-self: center;
	margin-left: 1px;
	margin-top: 3px;
}

.mc-stat-trend.up {
	color: var(--mc-green);
}

.mc-stat-trend.down {
	color: var(--mc-red);
}

.mc-stat-sub {
	font-size: 12px;
	color: var(--mc-text-dimmed);
	margin-top: 4px;
}


/* ==========================================================================
   Section Headers
   ========================================================================== */

.mc-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.mc-section-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--mc-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}


/* ==========================================================================
   Page Headers
   ========================================================================== */

.mc-page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.mc-page-title {
	font-size: 24px;
	font-weight: 700;
	color: var(--mc-text-primary);
	margin: 0;
}

.mc-page-actions {
	display: flex;
	gap: 12px;
}


/* ==========================================================================
   Buttons
   ========================================================================== */

.mc-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s ease;
	border: none;
	color: #fff;
	text-decoration: none;
}

.mc-btn i {
	font-size: 14px;
}

.mc-btn.primary {
	background: var(--mc-blue);
}

.mc-btn.primary:hover {
	background: var(--mc-blue-hover);
}

.mc-btn.secondary {
	background: #505050;
}

body:not(.darkTheme) .mc-btn.secondary {
	background: #e5e5e7;
	color: #1d1d1f;
}

.mc-btn.secondary:hover {
	background: #48484a;
}

body:not(.darkTheme) .mc-btn.secondary:hover {
	background: #d1d1d6;
}

.mc-btn.danger {
	background: var(--mc-red);
}

.mc-btn.danger:hover {
	background: var(--mc-red-hover);
}

.mc-btn.success {
	background: var(--mc-green);
}

.mc-btn.success:hover {
	background: var(--mc-green-hover);
}

.mc-btn.sm {
	padding: 8px 14px;
	font-size: 13px;
}

.mc-btn.sm i {
	font-size: 12px;
}


/* ==========================================================================
   Grid Layouts
   ========================================================================== */

.mc-grid {
	display: grid;
	gap: 16px;
}

.mc-grid.cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.mc-grid.cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.mc-grid.cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
	.mc-grid.cols-2,
	.mc-grid.cols-3,
	.mc-grid.cols-4 {
		grid-template-columns: 1fr;
	}
}


/* ==========================================================================
   Data Display
   ========================================================================== */

.mc-data-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px 24px;
}

.mc-data-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mc-data-label {
	font-size: 11px;
	color: var(--mc-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.mc-data-value {
	font-size: 13px;
	color: var(--mc-text-primary);
}


/* ==========================================================================
   Status Indicators
   ========================================================================== */

.mc-status-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

.mc-status-dot.streaming,
.mc-status-dot.live {
	background: var(--mc-red);
	box-shadow: 0 0 8px rgba(255, 59, 48, 0.5);
}

.mc-status-dot.ready,
.mc-status-dot.online {
	background: var(--mc-green);
	box-shadow: 0 0 8px rgba(52, 199, 89, 0.5);
}

.mc-status-dot.connecting,
.mc-status-dot.pending {
	background: var(--mc-yellow);
	box-shadow: 0 0 8px rgba(255, 204, 0, 0.5);
}

.mc-status-dot.offline {
	background: var(--mc-gray);
}

.mc-status-badge {
	font-size: 11px;
	padding: 3px 8px;
	border-radius: 4px;
	font-weight: 500;
	text-transform: uppercase;
}

.mc-status-badge.streaming,
.mc-status-badge.live {
	background: rgba(255, 59, 48, 0.15);
	color: var(--mc-red);
}

.mc-status-badge.ready,
.mc-status-badge.online {
	background: rgba(52, 199, 89, 0.15);
	color: var(--mc-green);
}

.mc-status-badge.connecting,
.mc-status-badge.pending {
	background: rgba(255, 204, 0, 0.15);
	color: var(--mc-yellow);
}

.mc-status-badge.offline {
	background: rgba(142, 142, 147, 0.15);
	color: var(--mc-gray);
}


/* ==========================================================================
   Skeleton Loaders
   ========================================================================== */

@keyframes mc-skeleton-pulse {
	0%, 100% { opacity: 0.4; }
	50% { opacity: 0.7; }
}

.mc-skeleton {
	background: #505050;
	border-radius: 4px;
	animation: mc-skeleton-pulse 1.5s ease-in-out infinite;
}

body:not(.darkTheme) .mc-skeleton {
	background: #e5e5e7;
}

.mc-skeleton-text {
	height: 14px;
	margin-bottom: 8px;
}

.mc-skeleton-text.short {
	width: 60%;
}

.mc-skeleton-text.medium {
	width: 80%;
}

.mc-skeleton-text.label {
	height: 10px;
	width: 70px;
	margin-bottom: 10px;
}


/* ==========================================================================
   Spinner (alternative to skeleton)
   ========================================================================== */

.mc-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid var(--mc-border);
	border-top-color: var(--mc-blue);
	border-radius: 50%;
	animation: mc-spin 0.8s linear infinite;
}

.mc-spinner.sm {
	width: 20px;
	height: 20px;
	border-width: 2px;
}

.mc-spinner.lg {
	width: 48px;
	height: 48px;
	border-width: 4px;
}

@keyframes mc-spin {
	to { transform: rotate(360deg); }
}


/* ==========================================================================
   Empty States
   ========================================================================== */

.mc-empty-state {
	text-align: center;
	padding: 48px 24px;
	color: var(--mc-text-muted);
}

.mc-empty-state i {
	font-size: 48px;
	margin-bottom: 16px;
	opacity: 0.5;
}

.mc-empty-state-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--mc-text-primary);
	margin-bottom: 8px;
}

.mc-empty-state-text {
	font-size: 14px;
	color: var(--mc-text-muted);
	max-width: 320px;
	margin: 0 auto;
}


/* ==========================================================================
   Charts Container
   ========================================================================== */

.mc-chart-container {
	background: var(--mc-bg-primary);
	border-radius: 12px;
	padding: 20px;
	border: 1px solid var(--mc-border);
	min-height: 200px;
	position: relative;
}

.mc-chart-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--mc-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.3px;
	margin-bottom: 16px;
}


/* ==========================================================================
   Tables
   ========================================================================== */

.mc-table {
	width: 100%;
	border-collapse: collapse;
}

.mc-table th {
	font-size: 11px;
	font-weight: 500;
	color: var(--mc-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.3px;
	text-align: left;
	padding: 12px 16px;
	border-bottom: 1px solid var(--mc-border);
}

.mc-table td {
	font-size: 14px;
	color: var(--mc-text-primary);
	padding: 12px 16px;
	border-bottom: 1px solid var(--mc-border);
}

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

.mc-table tr:hover td {
	background: var(--mc-bg-hover);
}


/* ==========================================================================
   Bar Chart (Simple CSS-based)
   ========================================================================== */

.mc-bar-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mc-bar-item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mc-bar-label {
	font-size: 13px;
	color: var(--mc-text-secondary);
	min-width: 120px;
	flex-shrink: 0;
}

.mc-bar-track {
	flex: 1;
	height: 8px;
	background: var(--mc-border);
	border-radius: 4px;
	overflow: hidden;
}

.mc-bar-fill {
	height: 100%;
	background: var(--mc-blue);
	border-radius: 4px;
	transition: width 0.3s ease;
}

.mc-bar-value {
	font-size: 13px;
	font-weight: 600;
	color: var(--mc-text-primary);
	min-width: 40px;
	text-align: right;
}


/* ==========================================================================
   Dividers
   ========================================================================== */

.mc-divider {
	height: 1px;
	background: var(--mc-border);
	margin: 16px 0;
}


/* ==========================================================================
   Alerts/Warnings
   ========================================================================== */

.mc-alert {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 8px;
	font-size: 14px;
	margin-bottom: 16px;
}

.mc-alert i {
	flex-shrink: 0;
	margin-top: 2px;
}

.mc-alert.info {
	background: rgba(0, 122, 255, 0.1);
	color: var(--mc-blue);
}

.mc-alert.success {
	background: rgba(52, 199, 89, 0.1);
	color: var(--mc-green);
}

.mc-alert.warning {
	background: rgba(255, 204, 0, 0.1);
	color: var(--mc-yellow);
}

.mc-alert.error {
	background: rgba(255, 59, 48, 0.1);
	color: var(--mc-red);
}


/* ==========================================================================
   Gauge/Arc Display (for listeners)
   ========================================================================== */

.mc-gauge {
	position: relative;
	width: 200px;
	height: 100px;
	margin: 0 auto;
}

.mc-gauge-value {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
}

.mc-gauge-number {
	font-size: 48px;
	font-weight: 700;
	color: var(--mc-text-primary);
	line-height: 1;
}

.mc-gauge-label {
	font-size: 12px;
	color: var(--mc-text-muted);
	margin-top: 4px;
}


/* ==========================================================================
   Icon Boxes (for quick actions, etc.)
   ========================================================================== */

.mc-icon-box {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: #fff;
}

.mc-icon-box.blue { background: var(--mc-blue); }
.mc-icon-box.green { background: var(--mc-green); }
.mc-icon-box.amber { background: var(--mc-amber); }
.mc-icon-box.red { background: var(--mc-red); }
.mc-icon-box.teal { background: var(--mc-teal); }
.mc-icon-box.gray { background: var(--mc-gray); }
.mc-icon-box.purple { background: var(--mc-purple); }


/* ==========================================================================
   Tabs (Simple)
   ========================================================================== */

.mc-tabs {
	display: flex;
	gap: 4px;
	background: var(--mc-bg-secondary);
	padding: 4px;
	border-radius: 8px;
	width: fit-content;
}

.mc-tab {
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 500;
	color: var(--mc-text-muted);
	background: transparent;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.15s ease;
}

.mc-tab:hover {
	color: var(--mc-text-primary);
}

.mc-tab.active {
	background: var(--mc-bg-primary);
	color: var(--mc-text-primary);
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}