/* Common styles for accessibility and UI */

/* Skip link for keyboard navigation (WCAG 2.4.1) */
.skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: #000;
	color: #fff;
	padding: 8px;
	text-decoration: none;
	z-index: 100;
}
.skip-link:focus {
	top: 0;
}

/* Focus visible styles for better accessibility (WCAG 2.4.7) */
:focus-visible {
	outline: 2px solid #0d6efd;
	outline-offset: 2px;
}

/* Minimum target size 24x24px for all interactive elements (WCAG 2.5.8 Level AA) */
.btn, .nav-link, .dropdown-item, a, button {
	min-height: 24px;
	min-width: 24px;
}

/* Respect user's motion preferences for accessibility (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Shared admin dashboard styles */
.stat-card {
	transition: transform 0.2s;
}
.stat-card:hover {
	transform: translateY(-3px);
}

/* Server status indicators */
.server-status {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-right: 5px;
}
.status-running { background-color: #28a745; }
.status-stopped { background-color: #dc3545; }
.status-active { background-color: #28a745; }
.status-inactive { background-color: #6c757d; }
.status-error { background-color: #dc3545; }

/* Service and provider badges */
.service-badge, .provider-badge {
	font-size: 0.9rem;
	padding: 0.4rem 0.8rem;
}
.service-active { background-color: #28a745; }
.service-inactive { background-color: #dc3545; }
.service-unknown { background-color: #6c757d; }
.provider-linode { background-color: #00a95c; color: white; }
.provider-cloudflare { background-color: #f38020; color: white; }

/* Terminal/log viewer styles */
.log-viewer {
	background: #1e1e1e;
	color: #d4d4d4;
	font-family: 'Courier New', monospace;
	font-size: 0.85rem;
	padding: 1rem;
	max-height: 400px;
	overflow-y: auto;
}
.event-log {
	max-height: 300px;
	overflow-y: auto;
	font-size: 0.85rem;
}

/* Monospace inputs */
.env-input, .api-key-display {
	font-family: monospace;
	font-size: 0.9rem;
}
.api-key-display {
	background: #f8f9fa;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
}

/* Button sizing */
.btn-action {
	min-width: 24px;
	min-height: 24px;
	padding: 0.375rem 0.5rem;
	font-size: 0.875rem;
}

/* Empty state styling */
.empty-state {
	padding: 3rem 0;
	text-align: center;
	color: #6c757d;
}
.empty-state i {
	font-size: 4rem;
	margin-bottom: 1rem;
}