/* HLG Aufgaben v3 — light navy/cream theme, WCAG AA text.
   Overrides Vikunja tokens for :root and .dark / prefers-color-scheme. */

:root {
  --hlg-navy: #0a1928;
  --hlg-navy-2: #14304f;
  --hlg-gold: #d6b779;
  --hlg-gold-ink: #6b5228;
  --hlg-page: #f3efe4;
  --hlg-card: #fffdf8;
  --hlg-cream: #f7f2e7;
  --hlg-border: #c9b896;
  --hlg-ink: #0a1928;
  --hlg-body: #1c3348;
  --hlg-muted: #3d4f61;
  --hlg-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Baskerville, Georgia, "Times New Roman", serif;
  --hlg-sans: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

:root,
:root.dark,
html.dark,
html.light,
.dark {
  color-scheme: light !important;
  --grey-50-hsl: 40, 42%, 96%;
  --grey-50: #faf6ee !important;
  --grey-100-hsl: 44, 38.5%, 92.4%;
  --grey-100: #f3efe4 !important;
  --grey-200: #e4d9c4 !important;
  --grey-300: #cfc4ad !important;
  --grey-400: #4a5c6e !important;
  --grey-500-hsl: 210, 22.8%, 31%;
  --grey-500: #3d4f61 !important;
  --grey-600: #2c4154 !important;
  --grey-700: #24384a !important;
  --grey-800: #1c3348 !important;
  --grey-900-hsl: 210, 60%, 9.8%;
  --grey-900: #0a1928 !important;
  --site-background: #f3efe4 !important;
  --white-h: 42.9deg !important;
  --white-s: 100% !important;
  --white-l: 98.6% !important;
  --white-a: 1 !important;
  --white: #fffdf8 !important;
  --white-bis: #faf6ee !important;
  --white-ter: #f3efe4 !important;
  --white-translucent: rgba(255, 253, 248, .92) !important;
  --black-h: 210deg !important;
  --black-s: 60% !important;
  --black-l: 9.8% !important;
  --black-a: 1 !important;
  --black: #0a1928 !important;
  --black-bis: #0a1928 !important;
  --black-ter: #14304f !important;
  --scheme-main: #fffdf8 !important;
  --scheme-main-bis: #faf6ee !important;
  --scheme-main-ter: #f3efe4 !important;
  --scheme-invert: #0a1928 !important;
  --scheme-invert-bis: #14304f !important;
  --scheme-invert-ter: #1c3348 !important;
  --scheme-invert-rgb: 10, 25, 40 !important;
  --body-background-color: #f3efe4 !important;
  --body-color: #1c3348 !important;
  --body-family: var(--hlg-sans) !important;
  --family-primary: var(--hlg-sans) !important;
  --text: #1c3348 !important;
  --text-strong: #0a1928 !important;
  --text-light: #3d4f61 !important;
  --text-muted: #3d4f61 !important;
  --text-invert: #f7f2e7 !important;
  --title-color: #0a1928 !important;
  --title-strong-color: #0a1928 !important;
  --subtitle-color: #24384a !important;
  --strong-color: #0a1928 !important;
  --primary-h: 210deg !important;
  --primary-s: 60% !important;
  --primary-l: 9.8% !important;
  --primary-a: 1 !important;
  --primary-hsl: 210, 60%, 9.8% !important;
  --primary: #0a1928 !important;
  --primary-light: #14304f !important;
  --primary-dark: #061018 !important;
  --primary-invert: #f7f2e7 !important;
  --primary-invert-l: 95% !important;
  --link: #6b5228 !important;
  --link-hover: #0a1928 !important;
  --button-text-color: #f7f2e7 !important;
  --button-hover-color: #f7f2e7 !important;
  --button-active-color: #f7f2e7 !important;
  --button-focus-color: #f7f2e7 !important;
  --button-text-hover-background-color: #e4d9c4 !important;
  --logo-text-color: #0a1928 !important;
  --border: #c9b896 !important;
  --border-hover: #6b5228 !important;
  --border-light: #e4d9c4 !important;
  --card-border-color: #c9b896 !important;
  --hr-background-color: #e4d9c4 !important;
  --input-color: #0a1928 !important;
  --input-background-color: #fffdf8 !important;
  --input-border-color: #c9b896 !important;
  --input-hover-color: #0a1928 !important;
  --input-hover-border-color: #6b5228 !important;
  --input-focus-color: #0a1928 !important;
  --input-focus-border-color: #9f814a !important;
  --input-placeholder-color: #3d4f61 !important;
  --input-icon-color: #3d4f61 !important;
  --input-icon-active-color: #0a1928 !important;
  --input-disabled-color: #3d4f61 !important;
  --input-disabled-background-color: #f3efe4 !important;
  --input-disabled-border-color: #e4d9c4 !important;
  --label-color: #0a1928 !important;
  --background: #f3efe4 !important;
  --menu-item-color: #f7f2e7 !important;
  --menu-item-hover-color: #d6b779 !important;
  --menu-item-hover-background-color: rgba(214, 183, 121, .14) !important;
  --menu-item-active-color: #d6b779 !important;
  --menu-item-active-background-color: rgba(214, 183, 121, .16) !important;
  --menu-label-color: #d6b779 !important;
  --dropdown-item-hover-background-color: #f3efe4 !important;
  --dropdown-item-hover-color: #0a1928 !important;
  --table-color: #1c3348 !important;
  --table-head-cell-color: #0a1928 !important;
  --table-cell-heading-color: #0a1928 !important;
  --table-background-color: #fffdf8 !important;
  --table-body-background-color: #fffdf8 !important;
  --table-head-background-color: #f3efe4 !important;
  --table-row-hover-background-color: #f7f2e7 !important;
  --table-row-active-background-color: #f3efe4 !important;
  --table-row-active-color: #0a1928 !important;
  --table-striped-row-even-background-color: #faf6ee !important;
  --tag-background-color: #f3efe4 !important;
  --tag-color: #0a1928 !important;
  --code-background: #f3efe4 !important;
  --pre-background: #f3efe4 !important;
  --code: #6b5228 !important;
  --switch-view-color: #1c3348 !important;
  --switch-view-active-background: #0a1928 !important;
  --danger: #9b1c12 !important;
  --danger-text: #8e1b12 !important;
  --danger-h: 4deg !important;
  --danger-s: 79% !important;
  --danger-l: 34% !important;
  --success: #0e7a43 !important;
  --warning: #8a5a00 !important;
  --info: #1c4e7a !important;
  --shadow-xs: 0 1px 2px rgba(10, 25, 40, .08) !important;
  --shadow-sm: 0 3px 8px rgba(10, 25, 40, .08) !important;
  --shadow-md: 0 12px 28px rgba(10, 25, 40, .12) !important;
  --shadow-lg: 0 20px 44px rgba(10, 25, 40, .16) !important;
  --focus-box-shadow-color: rgba(214, 183, 121, .45) !important;
  --input-focus-box-shadow-color: rgba(214, 183, 121, .45) !important;
}

@media (prefers-color-scheme: dark) {
  :root,
  :root.dark,
  html.dark {
    color-scheme: light !important;
    --site-background: #f3efe4 !important;
    --white: #fffdf8 !important;
    --black: #0a1928 !important;
    --black-l: 9.8% !important;
    --text: #1c3348 !important;
    --text-strong: #0a1928 !important;
    --text-light: #3d4f61 !important;
    --grey-900: #0a1928 !important;
    --grey-100: #f3efe4 !important;
    --grey-50: #faf6ee !important;
    --primary: #0a1928 !important;
    --scheme-main: #fffdf8 !important;
  }
}

html,
body,
#app,
button,
input,
select,
textarea {
  color-scheme: light !important;
}

html,
body {
  background: #f3efe4 !important;
  color: #1c3348 !important;
  font-family: var(--hlg-sans) !important;
}

h1, h2, h3, h4, h5, h6,
.title,
.project-title,
.heading,
.content h1, .content h2, .content h3 {
  font-family: var(--hlg-serif) !important;
  color: #0a1928;
  letter-spacing: .01em;
}

::selection {
  background: #0a1928;
  color: #f7f2e7;
}

:focus-visible {
  outline-color: #9f814a !important;
}

a {
  color: #6b5228;
}

a:hover {
  color: #0a1928;
}

::placeholder {
  color: #3d4f61 !important;
  opacity: 1 !important;
}

input,
textarea,
select,
.input,
.textarea,
.select select {
  background-color: #fffdf8 !important;
  color: #0a1928 !important;
  border-color: #c9b896 !important;
}

input:focus,
textarea:focus,
select:focus,
.input:focus,
.textarea:focus {
  border-color: #9f814a !important;
  box-shadow: 0 0 0 .125em rgba(214, 183, 121, .35) !important;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #0a1928 !important;
  caret-color: #0a1928;
  box-shadow: 0 0 0 1000px #fffdf8 inset !important;
}

/* Primary actions: navy field, cream label, gold edge. Outlined/text stay light. */
.button:not(.is-outlined):not(.is-text):not(.is-danger) {
  --button-text-color: #f7f2e7 !important;
  background-color: #0a1928 !important;
  color: #f7f2e7 !important;
  border: 1px solid #d6b779 !important;
}

.button:not(.is-outlined):not(.is-text):not(.is-danger):hover {
  background-color: #14304f !important;
  color: #f7f2e7 !important;
}

.button.is-outlined {
  background: #fffdf8 !important;
  color: #0a1928 !important;
  border: 1px solid #0a1928 !important;
  --button-text-color: #0a1928 !important;
}

.button.is-text {
  background: transparent !important;
  color: #0a1928 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  --button-text-color: #0a1928 !important;
}

.button.is-danger:not(.is-outlined):not(.is-text) {
  background: #9b1c12 !important;
  color: #fffdf8 !important;
  border-color: #9b1c12 !important;
  --button-text-color: #fffdf8 !important;
}

.button.is-loading {
  color: transparent !important;
}

.card,
.box,
.modal-card,
.dropdown-content,
.notifications-list {
  background: #fffdf8 !important;
  color: #1c3348 !important;
  border-color: #e4d9c4 !important;
}

/* Navbar */
.navbar,
.app-header {
  background: #f7f2e7 !important;
  color: #0a1928 !important;
  border-bottom: 1px solid rgba(159, 129, 74, .45) !important;
  box-shadow: none !important;
}

.navbar .trigger-button,
.navbar button,
.navbar a,
.menu-hide-button {
  color: #0a1928 !important;
}

/* Generated letter avatars use a pastel that fails AA. Navy on cream does not. */
.avatar,
.avatar * {
  background-color: #0a1928 !important;
  color: #f7f2e7 !important;
}

@media screen and (width <= 769px) {
  .navbar .logo-link {
    display: flex !important;
    align-items: center !important;
  }
}

/* Sidebar */
.menu-container {
  background: #0a1928 !important;
  color: #f7f2e7 !important;
  border-right: 1px solid rgba(214, 183, 121, .35);
}

.menu-container :is(a, p, span, li, label, h1, h2, h3, h4, small, strong),
.menu-container .menu-list a,
.menu-container .list-menu-link > a,
.menu-container .icon,
.menu-container svg {
  color: #f7f2e7 !important;
}

.menu-container a:hover,
.menu-container .menu-list a:hover,
.menu-container .list-menu-link > a:hover {
  color: #d6b779 !important;
  background-color: rgba(214, 183, 121, .12) !important;
}

.menu-container a.router-link-exact-active,
.menu-container .router-link-exact-active,
.menu-container .router-link-exact-active .icon,
.menu-container .router-link-exact-active svg {
  color: #d6b779 !important;
}

.menu-container .saved-filter-icon,
.menu-container .collapse-project-button svg {
  color: #e6d3a3 !important;
}

.menu-container input,
.menu-container textarea,
.menu-container select {
  background: #fffdf8 !important;
  color: #0a1928 !important;
  border-color: #d6b779 !important;
}

.menu-container .button:not(.is-text):not(.is-outlined) {
  background: #14304f !important;
  color: #f7f2e7 !important;
  border: 1px solid #d6b779 !important;
}

/* Crest. SVG wordmark stays hidden; the img comes from CUSTOM_LOGO_URL. */
svg.logo,
svg.logo * {
  display: none !important;
}

img.logo {
  display: block !important;
  height: 40px !important;
  width: auto !important;
  max-height: 40px !important;
  max-width: 46px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
}

.navbar .logo,
.logo-link .logo {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  min-height: 0 !important;
  background: none !important;
}

/* Desktop already shows the crest in the top bar. The slide-out menu
   keeps its own crest; Vikunja hides that link from 769px up. */
@media screen and (width >= 769px) {
  .menu-container > .logo,
  .menu-container a.logo {
    display: none !important;
  }
}

.navbar img.logo,
.logo-link img.logo,
.menu-container img.logo {
  height: 40px !important;
  max-height: 40px !important;
  max-width: 46px !important;
}

/* Login */
.no-auth-wrapper {
  background-color: #0a1928 !important;
  background-image: radial-gradient(ellipse at 50% 0%, #16324f 0%, #0a1928 64%) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  padding: 1.25rem !important;
  padding-block-end: 1.25rem !important;
  min-height: 100vh !important;
  justify-content: center !important;
}

.no-auth-wrapper .image,
.no-auth-wrapper .image-title {
  display: none !important;
}

.noauth-container {
  position: relative !important;
  z-index: 1 !important;
  background: #f7f2e7 !important;
  color: #0a1928 !important;
  width: min(440px, 100%) !important;
  max-width: 440px !important;
  min-height: 0 !important;
  min-block-size: 0 !important;
  overflow: visible !important;
  border-radius: 16px !important;
  border-top: 4px solid #d6b779 !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .38) !important;
}

.no-auth-wrapper .content {
  width: 100% !important;
  max-width: none !important;
  inline-size: 100% !important;
  max-inline-size: none !important;
  color: #0a1928 !important;
  padding-top: 164px !important;
}

.no-auth-wrapper h1,
.no-auth-wrapper h2,
.no-auth-wrapper .title {
  color: #0a1928 !important;
  text-align: center;
  font-family: var(--hlg-serif) !important;
}

/* The crest is a sibling before the card. Uncap the 48px Vue root and
   pull it down so the full 120px mark sits inside the cream card. */
.no-auth-wrapper > .logo {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 112px !important;
  height: 120px !important;
  min-height: 120px !important;
  max-block-size: none !important;
  max-inline-size: 120px !important;
  max-height: none !important;
  max-width: 120px !important;
  margin: 28px auto -148px !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

.no-auth-wrapper img.logo {
  display: block !important;
  height: 120px !important;
  width: auto !important;
  max-block-size: none !important;
  max-inline-size: 112px !important;
  max-height: 120px !important;
  max-width: 112px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}

.no-auth-wrapper label,
.no-auth-wrapper p,
.no-auth-wrapper a,
.no-auth-wrapper .field,
.no-auth-wrapper small {
  color: #1c3348;
}

.no-auth-wrapper a {
  color: #6b5228 !important;
}

.no-auth-wrapper .button:not(.is-text):not(.is-outlined) {
  background: #0a1928 !important;
  color: #d6b779 !important;
  border: 1px solid #d6b779 !important;
}

/* Loading */
.vikunja-loading {
  background: #f3efe4 !important;
  color: #0a1928 !important;
}

.vikunja-loading .title,
.vikunja-loading p {
  color: #0a1928 !important;
  text-shadow: none !important;
}

/* The loading mark is an SVG llama. hlg.js swaps in the crest image. */
.hlg-loading-mark {
  display: block !important;
  width: 110px !important;
  height: 120px !important;
  object-fit: contain !important;
  margin: 0 auto .75rem !important;
}

.vikunja-loading svg.logo {
  display: none !important;
}

.offline {
  background: #0a1928 !important;
}

.offline-message,
.offline .title {
  color: #f7f2e7 !important;
}

/* Lists, kanban, task detail */
.app-container,
.app-content,
.project-view,
.task-view,
.list-view {
  color: #1c3348;
}

.tasks .task,
.kanban .task,
.list-view .task {
  background: #fffdf8 !important;
  color: #0a1928 !important;
  border: 1px solid #e4d9c4 !important;
  border-radius: 8px !important;
}

.tasks .task a,
.kanban .task a,
.task .tasktext {
  color: #0a1928 !important;
}

.task .tasktext.done,
.task span.parent-tasks,
.task .task-project {
  color: #3d4f61 !important;
}

.kanban .bucket {
  background: #efe8d6 !important;
}

.kanban .bucket-header,
.kanban .bucket-footer,
.kanban .bucket .task-item {
  background: #efe8d6 !important;
  color: #0a1928 !important;
}

.kanban .bucket-header,
.kanban .bucket-header * {
  color: #0a1928 !important;
}

.gantt-chart-container,
.gantt-timeline,
.gantt-rows {
  background: #fffdf8 !important;
  color: #0a1928 !important;
}

.gantt-bar-text,
.gantt-timeline-months .timeunit-month,
.gantt-timeline-days .timeunit {
  color: #0a1928 !important;
}

.gantt-timeline-days .timeunit .timeunit-wrapper.today {
  background: #0a1928 !important;
  color: #f7f2e7 !important;
}

.is-modal .task-view,
.task-view,
.detail-view,
.details {
  color: #1c3348 !important;
}

.detail-title,
.comments-heading,
.action-heading {
  color: #0a1928 !important;
}

/* Dialogs, menus, notifications */
dialog,
dialog .modal-container,
.modal-content,
.modal-card-head,
.modal-card-body,
.modal-card-foot,
.quick-actions {
  background: #f7f2e7 !important;
  color: #0a1928 !important;
}

dialog .close,
.modal-container > .close,
.delete {
  color: #0a1928 !important;
  background: transparent !important;
}

dialog::backdrop {
  background: rgba(10, 25, 40, .55) !important;
}

.v-popper--theme-dropdown .v-popper__inner,
.dropdown-menu,
.dropdown-content,
.multiselect__content-wrapper,
.multiselect__tags,
.filter-popup,
.date-range-input__popup {
  background: #fffdf8 !important;
  color: #0a1928 !important;
  border: 1px solid #c9b896 !important;
}

.v-popper--theme-dropdown .v-popper__inner a,
.dropdown-item,
.dropdown-content a,
.multiselect__option {
  color: #0a1928 !important;
}

.dropdown-item:hover,
.dropdown-item.is-active,
.multiselect__option--highlight {
  background: #f3efe4 !important;
  color: #0a1928 !important;
}

.v-popper--theme-tooltip .v-popper__inner {
  background: #0a1928 !important;
  color: #f7f2e7 !important;
}

.notifications-list,
.notifications-list .single-notification,
.vue-notification,
.notification {
  background: #fffdf8 !important;
  color: #0a1928 !important;
  border: 1px solid #e4d9c4 !important;
}

.notifications .unread-indicator {
  background: #9f814a !important;
  border-color: #f7f2e7 !important;
}

.update-notification {
  background: #f3e6c4 !important;
  color: #0a1928 !important;
}

.add-to-home-screen {
  background: #0a1928 !important;
  color: #f7f2e7 !important;
}

/* Settings and misc surfaces */
.switch-view {
  background: #fffdf8 !important;
  color: #1c3348 !important;
  border: 1px solid #e4d9c4 !important;
}

.switch-view .is-active,
.switch-view button.is-active {
  background: #0a1928 !important;
  color: #f7f2e7 !important;
}

table,
.table {
  background: #fffdf8 !important;
  color: #1c3348 !important;
}

.table th,
.table td {
  color: #1c3348 !important;
  border-color: #e4d9c4 !important;
}

.tag,
.labels-list .tag {
  color: #0a1928 !important;
}

.message,
.message-body {
  background: #fffdf8 !important;
  color: #1c3348 !important;
}

.powered-by,
.api-config .api-url-info {
  display: none !important;
}

/* Flatpickr / popovers that ship their own colors */
.flatpickr-calendar,
.flatpickr-months,
.flatpickr-innerContainer,
.flatpickr-time,
.flatpickr-days,
.dayContainer {
  background: #fffdf8 !important;
  color: #0a1928 !important;
}

.flatpickr-day {
  color: #0a1928 !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #0a1928 !important;
  border-color: #0a1928 !important;
  color: #f7f2e7 !important;
}

.flatpickr-current-month,
.flatpickr-weekday,
.flatpickr-monthDropdown-months {
  color: #0a1928 !important;
  background: transparent !important;
}

/* Bulma grey-light is a light surface token. Used as text it fails AA. */
body .has-text-grey-light,
body .has-text-grey-lighter,
body .has-text-grey {
  color: #3d4f61 !important;
}

.menu-container .has-text-grey-light,
.menu-container .has-text-grey-lighter,
.menu-container .has-text-grey {
  color: #e6d3a3 !important;
}

.ProseMirror p.is-empty::before,
.ProseMirror .is-empty::before,
.editor p.is-empty::before {
  color: #3d4f61 !important;
}

/* v4 2026-10-24: no llama in empty states, readable disabled buttons */
.llama-cool,
svg.llama-cool,
img.llama-cool {
  display: none !important;
}
.powered-by,
a[href*="vikunja.io"].powered-by {
  display: none !important;
}
.button[disabled],
.button:disabled,
button:disabled,
fieldset[disabled] .button {
  background-color: #e4d9c4 !important;
  border-color: #c9b896 !important;
  color: #3d4f61 !important;
  opacity: 1 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}
html body .button:not(.is-outlined):not(.is-text):not(.is-danger)[disabled],
html body .button:not(.is-outlined):not(.is-text):not(.is-danger):disabled,
html body .button.is-outlined:disabled,
html body .button.is-danger:disabled,
html body fieldset[disabled] .button:not(.is-text) {
  background-color: #e4d9c4 !important;
  border-color: #c9b896 !important;
  color: #3d4f61 !important;
  opacity: 1 !important;
  box-shadow: none !important;
}