html, body {
    font-family: Arial, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern system font */  
    font-weight: 400; /* Lighten overall text */
    margin: 0;
    padding:0;
    overflow-x: hidden;
    padding: 0;
    height: auto;
    min-height:100%;
    display: block;
    flex-direction: column;
    background-color: var(--background-light);
    color: var(--text-light);
    transition: background 0.3s, color 0.3s;
}


h1, h2, h3, h4, h5, h6 {
    font-weight: 400; /* Medium instead of bold */
}

label, select, input, button, p, span, div {
    font-weight: 300; /* Normal text weight */
}

strong, b {
    font-weight: 500; /* Keep strong text slightly bold */
}

.main-content {
    padding-top: 60px; /* header height */
}


:root {
  --background-light: #f4f4f9;
  --text-light: #000000;
  --background-dark: #1e1e1e;
  --text-dark: #ffffff;
  --border-light: #ccc;
  --border-dark: #444;
  --chart-text: #000000;
  --chart-grid: rgba(0, 0, 0, 0.1);
  --chart-bg: #ffffff;
}


.dark-mode {
  background-color: var(--background-dark);
  color: var(--text-dark);
  --chart-text: #ffffff;
  --chart-grid: rgba(255, 255, 255, 0.2);
  --chart-bg: #2c2c2c;
}

#dataForm {
  margin-top: 100px; /* gives scroll room above it */
}

/* === Filter Layout === */
.form-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
}

#backToTopBtn,
#scrollDownBtn {
  position: fixed;
  right: 20px;
  z-index: 9999;
  width: 42px;
  height: 42px;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  border: none;
  background-color: #ffffff;
  color: #68d8d6;
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  transition: background-color 0.3s, transform 0.2s;
  display: none;
}

/* Positioning */
#backToTopBtn {
  bottom: 110px; /* adjust gap from other buttons */
}

#scrollDownBtn {
  top: 80px; /* places it just below the header */
}

/* Hover effects */
#backToTopBtn:hover,
#scrollDownBtn:hover {
  background-color: #68d8d6;
  color: #ffffff;
  transform: translateY(-3px);
}

/* Dark mode */
.dark-mode #backToTopBtn,
.dark-mode #scrollDownBtn {
  background-color: #2c2c2c;
  color: #c4fff9;
  box-shadow: 0 3px 10px rgba(255, 255, 255, 0.1);
}

.dark-mode #backToTopBtn:hover,
.dark-mode #scrollDownBtn:hover {
  background-color: #c4fff9;
  color: black;
}


.weight-cell {
  vertical-align: top;
  text-align: center;
  padding-top: 10px;
}

.weight-slider {
  width: 90%;
  display: block;
  margin: 0 auto;
}


.weight-value-container {
  position: relative;
  display: inline-block;
}

.weight-input {
  width: 60px;               /* Wider box */
  padding-right: 18px;       /* Space for the % sign */
  text-align: right;
  border: none;
  background: transparent;
  font-size: 14px;
  outline: none;
  height: 28px;              /* Adjust height */
  line-height: 28px;
  box-sizing: border-box;
}

.percent-sign {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #444;
  font-size: 14px;
}

.main-action-buttons {
  display: flex;
  justify-content: center;
  width: 50%;          /* ✅ Makes the group take half the page */
  margin: 0 auto;      /* ✅ Centers horizontally */
  gap: 20px;           /* ✅ Space between buttons */
}

.main-action-buttons .tooltip-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  gap: 20px;           /* ✅ Equal gaps between the 3 buttons */
}

/* Optional: Remove border from outer cell */
td.weight-cell {
  border: none;
}

.weight-input:focus {
  outline: none;
  box-shadow: none;
}

.weight-input::-webkit-outer-spin-button,
.weight-input::-webkit-inner-spin-button {
 appearance: auto;
  margin-left: 0;
  margin-right: auto;
  direction: ltr;
  transform: scaleX(-1); /* Flip triangle direction */
}

.percent-sign {
  font-weight: bold;
  font-size: 15px;
}



.button-group-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
}

.button-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center; /* Center children horizontally */
  max-width: 100%;
  width: 1000px;
  margin-top: 40px;
}

.button-group > div {
  min-width: 200px;
  flex: 1;
}

.button-container.tooltip-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 35px; /* Increased from 30px */
  margin-top: 20px;
}

.apply-button-wrapper {
  margin-top: 100px;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 100px;
}

.apply-button-container {
  margin-top: 0px; /* ✅ Adjust as needed (smaller space) */
  text-align: center;
}

.apply-button-container button {
  margin-top: 0;
}

/* === Dropdown Styles === */
.single-dropdown, .multi-dropdown {
  width: 100%;
  max-width: 300px;
}

#modelFormContainer {
  margin-top: 10px; /* ↓ Reduce if there's excessive space */
}

.dropdown-button {
  width: 100%;
  max-width: 320px;         /* slightly wider */
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: white;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dropdown-button::after {
  content: "\25BC";
  font-size: 12px;
  color: #777;
  margin-left: 10px;
}

.dropdown-content {
  display: none;
  position: absolute;
  width: 100%;
  background-color: white;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #ccc;
  border-radius: 5px;
  max-height: 180px;
  overflow-y: auto;
  padding: 10px;
  z-index: 1000;
}

.dropdown-content label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
  border-radius: 5px;
}

.dropdown-content label:hover {
  background-color: #f0f0f0;
}

/* Scrollbar */
.dropdown-content::-webkit-scrollbar {
  width: 6px;
}

.dropdown-content::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 10px;
}

.dropdown-content::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}

/* === Apply Button === */
.apply-button {
  padding: 10px 100px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  background-color: #1e6091;
  width: 500px;
  color: white;
  border-radius: 5px;
  transition: background 0.3s;
}

.apply-button:hover {
  background-color: #0056b3;
}

.apply-button:disabled {
  background-color: #9e9e9e;
  cursor: not-allowed;
}

/* Dark Mode Variants */
.dark-mode .dropdown-button,
.dark-mode .dropdown-content {
  background-color: var(--background-dark);
  color: var(--text-dark);
  border: 1px solid var(--border-dark);
}

.dark-mode .dropdown-content label:hover {
  background-color: #333;
}

/* Container for all dropdowns and input fields */
.button-group {
  display: flex;
  flex-direction: column;
  align-items: center; /* ✅ Center children horizontally */
  margin-top: 0;
}

/* The row that holds the dropdowns */

/* Reduce gap between input fields row and dropdown row */
.input-row {
  margin-bottom: 10px; /* 🔧 Reduce if needed */
  max-width: 950px;
  margin: 0 auto 20px;
  display: flex;
  justify-content: space-between;
  gap: 30px;
}


/* === Dropdown Alignment Row === */
.dropdown-row {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 25px;
  margin-top:0;
  max-width: 100%;
  width: 100%;
}

/* Ensure consistent sizing for each dropdown box */
.dropdown-row .single-dropdown,
.dropdown-row .multi-dropdown {
  flex: 1 1 250px;
  max-width: 300px;
}

/* Match dropdown-button width with parent */
.dropdown-button {
  width: 100%;
  box-sizing: border-box;
}


.dark-mode .apply-button {
  background-color: #1d3557;
  color: #f1f1f1;
}

.dark-mode .apply-button:hover {
  background-color: #457b9d;
}

/* Responsive Behavior */
@media (max-width: 768px) {
  .button-group {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }

  .apply-button {
    width: 80%;
    font-size: 15px;
  }
}

.button-group {
  margin-bottom: 0; /* 🔧 Remove excessive gap below dropdowns */
}

.dropdown-row {
  margin-bottom: 10px; /* or even 5px for a tighter look */
}

.dropdown-row-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top:0;
}

.dropdown-row > div {
  flex: 1 1 250px; /* Allow each dropdown to grow equally, minimum 250px */
  max-width: 300px; /* Restrict too wide dropdowns */
}


.dark-mode {
    background-color: var(--background-dark);
    color: var(--text-dark);
}

/* Revised dark mode for improved readability and contrast */

.dark-mode table {
    background-color: #2b2b2b;
    color: #f1f1f1;
    border: 1px solid #555;
  }
  
  .dark-mode th {
    background-color: #3b3b3b;
    color: #90e0ef;
  }
  
  .dark-mode td {
    background-color: #2b2b2b;
    color: #64dfdf;
    text-decoration: none;
    border: 1px solid #555;
    padding: 8px;
    overflow: hidden;
    vertical-align: middle;
  }
  
  .dark-mode input[type="number"] {
    background-color: #3b3b3b;
    color: #ffffff;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 6px 8px;
    width: 90%;         /* Shrinks slightly to avoid overflow */
    box-sizing: border-box; /* Ensures padding doesn't expand box */
    font-size: 14px;
  }
  
  .dark-mode input[type="number"]::placeholder {
    color: #ccc;
  }

  /* ✅ Dark mode for number inputs inside table cells */
.dark-mode table td:not(:first-child) input[type="number"],
.dark-mode table td:not(:first-child) input[type="text"],
.dark-mode table td:not(:first-child) input[type="checkbox"] {
  background-color: #555; /* Dark background */
  color: #ffffff;           /* White text */
  border: 1px solid #555;   /* Subtle border */
  border-radius: 5px;
}

/* ✅ Placeholder text in dark mode */
.dark-mode table td:not(:first-child) input::placeholder {
  color: #bbbbbb;
}

  
  .dark-mode .apply-button {
    background-color: #1e90ff;
    color: white;
  }


  .dark-mode .reset-button{
    background-color: #9e2a2b;
    color: white;
  }

  .dark-mode .submit-button {
    background-color: #40916c;
    color: white;
  }
  
  .dark-mode .apply-button:hover{
    background-color: darkblue;
  }
  
  .dark-mode .reset-button:hover {
    background-color: #c82333;
  }

  .dark-mode .submit-button:hover {
    background-color: darkgreen;
  }

  .dark-mode select {
    background-color: #3a3a3a;
    color: #ffffff;
    border: 1px solid #777;
  }
  

.main-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
overflow-y: auto;    /* allow scrolling */
max-width: 100%;
overflow-x: hidden;
  min-height: calc(100vh - 100px); /* adjust 100px if you have a header/footer */

}
.main-content1 {
flex: 1;
display: flex;
flex-direction: column;
}
#chartContainer {
text-align: center;
padding: 20px;
}

canvas {
width: 80%;
max-width: 600px;
height: 400px;
margin: auto;
}

.dropdown-content {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    min-width: 150px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.dropdown-content.show {
    display: block;
}

.dropdown-button img,
.flag-icon {
  width: auto;
  height: 20px;
  object-fit: cover;
  vertical-align: middle;
}


.flag-icon {
    width: 24px;
    height: 16px;
    object-fit: cover;
    vertical-align: middle;
  }

.shared-width {
  width: 70%;           /* same width for all */
  max-width: 700px;     /* optional cap */
  margin: 0 auto;       /* center horizontally */
}

/* Wrapper holds everything vertically centered */
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px; /* space between result-container and support-container */
  padding: 2rem 1rem;
  flex: 0 0 auto; /* don’t force height growth */
}

.combined-solution-box {
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  background-color: #fff;
  width: 100%;          /* Take full width */
  max-width: 100%;      /* Prevent overflow */
  min-width: 100%;      /* Prevent overflow */
  box-sizing: border-box; margin-left: auto;
  margin-right: auto;
  padding: 25px;
}


.dark-mode .combined-solution-box{
  background-color: #2c2c2c; /* dark gray */
}

.dark-mode .combined-solution-row:hover {
  background: #343a40;
}

.combined-header-row {
  display: flex;
  justify-content: flex-end; /* ✅ Moves "Power Percentage" to the right */
  margin-bottom: 10px;
  padding: 0 10px;
}


.combined-solution-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background 0.2s;
  gap:100px;
}

.combined-solution-row:hover {
  background: #f8f9fa;
}

.combined-solution-row span {
  flex: 1;
}

.combined-percentage-input-container {
  display: flex;
  align-items: center;
  gap: 4px;
}

.combined-percentage-input-container input[type="number"] {
  width: 70px;
  padding: 5px 8px;
  border: 1px solid #ccc;
  border-radius: 8px;
  text-align: center;
  outline: none;
  transition: border 0.2s;
}

.combined-percentage-input-container input[type="number"]:focus {
  border: 1px solid #007bff;
}

.combined-error-msg {
  margin-top: 15px;
  text-align: center;
  color: #888;
}

.combined-arrows-wrapper {
 display: flex;
  align-items: center;
  justify-content: space-between; /* place arrows at sides of box */
   margin: 0 auto; /* center it */
  gap: 10px;
}

.combined-arrow-btn {
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 50%;
  padding: 8px 12px;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.combined-arrow-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.combined-arrow-btn:hover:not(:disabled) {
  background-color: #f0f0f0;
  border-color: #999;
  transform: scale(1.05);
}


/* Container for the confirmation message box */
  .result-container {
    max-width: 900px;
     width: 90%;
    margin: 30px auto;
    margin-top: 5%;
    background: #f4f4f9;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
  }

.result-container:hover {
  transform: translateY(-3px);
}

.dark-mode .result-container {
  background: #2b2b2b;
  color: #f1f1f1;
  box-shadow: 0 12px 28px rgba(255, 255, 255, 0.05);
}

.resultcontainer {
    max-width: 900px;
     width: 90%;
    margin: 30px auto;
    margin-top: 3px;
    background: #f4f4f9;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
  }

.resultcontainer:hover {
  transform: translateY(-3px);
}

.dark-mode .resultcontainer {
  background: #2b2b2b;
  color: #f1f1f1;
  box-shadow: 0 12px 28px rgba(255, 255, 255, 0.05);
}




/* Title inside the confirmation box */
#checkTheData {
  font-size: 1.2rem;
  margin-bottom: 24px;
  color: #003049;
  font-weight: 600;
}

.dark-mode #checkTheData {
  color: #90e0ef; /* Soft cyan-blue for readability in dark */
}

.button-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* General button styles */
.choice-button,
.returntoall-button
.return-button {
  width: 100%;
  padding: 12px;
  margin: 8px 0;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* Specific button colors */
#personalButton {
  background-color: #e0e0e0;
  color: #333;
}

#generalButton,
#exportButton,
#excelButton,
#JsonButton {
  background-color: #e0e0e0;
  color: #333;
}


/* Hover effects (optional) */
.choice-button:hover,
.return-button:hover {
  opacity: 0.9;
}

.returntoall-button:hover {
  opacity: 0.9;
}

.return-button {
padding: 10px 15px;
font-size: 16px;
margin: 10px;
border: none;
cursor: pointer;
border-radius: 5px;
transition: background 0.3s;
display: block;
width: 100%;
background-color: #003049; /* Red for emphasis */
color: white;
}

.return-button:hover {
background-color: #14213d;
}

.returntoall-button {
padding: 10px 15px;
font-size: 16px;
margin: 10px;
border: none;
cursor: pointer;
border-radius: 5px;
transition: background 0.3s;
display: block;
width: 100%;
}


.help-button {
display: block;
margin: 20px auto; /* Centers the button horizontally */
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
background-color: #8ecae6;
color: black;
border-radius: 5px;
transition: background 0.3s;
}


/* Center the button container */
.button-container {
display: flex;
justify-content: center; /* Center buttons */
align-items: center;
gap: 30px; /* Space between buttons */
margin-top: 20px;
}


.default-button {
  background-color: #f0ad4e; /* Bootstrap-style yellow */
  color: white;
  border: none;
  padding: 15px 110px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.3s ease;
  white-space: nowrap; /* prevent line-breaks if needed */
  font-weight: normal !important;
}

.default-button:hover {
  background-color: #ec971f; /* Darker yellow on hover */
}

.combine-button {
  background-color: #00b4d8; /* Bootstrap-style yellow */
  color: white;
  border: none;
  padding: 15px 110px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.3s ease;
  white-space: nowrap; /* prevent line-breaks if needed */
  font-weight: normal !important;
}

.combine-button:hover {
  background-color: #0096c7; /* Darker yellow on hover */
}

/* Reset Button (Left Side, Red) */
.reset-button {
background-color: #9e2a2b; /* Red */
color: white;
border: none;
padding: 15px 110px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
transition: background 0.3s ease;
white-space: nowrap; /* prevent line-breaks if needed */
font-weight: normal !important;
}

.reset-button:hover {
background-color: #c82333; /* Darker Red */
}

/* Submit Button (Right Side, Green) */
.submit-button {
background-color: #40916c; /* Green */
color: white;
width:100%;
min-width: 100%;
border: none;
padding: 15px;
font-size: 16px;
text-align: center;     /* Center text */
margin-bottom: 30px;
cursor: pointer;
border-radius: 5px;
transition: background 0.3s ease;
white-space: nowrap; /* prevent line-breaks if needed */
font-weight: normal !important;
}



.submit-button:hover {
background-color: #218838; /* Darker Green */
}

.table-container, 
.result-table, 
td, th {
  overflow: visible !important;
}

.description-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
.low-badge {
  background: none;        /* Remove background */
  color: inherit;          /* Use icon color */
  font-size: 16px;         /* Slightly larger icon */
  padding: 0;              /* No padding */
  border-radius: 0;        /* No rounded background */
  cursor: pointer;
  position: relative;
  display: inline-block;
}

.low-badge::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 50%;
  left: 110%;
  transform: translateY(-50%);
  background: #fff;
  color: #333;
  font-size: 14px;
  padding: 6px 8px;
  border: 2px solid #333;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  width: 400px;
  max-height: 12em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  line-height: 1.4em;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 1000;
}

.low-badge:hover::after {
  opacity: 1;
}

.dark-mode .low-badge::after {
  background: #333;
  color: #fff;
  border: 2px solid #fff;
}


.tooltip {
   max-width: 300px;               /* Wider tooltip */
    white-space: normal;            /* Allow wrapping */
    overflow-wrap: break-word;
    text-align: center;
    line-height: 1.3;
    padding: 8px 12px;

    display: -webkit-box;           /* Needed for clamp */
    -webkit-box-orient: vertical;   /* Vertical text flow */
    -webkit-line-clamp: 2;          /* Limit to 2 lines */
    overflow: hidden;               /* Hide extra text */
}


.exclusion-tooltip-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.exclusion-tooltip-text {
  visibility: hidden;
  max-width: 500px;
  background-color: white;
  color: black;
  border: 2px solid black; /* ✅ Thick black border */
  text-align: center;
  padding: 8px 12px;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  top: -50px; /* Slightly higher above the field */
  left: 50%;
  z-index: 9999 !important; /* Higher than table and containers */
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 15px;
  font-weight: normal;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

.exclusion-tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-color: black transparent transparent transparent; /* ✅ Black arrow */
}

/* Show tooltip when hovering the icon */
.exclusion-warning-icon:hover + .exclusion-tooltip-text {
  visibility: visible;
  opacity: 1;
}

.exclusion-warning-icon {
  cursor: pointer;
  margin-left: 5px;
  font-size: 18px;
  color: #f39c12; /* Orange warning icon */
}

/* Dark Mode Styling */
body.dark-mode .exclusion-tooltip-text {
  background-color: #2c2c2c;   /* Dark background */
  color: white;                /* White text */
  border-color: white;          /* White border */
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.2);
}

body.dark-mode .exclusion-tooltip-text::after {
  border-color: #2c2c2c transparent transparent transparent; /* Dark arrow */
}

.tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.tooltip-text {
  visibility: hidden;
  width: 420px;
  background-color: #f44336;
  color: #fff;
  text-align: center;
  padding: 6px;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 120%; /* above the button */
  left: 85%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 14px;
  pointer-events: none;
}

.tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%; /* bottom of tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #f44336 transparent transparent transparent;
}

.tooltip-wrapper.show-tooltip .tooltip-text {
  visibility: visible;
  opacity: 1;
}


table {
    width: 100%;
    max-width: 1700px; /* Prevents it from getting too wide */ 
    border-collapse: collapse;    
    justify-content: center;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow */
    border-radius: 10px; /* Rounded corners */
    overflow: hidden; /* Ensures border-radius applies */
    margin-top: 20px;
    text-align: center;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 1;
margin-left: auto;
margin-right: auto; /* Center horizontally */   
}
th, td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}
th {
    background-color: #023047;
    color: white;
    position: relative;
  overflow: visible; /* important for the tooltip to overflow outside */
}
input {
    width: 100%;
    padding: 5px;
    border: none;
    text-align: center;
}
.hidden {
    display: none;
}
h1 {
    text-align: center;
}
#confirmationMessage {
  background-color: white;
  padding: 30px 40px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 360px;
  max-width: 95%;
  margin: 0 auto;
  }
  
  #confirmationMessage p {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: #023047;
    font-weight: normal !important;
  }

  #checkTheData {
    font-weight: normal !important;
  }
  
  .choice-button,
  .returntoall-button
  .return-button {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .choice-button:nth-child(2) {
    background-color: #28a745;
    color: white;
  }
  
  .choice-button:nth-child(3),
  .choice-button:nth-child(4),
  .choice-button:nth-child(5) {
    background-color: #e0e0e0;
    color: #333;
  }
  
  .choice-button:hover,
  .return-button:hover,
    .returntoall-button:hover {
    filter: brightness(0.95);
  }
  
  /* Optional: style for the hidden chart container */
  #chartContainer {
    padding: 20px;
    display: none;
  }

.chart-container.two-charts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  padding: 30px;
  max-width: 100%;
}

.chart-container.two-charts canvas {
  flex: 1 1 48%;
  min-width: 400px;
  max-width: 700px;  /* ⬅️ Make this wider */
  height: 400px !important;  /* Unified height */
}

.chart-container canvas {
  background-color: transparent !important; /* Removes white background */
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* subtle shadow */
}

.dark-mode .chart-container {
  background-color: #1e1e1e;  /* dark background */
  border: 1px solid #333;
}

.chart-container.two-charts {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: stretch;
}

.chart-container canvas {
  flex: 1;
}

  .dark-mode #confirmationMessage {
    background-color: #2a2a2a;
    color: white;
  }
  
  .dark-mode .choice-button,
  .dark-mode .return-button{
    color: white;
  }
  
  .dark-mode .choice-button:nth-child(3),
  .dark-mode .choice-button:nth-child(4),
  .dark-mode .choice-button:nth-child(5) {
    background-color: #444;
  }
  
@media (max-width: 768px) {
    .navbar {
      flex-direction: column;
      align-items: flex-start;
    }
  
    .navbar-left,
    .navbar-center,
    .navbar-right {
      flex-direction: column;
      align-items: flex-start;
      width: 100%;
      margin-bottom: 10px;
    }
    .navbar-right {
        display: flex;
        align-items: center;
        padding-right: 10px; /* extra right spacing */
      }
  
    .nav-links {
      flex-direction: column;
      width: 100%;
    }
  
    .nav-links a {
      padding: 10px 0;
    }
  
    .header-buttons {
      justify-content: flex-start;
      flex-wrap: wrap;
    }
    .dark-mode table {
        background-color: #1f1f1f;
        color: #ffffff;
        border: 1px solid #444;
      }
      
      .dark-mode th {
        background-color: #2a2a2a;
        color: #ffffff;
      }
      
      .dark-mode td {
        border: 1px solid #444;
      }
      
      .dark-mode input[type="number"] {
        background-color: #2a2a2a;
        color: #ffffff;
        border: 1px solid #555;
      }
      
      .dark-mode input[type="number"]::placeholder {
        color: #aaa;
      }
      
      .dark-mode table {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
      }
      

/* Base language dropdown container */
.language-dropdown {
    display: flex;
    align-items: center;
    gap: 4px; /* spacing between flag and arrow */
  }
  
  .language-dropdown .dropdown-content {
    position: absolute;
    box-shadow: none;
    background-color: white;
min-width: 120px;
border-radius: 6px;
padding: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
top: 100%;
left: 0;
z-index: 10;
  }
}

.language-dropdown {
position: relative;
display: inline-block;
border:none !important;
}

.language-dropdown .dropdown-button { 
border: none !important;
background-color: transparent !important;
cursor: pointer;
font-size: 16px;
display: flex;
align-items: center;
gap: 5px;
box-shadow: none;
outline: none;
}

.language-dropdown .dropdown-button {
border: 0 !important;
box-shadow: none !important;
background-color: transparent !important;
}

.language-dropdown .dropdown-content {
display: none;
position: absolute;
background-color: white;
top: 100%;
right: 0;
z-index: 1000;
}

.language-dropdown:hover .dropdown-content {
display: block;
}

.language-dropdown .dropdown-content label {
padding: 5px 10px;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
background-color: transparent;
}

.language-dropdown .dropdown-content label:hover {
background-color: #f0f0f0;
}
  
#weightErrorMsg {
    transition: opacity 0.3s ease;
  }
  

.toggle-button {
border: none;
background-color: transparent !important;
cursor: pointer;
box-shadow: none;
display: flex;
align-items: center;
justify-content: center;
}

.toggle-button i {
color: yellow;
font-size: 24px;
transition: color 0.3s;
}

.toggle-button:hover i {
color: gold;
}

.logo-container {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
}

.logo-container img {
    display: block; /* Make them appear one under the other */
    margin-bottom: 10px; /* Space between images */
}

.support-container {
  margin: 20px auto 60px; /* top: 20px, bottom: 60px for footer spacing */
  padding: 20px 16px;
  background: var(--background-light);
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  max-width: 600px;
  width: 90%;
  z-index: 1;
}

.support-wrapper {
  position: fixed;
  bottom: 60px;
  right: 20px;
  z-index: 10000;
}

.support-icon {
   background: #1e6091;
  color: white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: opacity 0.2s ease;
}


.support-container {
  display: none;
  position: fixed;
  bottom: 0px;
  right: 0;
  background: var(--background-light);
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  padding: 20px 16px;
  max-width: 430px;
  width: 430px;
}

.support-wrapper:hover .support-container {
  display: block;
}

.support-wrapper:hover .support-container,
.support-container:hover {
  display: block;
}

  
  .dark-mode .support-container {
    background-color: #2c2c2c;
    color: white;

  }
  .dark-mode .support-container h2 {
    color: white;

  }
  
  .support-container h2 {
    color: #003366;
    font-size: 1.5rem;
    margin-bottom: 25px;
    font-weight: 600;
  }
  
  .support-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
  }
  
  .support-button {
    background-color: #1e6091;
    color: white;
    border: none;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
  }
  
  .support-button:hover {
    background-color: #0056b3;
  }

  .support-button a {
    text-decoration: none; /* 🔥 Removes underline */
    color: inherit;         /* 🔄 Keeps the button's text color */
  }
  

  .result-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .result-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
   font-family: Arial, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern system font */ font-size: 0.95rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  }
  
  .result-table thead {
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
  }
  
  .result-table thead th {
    padding: 12px 16px;
    text-align: center; 
    font-weight: 600;
    border-bottom: 1px solid var(--table-border);
  }
  
  .result-table tbody tr {
    transition: background 0.2s;
  }
  
  .result-table tbody tr:hover {
    background-color: var(--table-row-hover);
  }
  
  .result-table tbody td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--table-border);
    color: var(--table-text);
  }
  
  .result-table tbody tr:last-child td {
    border-bottom: none;
  }
  
  /* Light mode */
  :root {
    --table-header-bg: #f4f6f8;
    --table-header-text: #333;
    --table-text: #222;
    --table-border: #ddd;
    --table-row-hover: #f1f1f1;
    --bg-color: #fff;
    --text-color: #000;
    --chart-bg: #ffffff;
    --chart-text: #111827;
    --chart-grid: rgba(0, 0, 0, 0.1);
    --chart-bar: rgba(54, 162, 235, 0.6);
    --chart-border: rgba(54, 162, 235, 1);
  }
  
  /* Dark mode */
  body.dark-mode {
    --table-header-bg: #1f2a37;
    --table-header-text: #f3f4f6;
    --table-text: #d1d5db;
    --table-border: #374151;
    --table-row-hover: #2c3e50;
    --bg-color: #111827;
    --text-color: #f9fafb;
    --chart-bg: #0f172a;
    --chart-text: white; /* 🔧 brighter for visibility */
    --chart-grid: rgba(255, 255, 255, 0.15);
    --chart-bar: rgba(56, 189, 248, 0.7);
    --chart-border: rgba(56, 189, 248, 1);
    background-color: #222;
    color: var(--chart-text);
  }

  


/* Add Space Between Forms */
#weightsContainer {
    margin-top: 10px; /* Adds space above the weights table */
    text-align: left; /* Centers the text */
}

#weightTitle {
    font-weight: normal;
    text-align: left;
    text-decoration: none;
    font-size: 16px;
    margin: 20px 0;
    color: #000000;
    padding-top: 30px;
  }

  .dark-mode #weightTitle {
    color: #fff;
  }
  

  #supportTitle {
    font-weight: normal;
  }

  #footerText {
    font-weight: normal;
  }

/* Header Styling */
.main-header {
background-color: #13253b;
position: fixed;
left: 0;
right: 0;
color: white;

text-align: center;
font-size: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 20px; /* Add space below header */
z-index: 2;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-wrap: nowrap;
  padding: 10px 20px;
  background-color: #13253b;
  }
  
  .navbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .navbar-center {
    display: flex;
    align-items: center; /* <-- Add this to make nav-links and header-buttons in one row */
    gap: 20px; /* <-- Space between nav links and buttons */
  }
  
  .navbar-center .nav-links a {
    margin: 0 10px;
    color: white;
    text-decoration: none;
    font-size: 16px;
  }
  
  .navbar-right {
    display: flex;
    align-items: center;
  }
  
  .logo-small {
    height: 35px;
  }
  
  .logo-large {
    height: 40px;
  }
  
  .partner-logo {
  margin-right: 20px;       /* ✅ Creates space *outside* the element */
  max-width: 100%;
  object-fit: contain;
  display: block;
  }
/* Footer Styling */

.main-footer {
position: fixed;
left: 0;
right: 0;
background-color: #333;
color: white;
padding: 1px;
text-align: center;
font-size: 14px;
width: 100%;
bottom:0;
flex-shrink:0;
z-index: 1;
}

.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
}


/* General Dropdown Styling (Same for Single & Multi) */
.single-dropdown, .multi-dropdown {
position: relative;
display: inline-block;
width: 100%;
max-width: 300px;
}

.dropdown-button, .dropdown-content {
background-color: var(--background-light);
color: var(--text-light);
border: 1px solid var(--border-light);
}

.dark-mode .dropdown-button, 
.dark-mode .dropdown-content {
background-color: var(--background-dark);
color: var(--text-dark);
border: 1px solid var(--border-dark);
}

.dark-mode .dropdown-content label {
color: var(--text-dark);
}

.dropdown-content label:hover {
background-color: #f0f0f0;
}

/* Dark Mode Hover */
.dark-mode .dropdown-content label:hover {
background-color: #333;
}

/* Center the Select Dropdowns */
.select-container {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;
    gap: 20px; /* Space between dropdowns */
    margin-top: 20px;
    flex-wrap: wrap; /* Ensures responsiveness on smaller screens */
}

.dropdowns-row {
  display: flex;
  flex-direction: row;        /* horizontal layout for dropdowns */
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

/* Center the Apply Button */
.apply-button-container {
    display: flex;
    justify-content: center;
    width: 100%;
    
}



/* Dropdown Button (Matches Multi-Select Appearance) */
.dropdown-button {
width: 100%;  
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: white;
text-align: left;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
}

/* Add dropdown arrow */
.dropdown-button::after {
content: "▼";
font-size: 12px;
color: #777;
margin-left: 10px;
}

/* Dropdown Content */
.dropdown-content {
display: none;
position: absolute;
width: 100%;
background-color: white;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #ccc;
border-radius: 5px;
max-height: 180px; /* Slightly reduced height */
overflow-y: auto;
padding: 10px;
z-index: 1000;
}

  
/* Show Dropdown When Button Clicked */
.single-dropdown.active .dropdown-content,
.multi-dropdown.active .dropdown-content {
display: block;
}

/* Option Styling (Same Look as Multi-Select) */
.dropdown-content label {
display: flex;
align-items: center;
gap: 10px;
padding: 8px;
font-size: 14px;
cursor: pointer;
transition: background 0.2s ease-in-out;
border-radius: 5px;
}

/* Hover Effect for Options */
.dropdown-content label:hover {
background-color: #f0f0f0;
}

/* Scrollbar Customization */
.dropdown-content::-webkit-scrollbar {
width: 6px;
}

.dropdown-content::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 10px;
}

.dropdown-content::-webkit-scrollbar-thumb:hover {
background-color: #999;
}
.dark-mode .dropdown-content::-webkit-scrollbar-thumb {
background-color: #666;
}

.dropdown-content input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: #007bff;
cursor: pointer;
margin: 0; /* Removes unwanted margin */
vertical-align: middle;
}

input[name="cost_weight"],
input[name="safety_weight"],
input[name="trl_weight"],
input[name="co2_weight"],
input[name="acceptance_weight"] {
  color: black !important;
}

/* Apply Button */
.apply-button {
padding: 10px 40px;
font-size: 16px;
border: none;
cursor: pointer;
background-color: #1e6091;
width: 300px;
color: white;
border-radius: 5px;
transition: background 0.3s;
}

.apply-button:hover {
background-color: #0056b3;
}

/* === Responsive Sliding Mobile Menu === */
.menu-toggle {
    font-size: 30px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    display: none; /* Hidden on desktop */
  }
  
  .mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 250px;
    height: 100%;
    background-color: #13253b;
    transition: 0.3s ease-in-out;
    z-index: 9999;
    overflow-y: auto;
    padding: 20px;
  }
  
  .mobile-menu.open {
    left: 0;
  }
  
  .close-button {
    background: none;
    border: 2px solid #00FF00;
    color: white;
    font-size: 24px;
    padding: 5px;
    cursor: pointer;
    float: right;
  }
  
  .mobile-menu-content {
    margin-top: 50px;
  }
  
  .mobile-menu-content img {
    display: block;
    margin: 0 auto 20px auto;
  }
  
  .mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .mobile-nav-links a {
    color: white;
    text-decoration: none;
    font-size: 18px;
  }
  
  /* Show menu toggle on small screens */
  @media (max-width: 768px) {
    .menu-toggle {
      display: block;
    }
  
    .navbar-left,
    .navbar-right {
      display: none;
    }
  
    .navbar-center {
      width: 100%;
      justify-content: flex-start;
    }
  }
  

  /* === NAVBAR LAYOUT === */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    padding: 10px 20px;
    background-color: #13253b;
  }
  
  .navbar-left,
  .navbar-center,
  .navbar-right {
    display: flex;
    align-items: center;
  }
  
  .navbar-center {
    flex-direction: row;
    gap: 20px;
  }
  
  .nav-links {
    display: flex;
    gap: 15px;
  }
  
  .nav-links a {
    color: white;
    text-decoration: none;
  }
  
  .header-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .partner-logo {
    height: 40px;
    padding-right: 20px;
    max-width: 100%;
  }
  
  /* === MOBILE BEHAVIOR === */
  .menu-toggle {
    font-size: 26px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    display: none;
  }
  
  @media (max-width: 768px) {
    .navbar-center {
      display: none;
    }
  
    .menu-toggle {
      display: block;
    }
  
    .partner-logo {
      display: none;
    }
  }
  
  /* === MOBILE MENU === */
  .mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 250px;
    height: 100%;
    background-color: #13253b;
    transition: 0.3s;
    z-index: 1000;
    padding: 20px;
  }
  
  .mobile-menu.open {
    left: 0;
  }
  
  .mobile-menu-content {
    margin-top: 50px;
  }
  
  .mobile-menu-content img {
    display: block;
    margin: 0 auto 20px auto;
  }
  
  .mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .mobile-nav-links a {
    color: white;
    text-decoration: none;
  }
  
  .close-button {
    background: none;
    border: 2px solid #00FF00;
    color: white;
    font-size: 24px;
    padding: 5px;
    cursor: pointer;
    float: right;
  }
  
/* Zebra striping for better row readability */
table tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* light gray */
  }
  
  table tbody tr:nth-child(odd) {
    background-color: #ffffff; /* white */
  }

  /* ✅ Reduce Combine column width */
th#Combine,
td.combine-cell {
  width: 60px;          /* Adjust as needed */
  max-width: 60px;
}

/* ✅ Reduce Delete column width */
th#Delete,
td.delete-cell {
  width: 45px;          /* Adjust as needed */
  max-width: 45px;
  text-align: center;   /* Keep the trash icon centered */
}


    /* Style inputs only in non-description columns */
    table td:not(:first-child) input[type="number"] {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 6px 8px;
        font-size: 14px;
        outline: none;
        background-color: #fff;
        text-align: center;        /* already there – keep */
  line-height: normal;       /* reset just in case */
  height: 36px;              /* ensure consistent height */
  display: flex;             /* add flexbox */
  align-items: center;       /* center vertically */
  justify-content: center;   /* center horizontally */
      }

      table td:not(:first-child) input[type="checkbox"] {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 6px 8px;
        font-size: 10px;
        outline: none;
        background-color: #fff;
        color: black  !important;
        text-align: center;        /* already there – keep */
  line-height: normal;       /* reset just in case */
  height: 28px;              /* ensure consistent height */
  display: flex;             /* add flexbox */
  align-items: center;       /* center vertically */
  justify-content: center;   /* center horizontally */
      }

      table td:not(:first-child) input[type="button"] {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 6px 8px;
        font-size: 10px;
        outline: none;
        background-color: #fff;
        color: black  !important;
        text-align: center;        /* already there – keep */
  line-height: normal;       /* reset just in case */
  height: 28px;              /* ensure consistent height */
  display: flex;             /* add flexbox */
  align-items: center;       /* center vertically */
  justify-content: center;   /* center horizontally */
      }


  /* Make description column stand out */
td:first-child input[name="description[]"] {
    background-color: transparent;
    font-weight: 500;
    font-size: 15px;
    color: #000; /* black text for readability */
    border: none;
    outline: none;
    box-shadow: none;
    text-align: left;
    padding-left: 5px;
   font-family: Arial, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern system font */ pointer-events: none; /* disables editing while keeping it selectable */
    width:100%;
    max-width: 250px;     /* Adjust width as needed */
    min-width: 250px;
    white-space: normal;  /* Allow text wrapping */
    word-wrap: break-word;
  }
  table td {
    vertical-align:middle;
    padding:10px;
    font-size:15px;
  }
  #mainTable tbody tr:hover td:first-child {
    background-color: #e0f0ff;
    color: #000000; /* ✅ Make description text black */
  }

  .dark-mode #mainTable tbody tr:hover td:first-child {
  background-color: #2d3e50; /* darker blue/gray for dark mode */
  color: #ffffff; /* white text */
}
  
  #mainTable tbody tr:hover td:first-child input[name="description[]"] {
    color: #000000; /* ✅ Force input text to black */
  }
  .main-table-container {
    width: 100%;
  max-width: 1700px;
  margin: 0 auto;
  overflow-x: auto;
  border-radius: 10px;
  }
  .main-table-container table {
    width: 100%;
    min-width: 1000px; /* force scroll on small screens */
    table-layout: fixed;
    border-collapse: collapse;
  }
  
  .main-table-container table th:first-child,
.main-table-container table td:first-child {
  width: 180px; /* wider for description */
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
   resize: none;          /* ✅ Prevent resizing */
  align-self: center;    /* ✅ Vertical center inside flex */

}

.main-table-container table th:not(:first-child),
.main-table-container table td:not(:first-child) {
  width: 75px; /* or adjust to what fits best */
  text-align: center;
}

  table th {
    font-weight: normal;
    vertical-align: middle !important;
    text-align: center;
    padding: 6px 4px;    /* less vertical and horizontal space */
    }


  /* Force dark-mode table inputs to stay light and readable */
.dark-mode table input[type="text"] {
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #888;
  }
  
  /* Make the description column stand out in dark mode */
  .dark-mode td:first-child input[name="description[]"] {
    background-color: transparent;
    font-weight: 500;
    font-size: 15px;
    border: none;
    outline: none;
    box-shadow: none;
    pointer-events: none;
    padding-left: 5px;
  }

  .weight-value-container {
  position: relative;
  display: inline-block;
}


/* Dark mode weight container */
body.dark-mode .weight-value-container {
  background-color: #3a3a3a;
  border: 1px solid #555;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  padding: 2px 4px;
  margin-top: 6px;
  height: 36px; /* ✅ Match slider thumb area */
  box-sizing: border-box;
}

/* Dark mode number input */
body.dark-mode .weight-input {
  background-color: #3a3a3a;
  color: #fff;
  border: none;
  width: 55px;
  height: 100%;
  text-align: center;
  outline: none;
  font-size: 14px;
}

/* Dark mode percent sign */
body.dark-mode .percent-sign {
  color: #fff;
  margin-left: 3px;
}

/* Slider thumb styling */
body.dark-mode .weight-slider::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  background: #90caf9;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid #333;
}

body.dark-mode .weight-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #90caf9;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid #333;
}

/* Dark mode slider track */
body.dark-mode #weightsTable .weight-slider {
  background-color: #555 !important; /* Dark track */
  height: 6px;
  border-radius: 3px;
}

/* Adjust slider thumb alignment */
body.dark-mode #weightsTable .weight-slider::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  background: #90caf9;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid #333;
  margin-top: -4px; /* ✅ Lifts the circle to center */
}

body.dark-mode #weightsTable .weight-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #90caf9;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid #333;
}

/* Track styling */
body.dark-mode #weightsTable .weight-slider::-webkit-slider-runnable-track {
  background-color: #555;
  height: 6px;
  border-radius: 3px;
}

body.dark-mode #weightsTable .weight-slider::-moz-range-track {
  background-color: #555;
  height: 6px;
  border-radius: 3px;
}



/* ✅ Remove white box around spinners */
body.dark-mode .weight-input::-webkit-inner-spin-button,
body.dark-mode .weight-input::-webkit-outer-spin-button {
  background: #3a3a3a;
  border-radius: 3px;
}


.weight-input {
  width: 1000px;
  padding-right: 16px;  /* Space for the % */
  text-align: right;
  border: none;
  background: transparent;
  font-size: 14px;
  outline: none;
}

.percent-sign {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #444;
  font-size: 14px;
}

.weight-input {
  direction: rtl;              /* Flip so spinners go left */
  text-align: center;            /* Keep numbers visually natural */
  padding-left: 18px;          /* Space for spinners on left */
  padding-right: 4px;
  width: 50px;
  height: 36px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
  background-color: white;
  appearance: auto !important;  /* Ensure default spinner shows */
}

/* Keep spinner buttons visible (mostly default behavior) */
.weight-input::-webkit-inner-spin-button,
.weight-input::-webkit-outer-spin-button {
  opacity: 1 !important;         /* Force visible */
  display: inline !important;    /* Prevent hiding */
  pointer-events: all;
}


/* Style inputs inside weights table */
#weightsTable input[type="text"],
#weightsTable input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid gray;
  border-radius: 5px;
  padding: 6px 8px;
  font-size: 14px;
  background-color: #fff;
  outline: none;
}

/* Zebra striping */
#weightsTable tr:nth-child(even) {
  background-color: #f9f9f9;
}
#weightsTable tr:nth-child(odd) {
  background-color: #ffffff;
}

/* Cell and header sizing */
#weightsTable th,
#weightsTable td {
  width: 20%; /* 5 equal columns */
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  border-right: 1px solid #ccc;
}

/* Remove right border from last column */
#weightsTable th:last-child,
#weightsTable td:last-child {
  border-right: none;
}

/* Optional: ensure border-collapse behavior */
#weightsTable {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}


/* Base style */
.reset-button,
.default-button,
.combine-button {
  width: 200px;        /* same width */
  height: 50px;        /* same height */
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}


.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    padding: 2rem;
  }
  canvas {
    background: #fff;
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 0 12px rgba(0,0,0,0.1);
  }
  
.dark-mode canvas {
  background: #2c2c2c;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.05);
}

  .chart-card:hover {
    transform: scale(1.02);
  }
  
  /* Light Mode */
.chart-title, .chart-card h3 {
  color: #000;
}

/* Dark Mode */
.dark-mode .chart-title,
.dark-mode .chart-card h3 {
  color: #fff;
}

  
.chart-dashboard {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem;
  width: 100%;
  box-sizing: border-box;
}

.chart-card {
  flex: 1 1 30%;  /* Take up ~30% of the row, shrink if needed */
  max-width: 600px;
  min-width: 280px;
  height: 600px;
  background-color: #fff;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.chart-card canvas {
  width: 100% !important;
  height: auto !important;
}


  .chart-container {
    width: 100%;
    max-width: 1000px;
    height: 400px;
    margin: 40px auto;
    padding: 20px;
    background-color: transparent; /* ✅ Make it blend into the body */
    border-radius: 16px;
  }

  .chart-title {
font-family:  sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  margin-bottom: 16px;
  text-align: center;
  color: #003366;
   margin-top: 12px;          /* 👈 adds space above */
  letter-spacing: 0.5px;
  text-transform: capitalize;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  }

  /* Dark Mode */
.dark-mode .chart-card {
  background-color: #2c2c2c;
  color: #fff;
  box-shadow: 0px 2px 8px rgba(255, 255, 255, 0.05);
}

.dark-mode .chart-title {
  color: #fff;
}
  
  
/* Remove spinner arrows globally */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Re-enable spinner arrows only inside the weights table */
#weightsTable input[type="number"]::-webkit-inner-spin-button,
#weightsTable input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: auto;
  margin: initial;
}

/* Fix white background in dark mode */
body.dark-mode #weightsTable .weight-input {
  background-color: #3a3a3a !important;
  color: #fff !important;
  border: 1px solid #555;
  border: none !important;   /* 🔑 Removes the inner border */
  height: 36px;
  text-align: center;
  font-size: 14px;
  box-sizing: border-box;
}

body.dark-mode #weightsTable .weight-value-container {
  background-color: #3a3a3a !important;
  border: 1px solid #555;
}



  @media (min-width: 1024px) and (max-width: 1640px) {
    .main-table-container {
      max-width: 95%;
    }
  
    table {
      font-size: 14px;
    }
  
    table th,
    table td {
      padding: 6px 8px;
    }
  
    .main-table-container table th:first-child,
    .main-table-container table td:first-child {
      width: 200px;
    }
  
    .main-table-container table th:not(:first-child),
    .main-table-container table td:not(:first-child) {
      width: 60px;
    }
  
    table td input[type="number"],
    table td input[type="text"], table td input[type="checkbox"] {
      font-size: 13px;
      padding: 5px 6px;
      height: 32px;
    }
  
    .reset-button,
    .apply-button {
      font-size: 14px;
      padding: 10px 25px;
    }
  }

  
  .description-cell {
    border: none;
    resize: none;
    width: 100%;
    background-color: transparent;
    font-size: 15px;
    font-weight: 500;
    font-family: Arial, sans-serif;
    color: #000;
    pointer-events: none;
    overflow: hidden;
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.4;
    padding: 0 5px;
    box-sizing: border-box;
    height: auto;
    min-height: 40px;
     resize: none;          /* ✅ Prevent resizing */
  align-self: center;    /* ✅ Vertical center inside flex */

  }
  .dark-mode .description-cell {
    color: white;
  }

  .selection-message {
    text-align: left;
    text-decoration: none;
    font-size: 14px;
    margin: 10px auto;
    color: #000000;
  }

  .dark-mode .selection-message {
    color: #fff;
  }
  
  .selection-summary {
    text-align: left;
    font-size: 1.0rem;
    line-height: 1.6;
    margin-top: 1rem;
  }
  
  .selection-summary ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    display: inline-block;
    text-align: left;
    margin: 0 auto 1rem;
  }
  
  .selection-summary li {
    margin: 0.2rem 0;
  }
  
  .selection-summary .highlight {
    color: #0077cc;
    /* font-weight removed */
  }

  .delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #9e2a2b;
    font-size: 1.5rem;
    transition: color 0.2s ease;
  }
  .delete-btn:hover {
    color: #a50e1a;
  }
  
  .dark-mode .delete-btn {
  color: #ff4d4f; /* brighter red for visibility */
}

.dark-mode .delete-btn:hover {
  color: #ff6668; /* even brighter on hover */
}
  
/* Center specific headers */
th#Description,
th#Combine,
th#Delete {
  text-align: center;
  vertical-align: middle;
}

/* Optionally center the cells under them too */
td.description-cell,
td.combine-cell,
td.delete-cell {
  text-align: center;
  vertical-align: middle;
}

th#Delete,
td.delete-cell {
  width: 62px; /* Adjust as needed */
  text-align: center;
  vertical-align: middle;
}

.filter-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}


.input-wrapper {
  display: flex;
  flex-direction: column;
  width: calc((100% - 90px) / 4); /* 👈 3 gaps of 30px between 4 items */
  min-width: 0;
}


.input-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom:10px;
}

.input-row .input-wrapper {
  flex: 1 1 250px;
  max-width: 300px;
}

/* Reduce vertical gap between inputs and dropdown row */
.input-row {
  margin-bottom: 20px; /* Reduce from larger default to tighten spacing */
}

.button-group {
  margin-top: 0; /* Remove extra top margin */
}

.weight-slider {
  width: 100%;
  margin: 5px 0;
}

.weight-label {
  text-align: center;
  font-weight: 500;
  font-size: 14px;
  color: #333;
  margin-top: 4px;
}


.dark-mode.weight-label{
  color: white;
}
/* Fix dropdown row alignment */
.dropdown-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Center horizontally */
  gap: 20px;
  width: 100%;
  margin: 0 auto; /* Center block container if needed */
}

.weight-total-msg {
  font-weight: bold;
  margin-top: 10px;
  font-size: 16px;
  transition: color 0.2s ease;
}

.weight-total-msg.valid {
  color: #28a745; /* green */
}

.weight-total-msg.invalid {
  color: #dc3545; /* red */
}
.table-container {
      display: flex;
      flex-direction: column;
      width: 90%; /* Responsive width */
      margin: 0 auto; /* Centers everything */
    }

    .result-table {
      width: 100%;
    }

    .excluded-wrapper {
      display: flex;
      flex-direction: column;
      align-items: flex-end; /* Aligns right with table */
      margin-top: 12px;
      width: 100%;
    }

    .alert-btn {
      background-color: #fdecea;
      color: #d93025;
      border: 1px solid #f5c2c0;
      padding: 10px 16px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      font-family: "Inter", sans-serif;
      transition: background-color 0.3s ease;
    }

    .alert-btn:hover {
      background-color: #f9d3d1;
    }

    .alert-card {
      margin-top: 8px;
      background-color: #fdecea;
      border-left: 5px solid #d93025;
      padding: 12px 16px;
      border-radius: 8px;
      color: #5f2120;
      font-family: "Inter", sans-serif;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      display: inline-block;
      width: auto; /* Auto width based on content */
      max-width: 100%;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.4s ease, opacity 0.4s ease;
    }

    .alert-card.show {
      max-height: 1000px;
      opacity: 1;
    }

    .alert-card ul {
      margin: 0;
      padding-left: 20px;
      font-size: 14px;
      list-style-type: square;
    }

    .alert-reason {
      display: block;
      margin-top: 8px;
      font-size: 15px;
      font-weight: 600;
      color: #b02a2a;
    }
/* Shared container width */
.input-row,
.horizontal-fields {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  width: 100%;
  max-width: 950px;
  margin: 20px auto 0;
  box-sizing: border-box;
}

.input-row > div {
  flex: 1 1 0;
}

.horizontal-fields > .input-wrapper {
  flex: 1 1 calc(25% - 30px); /* Four equal columns with gaps */
  min-width: 0;
  box-sizing: border-box;
}

/* Input fields spacing & alignment */
.horizontal-fields .input-wrapper {
  min-width: 0;
}


.input-wrapper label {
 font-family: Arial, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern system font */
  font-weight: 400;               /* Semi-bold */
  font-size: 15px;               /* Good readable size */
  white-space: nowrap;      /* ✅ Prevent line breaks */
  color: black;                /* Deep dark blue for strong contrast */
  margin-bottom: 5px;
  display: block;
  text-align: center;
  letter-spacing: 0.3px;        /* Tiny spacing for elegance */
}


.input-wrapper input {
  width: 100%;
  padding: 8px 10px;
  height: 100%;             /* ✅ Fill container height */
  min-height: 35px;         /* ✅ Ensures minimum click area */
  border: 1px solid #ccc;
  border-radius: 5px;
  transition: border-color 0.3s, box-shadow 0.3s;
  box-sizing: border-box;
}

.input-wrapper input:focus {
  border-color: #1e6091;
  box-shadow: 0 0 5px green;
  outline: none;
}


.info-icon {
  position: relative;
  display: inline-block;
}


.custom-tooltip {
  display: none;
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  width: 300px;
  text-align: center;
  white-space: none; /* ✅ Multi-line support */
  line-height: 1.4;
  font-size: 13px;
  z-index: 1000;
}


.info-icon:hover .custom-tooltip {
  display: block;
}

/* Tooltip bubble appears below instead of above */
.info-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%; /* place it below the element */
  left: 50%;
  transform: translateX(-50%);
  margin-top: 6px; /* space between element and tooltip */
  background-color: #333;
  color: #fff;
  padding: 6px 8px;
  border-radius: 5px;
  font-size: 14px;
max-width: 350px;           /* ✅ Tooltip won't exceed this width */
  width: max-content;         /* ✅ Auto-width to fit text */
  min-width: 120px;           /* ✅ Small tooltips don't get too tiny */
  text-align: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;      /* ✅ Limit to 2 lines */
  overflow: hidden;
  white-space: normal;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 9999;
}

.info-icon:hover::after {
  opacity: 1;
}


body.dark-mode .input-wrapper label {
  color: white;
}

body.dark-mode .input-wrapper input {
  background-color: #222; /* Dark background for inputs */
  color: white;           /* White text inside inputs */
  border: 1px solid #555; /* Softer border color */
  box-sizing: border-box; /* ✅ Ensure padding & border included in width */
  min-width:100%;
  height:100%;
  min-height: 35px;
}

body.dark-mode .input-wrapper input:focus {
  border-color: #90caf9;
  box-shadow: 0 0 5px #90caf9;
}

body.dark-mode .info-icon::after {
  background-color: #555; /* Slightly lighter for better contrast */
  color: white;
}

.csv-upload-wrapper {
  text-align: center;
  margin: 30px 0;
}

.upload-label {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 10px;
}

.csv-dropzone {
  position: relative;
  border: 2px dashed #ccc;
  border-radius: 10px;
  padding: 25px;
  background-color: #f9f9f9;
  margin: 0 auto 20px;
  max-width: 400px;
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.csv-dropzone:hover {
  border-color: #888;
  background-color: #f2f2f2;
}

.csv-dropzone input[type="file"] {
  display: none;
}

#csvLabel {
  font-size: 16px;
  color: #444;
  display: block;
}

.upload-button {
  background-color: #28a745;
  color: white;
  font-size: 16px;
  padding: 12px 30px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.upload-button:hover {
  background-color: #218838;
}

:root {
  --text: #1a1a1a;
  --panel-bg: #f9f9f9;
  --border: #ccc;
  --accent: #2a9d8f;
  --accent-hover: #21867a; /* slightly darker */
}

body.dark-mode {
  --bg: #2b2b2b;
  --text: #f1f1f1;
  --panel-bg: #1e1e1e;
  --border: #333;
  --accent: #2fb9a8;
  --accent-hover: #21867a; /* slightly darker */
}

body {
  background-color: var(--bg);
  color: var(--text);
  transition: background 0.3s, color 0.3s;
}

.data-selection-section {
  max-width: 1100px;
  margin: 40px auto;
  padding: 20px;
  background: var(--panel-bg);
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.data-selection-box {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.selection-option {
  flex: 1 1 480px;
  background-color: var(--bg);
  padding: 25px;
  border: 2px dashed var(--border);
  border-radius: 10px;
  min-height: 320px;
  box-sizing: border-box;
  transition: background 0.3s, border 0.3s;
  margin-bottom: 20px; /* or any small spacing you prefer */
}

.selection-option h3 {
  margin-bottom: 18px;
  color: var(--text);
}

.button-group {
  display: flex;
  flex-direction: column;
}

.apply-button-container,
.csv-upload-wrapper {
  margin-top: 20px;
}

.csv-dropzone {
  position: relative;
  border: 2px dashed var(--border);
  padding: 20px;
  border-radius: 8px;
  background-color: var(--panel-bg);
  width: 100%;
  margin-bottom: 20px;
  transition: background 0.3s;
}

.csv-dropzone input[type="file"] {
  opacity: 0;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

#csvLabel {
  font-size: 14px;
  color: var(--text);
}

.action-button {
  background-color: var(--accent);
  width: 300px;
  color: white;
  padding: 12px 30px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  min-width: 200px;
  transition: background 0.3s;
  margin-top: 20px;
}

.action-button:hover {
   background-color: var(--accent-hover);
   color: white;
}

/* Style blue headings for option titles */
.option-title {
  color: green; /* Deep blue for visibility */
  text-decoration: none;
  font-size: 1em; /* Between default h4 (1.5em) and h5 (1em) */
}

/* Dark mode override */
.dark-mode .option-title {
  color: #b5e48c; /* Bright blue in dark mode */
  text-decoration: none;
  font-size: 1em; /* Between default h4 (1.5em) and h5 (1em) */
  }

  /* Match top buttons row exactly */
.main-action-buttons.shared-width,
#combinedSolutionsWrapper,
#combinedSolutionsWrapper .combined-solution-box,
.button-container.main-action-buttons.shared-width button.submit-button {
    width: 700px !important;    /* Set this to match your top button row */
    min-width: 700px !important;
    max-width: 700px !important;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.close-combined-icon {
 position: absolute;
  top: 8px;
  right: 12px;
  cursor: pointer;
  font-weight: bold;
  font-size: 22px;
  color: #a00;
  transition: color 0.2s ease;
}

.close-combined-icon:hover {
  color: #d9363e;
}

.combined-solution-box {
  position: relative; /* Needed for absolute positioning */
}