/* SD Todo: loaded after Vikunja's own CSS (see theme.nginx.conf).

   Update-safe by design: only Vikunja's CSS custom properties and its
   semantic class names (.single-task, .tag, .priority-label, ...) are used,
   never the per-build data-v-* attributes. If a Vikunja update renames a
   class, that rule silently stops applying and Vikunja's own look returns. */

/* Lato, the SD brand font (SIL OFL, see lato-ofl.txt). Self-hosted. */
@font-face { font-family: "Lato"; font-weight: 400; font-style: normal; font-display: swap; src: url("/branding/lato-400.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 400; font-style: italic; font-display: swap; src: url("/branding/lato-400i.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-style: normal; font-display: swap; src: url("/branding/lato-700.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 900; font-style: normal; font-display: swap; src: url("/branding/lato-900.woff2") format("woff2"); }

/* Colours ================================================================== */

:root {
  color-scheme: light;

  /* Primary #ff8128, the SD orange. Vikunja derives every shade from these. */
  --primary-h: 25deg !important;
  --primary-s: 100% !important;
  --primary-l: 58% !important;

  --site-background: transparent !important;

  /* The palette of the SD tools: orange and warm neutrals, no blue.
     Priorities: high/urgent a deep red, medium amber. */
  --sd-prio-high: #b02a37;
  --sd-prio-medium: #f0ad4e;
  --sd-prio-medium-ink: #9a6a1b;
  --sd-work: #43a047;
  --sd-warm-bg: #f1ece4;
  --sd-warm-border: #ddd2c2;
  --sd-radius: 10px;
  --sd-page: #faf8f5;
}

/* One look in both colour schemes: the dark scheme gets the light values of
   every variable Vikunja redefines under .dark (styles/custom-properties).
   Variables Vikunja leaves undefined in light mode are reset to `initial`,
   so their fallbacks apply as they do there. */
html:root.dark {
  color-scheme: light;

  --grey-50-hsl: 210, 20%, 98%;
  --grey-50: hsl(var(--grey-50-hsl));
  --grey-100-hsl: 220, 14.3%, 95.9%;
  --grey-100: hsl(var(--grey-100-hsl));
  --grey-200: hsl(220, 13%, 91%);
  --grey-300: hsl(216, 12.2%, 83.9%);
  --grey-400: hsl(217.9, 10.6%, 64.9%);
  --grey-500-hsl: 220, 8.9%, 46.1%;
  --grey-500: hsl(var(--grey-500-hsl));
  --grey-600: hsl(215, 13.8%, 34.1%);
  --grey-700: hsl(216.9, 19.1%, 26.7%);
  --grey-800: hsl(215, 27.9%, 16.9%);
  --grey-900-hsl: 220.9, 39.3%, 11%;
  --grey-900: hsl(var(--grey-900-hsl));

  --white: hsla(var(--white-h), var(--white-s), var(--white-l), var(--white-a));
  --black-l: 4%;

  --text: #4a4a4a;
  --text-invert: #fff;
  --text-light: #7a7a7a;
  --text-strong: #363636;
  --text-muted: hsl(220, 8.9%, 42%);
  --danger-text: hsla(var(--danger-h), var(--danger-s), var(--danger-text-l), var(--danger-a));

  --input-placeholder-color: #6e6e6e;
  --pre-background: var(--background, whitesmoke);
  --code-background: var(--background, whitesmoke);
  --code: #da1039;
  --card-border-color: var(--grey-200);
  --logo-text-color: hsl(180, 1%, 15%);
  --switch-view-active-background: var(--primary);

  --scheme-main-bis: #fafafa;
  --scheme-main-ter: whitesmoke;
  --scheme-invert: #0a0a0a;
  --scheme-invert-bis: #121212;
  --scheme-invert-ter: #242424;

  --tag-color: initial;
  --table-row-hover-background-color: initial;
  --dropdown-item-hover-background-color: initial;
  --dropdown-item-hover-color: initial;
  --button-text-hover-background-color: initial;
  --button-hover-color: initial;
  --button-active-color: initial;
  --button-focus-color: initial;

  --code-variable: #da2222;
  --code-literal: #fd8a09;
  --code-symbol: #0ead69;
  --code-section: #3a86ff;
  --code-keyword: #8338ec;

  --shadow-xs: 0 1px 3px hsla(var(--grey-500-hsl), .12), 0 1px 2px hsla(var(--grey-500-hsl), .24);
  --shadow-sm: 0 3px 6px hsla(var(--grey-500-hsl), .12), 0 2px 4px hsla(var(--grey-500-hsl), .10);
  --shadow-md: 0 10px 20px hsla(var(--grey-500-hsl), .12), 0 3px 6px hsla(var(--grey-500-hsl), .08);
  --shadow-lg: 0 15px 25px hsla(var(--grey-500-hsl), .12), 0 5px 10px hsla(var(--grey-500-hsl), .05);
}
/* The two rules Vikunja writes for .dark outside its variables. */
html.dark .v-popper--theme-tooltip .v-popper__inner {
  background: var(--grey-900);
  color: var(--white);
}
html.dark .modal-dialog .close {
  color: var(--white);
}

/* Page and typography ====================================================== */

html {
  background: var(--sd-page) !important;
}
body,
.app-container,
.app-content {
  background: transparent !important;
}

html,
body,
button,
input,
select,
textarea,
.button,
.input,
.textarea {
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif !important;
}

/* Vikunja's headings use the rounded Quicksand. */
h1, h2, h3, h4, h5, h6,
.title,
.subtitle,
.project-title {
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

.button {
  text-transform: none !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.card {
  border-radius: var(--sd-radius) !important;
  border: 1px solid var(--card-border-color);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
  overflow: hidden;
}

/* Task lists =============================================================== */

/* Task rows: separators and a quiet hover instead of floating lines. */
.single-task {
  border-block-end: 1px solid var(--grey-200);
  padding-block: 0.45rem !important;
  border-radius: 0 !important;
  transition: background-color 0.15s ease;
}
.single-task:hover {
  background-color: var(--grey-50) !important;
}
.single-task .task-link {
  font-size: 0.95rem;
}
.single-task .task-project {
  color: var(--grey-400) !important;
  font-size: 0.8rem;
}

/* Due dates: small and upright, red when overdue. */
.single-task .dueDate time {
  font-style: normal !important;
  font-size: 0.8rem;
  color: var(--grey-500);
}
.single-task[data-is-overdue] .dueDate time {
  color: var(--sd-prio-high);
}

/* Round checkboxes. Vikunja draws a square outline; keep only its check mark. */
.fancy-checkbox__icon {
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--grey-400);
}
.fancy-checkbox__icon path {
  stroke: transparent !important;
}
.fancy-checkbox:hover .fancy-checkbox__icon,
.fancy-checkbox input:checked + .fancy-checkbox__icon {
  box-shadow: inset 0 0 0 1.5px var(--primary);
}

/* Priority: coloured ring and tint on the checkbox, like Todoist. */
.single-task:has(.priority-label.high-priority) .fancy-checkbox__icon {
  box-shadow: inset 0 0 0 2px var(--sd-prio-high);
  background: color-mix(in srgb, var(--sd-prio-high) 12%, transparent);
}
.single-task:has(.priority-label.not-so-high) .fancy-checkbox__icon {
  box-shadow: inset 0 0 0 2px var(--sd-prio-medium);
  background: color-mix(in srgb, var(--sd-prio-medium) 12%, transparent);
}

/* The priority word becomes a small flag. In lists "medium" is left to the
   ring; high and urgent share one class (and ring colour), so they keep it. */
.priority-label.high-priority,
.priority-label.not-so-high {
  font-size: 0.68rem !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: transparent !important;
}
.priority-label .icon {
  display: none !important;
}
.priority-label.high-priority {
  color: var(--sd-prio-high) !important;
}
.priority-label.not-so-high {
  color: var(--sd-prio-medium-ink) !important;
}
.single-task .priority-label.not-so-high {
  display: none !important;
}

/* Labels: soft pills tinted with the label colour. A veil over Vikunja's
   solid label colour leaves a pastel tint. */
.tag {
  position: relative;
  isolation: isolate;
  border-radius: 999px !important;
  height: 1.45em !important;
  padding-inline: 0.6em !important;
  font-size: 0.72rem !important;
  font-weight: 700;
  color: var(--grey-900) !important;
  overflow: hidden;
}
.tag::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--white);
  opacity: 0.55;
}

/* Labels sit side by side in table cells; the column grows to fit. */
table .label-wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0.25rem;
}

.kanban-card {
  border-radius: var(--sd-radius) !important;
  border: 1px solid var(--card-border-color);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05) !important;
}
.kanban-card .task-id {
  font-size: 0.7rem;
  color: var(--grey-400);
}
.kanban-card h3,
.kanban-card .kanban-card__title-link {
  font-weight: 400 !important;
  font-size: 0.95rem !important;
  color: var(--grey-800);
}

/* "Nothing to do": the SD illustration instead of Vikunja's llama. */
.llama-cool {
  inline-size: 15rem;
  block-size: 15rem;
  background: url("/branding/empty.svg") center / contain no-repeat;
}
.llama-cool > * {
  display: none;
}

/* Top bar and navigation =================================================== */

.navbar {
  background: var(--white) !important;
  border-block-end: 1px solid var(--sd-warm-border);
  box-shadow: none !important;
}
.navbar .project-title {
  font-size: 1.2rem !important;
}
.menu-container {
  background: transparent !important;
  box-shadow: none !important;
}

/* Navigation in white groups on the page background. */
.menu-container .menu {
  background: var(--white);
  border: 1px solid var(--card-border-color);
  border-radius: var(--sd-radius);
  padding: 0.25rem;
  margin: 0 0.5rem 0.5rem;
}
.menu-container .menu.top-menu {
  margin-block-start: 0.75rem;
}
.menu-container .menu-list a {
  border-radius: 8px;
  margin-block: 1px;
  font-size: 0.93rem;
}
.menu-container .menu-list a:hover {
  background: var(--sd-warm-bg) !important;
}
.menu-container .menu-list a.router-link-active,
.menu-container .menu-list a.router-link-exact-active {
  background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
  color: var(--primary) !important;
  font-weight: 700;
}
/* Project entries sit in .navigation-item next to their (hover) menu
   button; highlight the whole row, not just the link. */
.menu-container .navigation-item {
  border-radius: 8px;
}
.menu-container .navigation-item:hover {
  background: var(--sd-warm-bg);
}
.menu-container .navigation-item:has(> a.router-link-active),
.menu-container .navigation-item:has(> a.router-link-exact-active) {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.menu-container .menu-list .navigation-item > a,
.menu-container .menu-list .navigation-item > a:hover,
.menu-container .menu-list .navigation-item > a.router-link-active,
.menu-container .menu-list .navigation-item > a.router-link-exact-active {
  background: transparent !important;
}

/* Project cards and home =================================================== */

/* Wider and lower than Vikunja's five 150px columns, so names fit on one
   or two lines. */
.project-grid {
  --project-grid-item-height: 7.5rem !important;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)) !important;
}
.project-card .project-title {
  -webkit-line-clamp: 2 !important;
  font-size: 1.05rem !important;
  line-height: 1.3 !important;
  word-break: normal !important;
  overflow-wrap: break-word;
  hyphens: auto;
}
.home .title {
  margin-block: 1.75rem 0.75rem !important;
}

/* Task detail ============================================================== */

/* One white surface. Header order: back link, project path, then the title
   as the strongest element. */
.task-view,
html body .task-view-container.is-modal .task-view {
  display: flex !important;
  flex-direction: column;
  box-sizing: border-box;
  max-inline-size: 100%;
  background: var(--white) !important;
  border: 1px solid var(--card-border-color);
  border-radius: var(--sd-radius);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  padding: 1.5rem 2rem 2rem !important;
}
.task-view > .back-button {
  order: -2;
  align-self: flex-start;
  font-size: 0.85rem;
  color: var(--grey-500);
}
.task-view > .back-button:hover {
  color: var(--primary);
}
.task-view > .subtitle {
  order: -1;
  margin: 0.75rem 0 0.15rem !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  color: var(--grey-400);
}
.task-view > .subtitle a {
  color: var(--grey-600) !important;
  font-weight: 400 !important;
}
.task-view > .subtitle a:hover {
  color: var(--primary) !important;
}
.task-view .heading {
  margin-block-end: 0.5rem;
}
.task-view .heading .title {
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: var(--grey-900);
}
.task-view .heading .title.task-id {
  color: var(--grey-400);
}
.task-view .task-section-title {
  font-size: 1.15rem !important;
  margin-block: 1.75rem 0.5rem !important;
}

/* Properties as rows, label | value, like a property sheet. Labels and
   remove buttons line up with the first line of the value. */
.task-view .detail-content {
  container-type: inline-size;
}
.task-view .columns.details {
  display: block !important;
  margin: 0 0 0.25rem !important;
}
.task-view .columns.details > .column,
.task-view .labels-list.details {
  display: grid !important;
  grid-template-columns: 10rem minmax(0, 1fr);
  align-items: start;
  column-gap: 1rem;
  inline-size: auto !important;
  max-inline-size: none !important;
  margin: 0 !important;
  padding: 0.5rem 0 !important;
  border-block-end: 1px solid var(--grey-200);
}
.task-view .details .heading,
.task-view .detail-title {
  color: var(--grey-500);
}
.task-view .columns.details .detail-title,
.task-view .labels-list.details .detail-title {
  display: flex !important;
  align-items: center;
  gap: 0.35rem;
  min-block-size: 2.25rem;
  margin: 0 !important;
  font-size: 0.9rem;
  color: var(--grey-500);
}
.task-view .columns.details .select,
.task-view .columns.details .select select {
  inline-size: auto;
}

/* Remove buttons (dates, repeat) sit right after their value. */
.task-view .columns.details .date-input,
.task-view .columns.details .is-justify-content-space-between {
  justify-content: flex-start !important;
  gap: 0.5rem;
}
.task-view .columns.details .date-input .datepicker {
  flex: 0 0 auto !important;
  inline-size: auto !important;
}
.task-view .columns.details .remove {
  color: var(--grey-400) !important;
}
.task-view .columns.details .remove:hover {
  color: var(--sd-prio-high) !important;
}

/* Repeat: quick choices as pills, "mode" as a small field label, the remove
   button next to the pills. */
.task-view .columns.details > .column:has(> .repeat-after-input) {
  grid-template-columns: 10rem minmax(0, 17.5rem) auto;
  justify-content: start;
}
.task-view .columns.details > .column > .is-justify-content-space-between:has(+ .repeat-after-input) {
  display: contents !important;
}
.task-view .columns.details > .column:has(> .repeat-after-input) .remove {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
  align-self: start;
  min-block-size: 2.25rem;
  display: flex;
  align-items: center;
}
.task-view .columns.details > .column > .repeat-after-input {
  grid-column: 2;
  grid-row: 1;
}
.task-view .repeat-after-input .button-group {
  justify-content: flex-start !important;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-block-start: 0 !important;
}
.task-view .repeat-after-input .button-group .button {
  --button-white-space: nowrap;
  white-space: nowrap !important;
  font-weight: 400 !important;
  font-size: 0.85rem !important;
  border-radius: 999px !important;
  border: 1px solid var(--grey-200) !important;
  box-shadow: none !important;
  background: var(--white) !important;
}
.task-view .repeat-after-input .button-group .button:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
.task-view .repeat-after-input > .is-flex {
  flex-wrap: wrap;
  align-items: center !important;
  gap: 0.25rem 0.5rem;
  margin-block: 0.5rem 0 !important;
}
.task-view .repeat-after-input > .is-flex > label,
.task-view .repeat-after-input > .is-flex > p {
  inline-size: auto !important;
  flex: 0 0 auto;
  margin: 0;
  padding: 0 !important;
  font-size: 0.85rem;
  color: var(--grey-500);
  white-space: nowrap;
}
.task-view .repeat-after-input > .is-flex > .field {
  margin: 0;
}
.task-view .repeat-after-input > .is-flex > .control,
.task-view .repeat-after-input > .is-flex .select,
.task-view .repeat-after-input > .is-flex select {
  min-inline-size: 8rem;
  max-inline-size: 100%;
}

/* Assignees as chips (avatar, name, remove); the search field follows on
   the same line. */
.task-view .edit-assignees .input-wrapper {
  align-items: center;
  gap: 0.35rem;
}
.task-view .edit-assignees .input-wrapper .input {
  flex: 1 1 10rem;
  inline-size: auto !important;
  max-inline-size: none !important;
  font-size: 0.9rem;
}
.task-view .edit-assignees .assignees-list {
  flex-wrap: wrap;
  gap: 0.35rem;
}
.task-view .edit-assignees .assignee {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0 !important;
  padding: 0.15rem 0.25rem 0.15rem 0.15rem;
  border-radius: 999px;
  background: var(--sd-warm-bg);
}
.task-view .edit-assignees .assignee .user {
  margin: 0 !important;
  gap: 0.4rem;
}
.task-view .edit-assignees .assignee .avatar-wrapper {
  margin: 0 !important;
}
.task-view .edit-assignees .assignee .user img {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border: 0 !important;
}
.task-view .edit-assignees .assignee .user .username {
  display: inline !important;
  font-size: 0.85rem !important;
  color: var(--text);
}
.task-view .edit-assignees .remove-assignee {
  position: static !important;
  inline-size: 1.25rem !important;
  block-size: 1.25rem !important;
  background: transparent !important;
  color: var(--grey-400) !important;
}
.task-view .edit-assignees .remove-assignee:hover {
  color: var(--sd-prio-high) !important;
}

/* Related tasks: a ruled list on the section's left edge. */
.task-view .related-tasks > .title {
  display: block;
  margin-block: 0.75rem 0.25rem !important;
  font-size: 0.75rem !important;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grey-500);
}
.task-view .related-tasks .tasks .task {
  margin: 0 !important;
  padding: 0.5rem 0 !important;
  border-block-end: 1px solid var(--grey-200);
}
.task-view .related-tasks .tasks .task > .is-flex {
  padding: 0 !important;
}

/* An empty comment box need not be 160px tall. */
.task-view .comments-container .tiptap__editor {
  min-block-size: 5rem !important;
}

/* The actions become a quiet list, separated by a rule, not tiles.
   "Mark as done" stays the one prominent action, in green. */
.task-view .action-buttons {
  border-inline-start: 1px solid var(--grey-200);
  padding-inline-start: 1.25rem !important;
}
.task-view .action-buttons .action-heading {
  color: var(--grey-500);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  margin-block: 1rem 0.35rem;
}
.task-view .action-buttons .button {
  --button-white-space: normal;
  white-space: normal !important;
  text-align: start !important;
  justify-content: flex-start !important;
  height: auto !important;
  min-height: 2.1rem;
  line-height: 1.3 !important;
  padding-block: 0.45rem !important;
  margin-block-end: 0.1rem !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  background: transparent !important;
  font-weight: 400 !important;
  color: var(--text) !important;
}
.task-view .action-buttons .button:hover {
  background: var(--sd-warm-bg) !important;
}
.task-view .action-buttons .button .icon {
  flex-shrink: 0;
  color: var(--grey-500) !important;
}
.task-view .action-buttons .button.is-danger {
  color: var(--sd-prio-high) !important;
}
.task-view .action-buttons .button--mark-done {
  background: var(--sd-work) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  justify-content: center !important;
  margin-block-end: 0.5rem !important;
}
.task-view .action-buttons .button--mark-done .icon {
  color: #ffffff !important;
}

/* Narrow content column (phone, or tablet next to the sidebar): label above value. */
@container (max-width: 34rem) {
  .task-view .columns.details > .column,
  .task-view .labels-list.details {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.35rem;
  }
  .task-view .columns.details > .column:has(> .repeat-after-input) {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .task-view .columns.details > .column:has(> .repeat-after-input) .remove {
    grid-column: 2;
  }
  .task-view .columns.details > .column > .repeat-after-input {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media screen and (max-width: 768px) {
  .task-view,
  html body .task-view-container.is-modal .task-view {
    padding: 1rem !important;
  }
  .task-view .heading {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 0.5rem;
  }
  .task-view .heading .title.input {
    margin: 0 !important;
  }
  .task-view .action-buttons {
    border-inline-start: 0;
    padding-inline-start: 0.75rem !important;
    border-block-start: 1px solid var(--grey-200);
    padding-block-start: 1rem;
  }
}

/* Login: the photo from software-design.de ================================ */

.no-auth-wrapper {
  background: var(--sd-page) !important;
}
.noauth-container {
  border-radius: var(--sd-radius) !important;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
}
.noauth-container .image {
  background-image: image-set(url("/branding/login.webp") type("image/webp"), url("/branding/login.jpg") type("image/jpeg")) !important;
  background-position: center !important;
  background-size: cover !important;
}

/* Settings: both colour schemes look the same, so the choice is hidden. */
.general-settings .field:has(option[value="dark"]) {
  display: none !important;
}