/**
 * Avers clean layout overlay
 * Goal: match design-studio previews — calm hierarchy, even spacing, less noise.
 * Load AFTER theme-avers.css
 */

/* ── Shared quiet tokens ── */
:root {
  --avers-meta: #64748b;
  --avers-meta-soft: #94a3b8;
  --avers-chip-radius: 6px;
  --avers-card-pad: 0.9rem 1rem;
  --avers-gap: 0.55rem;
}

/* =========================================================
   SIDEBAR — soft hover (no white smear), hide drag handles
   Full-width row highlight; only the hovered/active leaf
   ========================================================= */

/* Laggy bg transitions + nested white paints = visual trail */
.menu-container .navigation-item,
.menu-container .list-menu,
.menu-container .menu-list a,
.menu-container .list-menu-link,
.menu-container a {
  transition: none !important;
}

/* Row is the highlight surface (covers title + star + ⋯) */
.menu-container .navigation-item {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
  padding-inline: 0.25rem 0.35rem !important;
  gap: 0.15rem !important;
}

.menu-container .navigation-item > a {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Kill nested white/blue paint on the link/text — only the row highlight should show */
.menu-container {
  --menu-item-hover-background-color: transparent;
  --menu-item-active-background-color: transparent;
  --menu-item-hover-color: #fff;
  --menu-item-active-color: #fff;
}

.menu-container .navigation-item,
.menu-container .navigation-item a,
.menu-container .menu-list a,
.menu-container .list-menu-link,
.menu-container .project-menu-title {
  user-select: none !important;
  -webkit-user-select: none !important;
}

.menu-container ::selection {
  background: transparent !important;
  color: inherit !important;
}

.menu-container .navigation-item > a,
.menu-container .navigation-item > a:hover,
.menu-container .navigation-item > a:focus,
.menu-container .navigation-item > a:focus-visible,
.menu-container .navigation-item > a.is-active,
.menu-container .navigation-item > a.router-link-active,
.menu-container .navigation-item > a.router-link-exact-active,
.menu-container .menu-list a,
.menu-container .menu-list a:hover,
.menu-container .menu-list a:focus,
.menu-container .menu-list a.is-active,
.menu-container .menu-list a.router-link-exact-active,
.menu-container .list-menu a.is-active,
.menu-container .navigation-item > a span,
.menu-container .menu-list a span,
.menu-container .project-menu-title {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.menu-container .navigation-item:has(:focus-visible),
.menu-container .navigation-item:focus-within:not(:hover) {
  background-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: none !important;
}

/* Soft hover on project rows (li>div / .navigation-item) — same as «Команды» */
.menu-container .menu-list li > div:hover,
.menu-container .menu-list.other-menu-items li:hover,
.menu-container .menu-list li > div.navigation-item:hover,
.menu-container .list-menu > .navigation-item:hover,
.menu-container .navigation-item:hover {
  background-color: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

.menu-container .menu-list li > div:hover > a {
  background-color: transparent !important;
  color: #fff !important;
}

/* Reset leftover paints on links/icons — keep row bg from rules above.
   IMPORTANT: only direct row children — never ⋯ dropdown descendants
   (those lived under :hover and stayed white-on-white). */
.menu-container .menu-list > li > a:hover,
.menu-container .list-menu-link:hover,
.menu-container .list-menu:hover > .navigation-item > a,
.menu-container .navigation-item:hover > a,
.menu-container .navigation-item:hover > span,
.menu-container .navigation-item:hover > .icon,
.menu-container .menu-list a.is-active,
.menu-container .navigation-item.is-active > a,
.menu-container .list-menu a.is-active,
.menu-container a.router-link-active,
.menu-container a.router-link-exact-active {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Hover children stay light on the soft row tint (direct only) */
.menu-container .navigation-item:hover > a,
.menu-container .navigation-item:hover > .icon,
.menu-container .navigation-item:hover > span,
.menu-container .navigation-item:hover > .favorite,
.menu-container .navigation-item:hover > .menu-list-dropdown,
.menu-container .navigation-item:hover > .menu-list-dropdown > .icon,
.menu-container .navigation-item:hover > .menu-list-dropdown > .menu-list-dropdown-trigger,
.menu-container .navigation-item:hover > .menu-list-dropdown > .menu-list-dropdown-trigger .icon,
.menu-container .menu-list li > div:hover > a,
.menu-container .menu-list li > div:hover > .icon {
  background-color: transparent !important;
  color: #fff !important;
}

/* Top-level menu links (Обзор, Проекты…) */
.menu-container .top-menu .menu-list > li > a,
.menu-container .menu-list > li > a.list-menu-link {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
}

.menu-container .top-menu .menu-list > li > a:hover,
.menu-container .menu-list > li > a.list-menu-link:hover {
  background-color: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
}

/* Active / click: same soft light highlight as hover — no red overlay */
.menu-container .navigation-item:active,
.menu-container .menu-list li > div:active,
.menu-container .list-menu > .navigation-item:active,
.menu-container .top-menu .menu-list > li > a:active,
.menu-container .menu-list > li > a.list-menu-link:active,
.menu-container .navigation-item.is-active,
.menu-container .navigation-item:has(> a.router-link-exact-active),
.menu-container .navigation-item:has(> a.is-active),
.menu-container .navigation-item.is-active:hover,
.menu-container .navigation-item:has(> a.router-link-exact-active):hover,
.menu-container .navigation-item:has(> a.is-active):hover,
.menu-container .top-menu .menu-list > li > a.is-active,
.menu-container .top-menu .menu-list > li > a.router-link-exact-active,
.menu-container .menu-list > li > a.list-menu-link.is-active,
.menu-container .menu-list > li > a.list-menu-link.router-link-exact-active,
.menu-container .top-menu .menu-list > li > a.is-active:hover,
.menu-container .top-menu .menu-list > li > a.router-link-exact-active:hover {
  background-color: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

.menu-container .navigation-item:active > a,
.menu-container .navigation-item.is-active > a,
.menu-container .navigation-item:has(> a.router-link-exact-active) > a,
.menu-container .navigation-item:has(> a.is-active) > a,
.menu-container .menu-list li > div:active > a,
.menu-container .navigation-item:active > .icon,
.menu-container .navigation-item.is-active > .icon,
.menu-container .navigation-item:has(> a.router-link-exact-active) > .icon,
.menu-container .navigation-item:has(> a.is-active) > .icon {
  background-color: transparent !important;
  color: #fff !important;
}

/* Parent projects with an active child — no highlight */
.menu-container .navigation-item:has(> a.router-link-active:not(.router-link-exact-active)):not(.is-active):not(:has(> a.router-link-exact-active)):not(:has(> a.is-active)) {
  background-color: transparent !important;
}

.menu-container .top-menu .menu-list > li > a.router-link-active:not(.router-link-exact-active):not(.is-active) {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Drag handles — hide */
.menu-container .drag-handle,
.menu-container .handle,
.menu-container .color-bubble-wrapper > .icon.drag-handle {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.menu-container .list-menu:hover .color-bubble-wrapper > .color-bubble,
.menu-container .color-bubble-wrapper .color-bubble,
.menu-container .color-bubble {
  opacity: 1 !important;
  visibility: visible !important;
}

.menu-container .color-bubble {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  flex: 0 0 10px !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22) !important;
}

/* Star / ⋮ only when the row is hovered */
.menu-container .favorite,
.menu-container .menu-list-dropdown {
  opacity: 0 !important;
  flex: 0 0 auto !important;
}

.menu-container .navigation-item:hover > .favorite,
.menu-container .navigation-item:hover > .menu-list-dropdown,
.menu-container .list-menu:hover > .navigation-item > .favorite,
.menu-container .list-menu:hover > .navigation-item > .menu-list-dropdown,
.menu-container .favorite.is-favorite {
  opacity: 0.9 !important;
}

.menu-container .list-menu:has(.list-menu .navigation-item:hover) > .navigation-item > .favorite:not(.is-favorite),
.menu-container .list-menu:has(.list-menu .navigation-item:hover) > .navigation-item > .menu-list-dropdown {
  opacity: 0 !important;
}

/* Keep ⋮ trigger visible while its dropdown is open */
.menu-container .navigation-item:has(.menu-list-dropdown .v-popper--shown) > .menu-list-dropdown,
.menu-container .navigation-item:has(.menu-list-dropdown .v-popper--shown) > .favorite,
.menu-container .navigation-item:has(.v-popper__popper--shown) > .menu-list-dropdown,
.menu-container .navigation-item:has(.v-popper__popper--shown) > .favorite,
.menu-container .menu-list-dropdown:has(.v-popper--shown),
.menu-container .menu-list-dropdown:has(.v-popper__popper--shown),
.menu-container .menu-list-dropdown:has([data-popper-placement]),
.menu-container .menu-list-dropdown .v-popper--shown,
.menu-container .menu-list-dropdown .v-popper__popper--shown {
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
}

/* =========================================================
   SIDEBAR ⋯ DROPDOWN — dark text on white (was invisible)
   IMPORTANT: only .v-popper--theme-dropdown — never tooltips
   ========================================================= */

.v-popper--theme-dropdown .v-popper__inner,
.menu-container .v-popper--theme-dropdown .v-popper__inner,
.menu-container .menu-list-dropdown .v-popper--theme-dropdown .v-popper__inner,
.menu-list-dropdown .v-popper--theme-dropdown .v-popper__inner,
.menu-container .dropdown-menu,
.menu-container .dropdown-content,
.menu-list-dropdown .dropdown-menu,
.menu-list-dropdown .dropdown-content {
  background: #ffffff !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14) !important;
  min-width: 14rem !important;
  width: max-content !important;
  max-width: min(20rem, 92vw) !important;
  padding: 0.35rem 0 !important;
  z-index: 10050 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.v-popper--theme-dropdown .v-popper__inner,
.v-popper--theme-dropdown .v-popper__inner *,
.menu-container .v-popper--theme-dropdown .v-popper__inner,
.menu-container .v-popper--theme-dropdown .v-popper__inner *,
.menu-container .dropdown-content,
.menu-container .dropdown-content *,
.menu-container .dropdown-item,
.menu-container .dropdown-item *,
.menu-list-dropdown .v-popper--theme-dropdown .v-popper__inner *,
.menu-list-dropdown .dropdown-item,
.menu-list-dropdown .dropdown-item *,
.v-popper--theme-dropdown a,
.v-popper--theme-dropdown button,
.v-popper--theme-dropdown .dropdown-item,
.v-popper--theme-dropdown span,
.v-popper--theme-dropdown .icon {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  fill: #111827 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.v-popper--theme-dropdown a,
.v-popper--theme-dropdown button,
.v-popper--theme-dropdown .dropdown-item,
.menu-container .dropdown-item,
.menu-container .v-popper--theme-dropdown .v-popper__inner a,
.menu-container .v-popper--theme-dropdown .v-popper__inner button,
.menu-list-dropdown .dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  width: 100% !important;
  min-width: 12rem !important;
  padding: 0.5rem 0.85rem !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  text-align: start !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

.v-popper--theme-dropdown a:hover,
.v-popper--theme-dropdown button:hover,
.v-popper--theme-dropdown .dropdown-item:hover,
.menu-container .dropdown-item:hover,
.menu-container .v-popper--theme-dropdown .v-popper__inner a:hover,
.menu-container .v-popper--theme-dropdown .v-popper__inner button:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

.v-popper--theme-dropdown a:hover *,
.v-popper--theme-dropdown button:hover *,
.v-popper--theme-dropdown .dropdown-item:hover *,
.menu-container .v-popper--theme-dropdown .v-popper__inner a:hover * {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

/* Never inherit sidebar white text into project ⋯ menus.
   Must beat .navigation-item:hover a/span (same hover state as open menu). */
.menu-container .navigation-item:hover .v-popper--theme-dropdown .v-popper__inner,
.menu-container .navigation-item:hover .v-popper--theme-dropdown .v-popper__inner *,
.menu-container .navigation-item:hover .dropdown-content,
.menu-container .navigation-item:hover .dropdown-content *,
.menu-container .navigation-item:hover .dropdown-item,
.menu-container .navigation-item:hover .dropdown-item *,
.menu-container .navigation-item:hover .menu-list-dropdown .v-popper--theme-dropdown .v-popper__inner a,
.menu-container .navigation-item:hover .menu-list-dropdown .v-popper--theme-dropdown .v-popper__inner span,
.menu-container .navigation-item:hover .menu-list-dropdown .dropdown-item,
.menu-container .menu-list li > div:hover .v-popper--theme-dropdown .v-popper__inner,
.menu-container .menu-list li > div:hover .v-popper--theme-dropdown .v-popper__inner *,
.menu-container .menu-list li > div:hover .dropdown-item,
.menu-container .menu-list li > div:hover .dropdown-item *,
.menu-container .menu-list-dropdown .dropdown-item,
.menu-container .menu-list-dropdown a.dropdown-item,
.menu-container .v-popper--theme-dropdown .v-popper__inner a,
.menu-container .v-popper--theme-dropdown .v-popper__inner button,
.menu-container .v-popper--theme-dropdown .v-popper__inner span,
.menu-container .dropdown-content a,
.menu-container .dropdown-content span {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  fill: #111827 !important;
}

/* =========================================================
   TOOLTIPS (avatar hover etc.) — compact, padded, not 14rem wide
   ========================================================= */

.v-popper--theme-tooltip .v-popper__inner,
.v-popper--theme-tooltip.v-popper__popper .v-popper__inner {
  width: max-content !important;
  min-width: 0 !important;
  max-width: min(16rem, 80vw) !important;
  padding: 0.4rem 0.65rem !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12) !important;
}

.v-popper--theme-tooltip .v-popper__inner *,
.v-popper--theme-tooltip.v-popper__popper .v-popper__inner * {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  white-space: nowrap !important;
  display: inline !important;
}

.v-popper--theme-tooltip .v-popper__arrow-outer {
  border-color: #ffffff !important;
}

.v-popper--theme-tooltip .v-popper__arrow-inner {
  border-color: #e2e8f0 !important;
}

.dark .v-popper--theme-tooltip .v-popper__inner {
  background: #1f2937 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
  -webkit-text-fill-color: #f9fafb !important;
}

.dark .v-popper--theme-tooltip .v-popper__inner * {
  color: #f9fafb !important;
  -webkit-text-fill-color: #f9fafb !important;
}

.dark .v-popper--theme-tooltip .v-popper__arrow-outer {
  border-color: #1f2937 !important;
}

.dark .v-popper--theme-tooltip .v-popper__arrow-inner {
  border-color: #374151 !important;
}

/* =========================================================
   KANBAN — quiet headers, title-first cards, muted meta row
   ========================================================= */

.kanban {
  gap: 0.85rem !important;
}

.kanban .bucket {
  background: transparent !important;
  border: none !important;
  border-radius: var(--avers-radius) !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.kanban .bucket-header {
  background: var(--avers-kanban-header) !important;
  border-radius: var(--avers-radius) !important;
  min-block-size: 42px !important;
  padding: 0.55rem 0.85rem !important;
  margin-block-end: 0.55rem !important;
  border: none !important;
}

.kanban .bucket-header .title.input,
.kanban .bucket-header h2.title.input {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: var(--avers-text) !important;
}

.kanban .bucket-header > .icon,
.kanban .bucket-header .icon.is-small {
  color: var(--avers-emerald) !important;
  opacity: 0.85 !important;
}

.kanban .bucket-header .limit {
  color: var(--avers-emerald) !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
}

.kanban .bucket .task-item {
  padding: 0 0 0.55rem !important;
}

/* Card shell */
.kanban .kanban-card,
.kanban .task.kanban-card,
.kanban-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.45rem !important;
  padding: var(--avers-card-pad) !important;
  background: var(--avers-surface) !important;
  border: 1px solid var(--avers-border) !important;
  border-radius: var(--avers-radius) !important;
  box-shadow: var(--avers-shadow-card) !important;
}

.kanban-card:hover,
.kanban .kanban-card:hover {
  border-color: #cbd5e1 !important;
  box-shadow:
    0 2px 8px rgba(124, 129, 138, 0.1),
    0 1px 3px rgba(124, 129, 138, 0.06) !important;
}

/* Done strip — compact chip, not a banner competing with title */
.kanban-card .is-done,
.kanban-card__done,
.kanban .kanban-card .is-done {
  align-self: flex-start !important;
  order: -1 !important;
  margin: 0 0 0.15rem !important;
  padding: 0.15rem 0.45rem !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
  border-radius: var(--avers-chip-radius) !important;
  box-shadow: none !important;
}

/* Task id — whisper */
.kanban-card .task-id,
.kanban-card a.task-id,
.kanban .kanban-card .has-text-weight-bold.task-id,
.kanban-card > .is-flex .task-id,
.kanban-card .heading,
.kanban-card .title.is-6,
.kanban-card .has-text-grey {
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  color: var(--avers-meta-soft) !important;
  letter-spacing: 0.02em !important;
}

/* Title dominates */
.kanban-card .task-link,
.kanban-card a.tasktext,
.kanban-card .title,
.kanban-card .task-title,
.kanban .kanban-card .tasktext a,
.kanban .kanban-card a:not(.tag):not(.task-id) {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--avers-text) !important;
  text-decoration: none !important;
}

.kanban-card .task-link:hover,
.kanban .kanban-card a:not(.tag):hover {
  color: var(--avers-blue) !important;
}

/* Meta row: tags + priority + icons — one calm line */
.kanban-card .labels,
.kanban-card .tag-list,
.kanban .kanban-card .labels {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.3rem !important;
  margin-block-start: 0.15rem !important;
}

.kanban-card .tag,
.kanban-card .label-tag,
.kanban-card .priority-label,
.kanban .kanban-card .tag {
  margin: 0 !important;
  padding: 0.12rem 0.4rem !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  border-radius: var(--avers-chip-radius) !important;
  box-shadow: none !important;
  border: none !important;
  max-width: 100% !important;
}

.kanban-card .priority-label {
  background: #fff7ed !important;
  color: #c2410c !important;
}

/* Footer icons / avatars — muted, aligned */
.kanban-card .footer,
.kanban-card .card-footer,
.kanban-card .bottom,
.kanban-card .is-flex:has(.avatar),
.kanban .kanban-card .has-text-grey-light {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.4rem !important;
  margin-block-start: 0.25rem !important;
  color: var(--avers-meta) !important;
  font-size: 0.75rem !important;
}

.kanban-card .icon,
.kanban-card .fa,
.kanban .kanban-card .icon {
  color: var(--avers-meta-soft) !important;
  font-size: 0.75rem !important;
}

.kanban-card .avatar,
.kanban-card .avatar-wrapper img,
.kanban .kanban-card .user img {
  width: 22px !important;
  height: 22px !important;
  border: 1.5px solid #fff !important;
  box-shadow: 0 0 0 1px #e2e8f0 !important;
}

/* Due date on card — quiet */
.kanban-card .dueDate,
.kanban-card time,
.kanban .kanban-card .dueDate {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: var(--avers-meta) !important;
  margin: 0 !important;
}

.kanban-card [data-is-overdue] .dueDate,
.kanban-card .dueDate.has-text-danger,
.kanban .kanban-card .has-text-danger {
  color: #dc2626 !important;
  font-weight: 600 !important;
}

.kanban .bucket-footer {
  background: transparent !important;
  padding: 0.15rem 0 0 !important;
  border: none !important;
}

.kanban .bucket-footer .button {
  min-block-size: 34px !important;
  border-radius: var(--avers-radius) !important;
  font-size: 0.8125rem !important;
  background: var(--avers-surface-muted) !important;
}

/* =========================================================
   HOME TASK LIST — horizontal compact layout (fix column stack)
   ========================================================= */

ul.tasks,
.show-tasks ul.tasks {
  gap: 0.75rem !important;
  padding: 0.25rem 0 !important;
}

#app ul.tasks .task.single-task.loader-container,
#app .show-tasks .task.single-task.loader-container,
ul.tasks .single-task.task,
.show-tasks .single-task.task {
  padding: 1rem 1.15rem !important;
  border: 1px solid var(--avers-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--avers-shadow-card) !important;
  column-gap: 0.75rem !important;
}

ul.tasks .single-task > .tasktext,
.show-tasks .single-task > .tasktext {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: flex-start !important;
  gap: 0.55rem 0.85rem !important;
}

ul.tasks .single-task .tasktext > span.is-inline-flex,
.show-tasks .single-task .tasktext > span.is-inline-flex {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 0.35rem 0.75rem !important;
  flex: 1 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

ul.tasks .single-task .task-project,
.show-tasks .single-task .task-project {
  order: 0 !important;
  flex: 1 0 100% !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  color: var(--avers-meta-soft) !important;
  margin: 0 !important;
}

ul.tasks .single-task .task-link,
.show-tasks .single-task .task-link {
  order: 1 !important;
  flex: 1 1 12rem !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

ul.tasks .single-task .priority-label,
.show-tasks .single-task .priority-label {
  order: 2 !important;
  align-self: center !important;
  margin-inline-start: auto !important;
  margin-block-start: 0 !important;
  padding: 0.12rem 0.45rem !important;
  font-size: 0.6875rem !important;
  background: #fff7ed !important;
  color: #c2410c !important;
  border-radius: var(--avers-chip-radius) !important;
  white-space: nowrap !important;
}

ul.tasks .single-task .labels,
.show-tasks .single-task .labels {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.3rem !important;
  flex: 0 1 auto !important;
  margin: 0 !important;
  max-width: min(100%, 28rem) !important;
}

ul.tasks .single-task .labels .tag,
.show-tasks .single-task .labels .tag {
  font-size: 0.6875rem !important;
  padding: 0.12rem 0.45rem !important;
  border-radius: var(--avers-chip-radius) !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

ul.tasks .single-task .assignees-list,
.show-tasks .single-task .assignees-list {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.2rem !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

ul.tasks .single-task .dueDate,
.show-tasks .single-task .dueDate {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  margin-inline-start: auto !important;
  font-size: 0.75rem !important;
  color: var(--avers-meta) !important;
  white-space: nowrap !important;
}

ul.tasks .single-task[data-is-overdue] .dueDate,
ul.tasks .single-task[data-is-overdue] .dueDate time,
.show-tasks .single-task[data-is-overdue] .dueDate,
.show-tasks .single-task[data-is-overdue] .dueDate time {
  color: #dc2626 !important;
  font-weight: 600 !important;
}

ul.tasks .single-task .tasktext > span:not(.is-inline-flex):not(.labels):not(.assignees-list):not(.checklist-summary),
.show-tasks .single-task .tasktext > span:not(.is-inline-flex):not(.labels):not(.assignees-list):not(.checklist-summary) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  color: var(--avers-meta-soft) !important;
  font-size: 0.75rem !important;
}

ul.tasks .single-task .favorite,
.show-tasks .single-task .favorite {
  opacity: 0.25 !important;
}

ul.tasks .single-task:hover .favorite,
.show-tasks .single-task:hover .favorite,
ul.tasks .single-task .favorite.is-favorite,
.show-tasks .single-task .favorite.is-favorite {
  opacity: 0.85 !important;
}

/* Recently viewed project cards — less empty / more aligned
   IMPORTANT: do NOT target .project-gantt / .gantt-* cards — collapses chart. */
.card.project-card,
.projects .card:not(.has-overflow) {
  border-radius: var(--avers-radius) !important;
  border: 1px solid var(--avers-border) !important;
  box-shadow: var(--avers-shadow-card) !important;
}

.card.project-card .card-content,
.projects .card:not(.has-overflow) .card-content {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-block-size: 5.5rem !important;
  padding: 1.25rem 1rem !important;
  text-align: center !important;
}

.card.project-card .title,
.projects .card .title {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  color: var(--avers-text) !important;
}

/* =========================================================
   TASK DETAIL — meta row (users · priority · due · labels)
   ========================================================= */

.task-view .details .detail-title,
.task-view .labels-list .detail-title,
.task-view .action-heading,
.task-view .menu-label {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: var(--avers-meta) !important;
  margin-block-end: 0.35rem !important;
}

.task-view .heading .title.input,
.task-view h1.input,
.task-view .title.input {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  padding: 0.1rem 0 !important;
  color: #1a1a1a !important;
}

/* =========================================================
   META ROW — simple flex L→R (no display:contents / grid-column)
   users (wide) · priority · due · labels
   ========================================================= */

.task-view .detail-content.avers-meta-grid {
  display: block !important;
}

.task-view .detail-content.avers-meta-grid > .details.columns,
#app .task-view .detail-content.avers-meta-grid > .details.columns {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0.75rem !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 1rem !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Labels not yet moved by JS — keep full width, don't float right */
.task-view .detail-content.avers-meta-grid > .labels-list:not(.avers-meta-in-row),
.task-view .detail-content.avers-meta-grid > .details.labels-list:not(.avers-meta-in-row) {
  display: block !important;
  width: 100% !important;
  margin: 0 0 1rem !important;
  max-width: none !important;
}

.task-view .detail-content.avers-meta-grid .details.columns > .column,
.task-view .detail-content.avers-meta-grid .details.columns > .labels-list,
.task-view .detail-content.avers-meta-grid .details.columns > .avers-meta-labels {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.task-view .detail-content.avers-meta-grid .detail-title,
.task-view .detail-content.avers-meta-grid .labels-list .detail-title,
.task-view .detail-content.avers-meta-grid .column .detail-title {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  height: 1.25rem !important;
  min-height: 1.25rem !important;
  max-height: 1.25rem !important;
  margin: 0 0 0.4rem !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25rem !important;
}

/* USERS — grows on the left */
.task-view .detail-content.avers-meta-grid .column.assignees,
.task-view .detail-content.avers-meta-grid .column:has(.assignees),
.task-view .detail-content.avers-meta-grid .column:has(.edit-assignees),
.task-view .detail-content.avers-meta-grid .column.avers-meta-users,
#app .task-view .detail-content.avers-meta-grid .column.avers-meta-users {
  flex: 1.4 1 0 !important;
  min-width: 16rem !important;
  max-width: none !important;
  width: auto !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 12 !important;
}

/* PRIORITY */
.task-view .detail-content.avers-meta-grid .column:has(.avers-priority),
.task-view .detail-content.avers-meta-grid .column:has(.avers-priority-host),
.task-view .detail-content.avers-meta-grid .column.avers-meta-priority {
  flex: 0 0 8.5rem !important;
  width: 8.5rem !important;
  min-width: 8.5rem !important;
  max-width: 8.5rem !important;
}

/* DUE */
.task-view .detail-content.avers-meta-grid .column:has(.date-input),
.task-view .detail-content.avers-meta-grid .column.avers-meta-due {
  flex: 0 0 9rem !important;
  width: 9rem !important;
  min-width: 9rem !important;
  max-width: 9rem !important;
}

/* LABELS — grows on the right */
.task-view .detail-content.avers-meta-grid .details.columns > .labels-list,
.task-view .detail-content.avers-meta-grid .details.columns > .avers-meta-labels,
.task-view .detail-content.avers-meta-grid .column.avers-meta-labels {
  flex: 1 1 0 !important;
  min-width: 12rem !important;
  max-width: none !important;
  width: auto !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 6 !important;
}

.task-view .details.columns,
.detail-content > .details.columns {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0.75rem 1rem !important;
  margin-block-end: 0.85rem !important;
}

.task-view .details .column {
  margin-block-end: 0 !important;
}

.task-view .detail-content.avers-meta-grid .column .multiselect,
.task-view .detail-content.avers-meta-grid .column .avers-priority-host,
.task-view .detail-content.avers-meta-grid .column .avers-priority,
.task-view .detail-content.avers-meta-grid .column .date-input,
.task-view .detail-content.avers-meta-grid .column .select,
.task-view .detail-content.avers-meta-grid .labels-list .multiselect,
.task-view .detail-content.avers-meta-grid .avers-meta-labels .multiselect {
  width: 100% !important;
  max-width: none !important;
  height: 36px !important;
  max-height: 36px !important;
}

.task-view .details .assignees .multiselect .input-wrapper,
#app .task-view .details .assignees .multiselect .input-wrapper,
.task-view .details .column:has(.assignees) .multiselect .input-wrapper,
.task-view .details .column.avers-meta-users .multiselect .input-wrapper,
.task-view .details .date-input,
.task-view .labels-list .multiselect .input-wrapper,
#app .task-view .labels-list .multiselect .input-wrapper,
.task-view .avers-meta-labels .multiselect .input-wrapper,
.task-view .avers-priority-trigger {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.35rem !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 0.65rem !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: none !important;
}

.task-view .details .assignees .multiselect,
.task-view .details .column.assignees .multiselect,
.task-view .details .column:has(.assignees) .multiselect,
.task-view .details .column:has(.edit-assignees) .multiselect,
.task-view .details .column.avers-meta-users .multiselect {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  position: relative !important;
  overflow: visible !important;
  z-index: 12 !important;
}

.task-view .details .column.assignees,
.task-view .details .column:has(.assignees),
.task-view .details .column:has(.edit-assignees),
.task-view .details .column.avers-meta-users,
#app .task-view .details .column.assignees,
#app .task-view .details .column:has(.assignees),
#app .task-view .details .column.avers-meta-users {
  flex: 1.4 1 0 !important;
  width: auto !important;
  min-width: 16rem !important;
  max-width: none !important;
  overflow: visible !important;
}

.task-view .details .assignees .multiselect .input-wrapper .input,
.task-view .details .assignees .multiselect .input-wrapper input,
#app .task-view .details .assignees .multiselect .input-wrapper > input.input,
.task-view .details .column:has(.assignees) .multiselect .input-wrapper input,
.task-view .details .column.avers-meta-users .multiselect .input-wrapper input,
.task-view .labels-list .multiselect .input-wrapper .input,
.task-view .labels-list .multiselect .input-wrapper input,
#app .task-view .labels-list .multiselect .input-wrapper > input.input {
  flex: 1 1 auto !important;
  min-width: 6rem !important;
  max-width: none !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #334155 !important;
  pointer-events: auto !important;
  cursor: text !important;
}

.task-view .details .date-input {
  width: 100% !important;
  max-width: none !important;
  cursor: pointer !important;
}

.task-view .details .date-input .datepicker,
.task-view .details .date-input .show,
.task-view .details .date-input > *:not(.remove):not(.icon) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #334155 !important;
  width: auto !important;
  flex: 1 1 auto !important;
}

.task-view .details .date-input .remove {
  margin-inline-start: auto !important;
}

.task-view .details .avers-priority-host,
.task-view .details .avers-priority {
  max-width: none !important;
  width: 100% !important;
  min-width: 0 !important;
}

.task-view .details .assignees .multiselect > .search-results,
.task-view .assignees .edit-assignees > .search-results,
.task-view .column.avers-meta-users .multiselect > .search-results,
#app .task-view .details .assignees .search-results {
  position: absolute !important;
  inset-inline-start: 0 !important;
  inset-block-start: calc(100% + 4px) !important;
  z-index: 90 !important;
  width: max(100%, 16rem) !important;
  min-width: 14rem !important;
  max-height: 16rem !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0.25rem 0 !important;
  background: #fff !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12) !important;
}

@media (max-width: 1100px) {
  .task-view .detail-content.avers-meta-grid > .details.columns {
    flex-wrap: wrap !important;
  }
  .task-view .detail-content.avers-meta-grid .column.avers-meta-users,
  .task-view .detail-content.avers-meta-grid .column:has(.assignees),
  .task-view .detail-content.avers-meta-grid .details.columns > .labels-list,
  .task-view .detail-content.avers-meta-grid .avers-meta-labels {
    flex: 1 1 calc(50% - 0.5rem) !important;
    min-width: 12rem !important;
    max-width: none !important;
    width: auto !important;
  }
}

@media (max-width: 640px) {
  .task-view .detail-content.avers-meta-grid > .details.columns {
    flex-direction: column !important;
  }
  .task-view .detail-content.avers-meta-grid .column.avers-meta-users,
  .task-view .detail-content.avers-meta-grid .column.avers-meta-priority,
  .task-view .detail-content.avers-meta-grid .column.avers-meta-due,
  .task-view .detail-content.avers-meta-grid .avers-meta-labels,
  .task-view .detail-content.avers-meta-grid .details.columns > .labels-list {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

.task-view .action-buttons {
  padding: 0.85rem !important;
  border-radius: 12px !important;
  box-shadow: var(--avers-shadow-card) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
}

.task-view .action-buttons .button {
  justify-content: flex-start !important;
  min-block-size: 38px !important;
  padding-inline: 0.85rem !important;
  font-size: 0.8125rem !important;
}

.task-view .action-buttons .menu-label,
.task-view .action-buttons .action-heading {
  margin-block: 0.55rem 0.25rem !important;
}

.task-view .action-buttons .menu-label:first-child,
.task-view .action-buttons .action-heading:first-child {
  margin-block-start: 0 !important;
}

.task-view .detail-content.avers-meta-grid > .labels-list .multiselect,
#app .task-view .detail-content.avers-meta-grid .labels-list .multiselect {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

.task-view .labels-list .tag,
.task-view .details .tag,
.task-view .labels-list .multiselect .tag,
#app .task-view .labels-list .tag {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  max-width: none !important;
  width: auto !important;
  min-width: max-content !important;
  white-space: nowrap !important;
  overflow: visible !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  padding: 0.15rem 0.5rem !important;
  border-radius: var(--avers-chip-radius) !important;
  box-shadow: none !important;
}

.task-view .labels-list,
.task-view .labels-list.details,
.task-view .details.labels-list,
.task-view .labels-list .multiselect,
.task-view .details .assignees,
.task-view .details .column.assignees,
.task-view .details .assignees .multiselect {
  overflow: visible !important;
  position: relative !important;
}

.task-view .labels-list,
.task-view .labels-list.details,
.task-view .details.labels-list,
.task-view .labels-list .multiselect {
  z-index: 6 !important;
}

.task-view .labels-list .multiselect .avers-labels-dropdown,
#app .task-view .labels-list .avers-labels-dropdown {
  display: none !important;
  position: absolute !important;
  inset-inline-start: 0 !important;
  inset-block-start: calc(100% + 4px) !important;
  z-index: 80 !important;
  width: max(100%, 16rem) !important;
  min-width: 14rem !important;
  max-height: 16rem !important;
  overflow-y: auto !important;
  padding: 0.35rem 0 !important;
  background: #fff !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12) !important;
}

.task-view .labels-list .multiselect .avers-labels-dropdown.is-open,
#app .task-view .labels-list .avers-labels-dropdown.is-open {
  display: block !important;
}

.task-view .labels-list .multiselect > .search-results:not(.avers-labels-dropdown) {
  position: absolute !important;
  inset-inline-start: 0 !important;
  inset-block-start: calc(100% + 4px) !important;
  z-index: 79 !important;
  width: max(100%, 16rem) !important;
  max-height: 16rem !important;
  overflow-y: auto !important;
  background: #fff !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12) !important;
}

.task-view .labels-list .avers-label-option {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  padding: 0.4rem 0.75rem !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  text-align: start !important;
}

.task-view .labels-list .avers-label-option:hover {
  background: #f8fafc !important;
}

.task-view .labels-list .avers-label-chip,
.task-view .labels-list .avers-labels-dropdown .tag.avers-label-chip,
#app .task-view .labels-list .avers-label-chip {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.15rem 0.5rem !important;
  border-radius: var(--avers-chip-radius, 6px) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  /* Prefer inline/API color; fall back to Bulma var, then soft gray */
  background: var(--avers-label-bg, var(--tag-background-color, #e5e7eb)) !important;
  background-color: var(--avers-label-bg, var(--tag-background-color, #e5e7eb)) !important;
  color: var(--avers-label-fg, var(--tag-color, #1f2937)) !important;
  border: 0 !important;
  margin: 0 !important;
}

.task-view .labels-list .avers-labels-dropdown .avers-label-option .tag {
  /* override Vikunja .labels-list .tag { background: grey } */
  background: var(--avers-label-bg, var(--tag-background-color, #e5e7eb)) !important;
  background-color: var(--avers-label-bg, var(--tag-background-color, #e5e7eb)) !important;
  color: var(--avers-label-fg, var(--tag-color, #1f2937)) !important;
}

.task-view .labels-list .avers-labels-empty {
  padding: 0.5rem 0.75rem !important;
  color: #94a3b8 !important;
  font-size: 0.8125rem !important;
}

/* =========================================================
   PRIORITY — Avers chip select (not a plain OS <select>)
   ========================================================= */

.task-view .details .select.avers-priority-host,
.task-view .details .avers-priority-host {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 8.75rem !important;
  height: 36px !important;
}

.task-view .details .avers-priority-host::after {
  display: none !important; /* hide Bulma select arrow */
}

.task-view .details select.avers-priority-native,
.task-view .details .avers-priority-host > select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.task-view .avers-priority {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 8.75rem !important;
  height: 36px !important;
}

.task-view .avers-priority-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 0.65rem !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #fff7ed !important;
  color: #c2410c !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  text-align: start !important;
}

.task-view .avers-priority-trigger:hover,
.task-view .avers-priority.is-open .avers-priority-trigger {
  box-shadow: var(--avers-shadow-focus, 0 0 0 3px rgba(100, 116, 139, 0.12)) !important;
  filter: brightness(0.98);
}

.task-view .avers-priority-dot {
  flex: 0 0 auto !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: currentColor !important;
}

.task-view .avers-priority-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.task-view .avers-priority-chevron {
  flex: 0 0 auto !important;
  font-size: 0.65rem !important;
  opacity: 0.7 !important;
  line-height: 1 !important;
}

.task-view .avers-priority-menu {
  position: absolute !important;
  inset-inline-start: 0 !important;
  inset-block-start: calc(100% + 4px) !important;
  z-index: 70 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
  min-width: 100% !important;
  width: max(100%, 12rem) !important;
  padding: 0.4rem !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12) !important;
}

.task-view .avers-priority-menu[hidden] {
  display: none !important;
}

.task-view .avers-priority-option {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  padding: 0.4rem 0.55rem !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-align: start !important;
}

.task-view .avers-priority-option:hover {
  filter: brightness(0.97);
  border-color: rgba(15, 23, 42, 0.08) !important;
}

.task-view .avers-priority-option.is-selected {
  box-shadow: inset 0 0 0 1.5px rgba(15, 23, 42, 0.18) !important;
}

.task-view .avers-priority-option-text {
  flex: 1 1 auto !important;
}

/* Keep priority column from looking like a bare OS control */
.task-view .details .column:has(.avers-priority) .select select:not(.avers-priority-native) {
  /* no-op fallback */
}

/* =========================================================
   TASK HEADER — title, crumbs · #id · [Ссылка]
   ========================================================= */

#avers-task-header-portal,
.avers-task-header-portal,
.task-view .avers-task-header {
  display: none !important;
}

#avers-copy-link-chip.avers-copy-link,
body > .avers-copy-link#avers-copy-link-chip,
.subtitle .avers-copy-link,
.avers-crumbs-row .avers-copy-link,
#avers-header-chrome .avers-copy-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  padding: 0.28rem 0.7rem !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #475569 !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
  white-space: nowrap !important;
  font-family: inherit !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#avers-header-chrome.avers-header-chrome {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  height: 1.5rem !important;
  pointer-events: auto !important;
  line-height: 1 !important;
}

#avers-header-chrome .avers-id-sep {
  color: #cbd5e1 !important;
  user-select: none !important;
  font-size: 0.8125rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

#avers-header-chrome .avers-id-btn {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #94a3b8 !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  height: 1.5rem !important;
  cursor: pointer !important;
  font-style: normal !important;
}

#avers-header-chrome .avers-copy-link {
  height: 1.5rem !important;
  padding: 0 0.55rem !important;
  font-size: 0.75rem !important;
  line-height: 1 !important;
}

#avers-header-chrome.is-hidden,
#avers-copy-link-chip.avers-copy-link.is-hidden,
.avers-copy-link.is-hidden {
  display: none !important;
}

#avers-copy-link-chip.avers-copy-link:hover,
#avers-header-chrome .avers-copy-link:hover {
  border-color: #cbd5e1 !important;
  color: #1f2937 !important;
}

#avers-copy-link-chip.avers-copy-link.is-copied,
#avers-header-chrome .avers-copy-link.is-copied {
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #047857 !important;
}

#avers-copy-link-chip.avers-copy-link.is-error,
#avers-header-chrome .avers-copy-link.is-error {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #dc2626 !important;
}

#avers-copy-link-chip .avers-copy-link-icon,
#avers-header-chrome .avers-copy-link-icon {
  display: block !important;
  flex: 0 0 auto !important;
}

.task-view .heading {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.35rem 0.55rem !important;
  margin: 0 0 0.35rem !important;
  padding: 0 !important;
  border: 0 !important;
  box-sizing: border-box !important;
}

.task-view .heading .title.input:not(.task-id),
.task-view .heading h1.title:not(.task-id),
.task-view .heading .title:not(.task-id) {
  flex: 1 1 auto !important;
  min-width: 12rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #1a1a1a !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}

.task-view .heading .title.input:not(.task-id):hover,
.task-view .heading .title.input:not(.task-id):focus {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.task-view .heading .save-title,
.task-view .subtitle .change-indicator,
.task-view .subtitle .icon.is-small,
.task-view .subtitle .icon {
  display: none !important;
}

/* Crumbs row: MFC > To-Do · #3   (+ fixed Link chip beside #id) */
.task-view .subtitle,
.task-view nav.subtitle,
.task-view .avers-crumbs-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.35rem 0.45rem !important;
  margin: 0 0 1rem !important;
  padding: 0 0 1rem !important;
  border-block-end: 1px solid #e5e7eb !important;
  color: #64748b !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
}

.task-view .subtitle a,
.task-view .avers-crumbs-row a {
  color: #64748b !important;
  text-decoration: none !important;
}

.task-view .subtitle a:hover,
.task-view .avers-crumbs-row a:hover {
  color: #2563eb !important;
}

.task-view .subtitle .avers-id-sep,
.task-view .avers-crumbs-row .avers-id-sep {
  color: #cbd5e1 !important;
  user-select: none !important;
}

.task-view .subtitle .avers-id-meta,
.task-view .avers-crumbs-row .avers-id-meta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  flex: 0 0 auto !important;
}

/* Hide Vue-owned large #id in heading — chrome shows · #id beside crumbs */
.task-view .heading .task-id.avers-native-id-hidden,
.task-view .heading button.task-id.avers-native-id-hidden,
.task-view .heading .title.avers-native-id-hidden,
.task-view .heading > .avers-native-id-hidden,
.task-view.avers-task-ready .heading .task-id,
.task-view.avers-task-ready .heading button.task-id,
.task-view .detail-content.avers-meta-grid .heading .task-id,
.task-view .detail-content.avers-meta-grid .heading button.title.task-id {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.task-view .subtitle .title.task-id,
.task-view .subtitle button.title.task-id,
.task-view .subtitle .task-id,
.task-view .subtitle .avers-task-id,
.task-view .avers-crumbs-row .task-id,
.task-view .avers-crumbs-row .avers-task-id,
.task-view .avers-id-meta .avers-id-btn {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #94a3b8 !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  min-height: 0 !important;
  height: auto !important;
  font-style: normal !important;
}

/* Undo accidental hide from older portal builds */
.task-view .avers-src-hidden {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Description block breathing room */
.task-view .content.description,
.task-view .tiptap,
.task-view .ProseMirror,
.task-view .editor {
  border-radius: var(--avers-radius) !important;
}

.task-view .detail-content {
  padding-inline-end: 0.5rem !important;
  overflow: visible !important;
}

/* =========================================================
   TABLE — airy rows, muted headers (sentence case)
   ========================================================= */

.project-table .table th,
.table.has-actions th,
.app-content .table thead th {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: var(--avers-meta) !important;
  background: var(--avers-surface-muted) !important;
  padding: 0.7rem 1rem !important;
}

.project-table .table td,
.table.has-actions td {
  padding: 0.85rem 1rem !important;
  vertical-align: middle !important;
}

.project-table .table .tag,
.table.has-actions .tag {
  font-size: 0.6875rem !important;
  padding: 0.12rem 0.45rem !important;
  border-radius: var(--avers-chip-radius) !important;
  font-weight: 600 !important;
}

/* =========================================================
   LOGIN — quieter form, less chrome noise
   ========================================================= */

.auth-wrapper,
.login,
#app .login-form,
.auth-container {
  font-family: var(--avers-font) !important;
}

/* Soften instance helper text */
.login .has-text-grey,
.auth-wrapper .has-text-grey,
.login .subtitle,
.auth-wrapper .subtitle {
  color: var(--avers-meta) !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
}

.login .box,
.auth-wrapper .box,
.login .card,
.auth-wrapper .card {
  border: 1px solid var(--avers-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--avers-shadow-card) !important;
}

.login .label,
.auth-wrapper .label,
.login label.label {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: var(--avers-meta) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.login .input,
.auth-wrapper .input,
.login .button.is-primary {
  border-radius: var(--avers-radius) !important;
  min-block-size: var(--avers-control-h) !important;
}

.login .button.is-primary,
.auth-wrapper .button.is-primary {
  background: var(--avers-blue) !important;
  border-color: var(--avers-blue) !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

/* =========================================================
   GLOBAL — tags & chips quieter everywhere
   ========================================================= */

.tag,
.label-tag,
.priority-label {
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

.app-content {
  background: var(--avers-bg) !important;
}

/* View switcher pills — studio-like */
.project-header .button,
.project-title-wrapper .button,
.tabs li a {
  min-block-size: 36px !important;
  padding-inline: 0.85rem !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
}

.project-header .button.is-active,
.project-title-wrapper .button.is-active,
.tabs li.is-active a {
  background: var(--avers-blue) !important;
  color: #fff !important;
  border-color: var(--avers-blue) !important;
}

/* =========================================================
   GANTT — restore chart shell, calm toolbar, kick width after paint
   ========================================================= */

.project-gantt {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.85rem !important;
  min-width: 0 !important;
  width: 100% !important;
}

.project-gantt .gantt-options {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: 1rem 1.5rem !important;
  padding: 0.85rem 1rem !important;
  background: var(--avers-surface) !important;
  border: 1px solid var(--avers-border) !important;
  border-radius: var(--avers-radius) !important;
  box-shadow: var(--avers-shadow-card) !important;
}

.project-gantt .gantt-options .field {
  margin: 0 !important;
  flex: 0 1 22rem !important;
  min-width: 14rem !important;
  max-width: 28rem !important;
}

.project-gantt .gantt-options .field:last-child,
.project-gantt .gantt-options .checkbox,
.project-gantt .gantt-options label.checkbox {
  margin-inline-start: 0 !important;
  align-self: center !important;
  color: var(--avers-text) !important;
  font-size: 0.875rem !important;
}

.project-gantt .gantt-chart-container,
.project-gantt .gantt-chart-container .card,
.project-gantt .card.has-overflow,
.gantt-chart-container .has-overflow {
  background: var(--avers-surface) !important;
  border: 1px solid var(--avers-border) !important;
  border-radius: var(--avers-radius) !important;
  box-shadow: var(--avers-shadow-card) !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-width: 100% !important;
  min-height: 280px !important;
  /* undo any “home card” resets that leak into gantt */
  padding: 0 !important;
}

.project-gantt .gantt-chart-container .card-content,
.project-gantt .card.has-overflow > .card-content {
  padding: 0 !important;
  display: block !important;
  min-block-size: 0 !important;
  text-align: start !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  background: transparent !important;
}

.project-gantt .gantt-container,
.gantt-container {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 240px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  background: var(--avers-surface) !important;
}

.project-gantt .gantt-timeline,
.gantt-timeline {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: sticky !important;
  inset-block-start: 0 !important;
  z-index: 5 !important;
  background: var(--avers-surface) !important;
  border-block-end: 1px solid var(--avers-border) !important;
}

.project-gantt .gantt-timeline-months,
.project-gantt .gantt-timeline-days,
.gantt-timeline-months,
.gantt-timeline-days {
  display: flex !important;
  visibility: visible !important;
}

/* Do not force day/month widths — Vikunja sets inline px after measure */
.project-gantt .timeunit-month,
.project-gantt .timeunit-wrapper {
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
}

.project-gantt .gantt-row,
.project-gantt .gantt-rows,
.gantt-row {
  display: flex !important;
  min-height: 40px !important;
  visibility: visible !important;
}

.project-gantt .gantt-row-content,
.gantt-row-content {
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
}

.project-gantt .button.is-primary,
.gantt-chart-container .button.is-primary {
  margin: 0.75rem 1rem 1rem !important;
}

/* =========================================================
   ASSIGNEES multiselect — name first in dropdown,
   hide “Назначить…” hint that crushed usernames
   ========================================================= */

/* Dropdown rows: avatar + name (+ email under) */
.task-view .edit-assignees .search-results .search-result-button,
.assignees .edit-assignees .search-results .search-result-button,
.multiselect.edit-assignees .search-results .search-result-button,
.task-view .assignees .search-results .search-result-button,
#app .edit-assignees .search-results .search-result-button {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  width: 100% !important;
  padding: 0.55rem 0.75rem !important;
  text-align: start !important;
}

.task-view .edit-assignees .search-results .user,
.assignees .edit-assignees .search-results .user,
.multiselect.edit-assignees .search-results .user,
.task-view .assignees .search-results .user,
#app .edit-assignees .search-results .user {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
}

/* Names must be fully readable in the dropdown */
.task-view .edit-assignees .search-results .username,
.assignees .edit-assignees .search-results .username,
.multiselect.edit-assignees .search-results .username,
.task-view .assignees .search-results .username,
.task-view .edit-assignees .search-results .user .username,
.task-view .assignees .search-results .user .username,
#app .edit-assignees .search-results .username {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--avers-text, #1f2937) !important;
  line-height: 1.3 !important;
}

/* Upstream a11y hint “Назначить этому пользователю” — hide, it ate the name */
.task-view .edit-assignees .search-results .hint-text,
.assignees .edit-assignees .search-results .hint-text,
.multiselect.edit-assignees .search-results .hint-text,
.task-view .assignees .search-results .hint-text,
#app .edit-assignees .search-results .hint-text,
.multiselect .search-results .hint-text {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
}

/* Email injected by avers-assignees.js — show under the name */
.task-view .edit-assignees .search-results .email,
.assignees .edit-assignees .search-results .email,
.multiselect.edit-assignees .search-results .email,
.task-view .assignees .search-results .email,
.task-view .edit-assignees .search-results .username .email,
#app .edit-assignees .search-results .email {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  color: var(--avers-meta, #64748b) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25 !important;
}

.task-view .edit-assignees .search-results .user > .username,
.task-view .assignees .search-results .user > .username,
#app .edit-assignees .search-results .user > .username {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.1rem !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.task-view .edit-assignees .search-results .avatar-wrapper,
.task-view .assignees .search-results .avatar-wrapper {
  margin-inline-end: 0 !important;
  flex: 0 0 auto !important;
}

.task-view .edit-assignees .search-results .user img,
.task-view .assignees .search-results .user img {
  width: 28px !important;
  height: 28px !important;
}

/* Selected chip in field: avatar + X only (no name spacer) */
.task-view .details .assignees .input-wrapper .assignee .username,
.task-view .edit-assignees .input-wrapper .assignee .username,
.task-view .assignees .edit-assignees .input-wrapper .assignee .username,
.task-view .assignees .edit-assignees .input-wrapper .username {
  display: none !important;
}

.task-view .details .assignees .input-wrapper .assignee,
.task-view .edit-assignees .input-wrapper .assignee,
.task-view .assignees .edit-assignees .input-wrapper .assignee {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 0.2rem 0 0 !important;
  padding: 0 !important;
  position: relative !important;
}

.task-view .details .assignees .input-wrapper .assignee .user,
.task-view .edit-assignees .input-wrapper .assignee .user {
  gap: 0 !important;
  margin: 0 !important;
}

.task-view .details .assignees .input-wrapper .assignee .avatar-wrapper,
.task-view .edit-assignees .input-wrapper .assignee .avatar-wrapper {
  margin: 0 !important;
  margin-inline-end: 0 !important;
  padding: 0 !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
}

.task-view .details .assignees .input-wrapper .assignee .user img,
.task-view .details .assignees .input-wrapper img,
.task-view .edit-assignees .input-wrapper .assignee .user img {
  width: 22px !important;
  height: 22px !important;
  max-height: 22px !important;
  object-fit: cover !important;
}

/* X glued to avatar (overlay on corner, not floating mid-field) */
.task-view .details .assignees .input-wrapper .remove-assignee,
.task-view .edit-assignees .input-wrapper .remove-assignee,
.task-view .assignees .edit-assignees .input-wrapper .remove-assignee,
.task-view .details .assignees .input-wrapper .assignee .remove-assignee {
  position: absolute !important;
  inset-block-start: -2px !important;
  inset-inline-start: auto !important;
  inset-inline-end: -4px !important;
  margin: 0 !important;
  width: 14px !important;
  height: 14px !important;
  inline-size: 14px !important;
  block-size: 14px !important;
  font-size: 0.55rem !important;
  line-height: 1 !important;
  z-index: 5 !important;
  background: #fff !important;
  color: #db4040 !important;
  box-shadow: 0 0 0 1px #e2e8f0 !important;
  border-radius: 999px !important;
}