@import "tailwindcss";

@source inline(
  "border-l-{gray,red,orange,yellow,green,teal,blue,purple,pink}-400"
);

:root {
  --gray-100: oklch(96.7% 0.003 264.542);
  --gray-300: oklch(87.2% 0.01 258.338);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.flatpickr-calendar {
  position: absolute !important;
  margin-top: 4px !important;
  top: 100% !important;
  left: 0 !important;
  background-color: var(--gray-100) !important;
  border-radius: 8px !important;
}

.login {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

#logo {
  color: #333;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  padding-left: 8px;
}

.cell:hover,
.cell:has(.roster-shift:hover) {
  background-color: var(--gray-1);
}

.day-off {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    #e5e7eb 4px,
    #e5e7eb 5px
  );
}

.cell > * {
  background-color: var(--white-1);
}

label {
  border: 1px;
  padding: 4px 0;
}

input,
textarea,
select {
  padding: 4px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
}