/* 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 scss file will be commenting on behalf of the css file, since it is created/overwritten on the fly. */
/* 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 */
/* Apply box-sizing border-box to all elements for easier and more universal sizing */
*,
*:before,
*:after {
  box-sizing: border-box;
}

/* Ensure vertical scrollbar is always visible to prevent layout shift and/or layout confusion */
html {
  overflow-y: scroll;
}

/* Body styling: background color and font family of the webpage */
body {
  background: linear-gradient(to right, #2dd4bf, #1f2937);
  font-family: "Inter", sans-serif;
}

/* Anchor link styling: remove underline, set color to main accent color defined at the beginning, and add hover effect */
a {
  text-decoration: none;
  color: #1ab188;
  transition: 0.5s ease;
}

a:hover {
  color: #179b77;
}

/* Form container styling: background color, padding, max width, centering, border radius, and box shadow all defined */
.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 styling: list style, padding, margin, and clearfix */
.tab-group {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
  /* Each tab styling: width, float, and anchor link styles including more hover effects */
  /* Active tab styling: different background and text color to indicate an active state */
}

.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;
}

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

/* Page title styling: center alignment, color, font weight, and margin. Simple main page title styles */
h1 {
  text-align: center;
  color: #ffffff;
  font-weight: 300;
  margin: 0 0 40px;
}

/* Employee name present on PTO page for convenience */
.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 to avoid confusion. */
.form p {
  color: #ffffff;
}

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

/* Label styling: position, color, transition effects, and font size to stand out */
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), we want to 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. Common error that kept occuring during the testing phase
   and we wanted to make sure that this application could function on all major browsers without fail. */
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-specific 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).
   Also completely addresses autofill coloring issues for the textarea object.
*/
.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). Basically we don't want arrows in our input area field. */
/* 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 specific code to fix the textfield */
input[type="number"] {
  -moz-appearance: textfield;
  /* keep the textfield look */
  appearance: textfield;
}

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

input[type="date"] {
  color: #ffffff;
}

input[type="date"]:invalid, input[type="date"]:not(:focus):not(:valid) {
  color: transparent;
}

input[type="date"]:focus, input[type="date"]:valid {
  color: #ffffff;
}

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: rgba(255, 255, 255, 0);
}

input[type="date"]:focus::-webkit-datetime-edit-text,
input[type="date"]:focus::-webkit-datetime-edit-month-field,
input[type="date"]:focus::-webkit-datetime-edit-day-field,
input[type="date"]:focus::-webkit-datetime-edit-year-field,
input[type="date"]:valid::-webkit-datetime-edit-text,
input[type="date"]:valid::-webkit-datetime-edit-month-field,
input[type="date"]:valid::-webkit-datetime-edit-day-field,
input[type="date"]:valid::-webkit-datetime-edit-year-field {
  color: #ffffff;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

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

/* Container for the top row of form fields, typically used for side-by-side inputs */
.top-row {
  /* Each div inside the top-row gets 48% width and floats left, with a 4% margin on the right for spacing */
}

.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 styling: remove borders, set padding, font size, background color, text color, and hover effects
     */
.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;
}

/* Full-width button styling: it makes the button take up the full width of its container */
.button-block {
  display: block;
  width: 100%;
}

/* Forgot password link styling: margin and text alignment to the right */
.forgot {
  margin-top: -20px;
  text-align: right;
}

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

/* ------------------------------------------------------------------
   Page fade-in animation
   Creates a smooth fade-in effect when pages load
   ------------------------------------------------------------------ */
.page-content {
  animation: fadeIn 0.4s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Shake animation for form errors */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}

.form.shake {
  animation: shake 0.5s ease-in-out;
}