/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*


*/

:root {
  --primary-color: #47637B;
  --secondary-color:#CAD0DD;
  --hover-color: #CAD0DD;
  --border-color: #CAD0DD;
  --background-color: #ffffff;
  --table-header-color: #e0e0e0;
  --odd-row-color: #EEF2FA;
  --hover-row-color: #CAD0DD;
  --text-color: #47637B;
  --contrast-bright-color: #47637B;
  --contrast-light-color: #CAD0DD;
  --white: #fff;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--primary-color);
  background-color: var(--background-color);
  padding: 50px;
}

.container {
  background-color: var(--background-color);
  padding: 30px 40px;
  border-radius: 20px;
  border: 1px solid var(--border-color);  /* Add a light grey border */
  max-width: 750px;
  margin: 0 auto 30px auto;
}

.row {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* This will create a 20px gap between the two columns */
  margin-bottom: 20px;  /* add some space between rows */
}

.col {
  flex: 1; /* Both columns will have equal width */
  margin: 0 10px 0 0;  /* add some space between columns */
}

/* Revised styles for the specific column */
#target-row .col:last-child {
  display: grid; /* Setting up grid */
  grid-template-rows: 1fr auto; /* Two rows: first row takes up available space, second row takes up content's height */
}

.time-format-buttons {
  width: 100%;
  display: flex;
  justify-content: flex-end; /* If you want the buttons to align to the right */
  align-items: flex-end; /* Push the buttons to the bottom */
  margin-bottom: 20px;
}

/* Setting the height for the buttons */
.time-format-buttons button {
  height: 46px;
  /* Other styles for these buttons, if any */
}

/* If the buttons have any padding that's causing them to appear larger,
you may need to adjust that padding. For example: */
.time-format-buttons button {
  padding: 0 12px; /* Adjusting horizontal padding while keeping height at 40px */
}


h1 {
  text-align: center;
  color: var(--primary-color);
  margin-bottom: 40px;
}

h2 {
  font-size: 18px;
  margin: 0;
}

.input-field {
  margin: 20px 0;
  font-family: 'Inter', sans-serif;
}


input#converted-time {
  border-color: var(--contrast-bright-color);
  background-color: var(--contrast-bright-color);
}

input#converted-time::placeholder {
  color: var(--white);
  font-weight: bold;
}


.input-field label {
  display: block;
  margin-bottom: 10px;
  color: #555;
}

.input-field input {
  font-family: 'Inter', sans-serif;
  box-sizing: border-box;  /* Include padding and border in the element's total width and height */
  width: 100%;             /* Take up the full width of the parent container */
  height: 46px;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  transition: border-color 0.3s ease;
}

.input-field input:focus {
  border-color: var(--primary-color);
  outline: none;
}

/* Standardize datalist dropdown appearance */
.input-field input[list] {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAApElEQVR4AWPABZwDZwAjmwEYfPiXZoCkAZ4ADwMx1GdaM2MYshlwxwCxANF5S5rjZZpqtk5gkLoBTHwEYEBXewAyPAAs5lVk0WeaZWimLoCwHDCDLoAkHwCmHbKazlMNsQAnAIIfgDyHAHZfBFkAGfuVgAx+AFLPAJN9AHk3gIyvABzLAAb/AOmmANc/AESvAOk4AO7EAEI/ALgPwH0fQHQJAHQzAF8XAEbTAFk+AMRDAHwiADZ/AM1RAHQZADHvAKrs3Z59BdE9LGoAAAAASUVORK5CYII=');
  background-repeat: no-repeat;
  background-position: right 10px center; /* positioning the dropdown arrow */
  -webkit-appearance: none; /* removing default styles for webkit browsers */
  -moz-appearance: none; /* removing default styles for Firefox */
}

datalist #source-timezones option {
  color: var(--primary-color);
}
#source-timezone-input, #source-time, #source-date, #target-timezone-input {
  color:var(--primary-color);
}

#converted-time {
  color: var(--white);
  font-weight: bold;
}

input::placeholder {
  color: var(--secondary-color);
}

button {
  display: block;
  width: 100%;
  margin: 20px 0;
  padding: 12px;
  background-color: var(--white);
  color: var(--secondary-color);
  border: none;
  cursor: pointer;
  border-radius: 4px;
  font-weight: 500;
  transition: background-color 0.3s ease;
  font-family: 'Inter', sans-serif;

}



/* Table styles */

table {
  width: 100%;
  margin-top: 40px;
  border-collapse: collapse;
}

th, td {
  border: 1px solid var(--border-color);
  padding: 8px 12px;
  text-align: center;
}

th {
  background-color: var(--secondary-color);
}

tbody tr:nth-child(even) {
  background-color: var(--odd-row-color);
}

tbody tr:hover {
  background-color: var(--hover-row-color);
}


.time-format-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.time-format-buttons button {
  flex: 1;
  margin: 0 5px;
}

.active-format {
  background-color: var(--white);
  border: 1px solid var(--contrast-bright-color);
  color: var(--contrast-bright-color);
}

.day-change-source {
  border-bottom: 2px solid var(--secondary-color);
}

.day-change-target {
  border-bottom: 2px solid var(--secondary-color);
}


#source-row {
  margin-bottom: 20px;
}

.arrow {
  margin: 20px 0;
  text-align: center;
  font-size: 20px;
}


/* Responsive styles */

@media screen and (max-width: 768px) {
  .row {
    flex-direction: column;  /* Stack columns vertically */
  }

  .col {
    margin: 0;
  }

  .input-field label, .input-field input {
    font-size: 14px;
  }

  button {
    margin: 10px 0;
    padding: 8px;
  }

  h1 {
    font-size: 24px;
    margin-bottom: 30px;
  }

  .container {
    padding: 20px;
  }

  body {
    padding: 20px;
  }
}

/* Mobile styling */
@media (max-width: 767px) {

  body {
    padding: 15px; /* adjust as needed */
  }

  .container {
    padding: 20px; /* adjust as needed */
    border-radius: 15px;
    margin-bottom: 20px;
  }

  h1 {
    font-size: 22px; /* or whatever is optimal */
  }

  h2 {
    font-size: 16px; /* or whatever is optimal */
  }

  button {
    padding: 10px; /* adjust as needed */
    margin: 10px 0; /* adjust as needed */
  }

  .input-field input {
    font-size: 14px; /* adjust as needed */
    padding: 8px; /* adjust as needed */
  }

  .input-field {
    margin: 0; /* Set to zero or any small value to reduce space */
    padding: 0; /* Adjust as needed */
  }

  .col {
    margin: 0; /* Adjust as needed */
    padding: 0; /* Adjust as needed */
  }

  /* Flatten all rows for mobile to display in desired order */
  #source-row, #target-row {
    flex-direction: column;
    margin-top: 15px;
  }

  /* Adjust columns for mobile to take full width */
  .col {
    width: 100%;
    margin: 0;
  }

  /* Adjust button width for mobile */
  .time-format-buttons button {
    width: 48%; /* Approx half width, considering a small margin */
    margin: 5px 1%; /* 1% side margins */
  }

}