/*!
 * Author: Ayesha Afzal <ayesha.afzal@fau.de>
 * © 2025 NHR@HPC, FAU Erlangen-Nuremberg. All rights reserved.
 */

/* Base styles */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  /* Set a clean and modern font */
    background-color: #f4f7fb;  /* Light gray background for a soft, clean look */
    margin: 30px;  /* Add margin around the body for spacing */
    color: #333;  /* Set the text color to a dark gray for readability */
    line-height: 1.6;  /* Improve line spacing for better readability */
}

/* Section and headings */
h1, h2, h3 {
    color: #003366;  /* Dark blue color for headings */
    font-weight: 600;  /* Make headings bold for emphasis */
}

h1 {
    font-size: 2em;  /* Large size for main headings */
    margin-bottom: 20px;  /* Add spacing below the main heading */
}

h2 {
    font-size: 1.5em;  /* Medium size for subheadings */
    margin-bottom: 15px;  /* Add spacing below the subheading */
}

h3 {
    font-size: 1.2em;  /* Slightly smaller size for third-level headings */
    margin-top: 20px;  /* Add more space at the top for separation */
    margin-bottom: 20px;  /* Add space below the heading */
}

/* About section styling */
#about {
    background: #eef5fb;  /* Light blue background for the about section */
    padding: 15px 20px;  /* Add padding inside the section */
    border-left: 4px solid #007acc;  /* Blue border on the left for emphasis */
    margin-bottom: 25px;  /* Add space below the section */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  /* Add subtle shadow for depth */
}

/* Label styling */
label {
    display: block;  /* Make labels block-level to stack on top */
    margin-top: 12px;  /* Add margin to the top for spacing */
    font-weight: 500;  /* Make the label slightly bold for better visibility */
}

/* Main content area */
#output {
    margin: auto;  /* Center the content horizontally */
    padding: 25px;  /* Add padding inside the content container */
    background-color: #fff;  /* Set a white background for the content */
    border-radius: 8px;  /* Rounded corners for a modern, clean look */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  /* Add shadow for depth */
}

/* Table and chart containers */
#resultsTable {
    overflow-x: auto;              /* Allow horizontal scrolling if the table is too wide */
    margin-bottom: 30px;           /* Add space below the table */
    background: #fff;              /* White background */
    border-radius: 8px;            /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Table styling */
#resultsTable table {
    width: 100%;
    border-collapse: separate;     /* Cleaner look than full collapse */
    border-spacing: 0;
    font-family: 'Arial', sans-serif;
    color: #333;
}

/* Cells */
#resultsTable th,
#resultsTable td {
    padding: 10px 16px;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;  /* Horizontal separators only */
}

/* Header */
#resultsTable thead th {
    background-color: #111;        /* Strong, clean header */
    color: #ffffff;
    font-weight: 600;
    border-bottom: 2px solid #444; /* Clear separation from body */
    white-space: nowrap;
}

/* Row striping */
#resultsTable tbody tr:nth-child(even) {
    background-color: #fafafa;
}

/* Hover */
#resultsTable tbody tr:hover {
    background-color: #eef3f8;
    cursor: pointer;
}


#download-csv, #download-elasticity-csv {
  display: block;  /* Default state to block, will be controlled by JS */
  z-index: 9999; /* Ensure the button is on top of other elements */
  position: relative;
  margin-top: 20px;
}

/* Style for medium buttons */
.medium-button {
    padding: 12px 24px;    /* Medium padding to balance size */
    font-size: 16px;       /* Medium font size */
    background-color: #5bc0de; /* Light blue background */
    color: white;          /* White text */
    border: none;          /* Remove default border */
    border-radius: 8px;    /* Rounded corners */
    cursor: pointer;       /* Pointer cursor on hover */
    margin: 10px;          /* Add some margin around the button */
    transition: background-color 0.3s ease; /* Smooth color change on hover */
}

.medium-button:hover {
    background-color: #31b0d5; /* Darker light blue on hover */
}




/* Comparison message container */
#comparison-message-container {
    margin: 15px 0;  /* Add margin on top and bottom */
    font-size: 1rem;  /* Set a standard font size */
    color: #444;  /* Slightly lighter color for the message */
}

/* Charts and visual elements */
.chart-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* align to top */
  height: auto;             /* let chart define its height */
  min-height: 600px;        /* optional */
  padding: 20px;            /* spacing for colorbars */
}


.main-chart-title, .chart-title {
  text-align: center;  /* Center the main title */
  font-size: 1.2em;      /* Large font size for the main title */
    font-weight: bold;
  color: #003366;      /* Dark blue color for the title */
  margin-bottom: 30px; /* Space below the main title */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  /* Clean font */
}

#gpu-chart {
  max-width: 95%; /* Increased from 60% to give the 3 charts room */
  margin: 0 auto;
  display: block;
}

#sensitivityHeatmap {
  width: 100%;       /* let Plotly fill container */
  max-width: 1400px; /* optional, limit total width */
  margin: 0 auto;
  display: block;
}


#stacked-tco-chart {
  max-width: 100%;
  max-height: 60%;
  margin: 0 auto 120px auto;  
  display: block;
  height: 50vh;
  position: relative;
  z-index: 2;
}

#gpuTornadoPlots {
    display: flex;  /* Use flexbox to display plots */
    flex-wrap: wrap;  /* Allow wrapping of plots on smaller screens */
    justify-content: center;  /* Center the plots */
    gap: 20px;  /* Add space between plots */
    margin-top: 100px;  /* Add top margin for separation */
    z-index: 1;
}


/* Grid layout for the left and right columns */
#parametersContainer {
    display: grid;               /* Use grid layout */
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 40px;                   /* Space between the columns */
    margin-bottom: 40px;         /* Margin at the bottom */
    padding: 20px;               /* Padding around the container */
}

/* Left column (Benchmark + Budget + Capital Cost) */
#leftColumn {
    background-color: #ffffff;   /* White background */
    padding: 20px;               /* Padding inside the column */
    border-radius: 8px;          /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Shadow for elevation */
}

/* Right column (Operational Cost Parameters) */
#rightColumn {
    background-color: #ffffff;   /* White background */
    padding: 20px;               /* Padding inside the column */
    border-radius: 8px;          /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Shadow for elevation */
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    body {
        margin: 15px;
    }

    h1 {
        font-size: 1.8em;
    }

    h2 {
        font-size: 1.3em;
    }

    h3 {
        font-size: 1.1em;
    }

    /* About section */
    #about {
        padding: 12px 15px;
        margin-bottom: 20px;
    }

    /* Tables */
    #resultsTable th, #resultsTable td {
        padding: 10px 15px;
    }

    /* Chart Wrappers */
    .chart-wrapper {
        height: 70vh;
    }

    /* Tornado Plots */
    .tornado-plot {
        width: 100%;
        height: auto;
        margin-bottom: 20px;
    }

    /* Grid layout */
    #parametersContainer {
        grid-template-columns: 1fr; /* Stack the columns vertically */
        gap: 20px;
        padding: 10px;
    }

    #leftColumn, #rightColumn {
        padding: 15px;
    }
}

/* Tablet responsiveness (landscape mode) */
@media (max-width: 1024px) {
    /* Adjust font sizes */
    h1 {
        font-size: 1.9em;
    }

    h2 {
        font-size: 1.4em;
    }

    h3 {
        font-size: 1.2em;
    }

    #about {
        padding: 15px 20px;
    }

    #resultsTable th, #resultsTable td {
        padding: 12px 18px;
    }

    .chart-wrapper {
        height: 80vh;
    }

    /* Tornado plots */
    .tornado-plot {
        width: 45%;  /* Adjust width to fit two plots in a row */
        height: 220px;
    }

    #parametersContainer {
        grid-template-columns: 1fr 1fr; /* Keep two columns */
        gap: 30px;
    }

    #leftColumn, #rightColumn {
        padding: 18px;
    }
}

/* Tooltip container */
[data-tooltip] {
  position: relative; /* Needed for positioning the tooltip */
  cursor: pointer; /* Change the cursor to show that it's interactive */
}

/* Tooltip text */
[data-tooltip]:hover::after {
  content: attr(data-tooltip); /* Get the tooltip text from the data-tooltip attribute */
  position: absolute;
  background-color: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  bottom: 120%; /* Position the tooltip above the element */
  left: 50%; /* Center it horizontally */
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 9999; /* Ensure the tooltip is on top */
  opacity: 0;
  animation: fadeIn 0.3s forwards; /* Make it fade in */
}

/* Fade-in effect */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Toast Notification */
.toast {
  position: fixed;
  bottom: -100px; /* Start off-screen */
  left: 50%;
  transform: translateX(-50%);
  background-color: #007acc;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 9999;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: all 0.6s ease-out;
}

.toast.show {
  bottom: 20px;
  opacity: 1;
}

/* Toast notifications on very narrow screens */
@media (max-width: 480px) {
  .toast {
    width: 90%;        /* Take most of the screen width */
    padding: 10px;     /* Slightly smaller padding */
    font-size: 12px;   /* Smaller text for mobile */
  }
}

/* Toggle container */
#themeToggleContainer {
  position: absolute;
  top: 30px;
  right: 40px;
  z-index: 9999;
}

/* Toggle Switch */
.theme-switch {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Hide default checkbox */
.theme-switch input {
  display: none;
}

/* Slider track */
.theme-switch .slider {
  width: 50px;
  height: 26px;
  background-color: #ccc;
  border-radius: 30px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* Slider thumb */
.theme-switch .slider::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 4px;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

/* Move slider thumb on toggle */
.theme-switch input:checked + .slider::before {
  transform: translateX(24px);
}

.theme-switch .emoji {
  font-size: 18px;
  user-select: none;
}

/* =========================
   TABLE (Results Table)
   ========================= */
body.dark #resultsTable table {
  color: #f4f4f4;
}

body.dark #resultsTable th,
body.dark #resultsTable td {
  color: #f4f4f4;
  border-bottom: 1px solid #3a3a3a;
}

/* Table header */
body.dark #resultsTable thead th {
  background-color: #000;
  border-bottom: 2px solid #555;
}

/* Row striping */
body.dark #resultsTable tbody tr:nth-child(even) {
  background-color: #2f2f2f;
}

/* Hover */
body.dark #resultsTable tbody tr:hover {
  background-color: #3a3a3a;
}

.ai-tips {
  background-color: #f0f8ff;
  color: #333;
  padding: 4px;
  border-left: 10px solid #4a90e2;
  margin-top: -40px;
  border-radius: 6px;
  max-width: 1280px;
  font-size: 14px;
}

#refresh-container {
  display: none;
  margin-top: 10px;
  text-align: center;
}

#loading-spinner {
  margin-bottom: 10px;
}

#last-updated {
  font-size: 0.9em;
  color: gray;
}


table {
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

th, td {
  padding: 8px 12px;
  text-align: center;
}

thead {
  background-color: #f5f5f5;
}

@media (max-width: 768px) {
  #price-difference-panel {
    padding: 10px;
  }

  #price-difference-panel div {
    flex-direction: column;
    gap: 10px;
  }

  #price-difference-list, #priceChart {
    width: 100%; /* Full width on mobile */
  }
}

/* Citation Page Styling */
.cite-section {
  background-color: #ffffff;
  padding: 40px 30px;
  margin: 40px auto;
  max-width: 800px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  text-align: left;
  line-height: 1.8;
}

.cite-section h1 {
  text-align: center;
  font-size: 2em;
  color: #003366;
  margin-bottom: 30px;
}

.citation-block h3 {
  color: #005599;
  margin-top: 25px;
}

.bibtex-block {
  background-color: #f8f8f8;
  padding: 20px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  overflow-x: auto;
  border-left: 5px solid #007acc;
  white-space: pre;
  border-radius: 6px;
  margin-top: 10px;
  color: #333;
  text-align: left;
}

/* Dark mode for citation section */
body.dark .cite-section {
  background-color: #2a2a2a;
  color: #f4f4f4;
}

table.feature-table {
  width: auto; /* Let the table shrink to content */
  border-collapse: separate;
  border-spacing: 0;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 15px;
  margin: 20px 0;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  border-radius: 8px;
  overflow: hidden;
}

table.feature-table thead {
  background-color: #2c3e50;
  color: white;
}

table.feature-table th,
table.feature-table td {
  text-align: left;
  padding: 14px 16px;
  vertical-align: top;
  white-space: nowrap; /* Prevent overly wide rows from wrapping */
}

table.feature-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

table.feature-table tbody tr:hover {
  background-color: #f1f7ff;
}

table.feature-table th {
  font-weight: 600;
}

td strong {
  display: block;
  font-size: 1.05em;
  margin-bottom: 4px;
  color: #34495e;
}

.share-btn {
    padding: 8px 16px;
    margin-left: 10px;
    font-size: 14px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    background-color: #4CAF50;
    color: white;
    transition: 0.3s;
}

.share-btn:hover {
    opacity: 0.8;
}

#budget_slider, #power_slider, #performance_slider {
  margin-bottom: 10px;
  transition: all 0.3s ease;
}

/* DARK MODE STYLES */
body.dark {
  background-color: #1c1c1c;
  color: #f4f4f4;
  transition: background-color 0.3s, color 0.3s;
}

/* Main containers */
body.dark #about,
body.dark #leftColumn,
body.dark #rightColumn,
body.dark #output,
body.dark #resultsTable,
body.dark .cite-section {
  background-color: #2a2a2a;
  color: #f4f4f4;
  box-shadow: none;
}

/* General text & headings */
body.dark label,
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6,
body.dark p,
body.dark pre,
body.dark code,
body.dark .print-statement {
  color: #f4f4f4;
}

/* Results Table */
body.dark #resultsTable table {
  color: #f4f4f4;
}

body.dark #resultsTable th,
body.dark #resultsTable td {
  color: #f4f4f4;
  border-bottom: 1px solid #3a3a3a;
}

body.dark #resultsTable thead th {
  background-color: #000;
  border-bottom: 2px solid #555;
}

body.dark #resultsTable tbody tr:nth-child(even) {
  background-color: #2f2f2f;
}

body.dark #resultsTable tbody tr:hover {
  background-color: #3a3a3a;
}

/* Dark mode buttons */
body.dark .medium-button,
body.dark .share-btn {
  color: white; /* Shared text color */
}

body.dark .medium-button {
  background-color: #444; /* Unique background */
}

body.dark .medium-button:hover {
  background-color: #666; /* Unique hover background */
}

body.dark .share-btn {
  background-color: #4CAF50; /* Unique background */
}

body.dark .share-btn:hover {
  opacity: 0.8; /* Unique hover effect */
}


/* Chart titles */
body.dark .chart-title,
body.dark .main-chart-title {
  color: white;
}

/* AI tips */
body.dark .ai-tips {
  background-color: #2a2a2a;
  color: #f4f4f4;
  border-left-color: #77aaff;
}

/* Citation section */
body.dark .bibtex-block {
  background-color: #1e1e1e;
  color: #ddd;
  border-left-color: #77aaff;
}

/* Feature tables */
body.dark table.feature-table thead {
  background-color: #1e1e1e;
  color: #f4f4f4;
}

body.dark table.feature-table tbody tr:nth-child(even) {
  background-color: #2a2a2a;
}

body.dark table.feature-table tbody tr:hover {
  background-color: #3a3a3a;
}

body.dark table.feature-table th,
body.dark table.feature-table td {
  color: #f4f4f4;
}

/* Slider dark mode */
body.dark .theme-switch input:checked + .slider {
  background-color: #4a90e2;
}

/* Short vertical screens */
@media (max-height: 700px) {
  /* Reduce chart wrapper height */
  .chart-wrapper {
    padding: 10px;
    min-height: 50vh;  /* Shorter chart container */
  }

  /* Tornado plots top spacing */
  #gpuTornadoPlots {
    margin-top: 50px;  /* Avoid overlapping content */
  }

  /* Move absolute elements down */
  #themeToggleContainer {
    top: 15px;  /* Lower theme toggle */
  }

  .ai-tips {
    position: static;   /* or remove position entirely */
    margin: 10px auto;  /* slightly tighter spacing */
  } 
}