/* static/visualizations.css */

/* General styles */
body {
  background-color: #24242B;
}

h1.text-inverse-color {
  text-align: center;
  margin-top: 0;
  margin-bottom: 5px; /* Adjusts space below the title */
}


/*  Progress spinner    */
.spinner {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 2s linear infinite;
  margin: 20px auto;
}
.hidden {
  display: none;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* Form styles */
.visualization-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 75%; /* Adjusted width */
  margin: auto; /* Center align the form */
}

.combined-selectors {
  display: flex;
  flex-wrap: wrap; /* Ensure wrapping for smaller screens */
  justify-content: space-between;
  width: 80%;
  margin-bottom: 10px; /* Space between the rows */
}

.form-group {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 5px; /* Adds space between term type selector and filter selectors */
}

.form-group:first-child, .wordset-select-group {
  margin-top: 0;
}
.form-group-2 {
  display: flex; 
  align-items: center; 
  margin-bottom: 0em; 
  align-self: stretch; 
  justify-content: center;
  margin-top: 20px;
}

.form-group label.form-label {
    font-size: 1.0em;
}
.form-checkbox {
    margin-right: 1px; /* Space between checkbox and label text */
}
.center-switch {
    display: flex;
    flex-direction: column; /* Arrange switch and label in a column */
    align-items: center; /* Center the switch and label horizontally */
    justify-content: center; /* Center vertically in relation to the form */
    margin-top: 20px;
}
.switch-label {
    margin-top: 5px; /* Space between switch and label */
    text-align: center; /* Center text under the switch */
}

.filter-group {
  display: flex;
  margin-top: 0em; /* Reduces the top margin to close the gap */
  margin-bottom: 10px;
}
.filter-group .form-control {
    width: auto; /* Allows the dropdown to expand as needed */
    min-width: 150px; /* Ensures a minimum width for aesthetics */
}

/* Input and select styles */
.wordset-form-label, .form-label {
  color: #C3BDB2;
  font-family: "Roboto Mono", mono, sans;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-right: 10px;
  padding-top: 5px;
  white-space: pre-wrap; /* Ensures label text wrapping to allow narrower label for smaller screens */
}

.wordset-form-label.stacked-label, .form-label.stacked-label {
  line-height: 1.1;
}

.wordset-form-control, .form-control {
  height: 3em;
  width: 90%;
  background-color: #BCB5A9;
  border: 1px solid #707070;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 5px; /* Rounded selector corners */
  margin-right: 10px; /* Space between elements */
}

/* Visualization container styles */
.flex-container-visualization {
  display: flex;
  justify-content: center;
  background-color: #323238;
  border: 1px solid #404040;
  border-radius: 16px;
  margin: 0 10%;
  padding: 15px 0;
}

#wordcloud-visualization img, 
#wordcloud-visualization,
#visualization img,
#visualization {
  display: flex;
  justify-content: center;
  background-color: #323238;
  border: 1px solid #404040;
  border-radius: 16px;
  margin: 15px 20%;
  height: 90%;
  width: 1000px;
  height: 800px;
}

.user-image-iframe {
  width: 800px;
  height: 600px;
}

/* Submit button styles */
.submit-button {
  font-family: "Roboto Mono", mono, sans;
  font-size: 15px;
  font-weight: 600;
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  background-color: #E5A028;
  padding: 10px;
  border: 1px solid #F0BE67;
  border-radius: 6px;
}

.submit-button.btn-primary {
    padding: 18px 25px; /* Adjust padding to reduce size */
    font-size: 1.30em; /* Adjust font size */
    line-height: 1.2em; /* Ensure text height is aligned with button size */
    height: auto; /* Allow the button to adjust height automatically */
    width: auto; /* Let the button size adjust based on content */
    min-width: 100px; /* Ensure a minimum width to prevent squashing */
    text-align: center; /* Center the text */
    align-items: center; /* Center content vertically */
    background-color: var(--button-color); /* Keep color consistent */
}

.submit-button.btn-primary:hover {
  background-color: var(--button-hover-color);
}

/* Selectors row styles */
.selectors-row {
  display: flex; 
  align-items: center; 
  margin-bottom: 0em; 
  align-self: stretch; 
  justify-content: flex-start; 
  width: 30%; /* Adjust width as needed */
  justify-content: space-between; /* Add space between the child elements */
}

.selector-group {
  display: flex; 
  flex-direction: row; /* Arranges label and select horizontally */
  padding-top: 10px;
  align-items: center;
}
.selector-group .form-control {
  width: 110px;
}


/* Download container styles */
.download-container {
  display: flex;
  align-items: column; 
  margin-top: 30px;
  margin-left: 20%;
  margin-bottom: 10%;
}

#download_link a, #csv_download_link a {
  font-family: "Roboto Mono", mono, sans;
  font-size: 13px;
  font-weight: 400;
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  background-color: #A9BC58;
  padding: 5px;
  border: 1px solid #97A84E;
  border-radius: 6px;
  margin-right: 20px;
}

input {
  appearance: none;
  position: relative;
  display: inline-block;
  background: lightgrey;
  height: 1.65rem;
  width: 2.75rem;
  vertical-align: middle;
  border-radius: 2rem;
  box-shadow: 0px 2px 3px #000 inset; /* Corrected box-shadow */
  transition: background 0.25s linear; /* Corrected transition syntax */
}

input::before {
  content: '';
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background: #fff;
  border-radius: 1.2rem;
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  box-shadow: 0px 1px 3px #000; /* Corrected box-shadow */
  transition: transform 0.25s linear; /* Corrected transition syntax */
  transform: translateX(0rem);
}

/* Additional CSS to toggle the switch */
input:checked {
  background: green; /* Change the background color when checked */
}

input:checked::before {
  transform: translateX(1.1rem); /* Move the toggle to the right when checked */
}


/*  The fancy switch adds a circle to the date inputs. This removes that. */
input[type="date"] {
    appearance: none;
    position: static;
    background: #BCB5A9; /* or whatever background color is needed */
    box-shadow: none; /* Remove inner shadow */
}

input[type="date"]::before {
    content: none; /* Removes the circle */
}

/* =================================================================================================== */

/* Responsive layout - makes a one column layout instead of a two-column layout this will need tweaking*/

@media (max-width: 768px) {
  .flex-container-visualization {
    margin: 0 5%; /* Reduces margins */
    padding: 10px 0; /* Adjusts padding */
  }

  #wordcloud-visualization img {
    width: 90%;
    margin: 10px 0; /* Reduces margins */
    height: auto; /* Maintains aspect ratio */
    height: 120%; /* Proportional aspect ratio */
  }

  #visualization {
    width: 90%;
    height: auto;
    margin: 10px 0; /* Reduces margins */
  }

  #visualization img {
    height: 40%;
  }

  #visualization iframe {
    width: 400px;
    height: 500px;
  }

  .visualization-form {
    width: 100%; /* Makes the form full width */
    margin: 0; /* Removes margin */
  }

  .form-group, .wordset-select-group, .filter-group {
    flex-direction: column; /* Stack form elements vertically */
    align-items: flex-start; /* Align items to the start */
    width: 90%;
  }

  .form-control, .wordset-form-control {
    width: 100%;
    margin-bottom: 10px; /* Adds space between elements */
    font-size: 16px; /* Larger font in selectors */
    font-weight: bold; /* Bold font in selectors */
  }

  .selector-group .form-control, 
  .filter-group .form-control {
    width: 90%; /* Adjust width */
    font-size: 18px; /* Larger font size */
    font-weight: bold; /* Bold font */
  }

  .selector-group {
    flex-direction: column; /* Stack label and select vertically */
    align-items: flex-start;
    width: 100%; /* Full width */
  }

  .center-switch {
      justify-content: center;
      align-items: center;
      margin-top: 20px;
      width: 100%; /* Ensure the switch and label container takes full width */
  }

  .form-group-2 {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%; /* Ensure the Create button container takes full width */
      margin-top: 20px; /* Adjust as necessary */
  }

  .download-container {
    margin-left: 0; /* Remove left margin */
    margin-bottom: 20px; /* Adjust bottom margin */
  }

  #download_link a, #csv_download_link a {
    display: block; /* Display as block for full width */
    margin: 10px 0; /* Add space between links */
  }

  /*  Progress spinner */
  .spinner {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 768px) {
  #wordcloud-page .spinner {
    width: 50px; /* Custom width for wordcloud.html */
    height: 190px; /* Custom height for wordcloud.html */
  }
}