/*
 * Aurora dark theme for Vikunja 2.6+
 * Pink, violet and blue gradients with calm surfaces and strong contrast.
 */

:root.dark {
  color-scheme: dark;

  --site-background: #0a1022;
  --scheme-main: #18213a;
  --scheme-main-bis: #202b49;
  --scheme-main-ter: #2a3657;
  --scheme-invert: #f8fafc;
  --scheme-invert-bis: #eef2ff;
  --scheme-invert-ter: #dbe4f0;

  /* Vikunja reverses this scale in dark mode. */
  --grey-50-hsl: 225, 39%, 16%;
  --grey-50: #18213a;
  --grey-100-hsl: 224, 37%, 20%;
  --grey-100: #202b49;
  --grey-200: #2a3657;
  --grey-300: #3a486b;
  --grey-400: #7380a1;
  --grey-500-hsl: 218, 15%, 65%;
  --grey-500: #98a3b7;
  --grey-600: #c2cada;
  --grey-700: #dce3ee;
  --grey-800: #edf2f8;
  --grey-900-hsl: 210, 40%, 98%;
  --grey-900: #f8fafc;
  --white: var(--grey-50);

  --text: #e8edf6;
  --text-light: #bac4d4;
  --text-strong: #f8fafc;
  --text-muted: #8f9bb0;
  --text-invert: #070b14;
  --logo-text-color: #f5efff;

  --primary-h: 278deg;
  --primary-s: 92%;
  --primary-l: 66%;
  --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --primary-hsl: var(--primary-h), var(--primary-s), var(--primary-l);
  --link: #d88cff;
  --link-hover: #f0b6ff;

  --border: #415071;
  --border-hover: #647394;
  --card-border-color: rgb(133 151 193 / 48%);
  --input-background-color: rgb(10 17 36 / 66%);
  --input-border-color: #465473;
  --input-color: #edf2f8;
  --input-placeholder-color: rgb(186 196 212 / 55%);

  --menu-item-color: #cbd5e1;
  --menu-item-hover-color: #f8fafc;
  --menu-item-hover-background-color: rgb(255 255 255 / 7%);
  --menu-item-active-color: #fff;
  --menu-item-active-background-color: rgb(255 255 255 / 12%);

  --table-row-hover-background-color: #253150;
  --dropdown-item-hover-background-color: rgb(0 0 0 / 18%);
  --dropdown-item-hover-color: #f8fafc;
  --button-text-hover-background-color: rgb(0 0 0 / 18%);
  --button-hover-color: #eef2ff;
  --button-active-color: #fff;
  --button-focus-color: #fff;

  --switch-view-active-background: #7166b8;
  --shadow-color: 251deg 60% 3%;
  --shadow-strength: 42%;

  --aurora-gradient: linear-gradient(120deg, #ff4fd8 0%, #b24cff 44%, #6c5cff 68%, #27a8ff 100%);
  --aurora-gradient-soft: linear-gradient(125deg, rgb(255 79 216 / 25%), rgb(156 82 255 / 30%) 48%, rgb(39 168 255 / 27%));
  --aurora-surface: linear-gradient(145deg, rgb(255 255 255 / 11%), rgb(255 255 255 / 3%));
}

html.dark {
  background-color: var(--site-background);
  background-image:
    radial-gradient(ellipse 76% 66% at -4% 2%, rgb(248 34 213 / 72%), transparent 61%),
    radial-gradient(ellipse 72% 70% at 104% 3%, rgb(0 166 255 / 76%), transparent 62%),
    radial-gradient(ellipse 68% 58% at 8% 108%, rgb(255 207 45 / 62%), transparent 60%),
    radial-gradient(ellipse 72% 62% at 96% 108%, rgb(255 91 24 / 64%), transparent 61%),
    radial-gradient(ellipse 78% 70% at 52% 76%, rgb(104 66 255 / 48%), transparent 68%),
    linear-gradient(135deg, #5a0d58 0%, #2a1c78 37%, #074879 67%, #6e2b0d 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 128% 128%, 130% 130%, 132% 132%, 130% 130%, 125% 125%, 100% 100%;
  background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%, 50% 72%, 0% 0%;
  min-height: 100%;
  isolation: isolate;
}

html.dark body {
  min-height: 100vh;
}

@keyframes vikunja-aurora-pan {
  0% {
    background-position: 0% 20%;
    background-size: 260% 260%;
  }

  50% {
    background-position: 100% 78%;
    background-size: 320% 320%;
  }

  100% {
    background-position: 18% 100%;
    background-size: 280% 280%;
  }
}

html.dark body,
html.dark .app-content {
  background: transparent !important;
}

html.dark .app-container,
html.dark .app-container.has-background {
  background-color: #0a1022 !important;
  background-image: linear-gradient(
    125deg,
    #a30a87 0%,
    #5a1bad 18%,
    #2145b8 36%,
    #078ac2 50%,
    #e46226 66%,
    #f1ba31 78%,
    #a30a87 100%
  ) !important;
  background-attachment: scroll !important;
  background-repeat: no-repeat !important;
  background-size: 260% 260% !important;
  min-block-size: 100vh !important;
  min-block-size: 100dvh !important;
  animation: vikunja-aurora-pan 10s ease-in-out infinite alternate !important;
}

html.dark .navbar,
html.dark .menu-container {
  background: rgb(5 8 22 / 55%);
  border-color: rgb(255 255 255 / 12%);
  backdrop-filter: brightness(0.68) saturate(0.92);
  -webkit-backdrop-filter: brightness(0.68) saturate(0.92);
}

html.dark .card,
html.dark .box {
  border: 0;
  background: rgb(0 0 0 / 20%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 5%),
    0 10px 28px rgb(2 5 18 / 14%);
}

html.dark .kanban .bucket,
html.dark .kanban .tasks {
  border: 0;
  background: rgb(0 0 0 / 20%) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 5%),
    0 10px 28px rgb(2 5 18 / 12%);
}

html.dark .kanban .tasks .task {
  border: 0;
  background: rgb(0 0 0 / 20%) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 6px 18px rgb(1 3 12 / 10%);
}

/* Task cards: keep deliberate per-task colors, replace Vikunja's default blue. */
html.dark .kanban .task:not(.has-custom-background-color),
html.dark .tasks .single-task {
  border: 0 !important;
  background: rgb(0 0 0 / 20%) !important;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 6%),
    0 6px 18px rgb(1 3 12 / 10%);
}

html.dark .tasks .single-task:hover {
  background: rgb(0 0 0 / 28%) !important;
}

html.dark .kanban .task .footer .icon,
html.dark .kanban .task .due-date,
html.dark .kanban .task .priority-label,
html.dark .kanban .task .comment-count {
  background: rgb(0 0 0 / 18%) !important;
}

html.dark .kanban .bucket-header,
html.dark .kanban .bucket-footer,
html.dark .kanban .bucket .button,
html.dark .kanban .tasks .button {
  background: rgb(0 0 0 / 20%) !important;
  background-image: none !important;
  border-color: transparent;
  box-shadow: none;
}

/* Quick task creation on overview and project pages. */
html.dark .task-add {
  padding: .35rem;
  border-radius: 8px;
  background: rgb(0 0 0 / 9%);
  box-shadow: inset 0 1px rgb(255 255 255 / 5%);
}

html.dark .task-add .add-task-textarea,
html.dark .task-add .input {
  border: 0 !important;
  background: rgb(0 0 0 / 20%) !important;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 6%),
    0 6px 18px rgb(1 3 12 / 9%);
}

html.dark .task-add .add-task-button {
  border: 0 !important;
  background: rgb(0 0 0 / 20%) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html.dark .task-add .add-task-button:hover {
  background: rgb(0 0 0 / 28%) !important;
}

/* Overview cards. The page gradient remains visible through them. */
html.dark .project-card:not(.has-background) {
  border: 0;
  background: rgb(0 0 0 / 20%) !important;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 6%),
    0 10px 28px rgb(1 3 12 / 12%);
}

html.dark .project-card:not(.has-background):hover {
  background: rgb(0 0 0 / 27%) !important;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 8%),
    0 14px 32px rgb(1 3 12 / 16%);
}

/* Task detail view, editor and action rail. */
html.dark .task-view-container {
  background: transparent !important;
}

html.dark .task-view,
html.dark .is-modal .task-view {
  background: rgb(0 0 0 / 14%) !important;
}

html.dark .task-view .tiptap__wrapper {
  border: 0;
  background: rgb(0 0 0 / 10%);
  box-shadow: inset 0 1px rgb(255 255 255 / 5%);
}

html.dark .task-view .tiptap__wrapper-is-editing:focus-within {
  border-color: transparent;
  box-shadow: inset 0 1px rgb(255 255 255 / 8%);
}

html.dark .task-view .editor-toolbar {
  border: 0 !important;
  background: rgb(0 0 0 / 20%) !important;
  box-shadow: inset 0 1px rgb(255 255 255 / 6%);
}

html.dark .task-view .editor-toolbar__segment + .editor-toolbar__segment {
  border-color: rgb(255 255 255 / 10%);
}

html.dark .task-view .action-buttons .button {
  border: 0 !important;
  background: rgb(0 0 0 / 20%) !important;
  background-image: none !important;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 5%),
    0 5px 14px rgb(1 3 12 / 9%);
}

html.dark .task-view .action-buttons .button:hover {
  background: rgb(0 0 0 / 28%) !important;
}

html.dark .task-view .action-buttons .button--mark-done.is-pending {
  background: #218c45 !important;
  color: #fff !important;
}

html.dark .task-view .action-buttons .button--mark-done.is-pending:hover {
  background: #29a653 !important;
}

/* Neutral field feedback: no saturated purple outlines on hover or focus. */
html.dark .input:hover:not(:disabled),
html.dark .textarea:hover:not(:disabled),
html.dark .select select:hover:not(:disabled),
html.dark .task-view .heading .input:hover,
html.dark .task-view .details .input:hover,
html.dark .task-view .details .textarea:hover {
  background-color: rgb(0 0 0 / 18%) !important;
  background-image: none !important;
  border-color: rgb(255 255 255 / 20%) !important;
  box-shadow: none !important;
}

html.dark .input:focus:not(:disabled),
html.dark .textarea:focus:not(:disabled),
html.dark .select select:focus:not(:disabled),
html.dark .task-view .heading .input:focus,
html.dark .task-view .details .input:focus,
html.dark .task-view .details .textarea:focus {
  background-color: rgb(0 0 0 / 22%) !important;
  background-image: none !important;
  border-color: rgb(255 255 255 / 28%) !important;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 9%) !important;
  outline: none !important;
}

html.dark .keyboard-shortcuts .message-wrapper,
html.dark .keyboard-shortcuts .message {
  border: 0 !important;
  background: rgb(0 0 0 / 16%) !important;
  box-shadow: inset 0 1px rgb(255 255 255 / 5%);
}

/* Sidebar: clear Vikunja's blue parent-row hover before styling the visible child. */
html.dark .menu-container .menu-list li:hover,
html.dark .menu-container .menu-list li > div:hover,
html.dark .menu-container .menu-list .navigation-item:hover,
html.dark .menu-container .menu-list .list-menu:hover {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html.dark .menu-container .menu-list li:hover > a:not(.is-active):not(.router-link-active):not(.router-link-exact-active),
html.dark .menu-container .menu-list li:hover > div:not(:has(.router-link-active)):not(:has(.router-link-exact-active)),
html.dark .menu-container .menu-list .navigation-item:hover:not(:has(.router-link-active)):not(:has(.router-link-exact-active)),
html.dark .menu-container button:hover,
html.dark .dropdown-item:hover,
html.dark .navbar-item:hover {
  background: rgb(255 255 255 / 7%) !important;
  background-image: none !important;
  color: var(--text-strong) !important;
  box-shadow: none !important;
}

html.dark .menu-list a.is-active,
html.dark .menu-list a.router-link-active,
html.dark .menu-list a.router-link-exact-active {
  background: rgb(255 255 255 / 12%) !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: inset 2px 0 rgb(255 255 255 / 58%) !important;
}

/* Settings and other SideNavShell menus use their own navigation states. */
html.dark .side-nav-shell .navigation-link:hover:not(.is-active) {
  background: rgb(255 255 255 / 7%) !important;
  background-image: none !important;
  border-inline-start-color: transparent !important;
  color: var(--text-strong) !important;
  box-shadow: none !important;
}

html.dark .side-nav-shell .navigation-link.is-active {
  background: rgb(255 255 255 / 12%) !important;
  background-image: none !important;
  border-inline-start-color: rgb(255 255 255 / 58%) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Login, registration and password reset pages, independent of theme state. */
.no-auth-wrapper {
  --white: #18213a;
  --text: #e8edf6;
  --text-light: #bac4d4;
  --text-strong: #f8fafc;
  --text-muted: #8f9bb0;
  --logo-text-color: #f5efff;
  --link: #d88cff;
  --link-hover: #f0b6ff;
  --primary-h: 278deg;
  --primary-s: 92%;
  --primary-l: 66%;
  --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --primary-hsl: var(--primary-h), var(--primary-s), var(--primary-l);
  color: var(--text);
  padding-block-end: 2rem !important;
  background-color: #0a1022 !important;
  background-image: linear-gradient(
    125deg,
    #a30a87 0%,
    #5a1bad 18%,
    #2145b8 36%,
    #078ac2 50%,
    #e46226 66%,
    #f1ba31 78%,
    #a30a87 100%
  ) !important;
  background-attachment: scroll !important;
  background-repeat: no-repeat !important;
  background-size: 260% 260% !important;
  min-block-size: 100vh !important;
  min-block-size: 100dvh !important;
  animation: vikunja-aurora-pan 10s ease-in-out infinite alternate !important;
}

.noauth-container {
  border: 0;
  background: rgb(0 0 0 / 18%) !important;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 7%),
    0 24px 70px rgb(1 3 12 / 24%);
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
}

.noauth-container .image {
  background: rgb(0 0 0 / 8%) !important;
  box-shadow: inset -1px 0 rgb(255 255 255 / 7%);
}

.noauth-container .image::before {
  background: linear-gradient(to top, rgb(0 0 0 / 30%), transparent 70%) !important;
}

.noauth-container .content {
  background: rgb(0 0 0 / 12%);
}

.noauth-container .input,
.noauth-container .textarea,
.noauth-container .select select {
  border: 0 !important;
  background: rgb(0 0 0 / 20%) !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px rgb(255 255 255 / 6%);
}

.noauth-container .input::placeholder,
.noauth-container .textarea::placeholder {
  color: var(--text-light) !important;
  opacity: .7;
}

.noauth-container .input:hover,
.noauth-container .textarea:hover,
.noauth-container .select select:hover {
  background: rgb(0 0 0 / 26%) !important;
  box-shadow: inset 0 1px rgb(255 255 255 / 8%) !important;
}

.noauth-container .input:focus,
.noauth-container .textarea:focus,
.noauth-container .select select:focus {
  background: rgb(0 0 0 / 28%) !important;
  border: 0 !important;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 16%) !important;
}

.noauth-container .button {
  border: 0 !important;
  background: rgb(255 255 255 / 13%) !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: 0 7px 20px rgb(1 3 12 / 12%);
}

.noauth-container .button:hover {
  background: rgb(255 255 255 / 20%) !important;
  box-shadow: 0 9px 24px rgb(1 3 12 / 16%);
}

.no-auth-wrapper .title,
.no-auth-wrapper .label,
.no-auth-wrapper .checkbox,
.no-auth-wrapper .content,
.no-auth-wrapper .legal-links {
  color: var(--text) !important;
}

.no-auth-wrapper input[type="checkbox"] {
  accent-color: #c14fff;
}

@media screen and (max-width: 768px) {
  .no-auth-wrapper {
    padding: 1rem 1rem 3rem !important;
    justify-content: flex-start;
  }

  .noauth-container {
    min-block-size: auto;
    border-radius: 14px;
  }

  .noauth-container .content {
    padding: 1.5rem 1.25rem;
  }
}

html.dark .input:focus,
html.dark .textarea:focus,
html.dark .select select:focus {
  border-color: #7183a9;
  box-shadow: 0 0 0 1px rgb(146 165 207 / 30%);
  outline: none;
}

html.dark .button.is-primary {
  border-color: rgb(255 255 255 / 38%);
  background-color: rgb(255 255 255 / 13%);
  background-image: none;
  color: #fff;
  box-shadow: 0 5px 16px rgb(2 5 18 / 12%);
  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

html.dark .button.is-primary:hover {
  border-color: rgb(255 255 255 / 55%);
  background-color: rgb(255 255 255 / 20%);
  background-image: none;
  box-shadow: 0 7px 20px rgb(2 5 18 / 16%);
  filter: none;
  transform: translateY(-1px);
}

html.dark ::selection {
  background: rgb(213 72 255 / 48%);
  color: #fff;
}

html.dark input[type="checkbox"],
html.dark input[type="radio"] {
  accent-color: #c14fff;
}

html.dark :focus-visible {
  outline: 1px solid #8b9abd;
  outline-offset: 2px;
}

html.dark input:focus-visible,
html.dark textarea:focus-visible,
html.dark select:focus-visible {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  html.dark *:not(.app-container):not(.no-auth-wrapper),
  html.dark *:not(body)::before,
  html.dark *:not(body)::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}