@camunda/ccma-saas-frontend 0.0.31

package/lib/esm/themes/cyberpunk-brutalism.css

@@ -0,0 +1,956 @@
+/*
+ * Cyberpunk Brutalism Theme
+ * Neon colors, glitch effects, scanlines, and futuristic aesthetics
+ * 
+ * This theme overrides Carbon Design System components with cyberpunk styling
+ * WITHOUT modifying component code - it works through CSS cascade and specificity
+ */
+
+/* ============================================
+   1. COLOR PALETTE & DESIGN TOKENS OVERRIDE
+   ============================================ */
+
+body.cyberpunk-mode-dark {
+  /* Cyberpunk Color Palette */
+  --cyber-cyan: #00f0ff;
+  --cyber-magenta: #ff00ff;
+  --cyber-yellow: #ffff00;
+  --cyber-blue: #0088ff;
+  --cyber-purple: #8800ff;
+  --cyber-green: #00ff88;
+  --cyber-red: #ff0044;
+  --cyber-dark: #0a0e27;
+  --cyber-darker: #050813;
+  --cyber-grid: #1a1f3a;
+
+  /* Override Carbon Design System tokens */
+  --cds-background: var(--cyber-darker);
+  --cds-layer: var(--cyber-dark);
+  --cds-layer-01: var(--cyber-dark);
+  --cds-layer-02: rgba(26, 31, 58, 0.8);
+  --cds-layer-03: rgba(26, 31, 58, 0.6);
+  --cds-field: var(--cyber-dark);
+  --cds-field-01: var(--cyber-dark);
+  --cds-field-02: rgba(26, 31, 58, 0.8);
+
+  --cds-text-primary: var(--cyber-cyan);
+  --cds-text-secondary: rgba(0, 240, 255, 0.7);
+  --cds-text-placeholder: rgba(0, 240, 255, 0.4);
+  --cds-text-on-color: var(--cyber-darker);
+  --cds-text-helper: rgba(0, 240, 255, 0.6);
+  --cds-text-error: var(--cyber-red);
+
+  --cds-link-primary: var(--cyber-magenta);
+  --cds-link-secondary: var(--cyber-cyan);
+
+  --cds-icon-primary: var(--cyber-cyan);
+  --cds-icon-secondary: rgba(0, 240, 255, 0.7);
+
+  --cds-border-subtle: rgba(0, 240, 255, 0.2);
+  --cds-border-strong: var(--cyber-cyan);
+  --cds-border-interactive: var(--cyber-magenta);
+
+  --cds-button-primary: var(--cyber-magenta);
+  --cds-button-secondary: var(--cyber-cyan);
+  --cds-button-tertiary: var(--cyber-purple);
+  --cds-button-danger: var(--cyber-red);
+
+  --cds-support-error: var(--cyber-red);
+  --cds-support-success: var(--cyber-green);
+  --cds-support-warning: var(--cyber-yellow);
+  --cds-support-info: var(--cyber-cyan);
+
+  /* Font override */
+  font-family: "Courier New", "Courier", monospace !important;
+}
+
+/* ============================================
+   2. BASE BODY STYLING
+   ============================================ */
+
+body.cyberpunk-mode-dark {
+  background: var(--cyber-darker) !important;
+  color: var(--cyber-cyan) !important;
+  position: relative;
+  min-height: 100vh;
+}
+
+/* Grid overlay background */
+body.cyberpunk-mode::before {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background:
+    linear-gradient(90deg, var(--cyber-grid) 1px, transparent 1px),
+    linear-gradient(0deg, var(--cyber-grid) 1px, transparent 1px);
+  background-size: 50px 50px;
+  opacity: 0.1;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* ============================================
+   3. SCANLINE OVERLAY
+   ============================================ */
+
+body.cyberpunk-mode::after {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    to bottom,
+    transparent 50%,
+    rgba(0, 240, 255, 0.03) 51%
+  );
+  background-size: 100% 4px;
+  pointer-events: none;
+  z-index: 9999;
+  animation: scanlines-dark 0.1s linear infinite;
+}
+
+@keyframes scanlines-dark {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 0 4px;
+  }
+}
+
+/* ============================================
+   4. CARBON COMPONENT OVERRIDES
+   ============================================ */
+
+/* All Carbon containers */
+body.cyberpunk-mode-dark .cds--content {
+  background: transparent !important;
+}
+body.cyberpunk-mode-dark .cds--side-nav {
+  background: var(--cyber-dark) !important;
+}
+
+/* Tiles and Cards */
+body.cyberpunk-mode-dark .cds--tile,
+body.cyberpunk-mode-dark .cds--structured-list,
+body.cyberpunk-mode-dark .cds--data-table {
+  background: var(--cyber-dark) !important;
+  border: 2px solid var(--cyber-cyan) !important;
+  box-shadow:
+    0 0 20px rgba(0, 240, 255, 0.3),
+    inset 0 0 20px rgba(0, 240, 255, 0.1) !important;
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+body.cyberpunk-mode-dark .cds--tile::before,
+body.cyberpunk-mode-dark .cds--structured-list::before,
+body.cyberpunk-mode-dark .cds--data-table::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(0, 240, 255, 0.4),
+    transparent
+  );
+  transition: left 0.5s;
+  pointer-events: none;
+}
+
+body.cyberpunk-mode-dark .cds--tile:hover,
+body.cyberpunk-mode-dark .cds--structured-list:hover,
+body.cyberpunk-mode-dark .cds--data-table:hover {
+  border-color: var(--cyber-magenta) !important;
+  box-shadow:
+    0 0 30px rgba(255, 0, 255, 0.5),
+    inset 0 0 30px rgba(255, 0, 255, 0.2) !important;
+}
+
+body.cyberpunk-mode-dark .cds--tile:hover::before,
+body.cyberpunk-mode-dark .cds--structured-list:hover::before,
+body.cyberpunk-mode-dark .cds--data-table:hover::before {
+  left: 100%;
+}
+
+/* Buttons */
+body.cyberpunk-mode-dark .cds--btn {
+  background: transparent !important;
+  border: 2px solid var(--cyber-cyan) !important;
+  color: var(--cyber-cyan) !important;
+  font-family: "Courier New", "Courier", monospace !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.1em !important;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+body.cyberpunk-mode-dark .cds--btn::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: rgba(0, 240, 255, 0.3);
+  transform: translate(-50%, -50%);
+  transition:
+    width 0.6s,
+    height 0.6s;
+}
+
+body.cyberpunk-mode-dark .cds--btn:hover {
+  border-color: var(--cyber-magenta) !important;
+  color: var(--cyber-magenta) !important;
+  box-shadow: 0 0 20px rgba(255, 0, 255, 0.6) !important;
+  transform: translateY(-2px);
+}
+
+body.cyberpunk-mode-dark .cds--btn:hover::before {
+  width: 300px;
+  height: 300px;
+}
+
+body.cyberpunk-mode-dark .cds--btn--primary {
+  border-color: var(--cyber-magenta) !important;
+  color: var(--cyber-magenta) !important;
+  box-shadow: 0 0 10px rgba(255, 0, 255, 0.3);
+}
+
+body.cyberpunk-mode-dark .cds--btn--danger {
+  border-color: var(--cyber-red) !important;
+  color: var(--cyber-red) !important;
+}
+
+/* Input Fields */
+body.cyberpunk-mode-dark .cds--text-input,
+body.cyberpunk-mode-dark .cds--text-area,
+body.cyberpunk-mode-dark .cds--select-input,
+body.cyberpunk-mode-dark .cds--dropdown {
+  background: var(--cyber-dark) !important;
+  border: 2px solid var(--cyber-cyan) !important;
+  color: var(--cyber-cyan) !important;
+  font-family: "Courier New", "Courier", monospace !important;
+}
+
+body.cyberpunk-mode-dark .cds--text-input:focus,
+body.cyberpunk-mode-dark .cds--text-area:focus,
+body.cyberpunk-mode-dark .cds--select-input:focus,
+body.cyberpunk-mode-dark .cds--dropdown:focus {
+  border-color: var(--cyber-magenta) !important;
+  box-shadow: 0 0 20px rgba(255, 0, 255, 0.5) !important;
+}
+
+body.cyberpunk-mode-dark .cds--text-input::placeholder,
+body.cyberpunk-mode-dark .cds--text-area::placeholder {
+  color: rgba(0, 240, 255, 0.4) !important;
+}
+
+/* Labels */
+body.cyberpunk-mode-dark .cds--label,
+body.cyberpunk-mode-dark .cds--form__label-text,
+body.cyberpunk-mode-dark .cds--checkbox-label-text,
+body.cyberpunk-mode-dark .cds--radio-button__label-text {
+  color: var(--cyber-cyan) !important;
+  font-family: "Courier New", "Courier", monospace !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.05em !important;
+  font-size: 0.75rem !important;
+}
+
+/* Links */
+body.cyberpunk-mode-dark .cds--link,
+body.cyberpunk-mode-dark a {
+  color: var(--cyber-magenta) !important;
+  text-shadow: 0 0 5px rgba(255, 0, 255, 0.5);
+  transition: all 0.3s ease;
+}
+
+body.cyberpunk-mode-dark .cds--link:hover,
+body.cyberpunk-mode-dark a:hover {
+  color: var(--cyber-cyan) !important;
+  text-shadow: 0 0 10px rgba(0, 240, 255, 0.8);
+}
+
+/* Modals */
+body.cyberpunk-mode-dark .cds--modal-container {
+  background: var(--cyber-dark) !important;
+  border: 3px solid var(--cyber-cyan) !important;
+  box-shadow:
+    0 0 50px rgba(0, 240, 255, 0.5),
+    inset 0 0 50px rgba(0, 240, 255, 0.1) !important;
+}
+
+body.cyberpunk-mode-dark .cds--modal-header {
+  border-bottom: 2px solid var(--cyber-cyan) !important;
+}
+
+body.cyberpunk-mode-dark .cds--modal-footer {
+  border-top: 2px solid var(--cyber-cyan) !important;
+}
+
+/* Notifications */
+body.cyberpunk-mode-dark .cds--inline-notification,
+body.cyberpunk-mode-dark .cds--toast-notification {
+  background: var(--cyber-dark) !important;
+  border: 2px solid var(--cyber-cyan) !important;
+  box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
+}
+
+body.cyberpunk-mode-dark .cds--inline-notification--error,
+body.cyberpunk-mode-dark .cds--toast-notification--error {
+  border-color: var(--cyber-red) !important;
+  box-shadow: 0 0 20px rgba(255, 0, 68, 0.4);
+}
+
+body.cyberpunk-mode-dark .cds--inline-notification--success,
+body.cyberpunk-mode-dark .cds--toast-notification--success {
+  border-color: var(--cyber-green) !important;
+  box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
+}
+
+body.cyberpunk-mode-dark .cds--inline-notification--warning,
+body.cyberpunk-mode-dark .cds--toast-notification--warning {
+  border-color: var(--cyber-yellow) !important;
+  box-shadow: 0 0 20px rgba(255, 255, 0, 0.4);
+}
+
+/* Tables */
+body.cyberpunk-mode-dark .cds--data-table thead {
+  background: var(--cyber-dark) !important;
+  border-bottom: 2px solid var(--cyber-cyan) !important;
+}
+
+body.cyberpunk-mode-dark .cds--data-table tbody tr {
+  border-bottom: 1px solid rgba(0, 240, 255, 0.2) !important;
+}
+
+body.cyberpunk-mode-dark .cds--data-table tbody tr:hover {
+  background: rgba(0, 240, 255, 0.1) !important;
+  box-shadow: inset 0 0 20px rgba(0, 240, 255, 0.2);
+}
+
+body.cyberpunk-mode-dark .cds--data-table th,
+body.cyberpunk-mode-dark .cds--data-table td {
+  color: var(--cyber-cyan) !important;
+  border-color: rgba(0, 240, 255, 0.2) !important;
+}
+
+/* Tabs */
+body.cyberpunk-mode-dark .cds--tabs {
+  border-bottom: 2px solid var(--cyber-cyan) !important;
+}
+
+body.cyberpunk-mode-dark .cds--tabs__nav-link {
+  color: var(--cyber-cyan) !important;
+  border-bottom: 2px solid transparent !important;
+}
+
+body.cyberpunk-mode-dark .cds--tabs__nav-link:hover {
+  color: var(--cyber-magenta) !important;
+  border-bottom-color: var(--cyber-magenta) !important;
+}
+
+body.cyberpunk-mode-dark .cds--tabs__nav-item--selected .cds--tabs__nav-link {
+  border-bottom-color: var(--cyber-magenta) !important;
+  color: var(--cyber-magenta) !important;
+  text-shadow: 0 0 10px rgba(255, 0, 255, 0.8);
+}
+
+/* Accordion */
+body.cyberpunk-mode-dark .cds--accordion__item {
+  border-top: 1px solid rgba(0, 240, 255, 0.2) !important;
+}
+
+body.cyberpunk-mode-dark .cds--accordion__heading {
+  color: var(--cyber-cyan) !important;
+}
+
+body.cyberpunk-mode-dark .cds--accordion__heading:hover {
+  background: rgba(0, 240, 255, 0.1) !important;
+}
+
+/* Toggles and Checkboxes */
+body.cyberpunk-mode-dark .cds--toggle__switch {
+  background: var(--cyber-dark) !important;
+  border: 2px solid var(--cyber-cyan) !important;
+}
+
+body.cyberpunk-mode-dark .cds--toggle__switch::before {
+  background: var(--cyber-cyan) !important;
+  box-shadow: 0 0 10px rgba(0, 240, 255, 0.8);
+}
+
+body.cyberpunk-mode
+  .cds--toggle:checked
+  + .cds--toggle__label
+  .cds--toggle__switch {
+  background: var(--cyber-magenta) !important;
+  box-shadow: 0 0 20px rgba(255, 0, 255, 0.6);
+}
+
+/* Progress Bar */
+body.cyberpunk-mode-dark .cds--progress-bar {
+  background: var(--cyber-dark) !important;
+}
+
+body.cyberpunk-mode-dark .cds--progress-bar__bar {
+  background: var(--cyber-magenta) !important;
+  box-shadow: 0 0 10px rgba(255, 0, 255, 0.8);
+}
+
+/* Loading Spinner */
+body.cyberpunk-mode-dark .cds--loading__svg circle {
+  stroke: var(--cyber-cyan) !important;
+}
+
+/* Tags */
+body.cyberpunk-mode-dark .cds--tag {
+  background: var(--cyber-dark) !important;
+  border: 1px solid var(--cyber-cyan) !important;
+  color: var(--cyber-cyan) !important;
+  box-shadow: 0 0 5px rgba(0, 240, 255, 0.3);
+}
+
+/* Breadcrumbs */
+body.cyberpunk-mode-dark .cds--breadcrumb-item,
+body.cyberpunk-mode-dark .cds--breadcrumb-item::after {
+  color: var(--cyber-cyan) !important;
+}
+
+body.cyberpunk-mode-dark .cds--breadcrumb-item:hover {
+  color: var(--cyber-magenta) !important;
+}
+
+/* Tooltips */
+body.cyberpunk-mode-dark .cds--tooltip {
+  background: var(--cyber-dark) !important;
+  border: 2px solid var(--cyber-cyan) !important;
+  color: var(--cyber-cyan) !important;
+  box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
+}
+
+/* Overflow Menu */
+body.cyberpunk-mode-dark .cds--overflow-menu-options {
+  background: var(--cyber-dark) !important;
+  border: 2px solid var(--cyber-cyan) !important;
+  box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
+}
+
+body.cyberpunk-mode-dark .cds--overflow-menu-options__option {
+  color: var(--cyber-cyan) !important;
+}
+
+body.cyberpunk-mode-dark .cds--overflow-menu-options__option:hover {
+  background: rgba(0, 240, 255, 0.1) !important;
+  color: var(--cyber-magenta) !important;
+}
+
+/* ============================================
+   5. HEADINGS WITH GLITCH EFFECT
+   ============================================ */
+
+body.cyberpunk-mode-dark h1,
+body.cyberpunk-mode-dark h2,
+body.cyberpunk-mode-dark h3,
+body.cyberpunk-mode-dark h4,
+body.cyberpunk-mode-dark h5,
+body.cyberpunk-mode-dark h6 {
+  position: relative;
+  color: var(--cyber-cyan) !important;
+  font-family: "Courier New", "Courier", monospace !important;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  animation:
+    glitch-skew 1s infinite,
+    glitch-text-shadow 0.5s infinite;
+}
+
+/* Intensified glitch skew animation */
+@keyframes glitch-skew {
+  0% {
+    transform: skewX(0deg);
+  }
+  10% {
+    transform: skewX(2deg);
+  }
+  20% {
+    transform: skewX(-2deg);
+  }
+  30% {
+    transform: skewX(0deg);
+  }
+  40% {
+    transform: skewX(1deg);
+  }
+  50% {
+    transform: skewX(-1deg);
+  }
+  60% {
+    transform: skewX(0deg);
+  }
+  70% {
+    transform: skewX(3deg);
+  }
+  80% {
+    transform: skewX(-3deg);
+  }
+  90% {
+    transform: skewX(0deg);
+  }
+  100% {
+    transform: skewX(0deg);
+  }
+}
+
+/* RGB channel split text-shadow animation */
+@keyframes glitch-text-shadow {
+  0% {
+    text-shadow:
+      0 0 10px rgba(0, 240, 255, 0.8),
+      0 0 20px rgba(0, 240, 255, 0.5);
+  }
+  10% {
+    text-shadow:
+      -3px 0 var(--cyber-magenta),
+      3px 0 var(--cyber-cyan),
+      0 0 10px rgba(0, 240, 255, 0.8);
+  }
+  20% {
+    text-shadow:
+      3px 0 var(--cyber-magenta),
+      -3px 0 var(--cyber-cyan),
+      0 0 10px rgba(0, 240, 255, 0.8);
+  }
+  30% {
+    text-shadow:
+      0 0 10px rgba(0, 240, 255, 0.8),
+      0 0 20px rgba(0, 240, 255, 0.5);
+  }
+  40% {
+    text-shadow:
+      -2px 0 var(--cyber-magenta),
+      2px 0 var(--cyber-cyan),
+      0 0 10px rgba(0, 240, 255, 0.8);
+  }
+  50% {
+    text-shadow:
+      2px 0 var(--cyber-magenta),
+      -2px 0 var(--cyber-cyan),
+      0 0 10px rgba(0, 240, 255, 0.8);
+  }
+  60% {
+    text-shadow:
+      0 0 10px rgba(0, 240, 255, 0.8),
+      0 0 20px rgba(0, 240, 255, 0.5);
+  }
+  70% {
+    text-shadow:
+      -4px 0 var(--cyber-magenta),
+      4px 0 var(--cyber-cyan),
+      0 0 15px rgba(0, 240, 255, 1);
+  }
+  80% {
+    text-shadow:
+      4px 0 var(--cyber-magenta),
+      -4px 0 var(--cyber-cyan),
+      0 0 15px rgba(0, 240, 255, 1);
+  }
+  90% {
+    text-shadow:
+      0 0 10px rgba(0, 240, 255, 0.8),
+      0 0 20px rgba(0, 240, 255, 0.5);
+  }
+  100% {
+    text-shadow:
+      0 0 10px rgba(0, 240, 255, 0.8),
+      0 0 20px rgba(0, 240, 255, 0.5);
+  }
+}
+
+/* ============================================
+   6. SCROLLBAR STYLING
+   ============================================ */
+
+body.cyberpunk-mode-dark ::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+body.cyberpunk-mode-dark ::-webkit-scrollbar-track {
+  background: var(--cyber-dark);
+  border: 1px solid rgba(0, 240, 255, 0.2);
+}
+
+body.cyberpunk-mode-dark ::-webkit-scrollbar-thumb {
+  background: var(--cyber-cyan);
+  border: 2px solid var(--cyber-dark);
+  box-shadow: 0 0 10px rgba(0, 240, 255, 0.8);
+}
+
+body.cyberpunk-mode-dark ::-webkit-scrollbar-thumb:hover {
+  background: var(--cyber-magenta);
+  box-shadow: 0 0 15px rgba(255, 0, 255, 0.9);
+}
+
+/* ============================================
+   7. SELECTION STYLING
+   ============================================ */
+
+body.cyberpunk-mode-dark ::selection {
+  background: var(--cyber-magenta);
+  color: var(--cyber-darker);
+  text-shadow: none;
+}
+
+body.cyberpunk-mode-dark ::-moz-selection {
+  background: var(--cyber-magenta);
+  color: var(--cyber-darker);
+  text-shadow: none;
+}
+
+/* ============================================
+   8. PULSE GLOW EFFECT (for icons and important elements)
+   ============================================ */
+
+@keyframes pulse-glow {
+  0%,
+  100% {
+    opacity: 1;
+    filter: drop-shadow(0 0 5px var(--cyber-cyan));
+  }
+  50% {
+    opacity: 0.8;
+    filter: drop-shadow(0 0 15px var(--cyber-magenta));
+  }
+}
+
+body.cyberpunk-mode-dark .pulse-glow {
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+/* ============================================
+   9. RESPONSIVE ADJUSTMENTS
+   ============================================ */
+
+@media (max-width: 768px) {
+  body.cyberpunk-mode::before {
+    background-size: 30px 30px;
+  }
+
+  body.cyberpunk-mode-dark h1,
+  body.cyberpunk-mode-dark h2,
+  body.cyberpunk-mode-dark h3 {
+    font-size: 1.2rem !important;
+  }
+}
+
+/* ============================================
+   10. CARBON CHARTS STYLING
+   ============================================ */
+
+/* Chart container */
+body.cyberpunk-mode-dark .cds--chart-holder,
+body.cyberpunk-mode-dark .cds--cc--chart-wrapper {
+  background: var(--cyber-dark) !important;
+  border: 1px solid var(--cyber-cyan) !important;
+  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3) !important;
+}
+
+/* SVG elements in charts */
+body.cyberpunk-mode-dark svg {
+  background: transparent !important;
+}
+
+/* Chart lines - make them neon colored instead of white */
+body.cyberpunk-mode-dark .cds--cc--line path,
+body.cyberpunk-mode-dark .cds--cc--area path,
+body.cyberpunk-mode-dark svg path.line,
+body.cyberpunk-mode-dark svg path[class*="line"],
+body.cyberpunk-mode-dark svg .line {
+  stroke: var(--cyber-cyan) !important;
+  stroke-width: 2px !important;
+  fill: none !important;
+  filter: drop-shadow(0 0 3px var(--cyber-cyan)) !important;
+}
+
+/* Multiple line colors for multi-series charts */
+body.cyberpunk-mode-dark svg path.line:nth-child(1),
+body.cyberpunk-mode-dark .cds--cc--line path:nth-of-type(1) {
+  stroke: var(--cyber-cyan) !important;
+  filter: drop-shadow(0 0 3px var(--cyber-cyan)) !important;
+}
+
+body.cyberpunk-mode-dark svg path.line:nth-child(2),
+body.cyberpunk-mode-dark .cds--cc--line path:nth-of-type(2) {
+  stroke: var(--cyber-magenta) !important;
+  filter: drop-shadow(0 0 3px var(--cyber-magenta)) !important;
+}
+
+body.cyberpunk-mode-dark svg path.line:nth-child(3),
+body.cyberpunk-mode-dark .cds--cc--line path:nth-of-type(3) {
+  stroke: var(--cyber-yellow) !important;
+  filter: drop-shadow(0 0 3px var(--cyber-yellow)) !important;
+}
+
+body.cyberpunk-mode-dark svg path.line:nth-child(4),
+body.cyberpunk-mode-dark .cds--cc--line path:nth-of-type(4) {
+  stroke: var(--cyber-green) !important;
+  filter: drop-shadow(0 0 3px var(--cyber-green)) !important;
+}
+
+body.cyberpunk-mode-dark svg path.line:nth-child(5),
+body.cyberpunk-mode-dark .cds--cc--line path:nth-of-type(5) {
+  stroke: var(--cyber-purple) !important;
+  filter: drop-shadow(0 0 3px var(--cyber-purple)) !important;
+}
+
+/* Area charts - fill with semi-transparent neon colors */
+body.cyberpunk-mode-dark .cds--cc--area path.area,
+body.cyberpunk-mode-dark svg path.area,
+body.cyberpunk-mode-dark svg path[class*="area"] {
+  fill: rgba(0, 240, 255, 0.2) !important;
+  stroke: var(--cyber-cyan) !important;
+  stroke-width: 2px !important;
+}
+
+/* Bar charts */
+body.cyberpunk-mode-dark .cds--cc--bar rect,
+body.cyberpunk-mode-dark svg rect.bar,
+body.cyberpunk-mode-dark svg rect[class*="bar"] {
+  fill: var(--cyber-magenta) !important;
+  stroke: var(--cyber-cyan) !important;
+  stroke-width: 1px !important;
+  filter: drop-shadow(0 0 5px rgba(255, 0, 255, 0.5)) !important;
+}
+
+/* Chart data points/circles */
+body.cyberpunk-mode-dark .cds--cc--scatter circle,
+body.cyberpunk-mode-dark svg circle.dot,
+body.cyberpunk-mode-dark svg circle[class*="dot"],
+body.cyberpunk-mode-dark svg circle.point {
+  fill: var(--cyber-cyan) !important;
+  stroke: var(--cyber-magenta) !important;
+  stroke-width: 2px !important;
+  filter: drop-shadow(0 0 5px var(--cyber-cyan)) !important;
+}
+
+/* Chart axes */
+body.cyberpunk-mode-dark .cds--cc--axes line,
+body.cyberpunk-mode-dark svg .axis line,
+body.cyberpunk-mode-dark svg line[class*="axis"],
+body.cyberpunk-mode-dark svg .domain {
+  stroke: var(--cyber-cyan) !important;
+  stroke-width: 1px !important;
+  opacity: 0.5 !important;
+}
+
+/* Grid lines */
+body.cyberpunk-mode-dark .cds--cc--grid line,
+body.cyberpunk-mode-dark svg .grid line,
+body.cyberpunk-mode-dark svg line.gridline,
+body.cyberpunk-mode-dark svg g.grid line {
+  stroke: rgba(0, 240, 255, 0.15) !important;
+  stroke-width: 1px !important;
+  stroke-dasharray: 3, 3 !important;
+}
+
+/* Chart text labels */
+body.cyberpunk-mode-dark .cds--cc--axes text,
+body.cyberpunk-mode-dark svg .axis text,
+body.cyberpunk-mode-dark svg text[class*="axis"],
+body.cyberpunk-mode-dark svg text.label,
+body.cyberpunk-mode-dark svg g.tick text {
+  fill: var(--cyber-cyan) !important;
+  font-family: "Courier New", monospace !important;
+  font-size: 0.8rem !important;
+  text-shadow: 0 0 3px rgba(0, 240, 255, 0.5) !important;
+}
+
+/* Chart title */
+body.cyberpunk-mode-dark .cds--cc--title,
+body.cyberpunk-mode-dark svg text.title,
+body.cyberpunk-mode-dark svg .chart-title {
+  fill: var(--cyber-magenta) !important;
+  font-size: 1.2rem !important;
+  font-weight: bold !important;
+  text-shadow: 0 0 5px rgba(255, 0, 255, 0.7) !important;
+}
+
+/* Chart legend */
+body.cyberpunk-mode-dark .cds--cc--legend,
+body.cyberpunk-mode-dark .legend {
+  background: rgba(10, 14, 39, 0.8) !important;
+  border: 1px solid var(--cyber-cyan) !important;
+  padding: 8px !important;
+}
+
+body.cyberpunk-mode-dark .cds--cc--legend-item text,
+body.cyberpunk-mode-dark .legend text,
+body.cyberpunk-mode-dark .legend-item text {
+  fill: var(--cyber-cyan) !important;
+  font-family: "Courier New", monospace !important;
+}
+
+body.cyberpunk-mode-dark .cds--cc--legend-item rect,
+body.cyberpunk-mode-dark .legend rect,
+body.cyberpunk-mode-dark .legend-item rect {
+  stroke: var(--cyber-cyan) !important;
+  stroke-width: 1px !important;
+}
+
+/* Tooltip */
+body.cyberpunk-mode-dark .cds--cc--tooltip,
+body.cyberpunk-mode-dark .chart-tooltip,
+body.cyberpunk-mode-dark div[class*="tooltip"] {
+  background: var(--cyber-dark) !important;
+  border: 2px solid var(--cyber-magenta) !important;
+  color: var(--cyber-cyan) !important;
+  box-shadow: 0 0 15px rgba(255, 0, 255, 0.5) !important;
+  font-family: "Courier New", monospace !important;
+}
+
+body.cyberpunk-mode-dark .cds--cc--tooltip::before,
+body.cyberpunk-mode-dark .chart-tooltip::before {
+  border-color: var(--cyber-magenta) transparent transparent transparent !important;
+}
+
+/* Donut/Pie charts */
+body.cyberpunk-mode-dark .cds--cc--donut path,
+body.cyberpunk-mode-dark .cds--cc--pie path,
+body.cyberpunk-mode-dark svg path.slice,
+body.cyberpunk-mode-dark svg path[class*="slice"] {
+  stroke: var(--cyber-darker) !important;
+  stroke-width: 2px !important;
+}
+
+body.cyberpunk-mode-dark .cds--cc--donut path:nth-child(1),
+body.cyberpunk-mode-dark .cds--cc--pie path:nth-child(1) {
+  fill: var(--cyber-cyan) !important;
+  filter: drop-shadow(0 0 5px var(--cyber-cyan)) !important;
+}
+
+body.cyberpunk-mode-dark .cds--cc--donut path:nth-child(2),
+body.cyberpunk-mode-dark .cds--cc--pie path:nth-child(2) {
+  fill: var(--cyber-magenta) !important;
+  filter: drop-shadow(0 0 5px var(--cyber-magenta)) !important;
+}
+
+body.cyberpunk-mode-dark .cds--cc--donut path:nth-child(3),
+body.cyberpunk-mode-dark .cds--cc--pie path:nth-child(3) {
+  fill: var(--cyber-yellow) !important;
+  filter: drop-shadow(0 0 5px var(--cyber-yellow)) !important;
+}
+
+body.cyberpunk-mode-dark .cds--cc--donut path:nth-child(4),
+body.cyberpunk-mode-dark .cds--cc--pie path:nth-child(4) {
+  fill: var(--cyber-green) !important;
+  filter: drop-shadow(0 0 5px var(--cyber-green)) !important;
+}
+
+body.cyberpunk-mode-dark .cds--cc--donut path:nth-child(5),
+body.cyberpunk-mode-dark .cds--cc--pie path:nth-child(5) {
+  fill: var(--cyber-purple) !important;
+  filter: drop-shadow(0 0 5px var(--cyber-purple)) !important;
+}
+
+/* Heatmap */
+body.cyberpunk-mode-dark .cds--cc--heatmap rect {
+  stroke: var(--cyber-darker) !important;
+  stroke-width: 1px !important;
+}
+
+/* Gauge/Meter charts */
+body.cyberpunk-mode-dark .cds--cc--gauge path,
+body.cyberpunk-mode-dark .cds--cc--meter path {
+  stroke: var(--cyber-cyan) !important;
+  fill: none !important;
+}
+
+body.cyberpunk-mode-dark .cds--cc--gauge .arc-background,
+body.cyberpunk-mode-dark .cds--cc--meter .arc-background {
+  stroke: rgba(0, 240, 255, 0.2) !important;
+}
+
+body.cyberpunk-mode-dark .cds--cc--gauge .arc-foreground,
+body.cyberpunk-mode-dark .cds--cc--meter .arc-foreground {
+  stroke: var(--cyber-magenta) !important;
+  filter: drop-shadow(0 0 5px var(--cyber-magenta)) !important;
+}
+
+/* Radar/Spider charts */
+body.cyberpunk-mode-dark .cds--cc--radar path,
+body.cyberpunk-mode-dark svg path.radar-area {
+  fill: rgba(0, 240, 255, 0.2) !important;
+  stroke: var(--cyber-cyan) !important;
+  stroke-width: 2px !important;
+}
+
+body.cyberpunk-mode-dark .cds--cc--radar line,
+body.cyberpunk-mode-dark svg .radar-grid line {
+  stroke: rgba(0, 240, 255, 0.3) !important;
+}
+
+/* Treemap */
+body.cyberpunk-mode-dark .cds--cc--treemap rect {
+  stroke: var(--cyber-darker) !important;
+  stroke-width: 2px !important;
+}
+
+/* Combo charts */
+body.cyberpunk-mode-dark .cds--cc--combo .line {
+  stroke: var(--cyber-cyan) !important;
+  stroke-width: 2px !important;
+}
+
+body.cyberpunk-mode-dark .cds--cc--combo .bar {
+  fill: var(--cyber-magenta) !important;
+}
+
+/* Chart hover effects */
+body.cyberpunk-mode-dark svg path:hover,
+body.cyberpunk-mode-dark svg rect:hover,
+body.cyberpunk-mode-dark svg circle:hover {
+  opacity: 0.8 !important;
+  filter: brightness(1.3) !important;
+}
+
+/* Chart loading state */
+body.cyberpunk-mode-dark .cds--cc--loading {
+  background: var(--cyber-dark) !important;
+  color: var(--cyber-cyan) !important;
+}
+
+body.cyberpunk-mode-dark .cds--loading__stroke {
+  stroke: var(--cyber-cyan) !important;
+}
+
+/* ============================================
+   11. PRINT STYLES (disable for printing)
+   ============================================ */
+
+@media print {
+  body.cyberpunk-mode::before,
+  body.cyberpunk-mode::after {
+    display: none !important;
+  }
+
+  body.cyberpunk-mode-dark * {
+    background: white !important;
+    color: black !important;
+    border-color: black !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+}