@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap");

:root,
:root.dark {
  color-scheme: dark;

  --background: #0f1415;
  --site-background: #0f1415;
  --scheme-main: #171c1d;
  --scheme-main-bis: #1b2021;
  --scheme-main-ter: #262b2c;
  --scheme-invert: #dfe3e4;
  --scheme-invert-rgb: 223, 227, 228;

  --text: #dfe3e4;
  --text-strong: #f3f7f8;
  --text-light: #899295;
  --text-invert: #0a0f10;

  --primary-h: 192deg;
  --primary-s: 77%;
  --primary-l: 83%;
  --primary-a: 1;
  --primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
  --primary-hsl: var(--primary-h), var(--primary-s), var(--primary-l);
  --primary-light: rgba(172, 237, 252, 0.12);
  --primary-dark: #90d1df;

  --link: var(--primary);
  --link-hover: rgba(172, 237, 252, 0.75);
  --info: #90d1df;
  --success: #7eda8d;
  --warning: #fcba64;
  --danger: #ffb4ab;

  --grey-50: #0a0f10;
  --grey-100: #171c1d;
  --grey-200: #262b2c;
  --grey-300: #313637;
  --grey-400: #677174;
  --grey-500: #899295;
  --grey-600: #bfc8cb;
  --grey-700: #d1d7d9;
  --grey-800: #dfe3e4;
  --grey-900: #f3f7f8;

  --grey: var(--grey-500);
  --grey-light: var(--grey-300);
  --grey-lighter: var(--grey-200);
  --grey-lightest: var(--grey-100);
  --grey-dark: var(--grey-700);
  --grey-darker: var(--grey-800);

  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(172, 237, 252, 0.28);
  --border-light: rgba(255, 255, 255, 0.08);
  --border-light-hover: rgba(172, 237, 252, 0.28);
  --card-border-color: rgba(255, 255, 255, 0.08);

  --input-color: var(--text);
  --input-background-color: #111719;
  --input-border-color: rgba(255, 255, 255, 0.08);
  --input-hover-border-color: rgba(172, 237, 252, 0.32);
  --input-focus-border-color: rgba(172, 237, 252, 0.52);
  --input-focus-box-shadow-color: rgba(172, 237, 252, 0.12);
  --input-focus-box-shadow-color-hsla: rgba(172, 237, 252, 0.12);
  --input-placeholder-color: rgba(191, 200, 203, 0.4);
  --input-disabled-background-color: #171c1d;
  --input-disabled-border-color: rgba(255, 255, 255, 0.05);
  --input-disabled-color: #677174;

  --button-text-color: #dfe3e4;
  --button-text-hover-background-color: rgba(255, 255, 255, 0.055);
  --button-hover-color: #acedfc;
  --button-active-color: #acedfc;
  --button-focus-color: #acedfc;

  --card-background-color: #171c1d;
  --card-content-background-color: #171c1d;
  --card-header-background-color: rgba(10, 15, 16, 0.56);
  --card-footer-background-color: #111719;
  --box-background-color: #171c1d;
  --dropdown-item-hover-background-color: rgba(255, 255, 255, 0.055);
  --dropdown-item-hover-color: #acedfc;
  --table-row-hover-background-color: rgba(255, 255, 255, 0.04);

  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  --body-background-color: var(--background);
  --body-color: var(--text);
  --body-family: Inter, "Segoe UI", sans-serif;
  --family-primary: Inter, "Segoe UI", sans-serif;
  --family-secondary: "Space Grotesk", Inter, sans-serif;
  --family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --code-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --logo-text-color: #dfe3e4;
}

html,
body,
#app {
  background:
    linear-gradient(180deg, rgba(144, 209, 223, 0.035), transparent 160px),
    #0f1415 !important;
  color: var(--text);
}

body {
  font-family: Inter, "Segoe UI", sans-serif;
}

#app {
  min-height: 100vh;
}

body,
input,
textarea,
select,
button,
.input,
.textarea,
.select select,
.button,
.base-button,
.task,
.task .tasktext,
.task a,
.card,
.card-content,
.api-config,
.help,
.reset-password-link {
  font-family: Inter, "Segoe UI", sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar,
.navbar *,
.menu,
.menu *,
.menu-list,
.menu-list *,
.dropdown,
.dropdown *,
.title,
.image-title,
.navbar .logo-link,
.navbar .username,
.navbar-end,
.navbar-end *,
.menu-list.other-menu-items a,
.menu-list.other-menu-items li,
.menu-list.can-be-hidden li,
.navigation-item,
.project-menu-title,
.home .content.has-text-centered h3,
.home .content.has-text-centered h2,
.home .content.has-text-centered .title {
  font-family: "Space Grotesk", Inter, sans-serif !important;
}

.menu-list.other-menu-items a,
.project-menu-title,
.navbar .username,
.label {
  letter-spacing: 0.01em;
}

a {
  color: var(--primary);
}

.card,
.box,
.dropdown-menu,
.popup.is-open,
.task-glance-tooltip,
.v-popper--theme-dropdown .v-popper__inner,
.flatpickr-calendar,
.input,
.textarea,
.select select,
.button,
.tag,
.message-wrapper {
  border-radius: 3px !important;
  box-shadow: none !important;
}

.card,
.box,
.message-wrapper,
.task-glance-tooltip,
.v-popper--theme-dropdown .v-popper__inner,
.flatpickr-calendar {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #171c1d !important;
}

.card-header,
.modal-content .card-header,
.card-footer {
  background: rgba(10, 15, 16, 0.56) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.button,
.base-button.button,
button.button,
input.button {
  min-height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: transparent !important;
  color: #dfe3e4 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.button:hover,
.base-button.button:hover,
button.button:hover,
input.button:hover {
  border-color: rgba(172, 237, 252, 0.45) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: #acedfc !important;
}

.button.is-primary,
.button.is-success,
.button.is-info,
.button.is-warning,
.button.is-danger {
  background: rgba(172, 237, 252, 0.12) !important;
  color: #acedfc !important;
  border-color: rgba(172, 237, 252, 0.3) !important;
}

.input,
.textarea,
.select select {
  background: #111719 !important;
  color: #dfe3e4 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

.input::placeholder,
.textarea::placeholder {
  color: rgba(191, 200, 203, 0.42) !important;
}

.input:focus,
.textarea:focus,
.select select:focus {
  border-color: rgba(172, 237, 252, 0.52) !important;
  box-shadow: 0 0 0 1px rgba(172, 237, 252, 0.12) !important;
}

.label {
  color: #90d1df !important;
  font-size: 11px !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 800 !important;
}

.help,
.is-size-7,
.is-size-8,
.api-url-info,
.reset-password-link {
  color: #899295 !important;
}

.tag,
.project-task-icon,
.favorite,
.icon {
  color: #bfc8cb;
}

.tag {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.v-popper--theme-tooltip .v-popper__inner {
  border-radius: 3px !important;
  border: 1px solid rgba(172, 237, 252, 0.16) !important;
  background: #0a0f10 !important;
  color: #dfe3e4 !important;
  box-shadow: none !important;
}

.modal-mask {
  background: rgba(10, 15, 16, 0.82) !important;
}

.modal-content .card {
  background: #171c1d !important;
}

.tasks,
.task-view,
.task,
.gantt-chart-container,
.kanban,
.project-view,
.project-list,
.namespace-container,
.content,
.content.auth {
  color: #dfe3e4;
}

.task {
  border-radius: 3px !important;
  border: 1px solid transparent !important;
  padding: 8px 10px !important;
}

.task:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(172, 237, 252, 0.14) !important;
}

.task:focus,
.task:has(*:focus-visible) {
  box-shadow: inset 2px 0 0 #90d1df !important;
}

.progress-bar,
progress {
  border-radius: 2px !important;
}

.fancy-checkbox__icon {
  stroke: #677174 !important;
}

.fancy-checkbox:hover input:not(:disabled) + .fancy-checkbox__icon,
.fancy-checkbox input:checked + .fancy-checkbox__icon {
  --stroke-color: #acedfc !important;
}

.logo,
.logo svg {
  max-width: 180px !important;
}

.no-auth-wrapper {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(144, 209, 223, 0.035), transparent 160px),
    #0f1415 !important;
  padding: 16px 24px 24px !important;
}

.noauth-container {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.9fr) minmax(380px, 520px) !important;
  gap: 20px !important;
  align-items: stretch !important;
  max-width: 1180px !important;
  width: calc(100% - 32px) !important;
  margin: 0 auto !important;
  padding: 24px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.noauth-container > .image,
.noauth-container > .content {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 3px !important;
  background: #171c1d !important;
  box-shadow: none !important;
}

.noauth-container > .image {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background:
    linear-gradient(180deg, rgba(144, 209, 223, 0.03), transparent 140px),
    linear-gradient(to right, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    #0a0f10 !important;
  background-size: auto, 20px 20px, 20px 20px, auto !important;
  padding: 20px 16px !important;
  min-height: 640px;
}

.noauth-container > .image::before {
  content: "Internal Task Workspace";
  position: absolute;
  top: 12px;
  left: 14px;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #90d1df;
  font-weight: 800;
}

.image-title {
  font-family: "Space Grotesk", Inter, sans-serif !important;
  font-size: clamp(26px, 3.1vw, 40px) !important;
  line-height: 1.02 !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em;
  color: #f3f7f8 !important;
  margin: 0 !important;
  max-width: 12ch;
}

.noauth-container > .content {
  padding: 24px !important;
  min-height: 640px;
  display: flex;
  align-items: center;
}

.noauth-container > .content > div {
  width: 100%;
}

.title {
  font-family: "Space Grotesk", Inter, sans-serif !important;
  color: #f3f7f8 !important;
  letter-spacing: -0.03em;
}

.api-config {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  background: #111719;
  padding: 12px 14px;
}

.api-config__change-button {
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px !important;
}

@media screen and (max-width: 980px) {
  .noauth-container {
    grid-template-columns: 1fr !important;
  }

  .noauth-container > .image {
    min-height: 260px;
  }
}

header.navbar {
  min-height: 64px !important;
  padding: 0 24px 0 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background:
    linear-gradient(180deg, rgba(144, 209, 223, 0.03), transparent 120px),
    #0f1415 !important;
}

header.navbar .logo-link,
header.navbar .logo-link:hover {
  color: #f3f7f8 !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

header.navbar .menu-show-button,
header.navbar .trigger-button,
header.navbar .username-dropdown-trigger,
.menu-hide-button,
.collapse-project-button,
.menu-list-dropdown-trigger,
.favorite {
  border: 1px solid transparent !important;
  border-radius: 2px !important;
  background: transparent !important;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

header.navbar .menu-show-button:hover,
header.navbar .trigger-button:hover,
header.navbar .username-dropdown-trigger:hover,
.menu-hide-button:hover,
.collapse-project-button:hover,
.menu-list-dropdown-trigger:hover,
.favorite:hover {
  border-color: rgba(172, 237, 252, 0.24) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #acedfc !important;
}

.content-auth {
  min-height: calc(100vh - 64px);
}

.app-container {
  position: relative;
  min-height: calc(100vh - 64px);
}

.app-container-background {
  display: none !important;
}

aside.menu-container {
  inset: 64px auto 0 0 !important;
  width: 296px !important;
  padding: 10px 0 12px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  background:
    linear-gradient(180deg, rgba(144, 209, 223, 0.02), transparent 120px),
    #0a0f10 !important;
}

aside.menu-container .top-menu {
  padding: 0 12px 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

aside.menu-container .menu.top-menu .logo {
  display: none !important;
}

aside.menu-container .menu-list.other-menu-items {
  margin-top: 10px !important;
  padding: 0 12px !important;
}

aside.menu-container .menu-list.other-menu-items a,
aside.menu-container .navigation-item {
  border-radius: 3px !important;
}

aside.menu-container .menu-list.other-menu-items a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 10px !important;
  color: #d1d7d9 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

aside.menu-container .menu-list.other-menu-items a.router-link-active,
aside.menu-container .menu-list.other-menu-items a[aria-current="page"] {
  background: rgba(172, 237, 252, 0.09) !important;
  color: #acedfc !important;
  box-shadow: inset 2px 0 0 #90d1df;
}

aside.menu-container .menu-list.can-be-hidden {
  padding: 12px !important;
}

aside.menu-container .navigation-item {
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 2px 4px !important;
}

aside.menu-container .list-menu-link {
  display: flex !important;
  align-items: center;
  min-height: 30px;
  padding: 5px 8px !important;
  border-radius: 2px !important;
  color: #d1d7d9 !important;
}

aside.menu-container .list-menu-link:hover {
  background: rgba(255, 255, 255, 0.045) !important;
  color: #f3f7f8 !important;
}

aside.menu-container .project-menu-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px !important;
  font-weight: 600 !important;
}

aside.menu-container .menu-item-icon,
aside.menu-container .collapse-project-button,
aside.menu-container .favorite,
aside.menu-container .menu-list-dropdown-trigger {
  color: #677174 !important;
}

aside.menu-container .router-link-active .menu-item-icon,
aside.menu-container .router-link-active .project-menu-title {
  color: #acedfc !important;
}

aside.menu-container .color-bubble {
  border: 1px solid rgba(255, 255, 255, 0.2);
}

main.app-content {
  margin: 0 0 0 296px !important;
  padding: 88px 28px 28px !important;
  min-height: calc(100vh - 64px);
  background:
    linear-gradient(180deg, rgba(144, 209, 223, 0.02), transparent 160px),
    linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    #0f1415 !important;
  background-size: auto, 24px 24px, 24px 24px, auto !important;
}

.home .content.has-text-centered {
  max-width: 1040px;
  margin: 0 auto 18px !important;
  text-align: left !important;
}

.home .content.has-text-centered h3,
.home .content.has-text-centered h2,
.home .content.has-text-centered .title {
  font-family: "Space Grotesk", Inter, sans-serif !important;
  color: #f3f7f8 !important;
  letter-spacing: -0.03em;
}

.home .content.has-text-centered h3 {
  font-size: clamp(30px, 3vw, 48px) !important;
  line-height: 1.04 !important;
  text-align: center !important;
  margin-bottom: 18px !important;
  font-weight: 700 !important;
}

.home .field.has-addons {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin: 0 auto 26px !important;
}

.home .field.has-addons .control {
  margin: 0 !important;
}

.home .field.has-addons .input {
  min-height: 38px !important;
}

.home .field.has-addons .button {
  min-width: 92px;
  min-height: 38px !important;
}

.card.has-overflow {
  max-width: 1040px;
  margin: 0 auto 20px !important;
  background: #171c1d !important;
}

.card.has-overflow .card-content {
  padding: 0 !important;
}

.card.has-overflow .tasks,
.card.has-overflow .task-list,
.card.has-overflow .task-wrapper {
  margin: 0 !important;
}

.task {
  position: relative;
  min-height: 42px;
  padding: 10px 12px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-left: 1px solid transparent !important;
  border-right: 1px solid transparent !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.task:first-child {
  border-top: 0 !important;
}

.task:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-left-color: rgba(172, 237, 252, 0.2) !important;
  border-right-color: rgba(172, 237, 252, 0.08) !important;
}

.task:focus,
.task:has(*:focus-visible) {
  border-left-color: #90d1df !important;
  box-shadow: none !important;
}

.task .tasktext,
.task a,
.task .tasktext a {
  color: #dfe3e4 !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
}

.task .tasktext.done {
  color: #677174 !important;
}

.task .task-project,
.task span.parent-tasks {
  color: #899295 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}


.task .favorite {
  opacity: 1 !important;
}

.task .favorite.is-favorite,
.task .favorite:hover {
  color: #fcba64 !important;
}

.task .fancy-checkbox__icon {
  stroke: #677174 !important;
}

.task .tasktext .overdue {
  color: #ffb4ab !important;
}

.powered-by-link,
.powered-by-vikunja,
aside.menu-container .menu-container-footer,
aside.menu-container .menu-footer,
aside.menu-container .version,
aside.menu-container .copyright {
  color: #677174 !important;
}

main.app-content .tag {
  color: #dfe3e4 !important;
}

main.app-content .tag,
main.app-content .priority,
main.app-content .badge {
  border-radius: 2px !important;
}
.menu-container .menu-footer,
aside.menu-container .version,
aside.menu-container .copyright {
  color: #677174 !important;
}

main.app-content .tag {
  color: #dfe3e4 !important;
}

main.app-content .tag,
main.app-content .priority,
main.app-content .badge {
  border-radius: 2px !important;
}