:root {
  --radius-round: 999px;
  --radius-mid: 15px;
  --common-padding: 1rem;
  --border-margin: .5rem 0rem;
  --custom-transition: cubic-bezier(.25, .8, .25, 1);
}

.icon-search {
  mask-image: url("assets/icons/search.svg");
  -webkit-mask-image: url("assets/icons/search.svg");
}

.icon-menu {
  mask-image: url("assets/icons/menu.svg");
  -webkit-mask-image: url("assets/icons/menu.svg");
}

.icon-dark-mode {
  mask-image: url("assets/icons/dark-mode.svg");
  -webkit-mask-image: url("assets/icons/dark-mode.svg");
}

.icon-light-mode {
  mask-image: url("assets/icons/light-mode.svg");
  -webkit-mask-image: url("assets/icons/light-mode.svg");
}

.icon-visible {
  mask-image: url("assets/icons/visible.svg");
  -webkit-mask-image: url("assets/icons/visible.svg");
}

.icon-invisible {
  mask-image: url("assets/icons/invisible.svg");
  -webkit-mask-image: url("assets/icons/invisible.svg");
}

.icon-sm {
  --icon-size: 1.5rem;
}

.icon-md {
  --icon-size: 2.5rem;
}

.icon-lg {
  --icon-size: 3rem;
}

.icon {
  display: inline-block;
  height: var(--icon-size, 24px);
  width: var(--icon-size, 24px);
  background-color: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  flex-shrink: 0;
}

[data-theme=dark] .theme-icon-switch {
  mask-image: url("assets/icons/dark-mode.svg");
  -webkit-mask-image: url("assets/icons/dark-mode.svg");
}
[data-theme=light] .theme-icon-switch {
  mask-image: url("assets/icons/light-mode.svg");
  -webkit-mask-image: url("assets/icons/light-mode.svg");
}

:root[data-theme=light] {
  --color-background: #dee1ff;
  --color-on-background: #1b1b21;
  --color-surface: #fbf8ff;
  --color-on-surface: #1b1b21;
  --color-surface-variant: #e3e1ec;
  --color-on-surface-variant: #46464f;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f5f2fa;
  --color-surface-container: #efedf4;
  --color-surface-container-high: #e9e7ef;
  --color-surface-container-highest: #e3e1e9;
  --color-primary: #b9c3ff;
  --color-on-primary: #ffffff;
  --color-primary-container: #dee1ff;
  --color-on-primary-container: #384379;
  --color-secondary-container: #dfe1f9;
  --color-on-secondary-container: #434659;
  --color-tertiary-container: #ffd7f2;
  --color-on-tertiary-container: #5d3c55;
  --color-outline: #767680;
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-primary-fixed-dim: #b9c3ff;
  --overlay-color: #31384baf;
  --box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

:root[data-theme=dark] {
  --color-background: #384379;
  --color-on-background: #e3e1e9;
  --color-surface: #121318;
  --color-on-surface: #e3e1e9;
  --color-surface-variant: #46464f;
  --color-on-surface-variant: #c6c5d0;
  --color-surface-container-lowest: #0d0e13;
  --color-surface-container-low: #1b1b21;
  --color-surface-container: #1f1f25;
  --color-surface-container-high: #292a2f;
  --color-surface-container-highest: #34343a;
  --color-primary: #384379;
  --color-on-primary: #b9c3ff;
  --color-primary-container: #212c61;
  --color-on-primary-container: #dee1ff;
  --color-secondary-container: #384379;
  --color-on-secondary-container: #dfe1f9;
  --color-tertiary-container: #44263e;
  --color-on-tertiary-container: #e5bad8;
  --color-outline: #90909a;
  --color-error: #ffb4ab;
  --color-on-error: #690005;
  --color-primary-fixed-dim: #384379;
  --box-shadow: 0 4px 6px #80808080;
  --overlay-color: #6d769ebe;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  transition: color 0.5s var(--custom-transition), background-color 0.5s var(--custom-transition);
}

html,
body {
  height: 100%;
}

html {
  font-size: clamp(15px, 0.8vw + 8px, 18px);
}

body {
  font-family: sans-serif;
  background-color: var(--color-background);
  overflow: hidden;
}

.userServiceFormContainer {
  position: fixed;
  inset: 0;
  width: 800px;
  height: 500px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-secondary-container);
  border-radius: var(--radius-mid);
  margin: auto;
  z-index: 999;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr 2fr;
  grid-template-areas: "title-logo heading-area" "title-logo form";
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.5s var(--custom-transition), transform 0.5s var(--custom-transition);
}
.userServiceFormContainer.open {
  pointer-events: auto;
  opacity: 1;
  transform: scale(1);
}

[data-theme=dark] .userServiceFormContainer {
  background-color: var(--color-on-secondary-container);
}

.userServiceTitleLogo {
  grid-area: title-logo;
  background-color: var(--color-on-secondary-container);
  color: var(--color-secondary-container);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--common-padding);
  padding: var(--common-padding);
  align-self: stretch;
}

[data-theme=dark] .userServiceTitleLogo {
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}

.userServicelogo {
  grid-area: logo;
  background: url("assets/task-manager-light.ico") center/contain no-repeat;
  height: 5rem;
  width: 5rem;
  aspect-ratio: 1/1;
  border-radius: var(--radius-round);
}

.userServiceHeadingArea {
  grid-area: heading-area;
  padding: var(--common-padding);
  color: var(--color-on-secondary-container);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--common-padding);
}

[data-theme=dark] .userServiceHeadingArea {
  color: var(--color-secondary-container);
}

.userServiceHeading {
  font-size: 2rem;
}

.userServiceSubHeading {
  font-size: 0.9rem;
}

.userServiceForm {
  padding: var(--common-padding);
  grid-area: form;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: var(--common-padding);
}

.field-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.35rem;
}

.displayNameLabel,
.passwordLabel {
  font-size: 1rem;
  color: var(--color-no-secondary-container);
}

[data-theme=dark] .displayNameLabel,
[data-theme=dark] .passwordLabel {
  color: var(--color-secondary-container);
}

.displayNameInput {
  font-size: 0.9rem;
  outline: none;
  border: 1px solid transparent;
  padding: 0.4rem;
  border-radius: 5px;
  width: 100%;
  transition: transform 0.5s var(--custom-transition), scale 0.5s var(--custom-transition), box-shadow 0.5s var(--custom-transition);
}
.displayNameInput:focus-within {
  border: 1px solid #000;
  transform: translateY(-2px);
  scale: 1.01;
  box-shadow: var(--box-shadow);
}

.passwordInput {
  font-size: 0.9rem;
  outline: none;
  border: none;
  flex: 1;
}

.password-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0.15rem 0.4rem;
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid transparent;
  transition: transform 0.5s var(--custom-transition), scale 0.5s var(--custom-transition), box-shadow 0.5s var(--custom-transition);
}
.password-container:focus-within {
  border: 1px solid #000;
  transform: translateY(-2px);
  scale: 1.01;
  box-shadow: var(--box-shadow);
}

.toggle-visibility {
  background-color: #000;
  left: 93.5%;
  cursor: pointer;
}

.submitBtn {
  font-size: 1rem;
  padding: 0.5rem 2rem;
  border-radius: var(--radius-mid);
  border: none;
  background-color: var(--color-on-tertiary-container);
  color: var(--color-tertiary-container);
  font-weight: 400;
  border: 2px solid transparent;
  transition: border 0.5s var(--custom-transition), scale 0.5s var(--custom-transition);
}
.submitBtn:active {
  border: 2px solid var(--color-tertiary-container);
  scale: 0.98;
}

[data-theme=light] .submitBtn {
  background-color: var(--color-tertiary-container);
  color: var(--color-on-tertiary-container);
}
[data-theme=light] .submitBtn:active {
  border: 2px solid var(--color-on-tertiary-container);
}

@media screen and (max-width: 480px) {
  .userServiceFormContainer {
    width: 95%;
    height: 60%;
    bottom: 35%;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 5fr;
    grid-template-areas: "title-logo" "heading-area" "form";
  }
}
/*
.test_trigger {
    position: fixed;
    padding: 1rem;
}
*/
.app-task-manager {
  display: grid;
  grid-template-columns: 17.5rem 1fr 12.5rem;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "logo-text search profile" "sidebar task-main task-main" "footer footer footer";
  height: 100dvh;
  background-color: none;
}

@media screen and (max-width: 480px) {
  .app-task-manager {
    display: grid;
    grid-template-columns: 4rem 1fr 7rem;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "logo-text search profile" "task-main task-main task-main" "footer footer footer";
  }
}
.app-logo-text-header {
  grid-area: logo-text;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--common-padding);
  padding-left: var(--common-padding);
  background-color: var(--color-primary-container);
  color: var(--color-on-primary-container);
}

.app-text-header {
  font-size: 1.2rem;
  font-weight: 400;
}

.app-logo-header {
  border-radius: var(--radius-round);
  background-image: url("assets/task-manager-light.ico");
  background-size: 100% 100%;
  width: 2rem;
  height: 2rem;
  aspect-ratio: 1/1;
  transform: scale(1.5);
  border: none;
  pointer-events: none;
}

@media screen and (max-width: 480px) {
  .app-logo-header {
    background-image: none;
    background-color: transparent;
    height: 1.75rem;
    width: 1.75rem;
    background-color: var(--color-on-primary-container);
    mask-image: url("assets/icons/menu.svg");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url("assets/icons/menu.svg");
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    pointer-events: auto;
    z-index: 300;
  }
  .app-logo-header.no-bg {
    background-color: transparent !important;
  }
  .app-text-header {
    display: none;
  }
}
.app-text-aside {
  font-size: 1.2rem;
  font-weight: 400;
}

.app-logo-aside {
  border-radius: var(--radius-round);
  background-image: url("assets/task-manager-light.ico");
  background-size: 100% 100%;
  width: 2rem;
  height: 2rem;
  aspect-ratio: 1/1;
  transform: scale(1.5);
  border: none;
  pointer-events: none;
}

.app-logo-text-aside {
  display: none;
}

@media screen and (max-width: 480px) {
  .app-logo-text-aside {
    grid-area: logo-text;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--common-padding);
    padding: var(--common-padding);
  }
}
.app-task-container {
  grid-area: task-main;
  border-radius: var(--radius-mid);
  overflow-y: auto;
  padding: var(--common-padding);
  margin: 0.5rem;
  color: var(--color-on-surface);
  background-color: var(--color-surface);
}

.app-footer {
  grid-area: footer;
}

.app-sidebar {
  grid-area: sidebar;
  position: static;
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}

@media screen and (max-width: 480px) {
  .app-sidebar {
    position: fixed;
    height: 100dvh;
    width: 80dvw;
    inset: unset;
    border: none;
    border-radius: 0rem var(--radius-mid) var(--radius-mid) 0rem;
    transform: translateX(-100%);
    transition: transform 1s var(--custom-transition);
    will-change: transform;
    z-index: 200;
  }
  .app-sidebar.open {
    transform: translateX(0%);
  }
}
.app-search-bar {
  grid-area: search;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: var(--border-margin);
  background-color: var(--color-primary-container);
  color: var(--color-on-primary-container);
}

.search-bar {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  background-color: transparent;
  padding: 0.6rem;
}
.search-bar::placeholder, .search-bar::-webkit-input-placeholder {
  color: var(--color-on-primary);
}
.search-bar:focus-within::placeholder, .search-bar:focus-within::-webkit-input-placeholder {
  color: var(--color-primary);
}

.search-container {
  display: flex;
  align-items: center;
  padding: 0.25rem;
  border-radius: var(--radius-round);
  width: 100%;
  max-width: 800px;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  transition: background-color 0.5s var(--custom-transition);
}
.search-container:focus-within {
  background-color: var(--color-on-primary);
  color: var(--color-primary);
}

.search-btn {
  height: 2.5rem;
  width: 2.5rem;
  aspect-ratio: 1/1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-on-primary);
  border-radius: var(--radius-round);
  border: none;
  cursor: pointer;
  transition: color 0.2s var(--custom-transition), background-color 0.2s var(--custom-transition);
}
.search-btn:active {
  background-color: var(--color-primary);
}

.search-icon {
  color: var(--color-primary);
}
.search-icon:active {
  color: var(--color-on-primary);
}

.app-profile-menu {
  position: absolute;
  display: grid;
  border-radius: var(--radius-mid);
  padding: var(--common-padding);
  height: 20rem;
  width: 20rem;
  z-index: 200;
  top: 100%;
  transform-origin: top right;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-1rem) scale(0);
  transition: 1s var(--custom-transition);
  background-color: var(--color-tertiary-container);
  color: var(--color-on-tertiary-container);
}
.app-profile-menu.open {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.app-user-profile {
  grid-area: profile;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding-inline: 0.5rem;
  position: relative;
  gap: 0.5rem;
  background-color: var(--color-primary-container);
  color: var(--color-on-primary-container);
}

.app-profile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  width: 3rem;
  aspect-ratio: 1/1;
  border: none;
  border-radius: var(--radius-round);
  background-color: var(--inner-bg-color);
  font-size: 2rem;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s var(--custom-transition);
  user-select: none;
  z-index: 200;
  background-color: var(--color-on-primary-container);
  color: var(--color-primary-container);
}
.app-profile-icon:active {
  background-color: var(--color-primary-container);
  color: var(--color-on-primary-container);
}

/*
@media screen and (min-width: 480px) {
    .app-profile-icon:hover {
        box-shadow: var(--box-shadow);
    }
}
*/
.theme-toggle-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2rem;
  width: 2rem;
  border-radius: 0.5rem;
  aspect-ratio: 1/1;
  border: none;
  background-color: var(--color-tertiary-container);
}

.theme-toggle-icon {
  color: var(--color-on-tertiary-container);
}

.overLay {
  position: fixed;
  inset: 0;
  background-color: var(--overlay-color);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s var(--custom-transition);
  z-index: 100;
}
.overLay.active {
  pointer-events: auto;
  opacity: 1;
}

/*# sourceMappingURL=main.css.map */