@import "tailwindcss";

@source inline(
  "border-l-{gray,red,orange,yellow,green,teal,blue,purple,pink}-400"
);
@source inline(
  "{border-l,bg}-{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(.shift:hover) {
  background-color: var(--gray-1);
}

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

.constraint-unavailable {
  background-color: rgb(243 244 246 / 60%);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 9px,
    rgb(156 163 175 / 20%) 9px,
    rgb(156 163 175 / 20%) 10px
  );
}

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

.js-draggable[data-place-url] {
  touch-action: none;
}

input:not(
  [type="checkbox"],
  [type="radio"],
  [type="hidden"],
  [data-time-input]
),
textarea,
select {
  width: 100%;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  background: white;
  font-size: 14px;
  outline: none;
}

textarea {
  min-height: 96px;
  resize: vertical;
}

input:not(
    [type="checkbox"],
    [type="radio"],
    [type="hidden"],
    [data-time-input]
  ):focus,
textarea:focus,
select:focus {
  border-color: #6b7280;
  box-shadow: 0 0 0 1px #d1d5db;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: #18181b;
}

@keyframes roster-sparkle {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.9) rotate(-4deg);
  }

  50% {
    opacity: 1;
    transform: scale(1.12) rotate(4deg);
  }
}

.roster-sparkle {
  animation: roster-sparkle 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .roster-sparkle {
    animation: none;
  }
}