web_plsql 0.18.0 → 1.2.0

package/src/admin/style.css

@@ -0,0 +1,1437 @@
+:root {
+	/* Material Design 3 inspired tokens - Light Mode */
+	--accent-rgb: 59, 130, 246;
+	--bg-main: #f8fafc;
+	--bg-side: #fff;
+	--bg-card: #fff;
+	--bg-hover: #f1f5f9;
+	--text-main: #475569;
+	--text-bright: #0f172a;
+	--accent: #3b82f6;
+	--border: #e2e8f0;
+	--success: #10b981;
+	--warning: #f59e0b;
+	--danger: #ef4444;
+	--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+	--terminal-bg: #1e293b;
+	--config-key: #3b82f6;
+}
+
+body.dark {
+	/* Material Design 3 inspired tokens - Dark Mode */
+	--bg-main: #0f172a;
+	--bg-side: #1e293b;
+	--bg-card: #1e293b;
+	--bg-hover: #334155;
+	--text-main: #94a3b8;
+	--text-bright: #f8fafc;
+	--accent: #3b82f6;
+	--border: #334155;
+	--success: #10b981;
+	--warning: #f59e0b;
+	--danger: #ef4444;
+	--shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+	--terminal-bg: #000;
+	--config-key: #60a5fa;
+}
+
+body {
+	margin: 0;
+	font-family:
+		'Inter',
+		-apple-system,
+		BlinkMacSystemFont,
+		'Segoe UI',
+		Roboto,
+		Helvetica,
+		Arial,
+		sans-serif;
+	background-color: var(--bg-main);
+	color: var(--text-main);
+	-webkit-font-smoothing: antialiased;
+	transition:
+		background-color 0.3s,
+		color 0.3s;
+}
+
+.app-container {
+	display: flex;
+	height: 100vh;
+}
+
+/* Sidebar */
+.sidebar {
+	width: 240px;
+	background-color: var(--bg-side);
+	border-right: 1px solid var(--border);
+	display: flex;
+	flex-direction: column;
+	z-index: 10;
+}
+
+.logo {
+	padding: 24px;
+	font-weight: 700;
+	font-size: 1.25rem;
+	color: var(--text-bright);
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+.logo .material-symbols-rounded {
+	color: var(--accent);
+	font-size: 28px;
+}
+
+nav {
+	flex: 1;
+	padding: 12px;
+}
+
+nav button {
+	width: 100%;
+	padding: 12px 16px;
+	text-align: left;
+	background: none;
+	border: none;
+	color: var(--text-main);
+	cursor: pointer;
+	font-size: 0.95rem;
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	border-radius: 8px;
+	transition: all 0.2s;
+	margin-bottom: 4px;
+}
+
+nav button:hover {
+	background-color: var(--bg-hover);
+	color: var(--text-bright);
+}
+
+nav button.active {
+	background-color: var(--accent);
+	color: white;
+}
+
+nav button .material-symbols-rounded {
+	font-size: 20px;
+}
+
+.status-indicator {
+	padding: 20px;
+	border-top: 1px solid var(--border);
+	display: flex;
+	align-items: center;
+	font-size: 0.85rem;
+	font-weight: 500;
+}
+
+.dot {
+	height: 8px;
+	width: 8px;
+	background-color: #64748b;
+	border-radius: 50%;
+	display: inline-block;
+	margin-right: 12px;
+	box-shadow: 0 0 0 4px rgba(100, 116, 139, 0.1);
+}
+
+.dot.running {
+	background-color: var(--success);
+	box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
+}
+.dot.paused {
+	background-color: var(--warning);
+	box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2);
+}
+
+/* Content */
+.content {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
+.main-header {
+	padding: 20px 32px;
+	background-color: var(--bg-main);
+	border-bottom: 1px solid var(--border);
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.main-header h1 {
+	margin: 0;
+	font-size: 1.5rem;
+	color: var(--text-bright);
+	font-weight: 600;
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+.main-header h1 .material-symbols-rounded {
+	color: var(--accent);
+	font-size: 28px;
+}
+
+.header-toolbar {
+	display: flex;
+	align-items: center;
+	gap: 24px;
+}
+
+.auto-refresh-group {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	font-size: 0.875rem;
+	background: var(--bg-side);
+	padding: 6px 12px;
+	border-radius: 6px;
+	border: 1px solid var(--border);
+}
+
+.auto-refresh-group select {
+	background: none;
+	border: none;
+	color: var(--text-bright);
+	cursor: pointer;
+	font-weight: 500;
+}
+
+.view {
+	flex: 1;
+	padding: 32px;
+	overflow-y: auto;
+}
+
+/* Cards & Grid */
+.metrics-grid,
+.pools-grid,
+.cache-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+	gap: 24px;
+	margin-bottom: 32px;
+}
+
+.card {
+	background-color: var(--bg-card);
+	padding: 24px;
+	border-radius: 12px;
+	border: 1px solid var(--border);
+	box-shadow: var(--shadow);
+}
+
+.card-header {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	margin-bottom: 16px;
+}
+
+.card-header .material-symbols-rounded {
+	color: var(--accent);
+}
+
+.card h3 {
+	margin: 0;
+	font-size: 0.875rem;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--text-main);
+}
+
+.card p {
+	font-size: 2rem;
+	font-weight: 700;
+	margin: 0;
+	color: var(--text-bright);
+}
+
+.card small {
+	display: block;
+	margin-top: 8px;
+	font-size: 0.875rem;
+	color: var(--text-main);
+}
+
+.card.warning {
+	border-left: 4px solid var(--warning);
+}
+
+/* Table */
+.table-container {
+	background: var(--bg-card);
+	border-radius: 12px;
+	border: 1px solid var(--border);
+	overflow: hidden;
+	box-shadow: var(--shadow);
+}
+
+table {
+	width: 100%;
+	border-collapse: collapse;
+}
+
+th,
+td {
+	padding: 16px 24px;
+	text-align: left;
+	border-bottom: 1px solid var(--border);
+}
+
+th {
+	background-color: var(--bg-hover);
+	color: var(--text-main);
+	font-size: 0.75rem;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	font-weight: 600;
+}
+
+td {
+	color: var(--text-bright);
+	font-size: 0.9375rem;
+}
+
+tr:last-child td {
+	border-bottom: none;
+}
+
+/* Access Log & Config */
+.terminal-container,
+.config-container {
+	background-color: var(--bg-side);
+	border-radius: 12px;
+	border: 1px solid var(--border);
+	overflow: hidden;
+	box-shadow: var(--shadow);
+}
+
+.terminal {
+	background-color: var(--terminal-bg);
+	color: #10b981;
+	padding: 24px;
+	font-family: 'JetBrains Mono', 'Fira Code', monospace;
+	font-size: 0.875rem;
+	line-height: 1.6;
+	margin: 0;
+	overflow-x: auto;
+	white-space: pre; /* No wrapping */
+}
+
+.config-view-content {
+	padding: 0;
+	max-width: 900px;
+	margin: 0 auto;
+}
+
+.config-table {
+	width: 100%;
+	border-collapse: collapse;
+}
+
+.config-table tr {
+	border-bottom: 1px solid var(--border);
+}
+
+.config-table tr:last-child {
+	border-bottom: none;
+}
+
+.config-table td {
+	padding: 16px 24px;
+	vertical-align: top;
+}
+
+.config-label {
+	font-weight: 600;
+	color: var(--text-main);
+	width: 240px;
+	font-size: 0.875rem;
+	background-color: var(--bg-main);
+}
+
+.config-value {
+	font-family: 'JetBrains Mono', monospace;
+	color: var(--text-bright);
+	word-break: break-all;
+	font-size: 0.875rem;
+}
+
+.config-section-header {
+	background-color: var(--bg-hover);
+	padding: 12px 24px;
+	font-weight: 700;
+	font-size: 0.75rem;
+	text-transform: uppercase;
+	color: var(--accent);
+	letter-spacing: 0.05em;
+	border-bottom: 1px solid var(--border);
+}
+
+.inner-config-table {
+	width: 100%;
+	border-collapse: collapse;
+	font-size: 0.8125rem;
+}
+
+.inner-config-table td {
+	padding: 4px 8px;
+	border: none;
+}
+
+/* Cache card specific enhancements */
+.cache-card .badge {
+	align-self: center;
+}
+
+/* PL/SQL Route card enhancements */
+.card-header h4 {
+	color: var(--accent);
+}
+
+.stat-row-label {
+	flex: 0 0 180px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.stat-row-value {
+	flex: 1;
+	text-align: right;
+}
+
+@media (max-width: 640px) {
+	.stat-row {
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 4px;
+	}
+	.stat-row-label {
+		flex: none;
+		opacity: 0.7;
+		font-size: 0.75rem;
+		text-align: left;
+	}
+	.stat-row-value {
+		text-align: left;
+		width: 100%;
+	}
+}
+
+/* System View Compact */
+.view-system-compact {
+	padding: 20px 32px;
+}
+
+.view-system-compact .metrics-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+	gap: 16px;
+	align-items: start;
+	margin-bottom: 24px;
+}
+
+.view-system-compact .card {
+	padding: 16px;
+}
+
+.view-system-compact .stat-row {
+	padding: 4px 0;
+}
+
+.view-system-compact .card-header {
+	margin-bottom: 12px;
+}
+
+.resource-card {
+	display: flex;
+	flex-direction: column;
+	min-height: 350px;
+}
+
+.resource-card .chart-container-mini {
+	margin-top: auto;
+}
+
+.chart-container-mini {
+	height: 100px;
+	width: 100%;
+	position: relative;
+	overflow: hidden;
+	border: none;
+	border-radius: 4px;
+}
+
+/* Theme Toggle */
+
+/* Chart Styles */
+.chart-container {
+	margin-bottom: 32px;
+	height: 300px;
+	position: relative;
+}
+
+/* Buttons - Unified base styles */
+.btn,
+.icon-btn {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	padding: 10px 20px;
+	border-radius: 8px;
+	font-weight: 600;
+	font-size: 0.875rem;
+	cursor: pointer;
+	border: none;
+	transition: all 0.2s;
+	background-color: var(--bg-hover);
+	color: var(--text-bright);
+}
+
+.btn .material-symbols-rounded,
+.icon-btn .material-symbols-rounded {
+	font-size: 18px;
+}
+
+.btn:hover,
+.icon-btn:hover {
+	background-color: var(--border);
+}
+
+.btn-primary {
+	background-color: var(--accent);
+	color: white;
+}
+
+.btn-primary:hover {
+	opacity: 0.9;
+	background-color: var(--accent);
+}
+
+.btn-success {
+	background-color: var(--success);
+	color: white;
+}
+
+.btn-success:hover {
+	opacity: 0.9;
+}
+
+.btn-warning {
+	background-color: var(--warning);
+	color: #000;
+}
+
+.btn-warning:hover {
+	opacity: 0.9;
+}
+
+.btn-danger {
+	background-color: var(--danger);
+	color: white;
+}
+
+.btn-danger:hover {
+	opacity: 0.9;
+}
+
+.btn-outline {
+	background: transparent;
+	border: 1px solid var(--border);
+	color: var(--accent);
+}
+
+.btn-outline:hover {
+	background-color: var(--bg-hover);
+}
+
+.btn-full {
+	width: 100%;
+}
+
+.btn-sm {
+	padding: 6px 12px;
+	font-size: 0.8125rem;
+}
+
+.btn-sm .material-symbols-rounded {
+	font-size: 16px;
+}
+
+.btn-lg {
+	padding: 14px 28px;
+	font-size: 1rem;
+}
+
+.btn-lg .material-symbols-rounded {
+	font-size: 22px;
+}
+
+/* Navigation buttons */
+nav button {
+	width: 100%;
+	padding: 12px 16px;
+	text-align: left;
+	background: none;
+	border: none;
+	color: var(--text-main);
+	cursor: pointer;
+	font-size: 0.95rem;
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	border-radius: 8px;
+	transition: all 0.2s;
+	margin-bottom: 4px;
+}
+
+nav button:hover {
+	background-color: var(--bg-hover);
+	color: var(--text-bright);
+}
+
+nav button.active {
+	background-color: var(--accent);
+	color: white;
+}
+
+nav button .material-symbols-rounded {
+	font-size: 20px;
+}
+
+/* Icon-only buttons */
+.icon-btn {
+	padding: 10px;
+	min-width: 40px;
+	min-height: 40px;
+}
+
+.icon-btn.icon-sm {
+	padding: 6px;
+	min-width: 32px;
+	min-height: 32px;
+}
+
+.icon-btn.icon-sm .material-symbols-rounded {
+	font-size: 20px;
+}
+
+.control-group {
+	display: flex;
+	gap: 16px;
+	margin-top: 24px;
+	flex-wrap: wrap;
+}
+
+.control-group .btn {
+	flex: 1;
+	min-width: 140px;
+}
+
+/* Utility Classes for Visual Polish */
+
+/* Spacing utilities */
+.gap-1 {
+	gap: 4px;
+}
+.gap-2 {
+	gap: 8px;
+}
+.gap-3 {
+	gap: 12px;
+}
+.gap-4 {
+	gap: 16px;
+}
+.gap-6 {
+	gap: 24px;
+}
+
+.mt-1 {
+	margin-top: 4px;
+}
+.mt-2 {
+	margin-top: 8px;
+}
+.mt-3 {
+	margin-top: 12px;
+}
+.mt-4 {
+	margin-top: 16px;
+}
+.mt-6 {
+	margin-top: 24px;
+}
+.mb-1 {
+	margin-bottom: 4px;
+}
+.mb-2 {
+	margin-bottom: 8px;
+}
+.mb-3 {
+	margin-bottom: 12px;
+}
+.mb-4 {
+	margin-bottom: 16px;
+}
+.mb-6 {
+	margin-bottom: 24px;
+}
+
+.p-2 {
+	padding: 8px;
+}
+.p-3 {
+	padding: 12px;
+}
+.p-4 {
+	padding: 16px;
+}
+.p-6 {
+	padding: 24px;
+}
+
+.mx-auto {
+	margin-left: auto;
+	margin-right: auto;
+}
+
+/* Flex utilities */
+.flex {
+	display: flex;
+}
+.flex-col {
+	flex-direction: column;
+}
+.flex-wrap {
+	flex-wrap: wrap;
+}
+.items-center {
+	align-items: center;
+}
+.items-baseline {
+	align-items: baseline;
+}
+.justify-between {
+	justify-content: space-between;
+}
+.justify-center {
+	justify-content: center;
+}
+.justify-end {
+	justify-content: flex-end;
+}
+.self-center {
+	align-self: center;
+}
+.self-end {
+	align-self: flex-end;
+}
+
+/* Text utilities */
+.text-xs {
+	font-size: 0.75rem;
+}
+.text-sm {
+	font-size: 0.875rem;
+}
+.text-lg {
+	font-size: 1.125rem;
+}
+.text-xl {
+	font-size: 1.25rem;
+}
+.text-2xl {
+	font-size: 1.5rem;
+}
+.text-3xl {
+	font-size: 1.875rem;
+}
+.font-medium {
+	font-weight: 500;
+}
+.font-semibold {
+	font-weight: 600;
+}
+.font-bold {
+	font-weight: 700;
+}
+.text-center {
+	text-align: center;
+}
+.text-right {
+	text-align: right;
+}
+
+.text-main {
+	color: var(--text-main);
+}
+.text-bright {
+	color: var(--text-bright);
+}
+.text-accent {
+	color: var(--accent);
+}
+.text-success {
+	color: var(--success);
+}
+.text-warning {
+	color: var(--warning);
+}
+.text-danger {
+	color: var(--danger);
+}
+
+/* Background utilities */
+.bg-main {
+	background-color: var(--bg-main);
+}
+.bg-card {
+	background-color: var(--bg-card);
+}
+.bg-hover {
+	background-color: var(--bg-hover);
+}
+.bg-success {
+	background-color: var(--success);
+}
+.bg-warning {
+	background-color: var(--warning);
+}
+.bg-danger {
+	background-color: var(--danger);
+}
+
+/* Border utilities */
+.border {
+	border: 1px solid var(--border);
+}
+.border-b {
+	border-bottom: 1px solid var(--border);
+}
+.border-none {
+	border: none;
+}
+.border-t {
+	border-top: 1px solid var(--border);
+}
+.border-l {
+	border-left: 1px solid var(--border);
+}
+.border-r {
+	border-right: 1px solid var(--border);
+}
+.rounded {
+	border-radius: 4px;
+}
+.rounded-md {
+	border-radius: 6px;
+}
+.rounded-lg {
+	border-radius: 8px;
+}
+.rounded-xl {
+	border-radius: 12px;
+}
+.rounded-full {
+	border-radius: 9999px;
+}
+
+/* Shadow */
+.shadow-sm {
+	box-shadow: var(--shadow);
+}
+.shadow-md {
+	box-shadow:
+		0 4px 6px -1px rgb(0 0 0 / 0.1),
+		0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+/* Width utilities */
+.w-full {
+	width: 100%;
+}
+.w-auto {
+	width: auto;
+}
+.max-w-xs {
+	max-width: 120px;
+}
+.max-w-sm {
+	max-width: 200px;
+}
+.max-w-md {
+	max-width: 280px;
+}
+
+/* Overflow */
+.overflow-hidden {
+	overflow: hidden;
+}
+.overflow-auto {
+	overflow: auto;
+}
+.overflow-x-auto {
+	overflow-x: auto;
+}
+
+/* Cursor */
+.cursor-pointer {
+	cursor: pointer;
+}
+
+/* Transitions */
+.transition {
+	transition: all 0.2s ease;
+}
+.transition-colors {
+	transition:
+		background-color 0.2s,
+		color 0.2s,
+		border-color 0.2s;
+}
+.transition-all {
+	transition: all 0.2s ease;
+}
+.duration-200 {
+	transition-duration: 0.2s;
+}
+.duration-300 {
+	transition-duration: 0.3s;
+}
+
+/* Hover states */
+.hover-bg:hover {
+	background-color: var(--bg-hover);
+}
+.hover-border:hover {
+	border-color: var(--accent);
+}
+
+/* Opacity */
+.opacity-50 {
+	opacity: 0.5;
+}
+.opacity-75 {
+	opacity: 0.75;
+}
+.opacity-90 {
+	opacity: 0.9;
+}
+
+/* Line height */
+.leading-tight {
+	line-height: 1.25;
+}
+.leading-normal {
+	line-height: 1.5;
+}
+.leading-relaxed {
+	line-height: 1.625;
+}
+
+/* Whitespace */
+.whitespace-normal {
+	white-space: normal;
+}
+.whitespace-nowrap {
+	white-space: nowrap;
+}
+.break-all {
+	word-break: break-all;
+}
+
+/* Grid utilities */
+.grid {
+	display: grid;
+}
+.grid-cols-2 {
+	grid-template-columns: repeat(2, 1fr);
+}
+.grid-cols-3 {
+	grid-template-columns: repeat(3, 1fr);
+}
+.grid-cols-auto {
+	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+}
+.gap-2 {
+	gap: 8px;
+}
+.gap-3 {
+	gap: 12px;
+}
+.gap-4 {
+	gap: 16px;
+}
+.gap-6 {
+	gap: 24px;
+}
+
+/* Stat card specific */
+.stat-card {
+	background-color: var(--bg-card);
+	padding: 16px;
+	border-radius: 8px;
+	border: 1px solid var(--border);
+	text-align: center;
+}
+
+.stat-card-value {
+	font-size: 1.75rem;
+	font-weight: 700;
+	color: var(--text-bright);
+	line-height: 1.2;
+}
+
+.stat-card-label {
+	font-size: 0.75rem;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--text-main);
+	margin-top: 4px;
+}
+
+/* Progress bar */
+.progress-bar {
+	height: 6px;
+	background: var(--bg-main);
+	border-radius: 3px;
+	overflow: hidden;
+}
+
+.progress-bar-fill {
+	height: 100%;
+	border-radius: 3px;
+	transition: width 0.3s ease;
+}
+
+.progress-bar-sm {
+	height: 4px;
+}
+
+.progress-bar-lg {
+	height: 8px;
+}
+
+/* Badge */
+.badge {
+	display: inline-flex;
+	align-items: center;
+	padding: 4px 8px;
+	border-radius: 9999px;
+	font-size: 0.75rem;
+	font-weight: 600;
+	gap: 4px;
+}
+
+.badge-success {
+	background-color: rgba(16, 185, 129, 0.15);
+	color: var(--success);
+}
+
+.badge-warning {
+	background-color: rgba(245, 158, 11, 0.15);
+	color: var(--warning);
+}
+
+.badge-danger {
+	background-color: rgba(239, 68, 68, 0.15);
+	color: var(--danger);
+}
+
+.badge-info {
+	background-color: rgba(59, 130, 246, 0.15);
+	color: var(--accent);
+}
+
+/* Status dot with badge */
+.status-dot {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	font-size: 0.875rem;
+	font-weight: 500;
+}
+
+.status-dot .dot {
+	margin: 0;
+	flex-shrink: 0;
+}
+
+/* Table improvements */
+.table-row-hover tbody tr {
+	transition: background-color 0.15s ease;
+}
+
+.table-row-hover tbody tr:hover {
+	background-color: var(--bg-hover);
+}
+
+.table-cell {
+	padding: 12px 16px;
+	text-align: left;
+	border-bottom: 1px solid var(--border);
+}
+
+.table-cell-sm {
+	padding: 8px 12px;
+	font-size: 0.8125rem;
+}
+
+.table-header {
+	background-color: var(--bg-hover);
+	color: var(--text-main);
+	font-size: 0.75rem;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	font-weight: 600;
+	padding: 12px 16px;
+	text-align: left;
+}
+
+/* Dense table variant */
+.dense-table th,
+.dense-table td {
+	padding: 6px 12px;
+	font-size: 0.8125rem;
+}
+
+/* Code style */
+.code {
+	font-family: 'JetBrains Mono', 'Fira Code', monospace;
+	font-size: 0.875rem;
+	background-color: var(--bg-main);
+	padding: 2px 6px;
+	border-radius: 4px;
+	color: var(--accent);
+}
+
+.code-sm {
+	font-size: 0.75rem;
+	padding: 1px 4px;
+}
+
+/* Description text */
+.description {
+	font-size: 0.75rem;
+	color: var(--text-main);
+	font-weight: 400;
+}
+
+/* Inline stat row */
+.stat-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 8px 0;
+	border-bottom: 1px solid var(--border);
+}
+
+.stat-row:last-child {
+	border-bottom: none;
+}
+
+.stat-row-label {
+	color: var(--text-main);
+	font-size: 0.875rem;
+}
+
+.stat-row-value {
+	color: var(--text-bright);
+	font-weight: 600;
+	font-family: monospace;
+}
+
+/* Card section */
+.card-section {
+	margin-bottom: 24px;
+}
+
+.card-section:last-child {
+	margin-bottom: 0;
+}
+
+/* Clickable card */
+.card-clickable {
+	cursor: pointer;
+	transition: all 0.2s ease;
+}
+
+.card-clickable:hover {
+	border-color: var(--accent);
+	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
+}
+
+/* Icon size utilities */
+.icon-xs {
+	font-size: 14px;
+}
+.icon-sm {
+	font-size: 18px;
+}
+.icon-md {
+	font-size: 20px;
+}
+.icon-lg {
+	font-size: 24px;
+}
+.icon-xl {
+	font-size: 28px;
+}
+
+/* Modal */
+.modal {
+	position: fixed;
+	inset: 0;
+	background-color: rgba(0, 0, 0, 0.7);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 1000;
+	padding: 20px;
+}
+
+.modal-content {
+	background-color: var(--bg-card);
+	border-radius: 12px;
+	width: 100%;
+	max-width: 900px;
+	box-shadow: var(--shadow);
+	display: flex;
+	flex-direction: column;
+	max-height: 90vh;
+}
+
+.modal-header {
+	padding: 16px 24px;
+	border-bottom: 1px solid var(--border);
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.modal-header h3 {
+	margin: 0;
+	font-size: 1.125rem;
+	color: var(--text-bright);
+}
+
+.modal-body {
+	padding: 24px;
+	overflow-y: auto;
+}
+
+.stat-values-inline {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+/* Stat values for min/max */
+.stat-values {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+}
+
+.min-max {
+	font-size: 0.7rem;
+	opacity: 0.7;
+	margin-top: 2px;
+}
+
+/* Search Group */
+.search-group {
+	position: relative;
+	display: flex;
+	align-items: center;
+}
+
+.input-sm {
+	background-color: var(--bg-side);
+	border: 1px solid var(--border);
+	border-radius: 6px;
+	color: var(--text-bright);
+	padding: 6px 12px;
+	font-size: 0.875rem;
+}
+
+.input-sm:focus {
+	border-color: var(--accent);
+	outline: none;
+}
+
+.errors-table-row {
+	cursor: pointer;
+	transition: background-color 0.2s;
+}
+
+.errors-table-row:hover {
+	background-color: rgba(var(--accent-rgb), 0.08);
+}
+
+/* Server status indicator enhanced */
+.server-status {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 12px;
+	background-color: var(--bg-card);
+	border-radius: 8px;
+	border: 1px solid var(--border);
+}
+
+.server-status-indicator {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.server-status-dot {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	flex-shrink: 0;
+}
+
+.server-status-dot.running {
+	background-color: var(--success);
+	box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
+}
+
+.server-status-dot.paused {
+	background-color: var(--warning);
+	box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
+}
+
+.server-status-dot.stopped {
+	background-color: var(--danger);
+	box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
+}
+
+.server-status-text {
+	font-size: 0.875rem;
+	font-weight: 500;
+	text-transform: uppercase;
+	letter-spacing: 0.025em;
+}
+
+/* Danger zone card */
+.danger-zone {
+	border: 1px solid var(--warning);
+	border-left-width: 4px;
+	background-color: rgba(245, 158, 11, 0.03);
+}
+
+.danger-zone-title {
+	color: var(--warning);
+	font-weight: 600;
+	margin-bottom: 8px;
+}
+
+/* Empty state */
+.empty-state {
+	text-align: center;
+	padding: 48px 24px;
+	color: var(--text-main);
+}
+
+.empty-state-icon {
+	font-size: 48px;
+	color: var(--text-main);
+	opacity: 0.5;
+	margin-bottom: 16px;
+}
+
+.empty-state-text {
+	font-size: 0.875rem;
+}
+
+/* Loading skeleton */
+.skeleton {
+	background: linear-gradient(90deg, var(--bg-main) 25%, var(--bg-hover) 50%, var(--bg-main) 75%);
+	background-size: 200% 100%;
+	animation: skeleton-loading 1.5s infinite;
+	border-radius: 4px;
+}
+
+@keyframes skeleton-loading {
+	0% {
+		background-position: 200% 0;
+	}
+	100% {
+		background-position: -200% 0;
+	}
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+
+::-webkit-scrollbar-track {
+	background: var(--bg-main);
+}
+
+::-webkit-scrollbar-thumb {
+	background: var(--border);
+	border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background: var(--text-main);
+	opacity: 0.5;
+}
+
+/* Focus styles for accessibility */
+button:focus-visible,
+input:focus-visible,
+select:focus-visible {
+	outline: 2px solid var(--accent);
+	outline-offset: 2px;
+}
+
+/* Input styling */
+input[type='checkbox'] {
+	width: 18px;
+	height: 18px;
+	accent-color: var(--accent);
+	cursor: pointer;
+}
+
+select {
+	accent-color: var(--accent);
+	cursor: pointer;
+}
+
+/* Animations */
+@keyframes spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+.animate-spin {
+	animation: spin 1s linear infinite;
+	display: inline-block;
+}
+
+.btn.loading {
+	pointer-events: none;
+	opacity: 0.8;
+}