/* Green Light scheme (Default) */
/* Can be forced with data-theme="light" */
/* [data-theme="light"],
:root:not([data-theme="dark"]) {
  --pico-primary: hsl(123, 78%, 38%);
  --pico-primary-hover: hsl(121, 78%, 33%);
  --pico-primary-focus: hsla(123, 78%, 38%, 0.125);
  --pico-primary-inverse: #fff;
  --pico-del-color: #ad332d;
  --pico-ins-color: var(--pico-primary);
} */

/* Green Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
/* @media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pico-primary: hsl(123, 68%, 36%);
    --pico-primary-hover: hsl(125, 82%, 52%);
    --pico-primary-focus: hsla(123, 78%, 48%, 0.25);
    --pico-primary-inverse: #fff;
    --pico-del-color: #df625e;
    --pico-ins-color: var(--pico-primary);
  }
} */

/* Green Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
/* [data-theme="dark"] {
  --pico-primary: hsl(123, 68%, 36%);
  --pico-primary-hover: hsl(125, 82%, 52%);
  --pico-primary-focus: hsla(123, 78%, 48%, 0.25);
  --pico-primary-inverse: #fff;
  --pico-del-color: #df625e;
  --pico-ins-color: var(--pico-primary);
} */

/* Green (Common styles) */

/* disable menu when wc not defined */
sl-dropdown:not(:defined) > aside {
  display: none;
}
sl-drawer:not(:defined) {
  display: none;
}

:root {
  --pico-form-element-active-border-color: var(--pico-primary);
  --pico-form-element-focus-color: var(--pico-primary-focus);
  --pico-switch-color: var(--pico-primary-inverse);
  --pico-switch-checked-background-color: var(--pico-primary);
  --pico-card-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1) !important;
}

main.container {
  position: relative;
}

#hx-indicator {
  position: fixed;
  top: 0.8rem;
  left: 6rem;
  display: none;
  z-index: 6;
}
#hx-indicator.htmx-request {
  display: block;
}

.hidden {
  display: none;
}

/* change these rules to not be bothr*/
details.dropdown[open] > summary::before {
  width: unset;
}
details ul[dir="rtl"] > li {
  left: auto;
  direction: ltr;
}

.center {
  text-align: center;
}
.row.center {
  justify-content: center;
}
.row.align-center {
  align-items: center;
}
.align-right {
  text-align: right;
}
.row.end {
  justify-content: flex-end;
}
/* fix styles for role=link */
:is(a, button)[role="link"] {
  border: none;
  background: transparent;
}
/* Disable article margin top because what's the point */
article {
  margin-top: 0;
}
/* fixes to nav in pico */
nav[al-center] {
  align-items: center;
}
.success {
  color: var(--pico-ins-color);
}
label.error {
  color: var(--pico-del-color);
}
.error,
.destructive {
  /* based on https://picocss.com/docs/version-picker/red */
  --pico-text-selection-color: rgba(241, 121, 97, 0.1875);
  --pico-primary: #f17961;
  --pico-primary-background: #c52f21;
  --pico-primary-underline: rgba(241, 121, 97, 0.5);
  --pico-primary-hover: #f5a390;
  --pico-primary-hover-background: #d93526;
  --pico-primary-focus: rgba(241, 121, 97, 0.375);
  --pico-primary-inverse: #fff;
  --pico-primary-border: var(--pico-primary-background);
  --pico-primary-hover-border: var(--pico-primary-hover-background);
  --pico-dropdown-color: var(--pico-primary);
}
label.error:hover {
  cursor: pointer;
  text-decoration: underline;
}
.space-before {
  margin-left: 0.5em;
}

/* Page actions */
#page-actions {
  display: flex;
  align-items: center;
  height: fit-content;
  padding: 0.5rem 1rem;
  position: sticky;
  top: 2.8rem;
  left: 0;
  right: 0;
  z-index: 2;
  background-color: var(--pico-background-color);
  margin: 0.5rem -1rem;
}
#page-actions > button {
  margin: 0;
  padding: 0.5em 1em;
  width: fit-content;
}
#page-actions li > button {
  padding: 0;
}
#page-actions > :where(a, li) {
  margin: 0;
  padding: 0.65em;
  text-decoration: none;
  border-radius: var(--pico-border-radius);
}
#page-actions > :where(a, li):hover {
  --pico-background-color: var(--pico-secondary-focus);
}

@media screen and (min-width: 992px) {
  #hx-indicator {
    left: calc(250px + 1rem);
  }
}

/* table hover effect */
tbody > tr.clickable {
  cursor: pointer;
  position: relative;
}
tbody > tr.clickable:where(:hover, :focus) {
  background-color: var(--pico-secondary-focus) !important;
  outline: none;
}

/* Conditional text display */
input[role="switch"]:checked ~ del {
  display: none;
  text-decoration: none;
}
input[role="switch"]:checked ~ ins {
  display: inline;
}
input[role="switch"]:not(:checked) ~ del {
  display: inline;
  text-decoration: none;
}
input[role="switch"]:not(:checked) ~ ins {
  display: none;
}

/* Controlled users */
.control-notice {
  padding: 0.5rem 1rem;
  margin: 0 auto 2rem;
}

.control-notice > form {
  margin: 0 0 0 auto;
}

.control-notice button {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0.5rem;
  height: 1.5rem;
}

.control-notice ~ main {
  padding-top: 0;
}

.profile-picture {
  object-fit: cover;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

/* --- pico dialog style improvements --- */
dialog article > header .close:is(button) {
  border: none;
  background-color: transparent;
}
dialog article > header .close:is(:hover, :focus) {
  background-color: transparent;
}

/* --- pico dropdown extra direction --- */
details.dropdown summary + ul[data-placement="top"] {
  bottom: 100%;
  max-height: 400px;
  overflow: auto;
}

/* --- pico modal animation --- */
dialog[open] {
  animation-name: fadeIn 150ms;
}
dialog[open] > article {
  animation: zoomIn 150ms;
}
dialog.closing {
  animation: fadeOut 150ms;
}
dialog.closing > article {
  animation: zoomOut 150ms;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes zoomIn {
  0% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes zoomOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.9);
  }
}

@keyframes toastSlide {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  10% {
    opacity: 1;
    transform: translateX(0);
  }
  90% {
    opacity: 1;
    margin-bottom: 0;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    margin-bottom: -4rem;
    transform: translateY(100%);
  }
}

/* toast */
#toast-root {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-end;
}
.toast {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  background-color: rgb(215, 215, 215);
  color: black;
  height: 3rem;
  border-radius: var(--pico-border-radius);

  /* Animation */
  animation-name: toastSlide;
  animation-duration: 2000ms;
  animation-fill-mode: forwards;
}
.toast.success {
  background-color: var(--pico-ins-color);
  color: white;
}
.toast.error {
  background-color: var(--pico-del-color);
  color: white;
}
.toast.warning {
  background-color: rgb(255, 166, 0);
  color: black;
}
/* add more statuses when needed */

.list-chevron {
  text-align: end;
}

article.notice {
  border: 1px solid var(--pico-secondary-border);
}
article.notice.invalid,
article.notice.error {
  border-color: var(--pico-del-color);
  --pico-primary: var(--pico-del-color);
  --pico-primary-underline: var(
    --pico-form-element-invalid-active-border-color
  );
}
article.notice.valid,
article.notice.success {
  border-color: var(--pico-ins-color);
}
article.notice.horizontal,
article.notice > header,
.horizontal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.buttons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  grid-gap: 0.5rem;
}

/* User card */

.user-card {
  height: 100px;
  padding: 0;
  gap: 5px;
  margin-bottom: 1em;
  align-items: center;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 1fr 1fr;
  border-radius: 50px;
  box-shadow: 0 0px 10px 0px rgba(0, 0, 0, 0.1);
}
.user-card > img {
  grid-row: span 2;
  grid-column: 1;
  object-fit: cover;
  height: 100px;
  width: 100px;
  border-radius: 50px;
  margin-right: 1em;
}

.user-card > nav {
  grid-row: span 2;
  align-items: center;
}

/* Odd elements align to top */
.user-card > *:not(nav):nth-child(odd) {
  align-self: start;
}
/* Even elements align to bottom */
.user-card > *:not(nav):nth-child(even) {
  align-self: end;
}

.user-card details.dropdown > summary.actions {
  margin-right: 1em;
  border-radius: 3em;
  width: 2em;
  height: 2em;
  display: grid;
  place-items: center;
}
.user-card details.dropdown > summary.actions::after {
  display: none;
}

/* Timeline */

.timeline {
  position: relative;
  display: flex;
  --fill-color: var(--pico-color);
  --hr-stroke: 0.2rem;
  padding: 0;
}
.timeline > li {
  margin: 0;
}
:where(.timeline > li) {
  position: relative;
  display: grid;
  flex-shrink: 0;
  align-items: center;
  grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) 40px var(
      --timeline-row-end,
      minmax(0, 1fr)
    );
  grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) 40px var(
      --timeline-col-end,
      minmax(0, 1fr)
    );
}
.timeline > li > hr {
  width: 100%;
  border-width: 0px;
}
:where(.timeline > li > hr):first-child {
  grid-column-start: 1;
  grid-row-start: 2;
}
:where(.timeline > li > hr):last-child {
  grid-column-start: 3;
  grid-column-end: none;
  grid-row-start: 2;
  grid-row-end: auto;
}
.timeline-start {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  margin: 0.25rem;
  align-self: flex-end;
  justify-self: center;
}
.timeline-middle {
  grid-column-start: 2;
  grid-row-start: 2;
  color: var(--fill-color);
}
.timeline-end {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
  margin: 0.25rem;
  align-self: flex-start;
  justify-self: center;
}
.timeline hr {
  height: var(--hr-stroke);
  margin: 0;
  padding: 0;
}
:where(.timeline hr) {
  --tw-bg-opacity: 1;
  background-color: var(--fill-color);
}
.timeline-box {
  border-radius: var(--pico-rounded-box, 1rem);
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: var(--pico-primary-border);
  --tw-bg-opacity: 1;
  background-color: var(--pico-background-color);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--pico-card-box-shadow);
}
.timeline-vertical {
  flex-direction: column;
}
.timeline-compact .timeline-start,
.timeline-horizontal.timeline-compact .timeline-start {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
  margin: 0.25rem;
  align-self: flex-start;
  justify-self: center;
}
.timeline-compact li:has(.timeline-start) .timeline-end,
.timeline-horizontal.timeline-compact li:has(.timeline-start) .timeline-end {
  grid-column-start: none;
  grid-row-start: auto;
}
.timeline-vertical.timeline-compact > li {
  --timeline-col-start: 0;
}
.timeline-vertical.timeline-compact .timeline-start {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 4;
  align-self: center;
  justify-self: start;
}
.timeline-vertical.timeline-compact li:has(.timeline-start) .timeline-end {
  grid-column-start: auto;
  grid-row-start: none;
}
:where(.timeline-vertical > li) {
  --timeline-row-start: minmax(0, 1fr);
  --timeline-row-end: minmax(0, 1fr);
  justify-items: center;
}
.timeline-vertical > li > hr {
  height: 100%;
}
:where(.timeline-vertical > li > hr):first-child {
  grid-column-start: 2;
  grid-row-start: 1;
}
:where(.timeline-vertical > li > hr):last-child {
  grid-column-start: 2;
  grid-column-end: auto;
  grid-row-start: 3;
  grid-row-end: none;
}
.timeline-vertical .timeline-start {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 4;
  align-self: center;
  justify-self: end;
}
.timeline-vertical .timeline-end {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 4;
  align-self: center;
  justify-self: start;
}
.timeline-vertical:where(.timeline-snap-icon) > li {
  --timeline-col-start: minmax(0, 1fr);
  --timeline-row-start: 0.5rem;
}
.timeline-horizontal .timeline-start {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  align-self: flex-end;
  justify-self: center;
}
.timeline-horizontal .timeline-end {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
  align-self: flex-start;
  justify-self: center;
}
.timeline-vertical > li > hr {
  width: var(--hr-stroke);
}
.timeline .timeline-start {
  color: var(--fill-start-color);
}
.timeline .completed {
  --fill-color: var(--pico-ins-color);
  --fill-start-color: var(--pico-ins-color);
}
.timeline .missed {
  --fill-color: var(--pico-del-color);
  --fill-start-color: var(--pico-del-color);
}
@media (min-width: 992px) {
  .lg\:timeline-horizontal.timeline-compact {
    --timeline-row-start: 0;
  }
  .lg\:timeline-horizontal.timeline-compact .timeline-start {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;
    margin: 0.25rem;
    align-self: flex-start;
    justify-self: center;
  }
  .lg\:timeline-horizontal.timeline-compact
    li:has(.timeline-start)
    .timeline-end {
    grid-column-start: none;
    grid-row-start: auto;
  }
  .lg\:timeline-horizontal {
    flex-direction: row;
    justify-content: center;
  }
  .lg\:timeline-horizontal > li > hr {
    width: 100%;
  }
  :where(.lg\:timeline-horizontal > li) {
    align-items: center;

    --timeline-row-start: minmax(0, 1fr);
    --timeline-row-end: minmax(0, 1fr);
  }
  :where(.lg\:timeline-horizontal > li > hr):first-child {
    grid-column-start: 1;
    grid-row-start: 2;
  }
  :where(.lg\:timeline-horizontal > li > hr):last-child {
    grid-column-start: 3;
    grid-column-end: none;
    grid-row-start: 2;
    grid-row-end: auto;
  }
  .lg\:timeline-horizontal .timeline-start {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
    align-self: flex-end;
    justify-self: center;
  }
  .lg\:timeline-horizontal .timeline-end {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;
    align-self: flex-start;
    justify-self: center;
  }
  .lg\:timeline-horizontal:where(.timeline-snap-icon) > li {
    --timeline-col-start: 0.5rem;
  }
  .lg\:timeline-horizontal > li > hr {
    height: var(--hr-stroke);
  }
  .lg\:timeline-horizontal > li > div.lg\:rotate {
    rotate: -90deg;
  }
}

.main-heading {
  font-family: "Faro Light";
}

@font-face {
  font-family: "Faro Light";
  src: url(../webfonts/Farro-Light.ttf);
}

.help-button-modal {
  cursor: pointer;
  display: flex;
  justify-content: end;
}

/* Shoelace */
sl-tab-group {
  --indicator-color: var(--pico-primary);
  --sl-color-primary-600: var(--pico-primary);
}

.tag {
  display: inline-flex;
  align-items: center;
  border: 1px solid;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  font-size: var(--sl-button-font-size-small);
  height: calc(var(--sl-input-height-small) * 0.8);
  line-height: calc(
    var(--sl-input-height-medium) - var(--sl-input-border-width) * 2
  );
  border-radius: var(--sl-input-border-radius-medium);
  padding: 0 var(--sl-spacing-small);
}

.tag-fuchsia {
  background-color: var(--sl-color-fuchsia-50);
  border-color: var(--sl-color-fuchsia-200);
  color: var(--sl-color-fuchsia-800);
}

.tag-green {
  background-color: var(--sl-color-green-50);
  border-color: var(--sl-color-green-200);
  color: var(--sl-color-green-800);
}

.tag-grey {
  background-color: var(--sl-color-gray-50);
  border-color: var(--sl-color-gray-200);
  color: var(--sl-color-gray-800);
}

.tag-indigo {
  background-color: var(--sl-color-indigo-50);
  border-color: var(--sl-color-indigo-200);
  color: var(--sl-color-indigo-800);
}

.tag-jade {
  background-color: var(--sl-color-emerald-50);
  border-color: var(--sl-color-emerald-200);
  color: var(--sl-color-emerald-800);
}

.tag-lime {
  background-color: var(--sl-color-lime-50);
  border-color: var(--sl-color-lime-200);
  color: var(--sl-color-lime-800);
}

.tag-orange {
  background-color: var(--sl-color-orange-50);
  border-color: var(--sl-color-orange-200);
  color: var(--sl-color-orange-800);
}

.tag-pink {
  background-color: var(--sl-color-pink-50);
  border-color: var(--sl-color-pink-200);
  color: var(--sl-color-pink-800);
}

.tag-pumpkin {
  background-color: var(--sl-color-amber-50);
  border-color: var(--sl-color-amber-200);
  color: var(--sl-color-amber-800);
}

.tag-purple {
  background-color: var(--sl-color-purple-50);
  border-color: var(--sl-color-purple-200);
  color: var(--sl-color-purple-800);
}

.tag-red {
  background-color: var(--sl-color-red-50);
  border-color: var(--sl-color-red-200);
  color: var(--sl-color-red-800);
}

.tag-sand {
  background-color: var(--sl-color-amber-50);
  border-color: var(--sl-color-amber-200);
  color: var(--sl-color-amber-800);
}

.tag-slate {
  background-color: var(--sl-color-gray-50);
  border-color: var(--sl-color-gray-200);
  color: var(--sl-color-gray-800);
}

.tag-violet {
  background-color: var(--sl-color-violet-50);
  border-color: var(--sl-color-violet-200);
  color: var(--sl-color-violet-800);
}

.tag-yellow {
  background-color: var(--sl-color-yellow-50);
  border-color: var(--sl-color-yellow-200);
  color: var(--sl-color-yellow-800);
}

.tag-zinc {
  background-color: var(--sl-color-gray-50);
  border-color: var(--sl-color-gray-200);
  color: var(--sl-color-gray-800);
}

.dot-block {
  display: flex;
  flex-direction: row;
  gap: 4px;
}

.color-dot {
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  width: 18px;
  border-radius: 50%;
}

details.dropdown {
  margin-top: calc(var(--pico-spacing) * 0.25);
  margin-bottom: var(--pico-spacing);
}