/* --- 1. DEFINE DEFAULT VARIABLES --- */
:root {
  --color-primary: rgb(19, 2, 59); /* Blue (Upload/Go) */
  --color-secondary: hsl(210, 60%, 49%); /* Blue (Instance/Sample) */
  --color-third: rgb(66, 143, 145);
  --color-tertiary: #ffd700; /* Yellow (Save Viz) */
  --color-background-dark: #222;
  --color-background-medium: #333;
  --color-text-header: white;
  --color-text-input: white;
  --color-text-button: white; /* Consistent button text color */
  --color-button-disabled: #555;
  --font-main: sans-serif;
}

#diamondShape {
  stroke: #555;
}

svg text {
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
}

/* --- 2. 90s THEME VARIABLES (Override) --- */
.k00l90z-mode {
  /* 90s K00L Font: Monospace/Pixelated look */
  --font-main: "VT323", monospace;

  /* High-Contrast, Neon/Vaporwave Colors */
  --color-primary: #00ffff; /* Aqua/Cyan */
  --color-secondary: #ff00ff; /* Magenta/Fuchsia */
  --color-tertiary: #ff00ff;
  --color-background-dark: #111133; /* Dark Blue/Purple */
  --color-background-medium: #222255;
  --color-text-header: #ffd700; /* Gold/Bright Yellow */
  --color-text-input: #00ffff;
  --color-text-button: #111133; /* Dark text on neon buttons */
  --color-button-disabled: #00ffff;
}

/* Apply 90s Font to body */
.k00l90z-mode,
.k00l90z-mode body {
  font-family: var(--font-main) !important;
  background-color: var(--color-background-dark);
  color: var(--color-text-header);
}

/* --- 3. APPLY VARIABLES TO ELEMENTS --- */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-background-dark);
  color: var(--color-text-header);
  padding: 10px 20px;
  font-family: var(--font-main);
}
h1 {
  margin: 0;
  font-size: 1.2rem;
}

/* Stats Button Styling */
#stats-toggle-button {
  background: var(--color-secondary);
  border: none;
  color: var(--color-text-button);
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  font-family: var(--font-main);
  font-size: 0.9rem;
}

#stats-toggle-button:hover {
  /* Keep a slight darker shade for hover in default mode */
  background: var(--color-secondary);
  filter: brightness(80%);
}

/* Stats Panel Styling */
#stats-panel {
  position: absolute;
  top: initial;
  backdrop-filter: blur(10px);
  background-color: var(--color-background-medium);
  color: var(--color-text-header);
  font-family: var(--font-main);
}

#stats-content strong {
  color: var(--color-primary);
}

#close-stats {
  color: var(--color-text-header);
}

#close-stats:hover {
  color: var(--color-primary);
}

/* Cluster Stats Popup Styling */
#cluster-stats-popup {
  max-width: 250px;
  backdrop-filter: blur(10px);
}

.k00l90z-mode #cluster-stats-popup {
  border: 2px solid var(--color-secondary) !important;
  box-shadow: 0 0 8px var(--color-secondary), 0 0 15px var(--color-secondary),
    0 0 25px #ff00ff !important;
}

/* Cluster hit area styling */
.cluster-hit-area:hover {
  stroke: var(--cell-boundary-color);
  stroke-width: 2px;
  stroke-opacity: 0.7;
}

.leaf-label {
  fill: var(--node-color);
  font-family: var(--font-main);
  text-anchor: end;
  dominant-baseline: hanging;
  opacity: 0.9;
  pointer-events: none;
}

/* Zoom Buttons */
#zoom-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}
.zoom-button {
  background: var(--color-button-disabled);
  border: 1px solid var(--color-secondary);
  color: var(--color-text-header);
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 0.9rem;
  min-width: 40px;
}
.zoom-button:hover {
  background: var(--color-secondary);
  color: var(--color-text-button);
}

#uploadButton {
  background: var(--color-secondary);
  border: none;
  color: var(--color-text-button);
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  font-family: var(--font-main);
  font-size: 0.9rem;
}
#uploadButton:hover,
#downloadButton:hover {
  /* Keep a slight darker shade for hover in default mode */
  background: var(--color-secondary);
  filter: brightness(80%);
}

/* Instance Input Styling */
#instance-id-input-header {
  padding: 6px;
  border: 1px solid var(--color-secondary);
  background: var(--color-background-medium);
  color: var(--color-text-input);
  border-radius: 4px;
  width: 120px;
  font-size: 0.9rem;
  font-family: var(--font-main);
}

/* Instance Buttons (Go & Sample & Solver) */
#sample-button,
#go-to-instance-button,
#solver-button {
  background: var(--color-secondary);
  border: none;
  color: var(--color-text-button);
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  font-size: 0.9rem;
  font-family: var(--font-main);
}
#sample-button:hover,
#go-to-instance-button:hover,
#solver-button:hover {
  /* Apply a slight darkening effect on hover */
  background: var(--color-secondary);
  filter: brightness(80%);
}

/* Dropdown Styles */
#sample-dropdown {
  width: 120px;
  background-color: var(--color-background-medium);
  border: 1px solid var(--color-secondary);
}

#solver-dropdown {
  width: 130px;
  background-color: var(--color-background-medium);
  border: 1px solid var(--color-secondary);
}
#sample-dropdown a,
#solver-dropdown a {
  color: var(--color-text-header);
  font-family: var(--font-main);
}

/* Save Viz Button */
#saveVizButton {
  background: var(--color-secondary);
  border: none;
  color: var(--color-text-button);
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  font-family: var(--font-main);
  font-size: 0.9rem;
}
#saveVizButton:hover {
  /* Keep a slight darker shade for hover in default mode */
  background: var(--color-secondary);
  filter: brightness(80%);
}
#save-viz-dropdown {
  background-color: var(--color-background-medium);
  border: 1px solid var(--color-secondary);
}
#save-viz-dropdown a {
  color: var(--color-text-header);
  font-family: var(--font-main);
}

/* Download Button */
#downloadButton {
  border: none;
  background-color: var(--color-secondary);
  color: var(--color-text-header);
  padding: 8px 14px;
  border-radius: 6px;
  cursor: not-allowed;
  font-weight: bold;
  font-family: var(--font-main);
  font-size: 0.9rem;
  opacity: 0.5; /* Always start disabled visually */
}

/* Cluster Label Styling */
.cluster-label {
  paint-order: stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.k00l90z-mode .cluster-label {
  text-shadow: 0 0 5px var(--color-node);
}

.k00l90z-mode .modal-content-container {
  /* Use sharp corners for the 90s look */
  border-radius: 0 !important;
  /* Create a neon glow effect using multiple shadows */
  box-shadow: 0 0 8px var(--color-secondary), 0 0 15px var(--color-secondary),
    0 0 25px #ff00ff !important;
  /* Thicker border using the secondary neon color */
  border: 2px solid var(--color-secondary) !important;
}

.k00l90z-mode #instance-id-input {
  /* Sharp corners for the ID input field */
  border-radius: 0 !important;
  /* Optional: Add a subtle inner shadow for a screen look */
  box-shadow: inset 0 0 5px rgba(0, 255, 255, 0.5);
}

.k00l90z-mode #custom-modal h2 {
  /* Ensure the checkmark and text are bright neon */
  color: var(--color-primary);
  text-shadow: 0 0 5px var(--color-primary);
}

/* K00L90Z Theme Stats Overrides */
.k00l90z-mode #stats-toggle-button {
  background: var(--color-secondary);
  color: var(--color-text-button);
}

.k00l90z-mode #stats-panel {
  border: 1px solid var(--color-secondary);
  box-shadow: 0 0 8px var(--color-secondary), 0 0 15px var(--color-secondary),
    0 0 25px #ff00ff;
}

.k00l90z-mode #stats-content strong {
  color: var(--color-primary);
  text-shadow: 0 0 5px var(--color-primary);
}

/* Modal Styles */
#custom-modal .modal-content-container {
  background-color: var(--color-background-medium);
  color: var(--color-text-header);
  border: 1px solid var(--color-secondary);
  font-family: var(--font-main);
}
#custom-modal h2 {
  color: var(--color-secondary);
}
#error-modal {
  background-color: var(--color-background-medium);
  color: var(--color-text-header);
  border: 1px solid var(--color-secondary);
  font-family: var(--font-main);
}

#instance-id-input {
  border: 1px solid var(--color-secondary);
  background-color: var(--color-background-dark);
  color: var(--color-text-input);
  font-family: var(--font-main);
}
#stay-button {
  background-color: var(--color-button-disabled);
  color: var(--color-text-button);
  font-family: var(--font-main);
}
#go-button {
  background-color: var(--color-secondary);
  color: var(--color-text-button);
  font-family: var(--font-main);
}
body {
  /* Default Theme Colors */
  --node-color: hsl(210, 60%, 30%);
  --cell-boundary-color: hsl(0, 0%, 40%);
  --tree-color: #dadbdd;
  --edge-color: hsl(210, 60%, 49%);
  /* --adj-color-low: hsl(210, 60%, 90%);
  --adj-color-high: hsl(210, 60%, 49%); */
  --adj-color-low: hsl(20, 90%, 90%);
  --adj-color-high: hsl(20, 90%, 40%);
  --cluster-node-color-low: hsl(0, 0%, 90%);
  --cluster-node-color-high: hsl(0, 0%, 40%);
}

.edge-label {
  font-family: var(--font-main);
  font-weight: bold;
  /*fill: var(--edge-color);*/
  pointer-events: none;
  user-select: none;
}

/* Ensure proper z-index layering in SVG */
.edge-labels {
  pointer-events: none;
}

.linear-edges {
  pointer-events: stroke; /* Only the stroke is interactive */
}

/* K00L90Z Theme Overrides */
body.k00l90z-mode {
  --node-color: #ff00ff; /* Magenta nodes */
  --cell-boundary-color: #00ffff; /* Cyan boundaries */
  --tree-color: yellow; /* Magenta cluster bands */
  --edge-color: #00ffff; /* Cyan edges */
  --adj-color-low: hsl(300, 80%, 95%); /* Light 90s purple */
  --adj-color-high: hsl(300, 80%, 55%); /* Dark 90s purple */
}

/* Optional: Darken text in k00l90z mode for better contrast against bright nodes */
body.k00l90z-mode text {
  fill: #000 !important;
}

fieldset {
  display: block;
  padding: 0.2em;
  border-color: var(--color-background-medium);
  border-radius: 6px;
  font-weight: bold;
}

legend {
  font-family: var(--font-main);
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--color-background-medium);
}

#edge-display-toggle {
  background: var(--color-secondary);
  border: none;
  color: var(--color-text-button);
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  font-family: var(--font-main);
  font-size: 0.9rem;
}

#edge-display-toggle:hover {
  filter: brightness(80%);
}

#control-panel-container {
  position: absolute;
  width: 270px;
  right: 20px;
  margin-top: 10px;
  top: initial;
  text-align: right;
}

/* --- Control Panel Toggle Button --- */
#control-panel-toggle-button {
  position: static;
  top: initial;
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  background-color: var(--color-secondary);
  color: var(--color-text-button);
  font-family: var(--font-main);
  font-size: 0.9rem;
  cursor: pointer;
  font-weight: bold;
}

/* Add a subtle hover effect like the other header buttons */
#control-panel-toggle-button:hover {
  /* Keep a slight darker shade for hover in default mode */
  background: var(--color-secondary);
  filter: brightness(80%);
}

/* --- CONTROL PANEL STYLING (Right of screen, on top of SVG) --- */
#control-panel {
  position: static;
  top: initial;
  right: initial;
  margin-top: 10px;
  /* White background with 80% opacity */
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* Use theme fonts/colors for consistency */
  font-family: var(--font-main);
  display: none;
  text-align: left;
}

/* Style the button inside the control panel to maintain theme consistency */
#control-panel #edge-display-toggle {
  background: var(--color-secondary);
  border: none;
  color: var(--color-text-button);
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  font-family: var(--font-main);
  font-size: 0.9rem;
  display: block;
}

#control-panel #edge-display-toggle:hover {
  /* Keep a slight darker shade for hover in default mode */
  background: var(--color-secondary);
  filter: brightness(80%);
}

/* --- Rounded Toggle Switch: Ratio left, Absolute right --- */
.toggle-container {
  margin-top: 6px;
}

.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 0.9rem;
  color: var(--color-background-medium);
  user-select: none;
  margin-top: 5px;
  margin-bottom: 5px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

/* --- Vibrant slider --- */
.toggle-switch .slider {
  position: relative;
  width: 36px;
  height: 18px;
  background-color: var(--color-background-medium);
  border-radius: 18px;
  transition: background-color 0.3s;
}

/* Move the inner circle smoothly */
.toggle-switch .slider::before {
  content: "";
  position: absolute;
  height: 14px;
  width: 14px;
  left: 2px;
  top: 2px;
  background-color: var(--color-text-button);
  border-radius: 50%;
  transition: transform 0.3s;
}

/* Move knob to right when checked */
.toggle-switch input:checked + .slider::before {
  transform: translateX(18px);
}

/* Keep the same bright color for both states */
.toggle-switch input:checked + .slider {
  background-color: var(--color-background-medium);
}

/* Labels always fully visible */
.toggle-label-left,
.toggle-label-right {
  color: var(--color-background-medium);
  opacity: 1;
}

.slider-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.slider-container a,
#control-panel a {
  white-space: nowrap;
}

/* --- Label Size Slider --- */
#label-size-control {
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  font-family: var(--font-main);
  font-size: 0.9rem;
  color: var(--color-background-medium);
}

#label-size-slider {
  width: auto;
  accent-color: var(--color-background-medium);
  cursor: pointer;
}

#label-size-value {
  min-width: 40px;
  color: var(--color-background-medium);
}

/* --- Minimum edge weight Slider --- */
#edge-weight-filter {
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  font-family: var(--font-main);
  font-size: 0.9rem;
  color: var(--color-secondary);
  justify-content: center;
  width: auto;
  accent-color: var(--color-secondary);
  cursor: pointer;
  min-width: 40px;
  align-items: center;
}

#edge-weight-filter a {
  margin-bottom: 4px;
}