/*This file to define containers' and boxes' shapes, fonts, and colors*/

/* make everything same font */
html,
body,
button,
input,
select,
textarea {
  font-family: "Roboto", Arial, sans-serif;
}

/*media query for smaller screens*/
@media (max-width: 360px) {
  .box {
    flex: 1 1 100%; /* Adjust width for smaller screens */
    max-width: 100%; /* Remove max-width for smaller screens */
  }
}

.container {
  /* Container box behind guages and graph */
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 10px;
  width: 98%;
  margin: 0 auto;
  box-sizing: border-box;
  flex-grow: 1;
  overflow: auto;
  position: relative;
  top: 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* add shadow to the container */
  border: 2px solid #ccc; /* add border to the container */
  border-radius: 12px; /* add rounded corners to the border */
  background: #ededed;
  margin-bottom: 4px;
}

.box {
  /* Container behind the guages */
  flex: 1 1 calc(50% - 20px); /* adjust the width of each box as needed */
  margin: 10px;
  text-align: center;
  min-width: 185px;
  max-width: 265px; /* set a maximum width to prevent excessive stretching */
  width: calc(50% - 20px); /* adjust the width for different screen sizes */
  padding-bottom: 4px;
  height: auto;
  background: transparent;
}

.boxT {
  /* Text box at bottom of dahboard */
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 10px;
  width: 98%;
  margin: 0 auto;
  box-sizing: border-box;
  flex-grow: 1;
  overflow: auto;
  position: relative;
  top: 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow to the container */
  border: 2px solid #ccc; /* Add border to the container */
  border-radius: 12px;
  margin-bottom: 15px;
  background: #007ab8;
}

#timeSeriesContainer {
  width: 100%;
  height: 100%;
  max-width: 100%;
  margin: auto;
  display: block;
  border-radius: 6px;
}

/* Container for both date range selector and time series chart */
#chartContainer {
  width: 99%;
  height: 100%;
  max-width: 100%;
  margin: auto;
  position: relative;
  background-color: transparent;
  padding: 0;
  overflow: visible;
}

.dateRangeSelector {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* boxes wrap onto new line */
  position: absolute;
  max-width: 95%;
  margin-top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  padding: 6px 10px;
  border-radius: 8px;
  gap: 4px;
}

/* only for date range selector to fit in screen */
@media (max-width: 600px) {
  .dateRangeSelector {
    width: 95%;
    gap: 4px;
    transform: translateX(-50%) scale(0.75);
    margin-top: 0;
  }
}

.date-label {
  /* Style for "Select Data Range" */
  font-weight: 300; /* Change boldness */
  font-size: 14px; /* Change size */
  margin-right: 6px;
  font-weight: bold;
  color: #2d2926;
  white-space: nowrap;
}

.dateRangeSelector label.start-date {
  margin-right: 30px;
}
.dateRangeSelector label.end-date {
  margin-left: 20px; /* Add space between "End Date" label and input box */
}
.dateRangeSelector input[type="date"] {
  margin-right: 15px; /* Add space between the end date input and the update button */
}

.date-picker {
  padding: 4px;
}

.highcharts-reset-zoom {
  display: none !important; /* hide built in time series reset zoom button */
}

.reset-zoom {
  margin-left: 10px;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px solid;
  transition: transform 0.1s;
}

.reset-zoom:active {
  transform: translateY(1px);
}

#updateChart {
  margin-left: 10px;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px solid;
  transition: transform 0.1s;
}

#updateChart:disabled {
  cursor: default;
}

#updateChart:active {
  transform: translateY(1px);
}

/* Reset button styling */
.reset-date {
  margin-left: 10px;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px solid;
  transition: transform 0.1s;
}

.reset-date:active {
  transform: translateY(1px);
}

.header {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* columns expand equally */
  width: 97%;
  margin: 0 auto;
  align-items: baseline; /* columns stay on same level */
}

/* styling for last updated container / label (JSON data) */

.lastUpdatedContainer {
  grid-column: 1; /* keep on the left */
  grid-row: 1; /* keep aligned with header title */
  justify-self: start;
  font-size: clamp(11px, 1.8vw, 14px); /* size changes with screen size */
  color: #444;
  white-space: nowrap;
}

.lastUpdatedLabel {
  font-weight: 600;
  margin-right: 6px;
  color: #001489;
}

/* end of styling for last updated container / label (JSON data) */

svg {
  width: 100%;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  margin: auto;
  display: block;
}

body {
  overflow: auto;
  margin: 0;
  padding: 0;
}

h1 {
  /* Header title */
  grid-column: 2; /* have title in middle column */
  grid-row: 1; /* keep aligned with last updated container */
  font-weight: 1000; /* Change the boldness */
  font-size: clamp(18px, 4vw, 32px); /* size changes with screen view width */
  color: #001489; /* Change text color */
  text-align: center;
  letter-spacing: 0.3px;
  margin: 0;
}

h2 {
  /* Style for dial's labels */
  font-weight: 500; /* Change boldness */
  font-size: clamp(14px, 1.8vw, 20px); /* size changes with screen view width */
  color: #007ab8; /* Change text color */
  margin: 0;
  margin-top: -15px;
}

h3 {
  font-size: 16px; /* Change font size */
  color: #ffffff; /* Change text color */
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px; /* Space below the heading */
  text-align: justify;
}

h4 {
  font-size: 40px; /* Change font size */
  color: #ffffff; /* Change text color */
  margin-bottom: 10px; /* Space below the heading */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
  text-align: center;
  margin-top: 10px;
}

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  padding-top: 70px;

  position: relative; /* important */

  background-color: #ededed;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 20px auto;
}

.grid-item {
  background-color: #007ab8;
  border: 1px solid #ddd; /* Thin border */
  border-radius: 12px; /* Rounded corners */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  padding: 15px; /* Inner padding for content */
  text-align: center; /* Center-align text */
  font-weight: 300; /* Change boldness */
  box-sizing: border-box; /* Include padding in width/height */
  color: #ffffff; /*text color*/
  min-height: clamp(80px, 10vw, 90px);
}

.dashboard-dropdown {
  position: absolute;
  top: 20px;
  right: 20px;
}

.grid-item .value {
  font-weight: bold;
  color: #ffffff;
  font-size: 18px;
  margin-top: 4px;
}
.value {
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
}

/* On screens <= 900px, collapse the column header layout
   into a single-column stack (title on top, timestamp below). */
@media (max-width: 900px) {
  /* Switch header grid from multi-column to single-column */
  .header {
    grid-template-columns: 1fr;
    text-align: center; /* Ensures consistent centering when stacked */
  }

  /* Move timestamp below title and center it */
  .lastUpdatedContainer {
    grid-column: 1;
    grid-row: 2; /* Explicitly place below the title */
    justify-self: center;
  }

  /* Keep title on top when stacked */
  h1 {
    grid-column: 1;
    grid-row: 1; /* Ensure title stays first */
    justify-self: center;
  }
}