static/shared/css/system-monitor.css

/**
 * System Monitor Component Styles
 * Matches Ocean Teal Theme from design-system.css
 * Professional, minimal, no gaming effects
 */

.system-monitor {
  background: var(--bg-card, rgba(255, 255, 255, 0.9));
  border: 1px solid var(--border-light, rgba(20, 184, 166, 0.15));
  border-radius: var(--radius-lg, 14px);
  padding: var(--space-5, 1.25rem);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(13, 115, 119, 0.1));
  backdrop-filter: blur(10px);
}

/* Header */
.system-monitor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-5, 1.25rem);
  padding-bottom: var(--space-3, 0.75rem);
  border-bottom: 1px solid var(--border-light, rgba(20, 184, 166, 0.15));
}

.system-monitor-title {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  font-size: var(--text-base, 0.875rem);
  font-weight: 600;
  color: var(--text-primary, #0f2926);
}

.system-monitor-title svg {
  color: var(--teal, #14b8a6);
}

.system-monitor-status {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  font-size: var(--text-sm, 0.8rem);
  color: var(--text-muted, #4a9b91);
}

/* Status Dot */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray-300, #a8d5cf);
}

.status-dot-loading {
  background: var(--warning, #f59e0b);
  animation: pulse-dot 1.5s ease-in-out infinite;
}

.status-dot-active {
  background: var(--success, #10b981);
}

.status-dot-error {
  background: var(--danger, #ef4444);
}

.status-dot-inactive {
  background: var(--gray-400, #6bb8ae);
}

@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Metrics Grid */
.system-monitor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4, 1rem);
}

/* Metric Card */
.metric-card {
  background: var(--bg-secondary, #f8fdfc);
  border: 1px solid var(--border-light, rgba(20, 184, 166, 0.15));
  border-radius: var(--radius-md, 10px);
  padding: var(--space-4, 1rem);
  transition: all 0.2s ease;
}

.metric-card:hover {
  border-color: var(--border-medium, rgba(20, 184, 166, 0.25));
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(13, 115, 119, 0.08));
}

/* Metric Header */
.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-3, 0.75rem);
}

.metric-label {
  font-size: var(--text-sm, 0.8rem);
  color: var(--text-muted, #4a9b91);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.metric-value {
  font-size: var(--text-lg, 1rem);
  font-weight: 600;
  color: var(--text-primary, #0f2926);
  font-family: var(--font-mono, 'SF Mono', Consolas, monospace);
  transition: color 0.3s ease;
}

/* Data-driven animations - ONLY animate when values actually change */
.metric-value.metric-changed {
  animation: value-flash 0.3s ease;
}

.metric-value.metric-increased {
  color: var(--success, #10b981);
}

.metric-value.metric-decreased {
  color: var(--info, #22d3ee);
}

@keyframes value-flash {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Metric Bar (for CPU and Memory) */
.metric-bar {
  height: 6px;
  background: var(--gray-100, #e6f7f5);
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
  position: relative;
}

.metric-bar-fill {
  height: 100%;
  border-radius: var(--radius-full, 9999px);
  transition: width 0.5s ease, background-color 0.3s ease;
  background: var(--gradient-primary, linear-gradient(135deg, #2dd4bf, #22d3ee));
}

/* Bar color based on value */
.metric-bar-fill.bar-low {
  background: var(--success, #10b981);
}

.metric-bar-fill.bar-medium {
  background: var(--gradient-primary, linear-gradient(135deg, #2dd4bf, #22d3ee));
}

.metric-bar-fill.bar-high {
  background: var(--warning, #f59e0b);
}

.metric-bar-fill.bar-critical {
  background: var(--danger, #ef4444);
}

/* Metric Icon (for metrics without bars) */
.metric-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-2, 0.5rem);
}

.metric-icon svg {
  color: var(--teal-light, #2dd4bf);
  opacity: 0.6;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .system-monitor-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

@media (max-width: 768px) {
  .system-monitor-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .metric-card {
    padding: var(--space-3, 0.75rem);
  }
  
  .metric-label {
    font-size: var(--text-xs, 0.7rem);
  }
  
  .metric-value {
    font-size: var(--text-base, 0.875rem);
  }
}

@media (max-width: 480px) {
  .system-monitor-grid {
    grid-template-columns: 1fr;
  }
  
  .system-monitor-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2, 0.5rem);
  }
}

/* Dark Theme Support (if implemented in the future) */
[data-theme="dark"] .system-monitor {
  background: rgba(15, 41, 38, 0.9);
  border-color: rgba(45, 212, 191, 0.2);
}

[data-theme="dark"] .metric-card {
  background: rgba(30, 71, 68, 0.5);
  border-color: rgba(45, 212, 191, 0.15);
}

[data-theme="dark"] .metric-label {
  color: rgba(152, 246, 228, 0.7);
}

[data-theme="dark"] .metric-value {
  color: rgba(248, 253, 252, 0.95);
}

[data-theme="dark"] .metric-bar {
  background: rgba(52, 211, 153, 0.1);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .metric-value.metric-changed,
  .metric-bar-fill,
  .status-dot-loading {
    animation: none;
    transition: none;
  }
}

/* Print Styles */
@media print {
  .system-monitor {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }
  
  .metric-card {
    break-inside: avoid;
  }
}