:root {
  --_background: #1A1C26;
  --_foreground: #fff;
  --primary: #006EC7;
  --_secondary: darkblue;
  --accent: darkorange;
  --background: var(--_background);
  --background-alternate: #101F3B;
  --header-bg: hsl(0 0% 0% / 0.9);
  --header-fg: #fff;
  --sidebar-bg: hsl(0 0% 0% / 0.9);
  --sidebar-fg: #fff;
  --sidebar-group-bg: transparent;
  --sidebar-group-fg: var(--primary);
  --sidebar-group-highlight-bg: var(--primary);
  --sidebar-group-highlight-fg: #fff;
  --sidebar-item-bg: transparent;
  --sidebar-item-fg: var(--sidebar-fg);
  --sidebar-item-highlight-bg: var(--accent);
  --sidebar-item-highlight-fg: #fff;
  --backdrop-signin: hsl(0 0% 0% / 0.7);
  --backdrop: hsl(0 0% 0% / 0.95);
  --highlight-bg: var(--primary);
  --highlight-fg: #fff;
  --input-bg: color-mix(in oklab, var(--_background), var(--accent) 10%);
  --input-fg: var(--_foreground);
  --border: hsl(0 0% 100% / 0.5);
  --border-light: hsl(0 0% 100% / 0.2);
  --border-lighter: hsl(0 0% 100% / 0.05);
}

@media (prefers-color-scheme: light) {
  :root {
    --_background: #fff;
    --_foreground: #222;
    --primary: #006EC7;
    --_secondary: darkblue;
    --accent: darkorange;
    --background: var(--_background);
    --background-alternate: #101F3B;
    --header-bg: hsl(0 0% 100% / 0.9);
    --header-fg: #222;
    --sidebar-bg: hsl(0 0% 100% / 0.9);
    --sidebar-fg: #222;
    --sidebar-group-bg: transparent;
    --sidebar-group-fg: var(--primary);
    --sidebar-group-highlight-bg: var(--primary);
    --sidebar-group-highlight-fg: #fff;
    --sidebar-item-bg: transparent;
    --sidebar-item-fg: var(--sidebar-fg);
    --sidebar-item-highlight-bg: var(--accent);
    --sidebar-item-highlight-fg: #fff;
    --backdrop-signin: hsl(0 0% 100% / 0.7);
    --backdrop: hsl(0 0% 100% / 0.95);
    --input-bg: color-mix(in oklab, var(--_background), var(--accent) 5%);
    --input-fg: var(--_foreground);
    --border: hsl(0 0% 0% / 0.5);
    --border-light: hsl(0 0% 0% / 0.2);
    --border-lighter: hsl(0 0% 0% / 0.05);
  }
}
* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

html {
  font-family: Barlow, Arial, sans-serif;
  background: var(--background);
  background-image: linear-gradient(to bottom, var(--background), var(--background-alternate));
  height: 100%;
  color: var(--_foreground);
}

body {
  height: 100%;
  overflow: hidden;
  margin: 0;
}

body {
  background-image: url("../img/signin.jpg");
  background-blend-mode: multiply;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

main {
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--backdrop-signin);
}

article {
  background: color-mix(in oklab, var(--_background) 50%, transparent);
  box-shadow: 0.2rem 0.2rem 0.2rem hsla(0deg, 0%, 0%, 0.1);
  padding: 1rem;
  display: grid;
  gap: 1rem;
  width: 100%;
  max-width: 20rem;
  backdrop-filter: blur(5px);
}
article .logo a {
  display: grid;
  place-items: center;
  gap: 1rem;
}
article .logo a span {
  font-size: 200%;
  color: var(--_foreground);
  text-align: center;
}
article h2 {
  font-size: 80%;
  text-transform: uppercase;
  display: flex;
  place-content: center;
  border-top: 1px solid hsla(0deg, 0%, 0%, 0.2);
  border-bottom: 1px solid hsla(0deg, 0%, 0%, 0.2);
  padding: 0.5rem;
  box-shadow: 0 0 0.5rem hsla(0deg, 0%, 0%, 0.1);
  background: color-mix(in oklab, var(--_background) 80%, transparent);
  clip-path: inset(-0.25rem 0em -0.25rem 0rem);
  margin: 0 -1rem;
  font-weight: normal;
}
article .input {
  display: grid;
  grid-template-columns: 2rem 1fr;
  justify-content: center;
  align-items: center;
  gap: 0 1rem;
}
article .input label {
  justify-self: center;
}
article .input svg {
  color: var(--_foreground);
}
article .input .validation {
  color: red;
  grid-column: 2;
  font-size: 80%;
  display: none;
}
article .input:has(:user-invalid) .validation {
  display: block;
}
article .submit {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
article #login-failed {
  background: hsla(0deg, 100%, 20%, 0.5);
  border: 1px solid hsla(0deg, 0%, 0%, 0.1);
  padding: 1rem;
  box-shadow: 0.25rem 0.25rem 0.25rem hsla(0deg, 0%, 0%, 0.1);
  display: grid;
  grid-template-columns: min-content 1fr;
  gap: 1rem;
}
article #login-failed label {
  border: 1px solid hsla(0deg, 0%, 0%, 0.1);
  border-radius: 1rem;
  aspect-ratio: 1;
  width: 2rem;
  display: flex;
  place-content: center;
}
article #login-failed p {
  margin: 0;
  grid-column: 2;
}
article .links {
  display: flex;
  justify-content: center;
}
article .links a {
  color: var(--_primary);
}
article .links a:hover {
  color: var(--_foreground);
}
article .hidden {
  display: none !important;
}

button,
.button {
  --base: var(--highlight-bg);
  --base2: var(--base);
  font: inherit;
  border: 0;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--base2);
  box-shadow: 0.2rem 0.2rem 0.2rem hsla(0deg, 0%, 0%, 0.1);
  text-shadow: 0.2rem 0.2rem 0.2rem hsla(0deg, 0%, 0%, 0.1);
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  white-space: nowrap;
  color: var(--highlight-fg);
  display: flex;
  gap: 0.5rem;
  place-items: center;
}
button[type=submit], button.swal2-confirm, button.accent,
.button[type=submit],
.button.swal2-confirm,
.button.accent {
  --base: var(--accent);
}
button.delete,
.button.delete {
  --base: hsl(0 80% 45%);
}
button:hover,
.button:hover {
  --base2: color-mix(in oklab, var(--base) 80%, #fff);
}
button[disabled], button.disabled,
.button[disabled],
.button.disabled {
  --base2: color-mix(in oklab, var(--base) 20%, hsl(0 0% 0% / 0.5));
  opacity: 0.8;
  cursor: not-allowed;
}
button.locked::before,
.button.locked::before {
  content: attr(data-lockmessage);
  background: hsla(0deg, 0%, 0%, 0.4);
  position: absolute;
  z-index: 1;
  box-sizing: content-box;
  right: 100%;
  top: 20%;
  text-transform: none;
  font-size: 80%;
  padding: 0.25rem;
  margin: 0;
  border-radius: 0.5rem 0 0 0.5rem;
}
button.busy,
.button.busy {
  --base: color-mix(in oklab, var(--base2) 50%, transparent);
  cursor: not-allowed;
  pointer-events: none;
  overflow: hidden;
}
button.busy::before,
.button.busy::before {
  content: "";
  background: hsla(0deg, 0%, 0%, 0.4);
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-sizing: content-box;
}
button.busy::after,
.button.busy::after {
  font-family: "Font Awesome 5 Free";
  content: "\f110";
  font-weight: 900;
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  animation: busy-spin 1s infinite;
  text-shadow: none;
}

@keyframes busy-spin {
  0% {
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    rotate: 0deg;
  }
  50% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    rotate: 180deg;
  }
  100% {
    rotate: 360deg;
  }
}
input, textarea, select {
  font: inherit;
  box-shadow: inset 0.2rem 0.2rem 0.2rem hsla(0deg, 0%, 0%, 0.1);
  padding: 0.5rem;
  background: var(--input-bg);
  color: var(--_foreground);
  border: 1px solid var(--border-light);
  box-shadow: inset 0.1rem 0.1rem 0.5rem hsla(0deg, 0%, 0%, 0.1);
  width: 100%;
}
input[type=checkbox], textarea[type=checkbox], select[type=checkbox] {
  width: auto;
}
input:focus-visible, input:focus, input:focus-within, textarea:focus-visible, textarea:focus, textarea:focus-within, select:focus-visible, select:focus, select:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
input:user-invalid, textarea:user-invalid, select:user-invalid {
  border-color: red;
  background: color-mix(in oklab, var(--_background), red 30%);
}
input[readonly], textarea[readonly], select[readonly] {
  background: none;
  box-shadow: none;
}
input[type=date][value=""], textarea[type=date][value=""], select[type=date][value=""] {
  color: color-mix(in oklab, var(--input-fg), transparent 50%);
}