/** global.css */

:root {
  /* Shoelace */
  --sl-color-primary-50: hsl(180, 56%, 92% / 40%);
  --sl-color-primary-100: hsl(181, 56%, 80%);
  --sl-color-primary-200: hsl(181, 55%, 66%);
  --sl-color-primary-300: hsl(181, 57%, 52%);
  --sl-color-primary-400: hsl(181, 100%, 38%);
  --sl-color-primary-500: hsl(181, 100%, 36%);
  --sl-color-primary-600: hsl(181, 100%, 33%);
  --sl-color-primary-700: hsl(181, 100%, 28%);
  --sl-color-primary-800: hsl(181, 100%, 24%);
  --sl-color-primary-900: hsl(181, 100%, 17%);
  --sl-color-primary-950: hsl(181, 100%, 12%);

  --sl-input-focus-ring-color: hsl(181 100% 36% / 40%);

  /* DIS */
  --dis-alarm-low: goldenrod;
  --dis-alarm-medium: darkorange;
  --dis-alarm-high: red;
}

*,
*::before,
*::after  {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  background-color: var(--sl-color-neutral-100);
  color: var(--sl-color-neutral-900);
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 16px;
  overflow: hidden;
}

::selection,
sl-input::part(input)::selection,
sl-textarea::part(textarea)::selection {
  color: white;
  background-color: var(--sl-color-primary-500);
}

input, button, select, textarea {
  font-family: inherit;
  font-size: inherit;
  outline: none;
}

h1 {
  all: unset;
}

h1::first-letter {
  text-transform: capitalize;
}

form {
  width: clamp(100px, 100%, 950px);
  padding: 1rem;
  background-color: var(--sl-color-neutral-100);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.center {
  justify-content: center;
  text-align: center;
}

.right {
  justify-content: right;
  text-align: right;
}

dis-flex {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* Animations */
@keyframes scale {
  0% {
    transform: scale(1);
  } 50% {
    transform: scale(1.2);
  } 100% {
    transform: scale(1);
  }
}

/* Shoelace Custom Propeties */
sl-avatar {
  --size: 35px;
}

sl-progress-bar {
  --height: 5px;
}

/* FilePond */
.filepond--drop-label, .filepond--panel .filepond--panel-root {
  background-color: var(--sl-color-neutral-0);
}

/* flatpickr */
.flatpickr-calendar {
  background-color: var(--sl-panel-background-color);
}

.flatpickr-day, .flatpickr-monthDropdown-months, .flatpickr-weekday, .flatpickr-weekdaycontainer, .flatpickr-current-month, .flatpickr-month, .flatpickr-time {
  color: var(--sl-color-neutral-900);
}

.flatpickr-day:hover {
  background-color: var(--sl-input-focus-ring-color);
}

.flatpickr-day.selected, .flatpickr-day.selected:hover {
  background-color: var(--sl-color-primary-500);
  color: #fff;
}

.flatpickr-time input[type="number"] {
  color: var(--sl-color-neutral-900);
}

.flatpickr-time .flatpickr-hour-separator,
.flatpickr-time .flatpickr-minute-separator,
.flatpickr-time .flatpickr-am-pm {
  color: var(--sl-color-gray-500);
}

.flatpickr-time input[type="number"]:focus,
.flatpickr-time input[type="number"]:hover {
  background-color: var(--sl-color-primary-500);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--sl-color-primary-500);
}

.flatpickr-day.inRange {
  color: var(--sl-color-primary-500);
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  box-shadow: -10px 0 0 var(--sl-color-primary-500);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background-color: var(--sl-color-primary-500);
  border-color: var(--sl-color-primary-500);
}