Agent MCP

@import "tailwindcss"; @import "vis-network/styles/vis-network.css"; @custom-variant dark (&:is(.dark *)); @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --font-sans: Inter, var(--font-geist-sans); --font-mono: "JetBrains Mono", var(--font-geist-mono); --color-sidebar-ring: var(--sidebar-ring); --color-sidebar-border: var(--sidebar-border); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar: var(--sidebar); --color-chart-5: var(--chart-5); --color-chart-4: var(--chart-4); --color-chart-3: var(--chart-3); --color-chart-2: var(--chart-2); --color-chart-1: var(--chart-1); --color-ring: var(--ring); --color-input: var(--input); --color-border: var(--border); --color-destructive: var(--destructive); --color-accent-foreground: var(--accent-foreground); --color-accent: var(--accent); --color-muted-foreground: var(--muted-foreground); --color-muted: var(--muted); --color-secondary-foreground: var(--secondary-foreground); --color-secondary: var(--secondary); --color-primary-foreground: var(--primary-foreground); --color-primary: var(--primary); --color-popover-foreground: var(--popover-foreground); --color-popover: var(--popover); --color-card-foreground: var(--card-foreground); --color-card: var(--card); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); /* Premium glassmorphism and blur effects */ --blur-sm: 4px; --blur-md: 8px; --blur-lg: 16px; --blur-xl: 24px; /* Enhanced shadows for depth */ --shadow-soft: 0 2px 8px -1px rgb(0 0 0 / 0.05), 0 1px 3px -1px rgb(0 0 0 / 0.1); --shadow-medium: 0 4px 16px -2px rgb(0 0 0 / 0.08), 0 2px 6px -1px rgb(0 0 0 / 0.12); --shadow-strong: 0 8px 32px -4px rgb(0 0 0 / 0.12), 0 4px 12px -2px rgb(0 0 0 / 0.16); --shadow-premium: 0 16px 64px -8px rgb(0 0 0 / 0.16), 0 8px 24px -4px rgb(0 0 0 / 0.2); } :root { --radius: 0.625rem; /* Light Theme - Deep Ocean Tech Colors with improved contrast */ --background: hsl(0, 0%, 100%); --foreground: hsl(215, 30%, 8%); --card: hsl(0, 0%, 100%); --card-foreground: hsl(215, 30%, 8%); --popover: hsl(0, 0%, 100%); --popover-foreground: hsl(215, 30%, 8%); --primary: hsl(178, 84%, 40%); --primary-foreground: hsl(0, 0%, 100%); --secondary: hsl(210, 40%, 98%); --secondary-foreground: hsl(215, 30%, 8%); --muted: hsl(210, 40%, 96%); --muted-foreground: hsl(215, 25%, 25%); --accent: hsl(210, 40%, 96%); --accent-foreground: hsl(215, 30%, 8%); --destructive: hsl(11, 80%, 50%); --border: hsl(214.3, 31.8%, 91.4%); --input: hsl(214.3, 31.8%, 91.4%); --ring: hsl(178, 84%, 40%); /* Enhanced chart colors - Deep Ocean Tech palette */ --chart-1: hsl(178, 84%, 40%); --chart-2: hsl(188, 94%, 45%); --chart-3: hsl(262, 83%, 58%); --chart-4: hsl(43, 100%, 48%); --chart-5: hsl(11, 80%, 50%); /* Sidebar with Deep Ocean Tech styling */ --sidebar: hsl(210, 40%, 99%); --sidebar-foreground: hsl(215, 30%, 8%); --sidebar-primary: hsl(178, 84%, 40%); --sidebar-primary-foreground: hsl(0, 0%, 100%); --sidebar-accent: hsl(210, 40%, 96%); --sidebar-accent-foreground: hsl(215, 30%, 8%); --sidebar-border: hsl(214.3, 31.8%, 91.4%); --sidebar-ring: hsl(178, 84%, 40%); /* Premium semantic colors - Deep Ocean Tech */ --success: hsl(178, 84%, 40%); --success-foreground: hsl(0, 0%, 100%); --warning: hsl(43, 100%, 48%); --warning-foreground: hsl(0, 0%, 100%); --info: hsl(188, 94%, 45%); --info-foreground: hsl(0, 0%, 100%); } .dark { /* Dark Theme - Deep Ocean Tech Design */ --background: hsl(220, 27%, 6%); --foreground: hsl(210, 40%, 98%); --card: hsl(220, 27%, 8%); --card-foreground: hsl(210, 40%, 98%); --popover: hsl(220, 27%, 8%); --popover-foreground: hsl(210, 40%, 98%); --primary: hsl(178, 84%, 40%); --primary-foreground: hsl(220, 27%, 6%); --secondary: hsl(217.2, 32.6%, 17.5%); --secondary-foreground: hsl(210, 40%, 98%); --muted: hsl(217.2, 32.6%, 17.5%); --muted-foreground: hsl(215, 20.2%, 65.1%); --accent: hsl(217.2, 32.6%, 17.5%); --accent-foreground: hsl(210, 40%, 98%); --destructive: hsl(11, 80%, 50%); --border: hsl(217.2, 32.6%, 17.5%); --input: hsl(217.2, 32.6%, 17.5%); --ring: hsl(178, 84%, 40%); /* Enhanced chart colors for dark theme - Deep Ocean Tech */ --chart-1: hsl(178, 84%, 40%); --chart-2: hsl(188, 94%, 45%); --chart-3: hsl(262, 83%, 58%); --chart-4: hsl(43, 100%, 48%); --chart-5: hsl(11, 80%, 50%); /* Sophisticated dark sidebar - Deep Ocean Tech */ --sidebar: hsl(220, 27%, 6%); --sidebar-foreground: hsl(210, 40%, 98%); --sidebar-primary: hsl(178, 84%, 40%); --sidebar-primary-foreground: hsl(220, 27%, 6%); --sidebar-accent: hsl(217.2, 32.6%, 17.5%); --sidebar-accent-foreground: hsl(210, 40%, 98%); --sidebar-border: hsl(217.2, 32.6%, 17.5%); --sidebar-ring: hsl(178, 84%, 40%); /* Premium semantic colors for dark theme - Deep Ocean Tech */ --success: hsl(178, 84%, 40%); --success-foreground: hsl(220, 27%, 6%); --warning: hsl(43, 100%, 48%); --warning-foreground: hsl(220, 27%, 6%); --info: hsl(188, 94%, 45%); --info-foreground: hsl(220, 27%, 6%); } @layer base { * { @apply border-border outline-ring/50; } html { @apply scroll-smooth; height: 100%; } body { @apply bg-background text-foreground font-sans antialiased; font-feature-settings: 'cv01', 'cv02', 'cv03', 'cv04'; line-height: 1.6; text-rendering: optimizeLegibility; height: 100%; min-height: 100vh; } #__next { height: 100%; } /* Premium typography hierarchy */ h1, h2, h3, h4, h5, h6 { @apply font-semibold tracking-tight; line-height: 1.25; } h1 { @apply text-4xl; } h2 { @apply text-3xl; } h3 { @apply text-2xl; } h4 { @apply text-xl; } h5 { @apply text-lg; } h6 { @apply text-base; } /* Enhanced focus styles */ :focus-visible { @apply outline-2 outline-offset-2 outline-ring; } /* Smooth transitions for interactive elements */ button, a, input, select, textarea { @apply transition-all duration-200; } /* Enhanced scrollbar styles */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { @apply bg-transparent; } ::-webkit-scrollbar-thumb { @apply bg-border rounded-full; } ::-webkit-scrollbar-thumb:hover { @apply bg-muted-foreground/50; } .dark ::-webkit-scrollbar-thumb { @apply bg-border; } .dark ::-webkit-scrollbar-thumb:hover { @apply bg-muted-foreground/30; } } /* Fluid Design System */ @layer base { :root { /* Fluid spacing scale using clamp() */ --space-fluid-xs: clamp(0.25rem, 0.5vw, 0.5rem); --space-fluid-sm: clamp(0.5rem, 1vw, 0.75rem); --space-fluid-md: clamp(0.75rem, 1.5vw, 1rem); --space-fluid-lg: clamp(1rem, 2vw, 1.5rem); --space-fluid-xl: clamp(1.5rem, 3vw, 2.5rem); --space-fluid-2xl: clamp(2rem, 4vw, 4rem); --space-fluid-3xl: clamp(3rem, 6vw, 6rem); /* Fluid typography scale */ --text-fluid-xs: clamp(0.75rem, 0.8vw + 0.5rem, 0.875rem); --text-fluid-sm: clamp(0.875rem, 0.9vw + 0.6rem, 1rem); --text-fluid-base: clamp(1rem, 1vw + 0.75rem, 1.125rem); --text-fluid-lg: clamp(1.125rem, 1.2vw + 0.9rem, 1.25rem); --text-fluid-xl: clamp(1.25rem, 1.5vw + 1rem, 1.5rem); --text-fluid-2xl: clamp(1.5rem, 2vw + 1.2rem, 2rem); --text-fluid-3xl: clamp(1.875rem, 2.5vw + 1.5rem, 2.5rem); --text-fluid-4xl: clamp(2.25rem, 3vw + 1.8rem, 3rem); --text-fluid-5xl: clamp(3rem, 4vw + 2.4rem, 4rem); /* Responsive container padding */ --container-padding: clamp(1rem, 2vw, 3rem); /* Dynamic viewport units for better mobile support */ --vh: 1vh; --vw: 1vw; } /* Custom breakpoints for larger displays */ @media (min-width: 1920px) { :root { --container-padding: clamp(2rem, 3vw, 4rem); } } @media (min-width: 2560px) { :root { --container-padding: clamp(3rem, 4vw, 6rem); } } /* Ultra-wide display support */ @media (min-aspect-ratio: 21/9) { :root { --container-padding: clamp(2rem, 5vw, 8rem); } } } @layer components { /* Premium card styles with glassmorphism */ .card-premium { @apply bg-card/60 backdrop-blur-md border border-border/50 rounded-lg shadow-lg; box-shadow: var(--shadow-medium); } .card-premium:hover { @apply border-border; box-shadow: var(--shadow-strong); transform: translateY(-2px); } /* Floating action button */ .fab { @apply fixed bottom-6 right-6 w-14 h-14 bg-primary text-primary-foreground rounded-full shadow-lg; box-shadow: var(--shadow-premium); } .fab:hover { @apply scale-110; box-shadow: var(--shadow-premium); } /* Premium glass container */ .glass-container { @apply bg-background/80 backdrop-blur-lg border border-border/30 rounded-xl; box-shadow: var(--shadow-soft); } /* Data visualization containers */ .chart-container { @apply bg-card border border-border rounded-lg p-4; box-shadow: var(--shadow-soft); } /* Status indicators */ .status-indicator { @apply inline-flex items-center gap-2 px-2 py-1 rounded-full text-xs font-medium; } .status-online { @apply bg-green-50 text-green-700 border border-green-200; } .status-offline { @apply bg-muted text-muted-foreground border border-border; } .status-error { @apply bg-red-50 text-red-700 border border-red-200; } .status-warning { @apply bg-amber-50 text-amber-700 border border-amber-200; } .dark .status-online { @apply bg-green-950 text-green-300 border border-green-800; } .dark .status-error { @apply bg-red-950 text-red-300 border border-red-800; } .dark .status-warning { @apply bg-amber-950 text-amber-300 border border-amber-800; } /* Fluid container with responsive padding */ .fluid-container { padding-left: var(--container-padding); padding-right: var(--container-padding); padding-top: var(--space-fluid-lg); padding-bottom: var(--space-fluid-lg); } /* Responsive graph container */ .graph-container { min-height: clamp(400px, 50vh, 600px); height: calc(100vh - 12rem); max-height: calc(100vh - 8rem); } @media (min-width: 768px) { .graph-container { height: calc(100vh - 10rem); max-height: calc(100vh - 6rem); } } @media (min-width: 1920px) { .graph-container { height: calc(100vh - 8rem); max-height: calc(100vh - 5rem); } } /* Ultra-wide specific styles */ @media (min-aspect-ratio: 21/9) { .graph-container { height: calc(100vh - 6rem); max-height: none; } } /* Grid layout constraints for large screens */ @media (min-width: 1920px) { .grid { gap: var(--space-fluid-xl); } } /* Maximum grid column width for readability */ .grid > * { max-width: 100%; } @media (min-width: 2560px) { .grid-cols-4 > * { max-width: 400px; } .grid-cols-3 > * { max-width: 600px; } } /* High DPI display optimizations */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .graph-container { image-rendering: crisp-edges; -webkit-font-smoothing: antialiased; } } /* Ensure full width layouts don't have unwanted margins */ .w-full { width: 100% !important; } /* Better handling of flex containers on large screens */ @media (min-width: 1920px) { .flex { gap: var(--space-fluid-md); } .space-y-6 > * + * { margin-top: var(--space-fluid-xl); } } } @layer utilities { /* Animation utilities */ .animate-fade-in { animation: fadeIn 0.3s ease-out forwards; } .animate-slide-up { animation: slideUp 0.3s ease-out forwards; } .animate-pulse-slow { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* Layout utilities */ .sidebar-width { width: 280px; } .main-content { margin-left: 280px; } @media (max-width: 768px) { .main-content { margin-left: 0; } } /* Responsive max-width container */ .responsive-max-width { width: 100%; max-width: 1536px; /* Default max-width */ } @media (min-width: 1920px) { .responsive-max-width { max-width: 1728px; /* 90% of 1920px */ } } @media (min-width: 2560px) { .responsive-max-width { max-width: 2304px; /* 90% of 2560px */ } } @media (min-width: 3840px) { .responsive-max-width { max-width: 3456px; /* 90% of 3840px (4K) */ } } /* Ultra-wide specific max-width */ @media (min-aspect-ratio: 21/9) { .responsive-max-width { max-width: 85%; /* Percentage-based for ultra-wide */ } } @media (min-aspect-ratio: 32/9) { .responsive-max-width { max-width: 75%; /* Even more constrained for super ultra-wide */ } } /* Fluid text utilities */ .text-fluid-xs { font-size: var(--text-fluid-xs); } .text-fluid-sm { font-size: var(--text-fluid-sm); } .text-fluid-base { font-size: var(--text-fluid-base); } .text-fluid-lg { font-size: var(--text-fluid-lg); } .text-fluid-xl { font-size: var(--text-fluid-xl); } .text-fluid-2xl { font-size: var(--text-fluid-2xl); } .text-fluid-3xl { font-size: var(--text-fluid-3xl); } .text-fluid-4xl { font-size: var(--text-fluid-4xl); } .text-fluid-5xl { font-size: var(--text-fluid-5xl); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Premium loading animations */ @keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } } .loading-shimmer { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); background-size: 200px 100%; animation: shimmer 1.5s infinite; }