/* We use CSS and SCSS to format our website that is easy on the eyes and allows both employees and managers
    to navigate the interface. Using SCSS makes it easier for us to define certain functions for
    colors and other stylizations, which then create a CSS file that is read by the HTML/Python
    application. The only file that ever needs changing is the SCSS file, and the CSS file should not be touched.
    */
/* This begins the stylization of the HTML scheduling page, in terms of font size, font type, and page layout.
   Being SCSS, we can use what we entered above as functions or defniitions that we later reuse in our code */
*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
}

body {
  background: #c1bdba;
  font-family: "Titillium Web", sans-serif;
}

a {
  text-decoration: none;
  color: #1ab188;
  transition: 0.5s ease;
}

a:hover {
  color: #179b77;
}

.form {
  background: rgba(19, 35, 47, 0.9);
  padding: 40px;
  max-width: 600px;
  margin: 40px auto;
  border-radius: 4px;
  box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}

.tab-group {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
}

.tab-group:after {
  content: "";
  display: table;
  clear: both;
}

.tab-group li a {
  display: block;
  text-decoration: none;
  padding: 15px;
  background: rgba(160, 179, 176, 0.25);
  color: #a0b3b0;
  font-size: 20px;
  float: left;
  width: 50%;
  text-align: center;
  cursor: pointer;
  transition: 0.5s ease;
}

.tab-group li a:hover {
  background: #179b77;
  color: #ffffff;
}

.tab-group .active a {
  background: #1ab188;
  color: #ffffff;
}

/* Ensure tab content is visible; original rule hid the last tab which
   became the only tab after template edits. Display all tab panes by default. */
.tab-content > div {
  display: block;
}

h1 {
  text-align: center;
  color: #ffffff;
  font-weight: 300;
  margin: 0 0 40px;
}

/* Employee name on PTO page */
.employee-name {
  color: #ffffff;
  font-weight: 600;
}

/* Ensure paragraph text inside the form is visible on dark background,
   but keep anchor links their accent color. */
.form p {
  color: #ffffff;
}

.form p a {
  color: #1ab188;
}

label {
  position: absolute;
  transform: translateY(6px);
  left: 13px;
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.25s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  pointer-events: none;
  font-size: 22px;
}

label .req {
  margin: 2px;
  color: #1ab188;
}

/* When a field is active (has focus or content), hide the label completely
   so it doesn't overlap with the input/textarea. We animate opacity for a
   smooth transition. */
label.active,
label.highlight {
  transform: translateY(-6px);
  left: 2px;
  font-size: 14px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

label.active .req,
label.highlight .req {
  opacity: 0;
}

label.highlight {
  color: #ffffff;
}

/* Input and textarea sizing: use sensible defaults and remove full-height.
   This prevents controls from expanding undesirably. */
input,
textarea {
  font-size: 16px;
  line-height: 1.4;
  display: block;
  width: 100%;
  height: auto;
  padding: 8px 10px;
  background: none;
  background-image: none;
  border: 1px solid #a0b3b0;
  color: #ffffff;
  border-radius: 2px;
  box-sizing: border-box;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

input:focus,
textarea:focus {
  outline: 0;
  border-color: #1ab188;
}

/* Fix browser autofill styling (Chrome / Safari / Firefox) which can change
   the input text color (e.g. show green text). Force white text and remove
   the yellow/green autofill background. */
input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
textarea:-webkit-autofill,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:hover {
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
  box-shadow: 0 0 0px 1000px transparent inset !important;
}

/* Firefox autofill */
input:-moz-autofill,
textarea:-moz-autofill {
  box-shadow: 0 0 0px 1000px transparent inset !important;
  -moz-text-fill-color: #ffffff !important;
}

/* Force textarea (Reason field) color inside the form to white on all platforms.
   High-specificity selector + !important to override any UA or autofill coloring.
   This addresses cases where server-hosted pages show the text in $main (green).
*/
.form textarea,
.form textarea:focus,
.form textarea:-webkit-autofill,
.form textarea:-moz-autofill,
.form textarea:-webkit-textarea-decoration {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 0 0px 1000px transparent inset !important;
}

/* Remove native number input spin buttons (cross-browser) */
/* WebKit browsers */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  /* standard */
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
  /* keep the textfield look */
  appearance: textfield;
}

textarea {
  border: 2px solid #a0b3b0;
  resize: vertical;
}

/* Remove browser placeholder like 'mm/dd/yyyy' but keep entered date visible.
   Works by making the date input text color transparent when empty, and restoring
   color when the field is focused or valid (we keep Start/End date required in the form). */
input[type="date"] {
  color: transparent;
}

/* WebKit-specific date-edit parts */
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
  color: transparent;
}

/* Restore visible color when focused or when the field has a valid value */
input[type="date"]:focus,
input[type="date"]:valid {
  color: #ffffff;
}

.field-wrap {
  position: relative;
  margin-bottom: 40px;
}

.top-row:after {
  content: "";
  display: table;
  clear: both;
}

.top-row > div {
  float: left;
  width: 48%;
  margin-right: 4%;
}

.top-row > div:last-child {
  margin: 0;
}

.button {
  border: 0;
  outline: none;
  border-radius: 0;
  padding: 15px 0;
  font-size: 2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: #1ab188;
  color: #ffffff;
  transition: all 0.5s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.button:hover, .button:focus {
  background: #179b77;
}

.button-block {
  display: block;
  width: 100%;
}

.forgot {
  margin-top: -20px;
  text-align: right;
}

.employee-id-input {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff !important;
}