web_plsql 1.0.0 → 1.3.0

package/src/admin/style.css

@@ -1,1321 +0,0 @@
-:root {
-	/* Material Design 3 inspired tokens - Light Mode */
-	--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%;
-	}
-}
-
-/* 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;
-}
-
-/* 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;
-}
-
-/* Overlay */
-.overlay {
-	position: fixed;
-	inset: 0;
-	background-color: rgba(0, 0, 0, 0.5);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	z-index: 100;
-}
-
-.modal {
-	background-color: var(--bg-card);
-	border-radius: 12px;
-	padding: 24px;
-	max-width: 400px;
-	width: 90%;
-	box-shadow:
-		0 20px 25px -5px rgb(0 0 0 / 0.1),
-		0 8px 10px -6px rgb(0 0 0 / 0.1);
-}
-
-.modal-title {
-	font-size: 1.125rem;
-	font-weight: 600;
-	color: var(--text-bright);
-	margin-bottom: 8px;
-}
-
-.modal-text {
-	color: var(--text-main);
-	font-size: 0.875rem;
-	margin-bottom: 24px;
-}
-
-.modal-actions {
-	display: flex;
-	gap: 12px;
-	justify-content: flex-end;
-}
-
-/* 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;
-}
-
-.danger-zone-text {
-	color: var(--text-main);
-	font-size: 0.875rem;
-	margin-bottom: 16px;
-}
-
-/* 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;
-}