@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

/* Global box-sizing */
*, *::before, *::after {
  box-sizing: border-box;
}

/* General Styles */
h1, h2, h3, p, input, label, span, button, div {
  font-family: "Oswald", serif;
}

h1 {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 1.6rem;
}


h2 {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 1.2rem;
}

p, input, label, span, h3 {
  font-size: 1rem;
}

body {
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow-x: hidden;
}

img {
  display: none;
}

a {
  color: #0056b3;
}

.container {
  width: 100%;
  max-width: 1200px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  margin: 0 auto;
}

/* Row 1: Three Equal Columns */
.row {
  display: flex;
  width: 100%;
}

.three-col-container > .box {
  flex: 1;
  margin: 15px;
  min-width: 300px; /* Ensures minimum readable width */
  box-sizing: border-box;
}

/* Row 2: Left (1/3) and Right (2/3) */
.row-two {
  display: flex;
  width: 100%;
}

.row-two .left-col {
  width: 33.33%;
  margin: 10px;
}

.row-two .right-col {
  width: 66.66%;
  margin: 10px;
}

/* Box Styling */
.box {
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

/* Headings */
h2 {
  border-bottom: 2px solid #333;
  padding-bottom: 5px;
}

/* Input Styling */
.input-group {
  margin-bottom: 10px;
}

.input-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 3px;
}

.input-group input {
  width: 100%;
  max-width: 200px;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Chart Styling */
.chart-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  /* Force a fixed height so the chart is tall enough to be readable */
  height: 400px !important; 
  overflow: hidden !important;
}
.chart-container canvas {
  width: 100% !important;
  height: 100% !important; /* Fill the container's fixed height */
  display: block;
}

/* Button Styling */
button {
  background-color: rgb(0, 125, 0);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button.pump {
  /* 1s per cycle, infinite until removed */
  animation: pump 1s ease-in-out infinite;
}

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

/* PDF Button Container */
.pdf-button-container {
  width: 100%;
  text-align: center;
  margin-top: 20px;
}

/* Toggle Switch Styles (iOS-style) */
.toggle-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin-right: 10px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

.switch input:checked + .slider {
  background-color: #007BFF;
}

.switch input:checked + .slider:before {
  transform: translateX(26px);
}
input:disabled {
  background-color: #e0e0e0 !important;
  color: #888 !important;
  cursor: not-allowed;
}
/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 400px;
  text-align: center;
  border-radius: 8px;
}

.modal-row {
  margin: 10px 0;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #000;
}

/* Mobile View */
@media (max-width: 1024px) {
  .row, .row-two {
    flex-direction: column;
    align-items: center;
  }
  .three-col-container > .box,
  .row-two .left-col,
  .row-two .right-col {
    width: 100%;
    margin: 10px 0;
  }
}


@media print {

  /* Allow small logos/images */
  img {
    display: inherit !important;
    height: 30px !important;
  }

  /* White background */
  body, .container {
    background-color: #ffffff !important;
  }

  /* Hide unnecessary elements */
  button, .pdf-button-container, .modal, .toggle-co2-container {
    display: none !important;
  }

  /* Remove background & shadow from boxes */
  .box {
    background-color: transparent !important;
    box-shadow: none !important;
  }

  /* Force A4 landscape layout with minimal margins */
  @page {
    size: A4 landscape;
    margin: 5mm;
  }

  /* Let the container flow naturally */
  .container {
    width: 100%;
    overflow: visible;
  }

  /* Ensure rows display properly */
  .row {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  /* Keep the first row (three-col-container) together */
  .three-col-container {
    display: flex;
    width: 100%;
    page-break-inside: avoid; /* Prevent splitting this row */
  }

  /* For the second row, we want to stack its two parts vertically.
     We'll force the left part (“EROTUS”) to remain with the top content,
     and force the right part (the chart) to start on a new page. */
  .row-two {
    display: block !important;
    width: 100% !important;
    margin: 2px;
  }
  
  /* The left-col (EROTUS) should be kept together and appear immediately after row one */
  .row-two .left-col {
    display: block !important;
    width: 100% !important;
    margin: 2px;
    page-break-inside: avoid; /* Try to keep the Erotus content on one page */
  }
  
  /* The right-col (Chart) should always start on a new page */
  .row-two .right-col {
    display: block !important;
    width: 100% !important;
    margin: 2px;
    page-break-before: always !important; 
    page-break-inside: avoid;
  }
  
  /* Make the chart container fill available width and auto-scale in height */
  .chart-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    height: auto !important;
  }
  .chart-container canvas {
    width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* Slightly reduce font size for printing */
  body {
    font-size: 10px;
  }

  /* Reduce input field sizes */
  .input-group input {
    font-size: 10px;
    padding: 2px;
    max-width: 100px;
  }

  /* Minimal margins for headings and paragraphs */
  h1, h2, h3, p {
    margin: 4px 0;
  }
}

/* ✅ Loading Spinner */
.loader {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #007BFF;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 20px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pump {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}


/* ✅ Hide submit button while loading */
.loading .modal-row button {
  display: none;
}