/* CSS Custom Properties */
:root {
  /* Colors */
  --primary: #007bff;
  --primary-dark: #0056b3;
  --secondary: #6c757d;
  --success: #28a745;
  --success-dark: #218838;
  --danger: #dc3545;
  --danger-dark: #c82333;
  --info: #17a2b8;
  --info-dark: #138496;
  --warning: #ffc107;
  --warning-dark: #e0a800;
  --light: #f8f9fa;
  --dark: #343a40;
  --white: #fff;

  /* Spacing */
  --space-xs: 5px;
  --space-sm: 10px;
  --space-md: 20px;
  --space-lg: 40px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Box Shadow */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Reset & Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body, html {
  height: 100%;
  font-family: Arial, sans-serif;
  background-color: white;
  line-height: 1.5;
}

/* Main content fix */
body {
  background: white;
}

/* Typography */
h1, h2, h3 {
  text-align: center;
  color: var(--dark);
  margin-bottom: var(--space-md);
}

.header h1 {
  color: #333;
  font-size: 2.5em;
  margin-bottom: 80px;
  padding: 20px;
  display: inline-block;
}

.header h1 a {
  color: #4A148C;
  text-decoration: none;
}

.header h1 a:hover {
  color: #4A148C;
}

/* Layout Components */
.container {
  padding: var(--space-lg);
  width: 95%;
  margin: 0 auto;
  background-color: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.content-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  background: white;
}

.content-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  background: white;
}

/* Navigation Bar */
.nav-bar {
  background-color: #4a148c;
  padding: 10px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.nav-container {
  display: flex;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.nav-button {
  color: white;
  text-decoration: none;
  padding: 10px 20px;
  margin: 0 10px;
  border-radius: 4px;
  transition: background-color 0.3s;
  font-weight: 500;
}

.nav-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-button.active {
  background-color: rgba(255, 255, 255, 0.2);
  font-weight: 700;
}

@media screen and (max-width: 768px) {
  .nav-container {
    flex-wrap: wrap;
    justify-content: center;
  }

  .nav-button {
    margin: 5px;
    font-size: 14px;
    padding: 8px 15px;
  }
}


/* Header styling */
.header {
  position: relative;
  width: 100%;
  height: 400px;
  margin-bottom: 30px;
  overflow: hidden; /* Ensures no extra image content spills out */
  background-color: #000; /* Optional: fallback background colour */
}

.header img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image covers the container */
  object-position: center 100%; /* Focus on the vertical centre (adjust as needed) */
}

.header-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  color: #fff; /* Optional: ensure text contrasts well */
}

/* Footer styling */
.footer {
  position: relative;
  width: 100%;
  height: 400px;
  margin-top: 30px;
  overflow: hidden;
  background-color: #000;
}

.footer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 100%;
}

.footer-text {
  text-align: center;
  padding: 20px;
  background-color: #fff;
  margin-top: 30px;
}

/* Button Base Styles */
.button {
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-sm);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 16px;
  color: var(--white);
  transition: all 0.3s ease;
  will-change: transform;
}

.button:hover {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0);
}

.button:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* Button Variants */
.button--primary {
  background-color: var(--primary);
}

.button--primary:hover {
  background-color: var(--primary-dark);
}

.button--success {
  background-color: var(--success);
}

.button--success:hover {
  background-color: var(--success-dark);
}

.button--danger {
  background-color: var(--danger);
}

.button--danger:hover {
  background-color: var(--danger-dark);
}

.button--info {
  background-color: var(--info);
}

.button--info:hover {
  background-color: var(--info-dark);
}

.button--success {
  margin-top: var(--space-sm);
}

/* Button Container */
.button-container {
  margin-bottom: var(--space-md);
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
}

.button-container {
  text-align: center;
  padding: 15px 0;
  background: transparent;
  margin: 0;
}

.button-container button {
  color: white;
  border: none;
  padding: 10px 20px;
  margin: 0 10px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

/* Add to styles.css */
.hidden {
    display: none !important;
}


/* Specific Buttons */
#runSimulationButton {
  background-color: #4CAF50;
}

#toggleParameterEditorButton {
  background-color: #2196F3;
}

#resetSimulationButton {
  background-color: #f44336;
}

#runSimulationButton:hover {
  background-color: #45a049;
}

#toggleParameterEditorButton:hover {
  background-color: #1976D2;
}

#resetSimulationButton:hover {
  background-color: #da190b;
}


#createScenarioButton {
  background-color: #9C27B0; /* Purple color to distinguish it from other buttons */
}

#createScenarioButton:hover {
  background-color: #7B1FA2; /* Darker purple for hover state */
}


/* Parameter Editor Page Specific Overrides */
#parameterEditorContainer {
  padding: var(--space-md);
}

/* Parameter Editor View container */
#parameterEditorView {
  padding: var(--space-md);
  margin: var(--space-md) auto; /* Center the editor view */
}

.editor-buttons {
  margin-bottom: var(--space-md);
}

#jsonEditor {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

/* Header styling for dataset selector */
.dataset-selector {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-md) 0;
}

/* Style for select element */
#datasetSelector {
  margin-top: var(--space-md); /* Increase spacing above for more breathing room */
  margin-bottom: var(--space-md); /* Increase spacing below to keep it consistent */
  border: 2px solid var(--primary);
  border-radius: var(--radius-md);
  font-size: 16px;
  background-color: var(--white);
  min-width: 250px; /* Increased min-width for more consistent size */
  display: block;
}

/* Dropdown hover state */
#datasetSelector:hover {
  border-color: var(--primary);
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.2); /* Light shadow for visual feedback */
}

/* Dropdown focus state */
#datasetSelector:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* Enhanced focus indicator */
}

/* Updated Dropdown selector styling */
#datasetSelector {
  margin-top: var(--space-md); /* Add spacing above */
  margin-bottom: var(--space-md); /* Add spacing below */
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--secondary);
  border-radius: var(--radius-md);
  font-size: 16px;
  background-color: var(--white);
  min-width: 220px;
  display: block;
}

/* Table Styles */
.table-container {
  width: 100%;
  overflow-x: auto;
  margin-bottom: var(--space-lg);
}

table {
  width: 80%;
  margin: 0 auto var(--space-md);
  border-collapse: collapse;
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-md);
  overflow: hidden;
}

th,
td {
  padding: var(--space-sm);
  text-align: left;
  border: 1px solid #ddd;
}

th {
  background-color: #6a0dad; /* Deep purple shade */
  color: white;
  font-weight: bold;
}

td {
  background-color: var(--light);
}

tr:nth-child(even) td {
  background-color: #e9ecef;
}

tr:hover td {
  background-color: #e6ccf2; /* Light purple */
}

/* Graph Containers */
.graphs-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  margin: var(--space-lg) 0;
}

.graph-container {
  width: 80%;
  max-width: 1200px;
  height: 600px;
  margin: var(--space-md) auto;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
  position: relative;
}

.graph-title {
  text-align: center;
  margin-bottom: var(--space-sm);
  font-size: 16px;
  font-weight: 600;
  color: var(--dark);
}

/* Dependency Graph */
#dependencyGraphContainer {
  width: 1200px;
  height: 800px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Relationship Analysis */
.relationship-container {
  width: 80%;
  margin: 0 auto;
  padding: var(--space-md);
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.matrix-container {
  width: 100%;
  height: 600px;
  position: relative;
  margin: var(--space-md) 0;
}

/* SVG and Axis Styling */
.graph-container svg,
#dependencyGraphContainer svg,
.matrix-container svg {
  width: 100%;
  height: 100%;
}

.x-axis text,
.y-axis text {
  font-size: 12px;
  font-family: Arial, sans-serif;
}

/* Tooltip */
.correlation-tooltip {
  position: absolute;
  padding: var(--space-sm);
  background: var(--white);
  border: 1px solid #ddd;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  z-index: 100;
  font-size: 12px;
}

/* Utility Classes */
.hidden {
  display: none;
}

.error-message {
  color: var(--danger);
  text-align: center;
  padding: var(--space-md);
  font-weight: bold;
}

/* Media Queries */
@media screen and (max-width: 1200px) {
  .container {
    width: 98%;
    padding: var(--space-md);
  }

  #dependencyGraphContainer {
    width: 95%;
  }

  .graph-container {
    width: 95%;
  }
}

@media screen and (max-width: 768px) {
  .container {
    width: 100%;
    padding: var(--space-sm);
  }

  table {
    width: 95%;
  }

  .button-container {
    flex-direction: column;
    align-items: center;
  }

  .button {
    width: 100%;
    max-width: 300px;
  }

  .relationship-container {
    width: 95%;
  }
}

@media screen and (max-width: 480px) {
  :root {
    --space-lg: 20px;
    --space-md: 15px;
    --space-sm: 8px;
  }

  h1 {
    font-size: 24px;
  }
  h2 {
    font-size: 20px;
  }
  h3 {
    font-size: 18px;
  }
}


/* Add these styles to your existing styles.css file */

/* Editable cell styling */
.editable-cell {
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s ease;
}

.editable-cell:hover {
  background-color: #f0f8ff !important;
}

.editable-cell:hover::after {
  content: "Click to edit";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0.8;
  pointer-events: none;
}

/* Highlight effect for updated cells */
.cell-updated {
  animation: highlight-pulse 1.5s ease;
}

@keyframes highlight-pulse {
  0% { background-color: #fff; }
  30% { background-color: #bbf7d0; }
  100% { background-color: #fff; }
}

/* Inline edit input styling */
.inline-edit-input {
  width: 100%;
  padding: 4px;
  box-sizing: border-box;
  border: 1px solid #007bff;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  text-align: left;
}

.inline-edit-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Loading indicator during simulation update */
.editing-loading-indicator {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 10px 15px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 4px;
  font-size: 14px;
  z-index: 1000;
  animation: fade-in 0.3s ease;
}

.editing-loading-indicator.error {
  background-color: rgba(220, 53, 69, 0.9);
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Ensure editable tables have appropriate styling */
.editable-table td:nth-child(3) {
  background-color: rgba(240, 248, 255, 0.2);
}