/* Custom CSS for ICS Security Simulation */

/* Purdue Model Level Colors */
:root {
  --level0-color: #007bff;  /* Blue - Process */
  --level1-color: #28a745;  /* Green - Basic Control */
  --level2-color: #ffc107;  /* Yellow - Area Supervision */
  --level3-color: #fd7e14;  /* Orange - Site Operations */
  --level4-color: #dc3545;  /* Red - Business Planning */
  --level5-color: #6f42c1;  /* Purple - Enterprise Network */
}

/* Dashboard sections */
.dashboard-card {
  transition: transform 0.3s ease;
  height: 100%;
}

.dashboard-card:hover {
  transform: translateY(-5px);
}

/* Purdue Model visualization */
.purdue-model-level {
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 15px;
  color: white;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
  font-weight: 500;
}

.purdue-level-0 {
  background-color: var(--level0-color);
}

.purdue-level-1 {
  background-color: var(--level1-color);
}

.purdue-level-2 {
  background-color: var(--level2-color);
  color: #000000; /* black text for better contrast on yellow */
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
}

.purdue-level-3 {
  background-color: var(--level3-color);
}

.purdue-level-4 {
  background-color: var(--level4-color);
}

.purdue-level-5 {
  background-color: var(--level5-color);
}

/* Device status indicators */
.status-active {
  color: var(--bs-success);
}

.status-inactive {
  color: var(--bs-secondary);
}

.status-compromised {
  color: var(--bs-danger);
}

/* Network diagram */
.network-diagram {
  width: 100%;
  height: 500px;
  border: 1px solid #555;
  border-radius: 8px;
}

/* Enhance text visibility in diagrams and charts */
text, .diagram-label, .chart-label {
  fill: #ffffff !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  text-shadow: 0 0 3px #000000 !important;
  stroke: none !important;
}

.diagram-node text {
  font-size: 12px !important;
  dominant-baseline: middle !important;
  text-anchor: middle !important;
}

svg text {
  font-size: 12px !important;
  fill: #ffffff !important;
  stroke: none !important;
}

.light-text {
  fill: #ffffff !important;
  color: #ffffff !important;
  text-shadow: 0 0 3px #000000 !important;
}

.dark-text {
  fill: #212529 !important;
  color: #212529 !important;
  text-shadow: 0 0 3px #ffffff !important;
}

/* Log entries */
.log-entry {
  padding: 8px;
  margin-bottom: 5px;
  border-radius: 4px;
}

.log-INFO {
  border-left: 5px solid var(--bs-info);
}

.log-WARNING {
  border-left: 5px solid var(--bs-warning);
}

.log-ERROR {
  border-left: 5px solid var(--bs-danger);
}

.log-CRITICAL {
  border-left: 5px solid var(--bs-danger);
  background-color: rgba(220, 53, 69, 0.1);
}

/* Attack/Defense cards */
.attack-card, .defense-card {
  transition: all 0.3s ease;
}

.attack-card:hover {
  border-color: var(--bs-danger);
  box-shadow: 0 0 10px rgba(220, 53, 69, 0.3);
}

.defense-card:hover {
  border-color: var(--bs-success);
  box-shadow: 0 0 10px rgba(40, 167, 69, 0.3);
}

.difficulty-easy {
  color: var(--bs-success);
}

.difficulty-medium {
  color: var(--bs-warning);
}

.difficulty-hard {
  color: var(--bs-danger);
}

.effectiveness-low {
  color: var(--bs-danger);
}

.effectiveness-medium {
  color: var(--bs-warning);
}

.effectiveness-high {
  color: var(--bs-success);
}

/* Simulation controls */
.simulation-controls {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 15px;
}

/* Animations */
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

.status-compromised {
  animation: blink 2s infinite;
}

/* Error pages */
.error-container {
  padding: 40px 0;
}

/* Loading indicator */
.loading-spinner {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: 0.25rem solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: var(--bs-primary);
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}