/**
 * Avers → Vikunja theme adapter
 * Tokens from avers-sales-doc (Аверс Технолоджи internal tools).
 * Served at: /custom/vikunja-avers.css
 */

:root {
  /* Preset «Аверс» — design-studio / design-presets.json */
  --avers-navy: #7c818a;
  --avers-navy-dark: #6a6f78;
  --avers-accent: #d81818;
  --avers-accent-active: #db4040;
  --avers-bg: #f3f4f6;
  --avers-surface: #ffffff;
  --avers-surface-muted: #f8fafc;
  --avers-border: #e2e8f0;
  --avers-text: #1f2937;
  --avers-text-muted: #64748b;
  --avers-emerald: #10b981;
  --avers-emerald-soft: #059669;
  --avers-emerald-soft-hover: #047857;
  --avers-emerald-hover: #059669;
  --avers-blue: #2563eb;
  --avers-blue-hover: #1d4ed8;
  --avers-radius: 8px;
  --avers-control-h: 40px;
  --avers-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --avers-kanban-header: #eef0f2;
  --avers-border-width: 1.5px;
  --avers-font-size: 14px;
  --avers-font-size-sm: 12px;
  --avers-font-weight: 600;
  --avers-shadow-card: 0 2px 14px rgba(124, 129, 138, 0.07), 0 1px 4px rgba(124, 129, 138, 0.04);
  --avers-shadow-done: 0 4px 12px rgba(16, 185, 129, 0.28);
  --avers-shadow-focus: 0 0 0 3px rgba(100, 116, 139, 0.12);

  /* Primary actions = blue; mark-done uses emerald separately */
  --primary: var(--avers-blue);
  --primary-dark: var(--avers-blue-hover);
  --primary-hsl: 217, 91%, 60%;
  --site-background: var(--avers-bg);
  --scheme-main: var(--avers-surface);
  --text: var(--avers-text);
  --link: var(--avers-blue);
  --danger: #dc2626;
  --danger-dark: #b91c1c;
  --warning: #b45309;
  --button-text-color: #fff;
}

/*
 * Force light theme even when Vikunja sets html.dark (user/OS preference).
 * Dark mode remaps --white → navy grey-50 and paints cards/task views dark.
 */
html.dark,
:root.dark {
  color-scheme: light !important;

  /* !important: Vikunja dark theme may reload these after our file */
  --grey-50: #f9fafb !important;
  --grey-50-hsl: 210, 20%, 98% !important;
  --grey-100: #f3f4f6 !important;
  --grey-100-hsl: 220, 14%, 96% !important;
  --grey-200: #e5e7eb !important;
  --grey-300: #d1d5db !important;
  --grey-400: #9ca3af !important;
  --grey-500: #6b7280 !important;
  --grey-500-hsl: 220, 9%, 46% !important;
  --grey-600: #4b5563 !important;
  --grey-700: #374151 !important;
  --grey-800: #1f2937 !important;
  --grey-900: #111827 !important;
  --grey-900-hsl: 221, 39%, 11% !important;

  --white: #ffffff !important;
  --black-l: 4% !important;
  --text: var(--avers-text) !important;
  --text-invert: #fff !important;
  --text-light: var(--avers-text-muted) !important;
  --text-strong: var(--avers-text) !important;
  --text-muted: var(--avers-text-muted) !important;

  --site-background: var(--avers-bg) !important;
  --scheme-main: var(--avers-surface) !important;
  --scheme-main-bis: #fafafa !important;
  --scheme-main-ter: #f3f4f6 !important;
  --scheme-invert: #0a0a0a !important;
  --scheme-invert-bis: #121212 !important;
  --scheme-invert-ter: #242424 !important;

  --card-border-color: var(--avers-border) !important;
  --input-placeholder-color: #94a3b8 !important;
  --logo-text-color: var(--avers-text) !important;
  --background: var(--avers-bg) !important;
  --border: var(--avers-border) !important;
}

html.dark,
html.dark body,
html.dark #app {
  background-color: var(--avers-bg) !important;
  color: var(--avers-text) !important;
}

html.dark .app-content,
html.dark .task-view,
html.dark .task-view-container,
html.dark .card,
html.dark .box,
html.dark .modal-card {
  background-color: var(--avers-surface) !important;
  color: var(--avers-text) !important;
}

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

html.dark .task-view {
  background-color: var(--avers-bg) !important;
}

html,
body,
#app {
  font-family: var(--avers-font) !important;
  background-color: var(--avers-bg) !important;
  color: var(--avers-text);
}

body,
button,
input,
textarea,
select,
.button,
.base-button {
  font-family: var(--avers-font) !important;
}

/* Beat Vue scoped .button[data-v-…] uppercase */
#app .button,
#app button.button,
.button[class] {
  text-transform: none !important;
  letter-spacing: 0.01em;
  font-family: var(--avers-font) !important;
  font-weight: var(--avers-font-weight) !important;
  font-size: 0.875rem !important;
  min-block-size: var(--avers-control-h) !important;
  border-radius: var(--avers-radius) !important;
  box-shadow: none !important;
}

/* Icon / chip / multiselect controls — don't inherit big CTA sizing */
#app .button.is-small,
#app .removal-button,
#app .multiselect .button:not(.delete),
#app .tag .button:not(.delete),
#app .user .button,
#app .close,
button.close {
  min-block-size: unset !important;
  min-height: unset !important;
  height: auto !important;
  width: auto !important;
  padding: 0.15rem !important;
  font-size: 0.75rem !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

/* Bulma .delete draws an X via ::before/::after — keep fixed size */
#app .delete,
#app .tag .delete,
#app button.delete,
#app a.delete,
.tag .delete,
.labels-list .delete,
.multiselect .delete {
  position: relative !important;
  display: inline-block !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  min-block-size: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  padding: 0 !important;
  margin-inline-start: 0.25rem !important;
  border: none !important;
  border-radius: 999px !important;
  background-color: rgba(31, 41, 55, 0.4) !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  cursor: pointer !important;
}

#app .delete:hover,
#app .tag .delete:hover,
.tag .delete:hover,
.labels-list .delete:hover {
  background-color: rgba(31, 41, 55, 0.65) !important;
}

#app .delete::before,
#app .delete::after,
#app .tag .delete::before,
#app .tag .delete::after,
.tag .delete::before,
.tag .delete::after {
  background-color: #fff !important;
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform-origin: center !important;
}

#app .delete::before,
#app .tag .delete::before,
.tag .delete::before {
  width: 55% !important;
  height: 2px !important;
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

#app .delete::after,
#app .tag .delete::after,
.tag .delete::after {
  width: 2px !important;
  height: 55% !important;
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

/* Done button — Avers emerald (#10b981), soft hover */
#app .button.avers-done-btn,
#app button.avers-done-btn,
#app .button--mark-done,
#app .button.button--mark-done,
#app .button.is-outlined.avers-done-btn,
#app .button.is-outlined.button--mark-done,
aside .button.avers-done-btn,
aside .button.button--mark-done,
.action-buttons .button--mark-done,
.action-buttons .avers-done-btn {
  background: #10b981 !important;
  background-color: #10b981 !important;
  color: #fff !important;
  border: 1px solid #10b981 !important;
  border-radius: var(--avers-radius) !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
}

#app .button.avers-done-btn:hover,
#app button.avers-done-btn:hover,
#app .button--mark-done:hover,
#app .button.is-outlined.avers-done-btn:hover,
#app .button.is-outlined.button--mark-done:hover,
aside .button.avers-done-btn:hover,
aside .button.button--mark-done:hover,
.action-buttons .button--mark-done:hover,
.action-buttons .avers-done-btn:hover {
  background: #059669 !important;
  background-color: #059669 !important;
  border-color: #059669 !important;
  color: #fff !important;
  box-shadow: var(--avers-shadow-done) !important;
  transform: translateY(-1px);
}

#app .button.avers-done-btn:active,
#app button.avers-done-btn:active,
#app .button--mark-done:active {
  background: #047857 !important;
  border-color: #047857 !important;
  box-shadow: none !important;
  transform: none;
}

/* Подписаться / Избранное / метки / приоритет… */
#app .button.is-primary:not(.avers-done-btn):not(.is-danger),
#app button.button.is-primary:not(.avers-done-btn):not(.is-danger) {
  background: var(--avers-blue) !important;
  background-color: var(--avers-blue) !important;
  color: #fff !important;
  border: 1.5px solid var(--avers-blue) !important;
}

#app .button.is-primary:not(.avers-done-btn):not(.is-danger):hover,
#app button.button.is-primary:not(.avers-done-btn):not(.is-danger):hover {
  background: var(--avers-blue-hover) !important;
  border-color: var(--avers-blue-hover) !important;
  color: #fff !important;
}

#app .button.is-outlined:not(.is-danger):not(.avers-done-btn):not(.button--mark-done) {
  background-color: #f8fafc !important;
  color: #334155 !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: none !important;
  text-transform: none !important;
}

#app .button.is-outlined:not(.is-danger):not(.avers-done-btn):not(.button--mark-done):hover {
  background-color: #f9fafb !important;
  border-color: #94a3b8 !important;
  color: #1f2937 !important;
}

#app .button.is-text {
  text-transform: none !important;
  font-weight: var(--avers-font-weight) !important;
  color: var(--avers-text-muted) !important;
  box-shadow: none !important;
}

#app .button.is-text:hover {
  background-color: #f3f4f6 !important;
  color: var(--avers-text) !important;
}

#app .button.is-danger:not(.is-outlined),
#app button.button.is-danger:not(.is-outlined) {
  background-color: #dc2626 !important;
  color: #fff !important;
  border-color: #dc2626 !important;
}

/* Delete in task sidebar: red text, not green fill */
#app .button.is-danger.is-outlined,
#app .button.is-outlined.is-danger,
#app .button.is-danger.has-no-border,
aside .button.is-danger,
.action-buttons .button.is-danger {
  background: transparent !important;
  background-color: transparent !important;
  color: #dc2626 !important;
  border: 1.5px solid transparent !important;
  box-shadow: none !important;
}

#app .button.is-danger.is-outlined:hover,
#app .button.is-outlined.is-danger:hover,
#app .button.is-danger.has-no-border:hover,
aside .button.is-danger:hover,
.action-buttons .button.is-danger:hover {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border-color: #fecaca !important;
}

/* Task detail right action menu — compact control panel */
aside .button,
.task-view aside .button,
.task-detail aside .button,
.task-view .button.is-outlined,
.task-view .button.is-primary {
  width: 100% !important;
  justify-content: flex-start !important;
  gap: 0.5rem !important;
  padding-inline: 0.75rem !important;
  text-transform: none !important;
}

.task-view-container > .task-view > .columns,
.task-view > .columns.mbs-2 {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1rem !important;
}

.task-view .column.detail-content,
.task-view .detail-content.is-two-thirds,
.task-view .detail-content {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}

.task-view .column.action-buttons,
.task-view .action-buttons.is-one-third,
.task-view .action-buttons {
  flex: 0 0 23rem !important;
  width: 23rem !important;
  max-width: 23rem !important;
  min-width: 16.5rem !important;
  padding: 0.75rem !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--avers-radius) !important;
  box-shadow: none !important;
}

.task-view .action-buttons .button {
  font-size: 0.8125rem !important;
  padding-inline: 0.65rem !important;
  min-block-size: 36px !important;
  border-radius: var(--avers-radius) !important;
  box-shadow: none !important;
  white-space: normal !important;
  line-height: 1.25 !important;
  height: auto !important;
}

.task-view .action-buttons .button.is-outlined:not(.avers-done-btn):not(.button--mark-done):not(.is-danger) {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
}

@media screen and (max-width: 1023px) {
  .task-view .column.action-buttons,
  .task-view .action-buttons.is-one-third,
  .task-view .action-buttons {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

aside .menu-label,
.task-view .menu-label,
.task-detail .menu-label {
  font-family: var(--avers-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: var(--avers-text-muted) !important;
}

/* Left navigation shell */
.navbar {
  background: var(--avers-surface) !important;
  border-block-end: 1px solid var(--avers-border);
}

.menu-container {
  background: var(--avers-navy) !important;
  color: #fff !important;
}

.menu-container .menu-label,
.menu-container .menu-list a,
.menu-container .list-menu-link,
.menu-container .top-menu .menu-list li > a,
.menu-container .project-menu-title,
.menu-container .menu-bottom-link,
.menu-container .navigation-item a,
.menu-container .navigation-item > span,
.menu-container .navigation-item .icon,
.menu-container .top-menu .icon,
.menu-container .logo,
.menu-container .logo span {
  color: rgba(255, 255, 255, 0.92) !important;
  font-family: var(--avers-font) !important;
  font-weight: 500 !important;
}

/* Do NOT force white text into ⋯ / Floating Vue dropdowns */
.menu-container .v-popper__inner,
.menu-container .v-popper__inner a,
.menu-container .v-popper__inner span,
.menu-container .v-popper__inner .icon,
.menu-container .dropdown-content,
.menu-container .dropdown-content a,
.menu-container .dropdown-content span,
.menu-container .dropdown-item {
  color: #1f2937 !important;
}

/* Soft hover / active on the full navigation row (not only the <a>) */
.menu-container .navigation-item {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 8px;
}

.menu-container .navigation-item:hover {
  background-color: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
}

/* Upstream paints solid white on li>div:hover — clashes with white text */
.menu-container .menu-list li > div:hover,
.menu-container .menu-list.other-menu-items li:hover {
  background-color: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
}

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

.menu-container .navigation-item:active,
.menu-container .menu-list li > div: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) {
  background-color: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  border-radius: 8px;
}

.menu-container .navigation-item:hover > a,
.menu-container .navigation-item:hover > .icon,
.menu-container .menu-list > li > a:hover > .icon,
.menu-container .list-menu-link:hover > .icon {
  background-color: transparent !important;
  color: #fff !important;
}

/* Open ⋯ menu stays dark while the project row is hovered */
.menu-container .navigation-item:hover .v-popper__inner,
.menu-container .navigation-item:hover .v-popper__inner *,
.menu-container .navigation-item:hover .dropdown-item,
.menu-container .navigation-item:hover .dropdown-content,
.menu-container .navigation-item:hover .dropdown-content * {
  color: #1f2937 !important;
}

.menu-container .menu-list a.router-link-exact-active,
.menu-container .menu-list a.is-active,
.menu-container .list-menu a.router-link-exact-active,
.menu-container .list-menu a.is-active {
  background-color: transparent !important;
  color: #fff !important;
}

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

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

.menu-container .logo,
.menu-container .logo span {
  color: #fff !important;
  font-family: var(--avers-font) !important;
  font-weight: 700 !important;
}

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

.card,
.box,
.modal-card,
.kanban-card,
.task-card,
.project-card {
  border-radius: var(--avers-radius) !important;
  border-color: var(--avers-border) !important;
  box-shadow: var(--avers-shadow-card) !important;
}

/* Overview project cards: center titles like saved filters */
.project-card {
  align-items: center !important;
  justify-content: center !important;
}

.project-card .project-title {
  align-self: center !important;
  text-align: center !important;
  font-size: 1.1rem !important;
  font-weight: var(--avers-font-weight) !important;
  line-height: 1.25 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}

.project-card .saved-filter-icon {
  display: block !important;
  margin-inline: auto !important;
  margin-block-end: 0.35rem !important;
  color: var(--avers-text-muted) !important;
  font-size: 1.25rem !important;
}

input.input,
textarea.textarea,
.select select,
.input:not(.title):not(.input-wrapper),
.textarea {
  border-radius: var(--avers-radius) !important;
  border: 1px solid #e2e8f0 !important;
  border-color: #e2e8f0 !important;
  background-color: #fff !important;
  font-family: var(--avers-font) !important;
  color: var(--avers-text) !important;
  min-height: 40px;
  height: auto;
  box-shadow: none !important;
}

/* Multiselect chip field: never paint a second box on the search <input> */
.multiselect .input-wrapper > input.input,
.multiselect .input-wrapper > input,
#app .multiselect .input-wrapper > input.input,
#app .multiselect .input-wrapper > input {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  min-height: 0 !important;
  height: auto !important;
  min-block-size: 0 !important;
}

input.input:focus,
textarea.textarea:focus,
.input:not(.title):not(.input-wrapper):focus,
.textarea:focus,
.select select:focus {
  border-color: #94a3b8 !important;
  box-shadow: var(--avers-shadow-focus) !important;
}

.multiselect .input-wrapper > input.input:focus,
.multiselect .input-wrapper > input:focus,
#app .multiselect .input-wrapper > input.input:focus {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Multiselect (assignees / labels): one Avers control, chips centered */
.multiselect .input-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.35rem !important;
  min-height: 40px !important;
  height: auto !important;
  padding: 0.25rem 0.65rem !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--avers-radius) !important;
  box-shadow: none !important;
}

.multiselect .input-wrapper:hover,
.multiselect .input-wrapper:focus-within {
  border-color: #94a3b8 !important;
  background: #fff !important;
  box-shadow: var(--avers-shadow-focus) !important;
}

.assignees .multiselect .input-wrapper,
.details.labels-list .multiselect .input-wrapper,
.labels-list .multiselect .input-wrapper {
  background: var(--avers-surface) !important;
  border-color: var(--avers-border) !important;
}

.multiselect .input-wrapper .input,
.multiselect .input-wrapper input.input,
.multiselect .input-wrapper input {
  min-height: 0 !important;
  height: auto !important;
  min-block-size: 0 !important;
  flex: 1 1 8rem !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0.2rem 0 !important;
  font-size: 0.875rem !important;
}

.multiselect .input-wrapper .input:focus,
.multiselect .input-wrapper input:focus {
  border: none !important;
  box-shadow: none !important;
}

.multiselect .tag,
.labels-list .tag,
.assignees .tag {
  margin: 0 !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  max-inline-size: 100%;
}

.multiselect .user,
.assignees .user {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  margin: 0 !important;
  position: relative;
}

/* Task detail attribute grid — equal control height / spacing */
.details .detail-title {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
  margin-block-end: 0.4rem !important;
  line-height: 1.2 !important;
}

/* Compact meta row: assignees / priority / due — equal weight, no giant stretch */
.task-view .details.columns,
.detail-content > .details.columns {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  gap: 0.75rem 1rem !important;
  margin-inline: 0 !important;
}

.task-view .details.columns > .column,
.task-view .details.columns > * > .column {
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

.task-view .details .column.assignees {
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 11rem !important;
  max-width: 18rem !important;
}

.task-view .details.columns > *:not(.assignees) {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 11rem !important;
}

.task-view .details.columns > *:not(.assignees) .column {
  flex: none !important;
  width: auto !important;
  max-width: 11rem !important;
}

.task-view .details .column:not(.assignees) .select,
.task-view .details .column:not(.assignees) .select select,
.task-view .details .column:not(.assignees) .date-input {
  max-width: 11rem !important;
  width: 100% !important;
}

/* One outer shell for due/start/end — never border both .date-input and .show */
.task-view .details .date-input {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  min-height: 40px !important;
  height: 40px !important;
  padding-inline: 0.65rem !important;
  box-sizing: border-box !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--avers-radius) !important;
  background: #fff !important;
  box-shadow: none !important;
  max-width: 11rem !important;
  width: 100% !important;
}

.task-view .details .date-input .datepicker,
.task-view .details .date-input .show,
.task-view .details .date-input > *:not(.remove):not(.icon) {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0.2rem 0 !important;
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  inline-size: auto !important;
}

.task-view .details .date-input .remove {
  flex-shrink: 0 !important;
  padding-inline-start: 0.35rem !important;
  line-height: 1 !important;
}

.task-view .details .assignees .multiselect .input-wrapper {
  min-height: 40px !important;
  height: auto !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
  align-items: center !important;
}

.task-view .details .assignees .multiselect .user,
.task-view .details .assignees .user {
  flex-shrink: 0 !important;
}

.task-view .details .assignees .multiselect .input-wrapper .input,
.task-view .details .assignees .multiselect .input-wrapper input {
  flex: 0 1 auto !important;
  min-width: 5rem !important;
  max-width: 11rem !important;
  width: auto !important;
}

.details .column {
  margin-block-end: 0.75rem !important;
}

.details .select:not(.has-defaults) select,
.details .select select,
.details .input.has-defaults,
.details select {
  min-height: 40px !important;
  height: 40px !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--avers-radius) !important;
  box-shadow: none !important;
}

/* Datepicker shell lives on .date-input — keep inner nodes borderless */
.details .datepicker,
.details .flatpickr-input,
.details .date-input .show,
.details .date-input > *:not(.remove):not(.icon) {
  min-height: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Date range / addon fields: keep input + calendar button as one control */
.field.has-addons {
  display: flex !important;
  align-items: stretch !important;
  width: 100%;
  gap: 0 !important;
}

/* Kill Bulma's -1px overlap that looks like the button sits on the input */
.field.has-addons .control:not(:last-child) {
  margin-right: 0 !important;
  margin-inline-end: 0 !important;
}

/* Vikunja uses control.is-fullwidth (= width:100%) which overlaps the calendar button */
.field.has-addons > .control.is-fullwidth,
.field.has-addons > .control.is-expanded {
  width: auto !important;
  max-width: none !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

.field.has-addons > .control:not(.is-fullwidth):not(.is-expanded) {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}

.field.has-addons .input,
.field.has-addons .button,
.field.has-addons button.button {
  min-height: 2.5rem !important;
  min-block-size: 2.5rem !important;
  height: 2.5rem !important;
  box-shadow: none !important;
}

.field.has-addons .control:first-child:not(:only-child) .input,
.field.has-addons .control:first-child:not(:only-child) .button,
.field.has-addons .control:first-child:not(:only-child) button {
  border-start-end-radius: 0 !important;
  border-end-end-radius: 0 !important;
}

.field.has-addons .control:last-child:not(:only-child) .input,
.field.has-addons .control:last-child:not(:only-child) .button,
.field.has-addons .control:last-child:not(:only-child) button {
  border-start-start-radius: 0 !important;
  border-end-start-radius: 0 !important;
  margin-inline-start: -1.5px !important; /* join borders cleanly without covering text */
}

.field.has-addons .control:not(:first-child):not(:last-child) .input,
.field.has-addons .control:not(:first-child):not(:last-child) .button {
  border-radius: 0 !important;
}

.field.has-addons .button,
.field.has-addons button.button,
.datepicker-with-range .field.has-addons .button,
.flatpickr-container .field.has-addons .button {
  width: auto !important;
  max-width: none !important;
  padding-inline: 0.75rem !important;
  flex-shrink: 0 !important;
  margin-block: 0 !important;
  position: relative !important;
  z-index: 1;
}

/* Flatpickr injects a hidden input — our theme was making it a 3rd visible field */
.datepicker-with-range .flatpickr-container > input.form-control,
.datepicker-with-range .flatpickr-container > input.input,
.datepicker-with-range .flatpickr-container input.form-control.input,
.datepicker-with-range input.flatpickr-input,
.datepicker-with-range .flatpickr-wrapper > input,
.flatpickr-container > input.form-control,
.flatpickr-container input.form-control.input,
.flatpickr-container > .flatpickr-input,
.datepicker-with-range .flatpickr-calendar + input,
.datepicker-with-range label + input.form-control {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  min-block-size: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

.datepicker-with-range-container .popup,
.datepicker-with-range-container .popup.is-open,
.popup.is-open .datepicker-with-range {
  background: #fff !important;
  z-index: 40 !important;
}

.datepicker-with-range .flatpickr-calendar,
.flatpickr-calendar {
  background: #fff !important;
  box-shadow: none !important;
}

.datepicker-with-range .flatpickr-days,
.datepicker-with-range .dayContainer {
  background: #fff !important;
}

.tag,
.label-tag {
  border-radius: var(--avers-radius) !important;
  font-family: var(--avers-font) !important;
  font-weight: var(--avers-font-weight) !important;
  text-transform: none !important;
}

/* ── Table view (project-table) ── */
.project-table .filter-container,
.filter-container {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-block-end: 0.75rem !important;
}

.project-table .filter-container .button,
.filter-container .button {
  background: #f8fafc !important;
  color: #334155 !important;
  border: 1.5px solid #e2e8f0 !important;
  min-block-size: 36px !important;
  font-size: 0.8125rem !important;
  text-transform: none !important;
}

.project-table .filter-container .button:hover,
.filter-container .button:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #1f2937 !important;
}

.project-table .card,
.project-table .loader-container > .card,
.app-content .table.has-actions {
  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: hidden !important;
}

.project-table .table,
.app-content .table.is-fullwidth,
.table.has-actions {
  background: var(--avers-surface) !important;
  font-family: var(--avers-font) !important;
  color: var(--avers-text) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.project-table .table th,
.table.has-actions th,
.app-content .table thead th {
  background: #f9fafb !important;
  color: var(--avers-text-muted) !important;
  font-family: var(--avers-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border-block-end: 1px solid var(--avers-border) !important;
  border-inline: none !important;
  padding: 0.75rem 1rem !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

.project-table .table td,
.table.has-actions td,
.app-content .table tbody td {
  border-block-end: 1px solid #f3f4f6 !important;
  border-inline: none !important;
  padding: 0.7rem 1rem !important;
  vertical-align: middle !important;
  font-size: 0.875rem !important;
  color: var(--avers-text) !important;
}

.project-table .table.is-hoverable tbody tr:hover,
.table.is-hoverable tbody tr:hover {
  background: #f9fafb !important;
}

.project-table .table tbody tr:last-child td,
.table.has-actions tbody tr:last-child td {
  border-block-end: none !important;
}

.project-table .table a,
.table.has-actions a {
  color: var(--avers-blue) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.project-table .table a:hover,
.table.has-actions a:hover {
  color: #1d4ed8 !important;
  text-decoration: underline !important;
}

/* Done badge in table — muted emerald, not neon success */
.is-done,
.is-done--small,
.project-table .is-done,
.kanban-card__done,
.kanban-card .is-done {
  background: var(--avers-emerald-soft) !important;
  color: #fff !important;
  font-family: var(--avers-font) !important;
  font-weight: var(--avers-font-weight) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  border-radius: var(--avers-radius) !important;
  padding: 0.3rem 0.55rem !important;
  line-height: 1.2 !important;
  display: inline-block !important;
  border: 1px solid var(--avers-emerald-soft) !important;
  box-shadow: none !important;
}

.is-done--small {
  padding: 0.2rem 0.45rem !important;
  font-size: 0.6875rem !important;
}

/* ── Kanban: align bucket headers + Avers cards ── */
.kanban .bucket-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.35rem !important;
  min-block-size: 48px !important;
  block-size: auto !important;
  padding: 0.5rem 0.65rem !important;
  background: var(--avers-kanban-header) !important;
  border-radius: 12px 12px 0 0 !important;
  box-sizing: border-box !important;
}

.kanban .bucket-header > .icon,
.kanban .bucket-header .icon.is-small {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 1.25rem !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  margin: 0 !important;
  margin-inline-end: 0.35rem !important;
  color: var(--avers-emerald-soft) !important;
  line-height: 1 !important;
  align-self: center !important;
}

.kanban .bucket-header .title.input,
.kanban .bucket-header h2.title.input,
.bucket-header .title.input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0.25rem 0.35rem !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: var(--avers-radius) !important;
  font-family: var(--avers-font) !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--avers-text) !important;
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}

.kanban .bucket-header .title.input:hover,
.kanban .bucket-header .title.input:focus {
  background: rgba(255, 255, 255, 0.7) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.kanban .bucket-header .limit {
  flex: 0 0 auto !important;
  align-self: center !important;
  font-size: 0.75rem !important;
  color: var(--avers-text-muted) !important;
  padding: 0 0.35rem !important;
}

.kanban .bucket-header .options,
.kanban .bucket-header .dropdown,
.kanban .bucket-header .is-right {
  flex: 0 0 auto !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-inline-start: auto !important;
}

.kanban .bucket-header .dropdown-trigger,
.kanban .bucket-header .dropdown-trigger .button,
.kanban .bucket-header .button {
  min-block-size: 28px !important;
  min-height: 28px !important;
  height: 28px !important;
  width: 28px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--avers-text-muted) !important;
}

.kanban .bucket {
  background: #f3f4f6 !important;
  border-radius: 12px !important;
  border: 1px solid var(--avers-border) !important;
}

.kanban .bucket .task-item {
  background: transparent !important;
  padding: 0.35rem 0.5rem !important;
}

.kanban .kanban-card,
.kanban .task.kanban-card,
.kanban-card {
  background: var(--avers-surface) !important;
  border: 1px solid var(--avers-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(124, 129, 138, 0.08) !important;
  font-family: var(--avers-font) !important;
}

.kanban .bucket-footer {
  background: var(--avers-kanban-header) !important;
  border-radius: 0 0 12px 12px !important;
}

.kanban .bucket-footer .button {
  background: var(--avers-surface) !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #334155 !important;
  text-transform: none !important;
  min-block-size: 36px !important;
  font-size: 0.8125rem !important;
}

.kanban .bucket-footer .button:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
}

.kanban .bucket.new-bucket .button {
  background: transparent !important;
  border: 1.5px dashed #d1d5db !important;
  color: var(--avers-text-muted) !important;
  text-transform: none !important;
  min-block-size: 48px !important;
}

/* View tabs (Список / Гант / Таблица / Канбан) */
.project-title-wrapper .button.is-active,
.project-header .button.is-active,
.app-content .tabs li.is-active a,
.tabs ul li.is-active a {
  background: #eff6ff !important;
  color: var(--avers-blue) !important;
  border-color: #bfdbfe !important;
  font-weight: 700 !important;
}

.tabs a,
.project-header .button {
  text-transform: none !important;
  font-family: var(--avers-font) !important;
  border-radius: 10px !important;
}

.tabs ul {
  border-block-end-color: var(--avers-border) !important;
}

/* ── Gantt chart layout ───────────────────────────────────────────────
   1) Flatpickr altInput → hide duplicate field
   2) Do NOT override day/month column widths — Vikunja JS sets inline px.
      CSS min-width on days desyncs months after hard refresh.
   ------------------------------------------------------------------ */

/* Range picker: hide the original flatpickr input; keep only alt (.form-control) */
.project-gantt .gantt-options .control:has(> input.form-control) > input.flatpickr-input:not(.form-control),
.project-gantt .gantt-options input.flatpickr-input[type="hidden"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  min-block-size: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

.project-gantt .gantt-options {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 1rem !important;
}

.project-gantt .gantt-options .field {
  width: auto !important;
  min-width: 16rem !important;
  max-width: 28rem !important;
  flex: 1 1 16rem !important;
  position: relative !important;
}

.project-gantt .gantt-options .control {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.project-gantt .gantt-options input.form-control,
.project-gantt .gantt-options input.input.form-control,
.project-gantt .gantt-options .flatpickr-input.form-control {
  display: block !important;
  width: 100% !important;
  min-height: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0.5rem 0.75rem !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--avers-radius) !important;
  background: #fff !important;
  box-shadow: none !important;
  font-family: var(--avers-font) !important;
  font-size: 0.875rem !important;
  color: var(--avers-text) !important;
  box-sizing: border-box !important;
}

/* Scroll shell — do not override column widths (JS sets day/month px) */
.project-gantt .gantt-chart-container {
  max-width: 100% !important;
  min-width: 0 !important;
}

.project-gantt .gantt-chart-container .card,
.project-gantt .card.has-overflow,
.gantt-chart-container .has-overflow {
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-width: 100% !important;
}

.project-gantt .gantt-container,
.gantt-container {
  overflow-x: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Visual polish only — widths come from inline styles in GanttTimelineHeader */
.gantt-timeline {
  position: sticky !important;
  inset-block-start: 0 !important;
  z-index: 10 !important;
  background: #fff !important;
}

.gantt-timeline-months .timeunit-month {
  font-family: var(--avers-font) !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  color: var(--avers-text) !important;
  text-align: center !important;
  background: #fff !important;
  border-inline-end: 1px solid #e2e8f0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.gantt-timeline-days .timeunit-wrapper {
  font-family: var(--avers-font) !important;
  font-size: 0.75rem !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
}

.gantt-timeline-days .timeunit-wrapper .weekday {
  font-size: 0.65rem !important;
  color: var(--avers-text-muted) !important;
}

.gantt-timeline-days .timeunit-wrapper.today {
  background: var(--avers-blue) !important;
  color: #fff !important;
  border-radius: 5px 5px 0 0 !important;
}

.gantt-timeline-days .timeunit-wrapper.today .weekday {
  color: rgba(255, 255, 255, 0.9) !important;
}

.gantt-row-content {
  min-height: 40px !important;
}

/* Comment / TipTap editor — visible box on gray workspace */
.tiptap__wrapper,
.tiptap .tiptap__wrapper {
  background: var(--avers-surface) !important;
  border: 1.5px solid var(--avers-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  overflow: hidden;
}

.tiptap__wrapper:hover,
.tiptap .tiptap__wrapper:hover {
  border-color: #d1d5db !important;
}

.tiptap__wrapper:focus-within,
.tiptap__wrapper.tiptap__wrapper-is-editing:focus-within,
.tiptap .tiptap__wrapper:focus-within {
  border-color: var(--avers-navy) !important;
  box-shadow: 0 0 0 3px rgba(124, 129, 138, 0.12) !important;
}

.tiptap__wrapper .editor-toolbar,
.tiptap .editor-toolbar {
  background: #f9fafb !important;
  border: none !important;
  border-block-end: 1px solid var(--avers-border) !important;
  border-radius: 0 !important;
}

.tiptap__editor,
.tiptap__editor .ProseMirror,
.ProseMirror {
  background: var(--avers-surface) !important;
  color: var(--avers-text) !important;
  font-family: var(--avers-font) !important;
}

.tiptap__editor.tiptap__editor-is-edit-enabled {
  min-block-size: 8rem !important;
}

.tiptap__editor .ProseMirror {
  padding: 0.75rem 1rem !important;
  min-block-size: 6rem !important;
}

.tiptap p::before {
  color: var(--avers-text-muted) !important;
}

h1, h2, h3, .title, .subtitle {
  font-family: var(--avers-font) !important;
  color: var(--avers-text);
}

a {
  color: var(--avers-blue);
}

/* Task breadcrumb: project + bucket text (Vikunja uses --grey-800 which
   stays “dark-theme light” if tokens lose — only > and pencil remain) */
.task-view nav.subtitle,
.task-view .subtitle {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.2rem 0.35rem !important;
  color: #1f2937 !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin-block-end: 1rem !important;
  width: 100% !important;
  max-width: 100% !important;
}

.task-view .subtitle a,
.task-view .subtitle .bucket-name,
.task-view .subtitle .base-button,
.task-view .subtitle button,
.task-view .subtitle span {
  color: #1f2937 !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  text-transform: none !important;
}

.task-view .subtitle a {
  color: #2563eb !important;
  text-decoration: none !important;
}

.task-view .subtitle .has-text-grey-light {
  color: #94a3b8 !important;
  font-weight: 400 !important;
  padding-inline: 0.1rem !important;
}

.task-view .subtitle .bucket-name,
.task-view .subtitle .base-button.bucket-name {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  color: #1f2937 !important;
  flex: 0 0 auto !important;
}

.task-view .subtitle .change-indicator,
.task-view .subtitle .icon {
  color: #64748b !important;
  font-size: 0.75rem !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
}

/* =========================================================
   TASK DETAIL — Avers polish (highest priority overrides)
   Users / Priority / Due / Labels / right control panel
   ========================================================= */

/* Field labels: quiet uppercase like avers-sales-doc */
.task-view .details .detail-title,
.task-view .labels-list .detail-title {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
}

/* One row, equal control height, vertically centered */
.task-view .details.columns {
  align-items: flex-end !important;
}

.task-view .details .multiselect .input-wrapper,
.task-view .details .select select {
  min-height: 40px !important;
  height: 40px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--avers-radius) !important;
  background: #fff !important;
  box-shadow: none !important;
}

.task-view .details .multiselect .input-wrapper {
  height: auto !important;
  min-height: 40px !important;
  align-items: center !important;
}

/* Kill inner border: must beat any .input shell rules (incl. :not() stacks) */
.task-view .details .multiselect .input-wrapper > input.input,
.task-view .details .multiselect .input-wrapper > input,
.task-view .labels-list .multiselect .input-wrapper > input.input,
.task-view .labels-list .multiselect .input-wrapper > input,
.task-view .assignees .multiselect .input-wrapper > input.input,
.task-view .assignees .multiselect .input-wrapper > input,
.task-view .multiselect .input-wrapper > input.input,
#app .task-view .multiselect .input-wrapper > input.input,
#app .labels-list .multiselect .input-wrapper > input.input,
#app .multiselect .input-wrapper > input.input {
  border: 0 !important;
  border-color: transparent !important;
  border-width: 0 !important;
  border-style: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0.25rem 0.15rem !important;
  margin: 0 !important;
}

#app .task-view .multiselect .input-wrapper > input.input:focus,
#app .task-view .multiselect .input-wrapper > input:focus,
#app .multiselect .input-wrapper > input.input:focus {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* date-input outer shell already defined above — keep show/datepicker naked */
.task-view .details .date-input .datepicker,
.task-view .details .date-input .show {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Labels: compact badges + compact input (not full-bleed loud bar) */
.task-view .labels-list.details,
.task-view .details.labels-list {
  max-width: 100% !important;
}

.task-view .labels-list .multiselect .input-wrapper {
  min-height: 40px !important;
  max-width: 36rem !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--avers-radius) !important;
  background: #fff !important;
  box-shadow: none !important;
  padding: 0.25rem 0.5rem !important;
}

.task-view .labels-list .tag,
.task-view .details .tag {
  border-radius: 6px !important;
  font-size: 0.75rem !important;
  font-weight: var(--avers-font-weight) !important;
  padding: 0.15rem 0.45rem !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
}

/* Right panel: soft card, neutral secondary buttons */
.task-view .action-buttons {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--avers-radius) !important;
  padding: 0.75rem !important;
}

.task-view .action-buttons .button.is-outlined:not(.avers-done-btn):not(.button--mark-done):not(.is-danger),
.task-view .action-buttons .button:not(.avers-done-btn):not(.button--mark-done):not(.is-danger):not(.is-primary) {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
  border-radius: var(--avers-radius) !important;
  box-shadow: none !important;
}

.task-view .action-buttons .button.avers-done-btn,
.task-view .action-buttons .button--mark-done {
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: #fff !important;
  border-radius: var(--avers-radius) !important;
  white-space: nowrap !important;
}

.task-view .action-heading,
.task-view .menu-label {
  font-size: 11px !important;
  font-weight: var(--avers-font-weight) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
}

/* Soften task title input so header feels lighter */
.task-view .heading .input,
.task-view .heading input.title,
.task-view h1.input,
.task-view .title.input {
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: var(--avers-radius) !important;
  min-height: 0 !important;
}

.task-view .heading .input:hover,
.task-view .heading .input:focus,
.task-view .title.input:hover,
.task-view .title.input:focus {
  border-color: #e2e8f0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* =========================================================
   Labels manage page — flex wrap + Avers badge spacing
   (scoped away from task detail .labels-list)
   ========================================================= */
.labels-list.column,
.labels:not(.task-view) > .labels-list,
.app-content > .labels .labels-list {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: flex-start !important;
  gap: 8px 10px !important;
}

/* Task detail labels field: block so chips aren't flex-crushed */
.task-view .labels-list,
.task-view .labels-list.details,
.task-view .details.labels-list {
  display: block !important;
  width: 100% !important;
  max-width: 36rem !important;
  gap: 0 !important;
}

.labels-list .tag,
.labels-list a.tag {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  border-radius: 6px !important;
  padding: 0.35rem 0.65rem !important;
  font-family: var(--avers-font) !important;
  font-size: 0.8125rem !important;
  font-weight: var(--avers-font-weight) !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
  -webkit-font-smoothing: antialiased;
  white-space: nowrap !important;
}

.labels-list .tag:hover,
.labels-list a.tag:hover {
  filter: brightness(0.97);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1) !important;
}

.labels-list .label-edit-button {
  flex-shrink: 0 !important;
  margin-inline-start: 0.15rem !important;
}

/* =========================================================
   Assignees — avatar + remove-X as one compact chip
   ========================================================= */
.task-view .assignees-list,
.assignees .assignees-list,
.multiselect .assignees-list {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.35rem !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 100% !important;
}

/* In task-detail multiselect: chips join the input-wrapper flex row */
.task-view .details .assignees .assignees-list,
.task-view .assignees .edit-assignees .assignees-list,
.task-view .edit-assignees .assignees-list {
  display: contents !important;
}

.task-view .assignees-list .assignee,
.assignees .assignees-list .assignee,
.multiselect .assignees-list .assignee,
.task-view .details .assignees .assignee,
.task-view .edit-assignees .assignee {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.15rem !important;
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  width: auto !important;
  max-width: max-content !important;
  min-width: 0 !important;
  margin: 0 !important;
  margin-inline-start: 0 !important;
}

.task-view .assignees-list .assignee:not(:first-child),
.assignees .assignees-list .assignee:not(:first-child),
.task-view .assignees-list:hover .assignee:not(:first-child),
.assignees .assignees-list:hover .assignee:not(:first-child) {
  margin-inline-start: 0 !important;
}

.task-view .assignees-list .assignee .user,
.assignees .assignees-list .assignee .user,
.task-view .details .assignees .assignee .user,
.task-view .edit-assignees .assignee .user {
  margin: 0 !important;
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: max-content !important;
}

.task-view .assignees-list .assignee .avatar-wrapper,
.assignees .assignees-list .assignee .avatar-wrapper,
.task-view .edit-assignees .assignee .avatar-wrapper {
  margin-inline-end: 0 !important;
  flex-shrink: 0 !important;
}

.task-view .assignees-list .assignee .user img,
.assignees .assignees-list .assignee .user img {
  border: 2px solid #fff !important;
  display: block !important;
}

/* In the edit field chip only: avatar — never hide dropdown .username */
.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 {
  display: none !important;
}

.task-view .assignees-list .assignee .username,
.assignees .assignees-list .assignee .username {
  max-width: 5.5rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 0.75rem !important;
  color: #1f2937 !important;
}

/* X always immediately after avatar — never mid-field */
.task-view .assignees-list .remove-assignee,
.assignees .assignees-list .remove-assignee,
.multiselect .assignees-list .remove-assignee,
.task-view .details .assignees .remove-assignee,
.task-view .edit-assignees .remove-assignee {
  position: static !important;
  inset: auto !important;
  inset-block-start: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
  inline-size: 16px !important;
  block-size: 16px !important;
  margin: 0 !important;
  margin-inline-start: 0.15rem !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #db4040 !important;
  box-shadow: 0 0 0 1px #e2e8f0 !important;
  font-size: 0.65rem !important;
  line-height: 1 !important;
  z-index: 2 !important;
}

/* =========================================================
   Home “Current tasks” — airy plates, meta spread across width
   Desktop: title+priority | labels+avatars —— due+icons
   Mobile: stacked with comfortable padding
   ========================================================= */
.show-tasks .card.has-overflow,
.is-max-width-desktop > .card.has-overflow:has(ul.tasks),
.content .card.has-overflow:has(ul.tasks) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Only the Card shell — NOT .task.loader-container (same class name!) */
.show-tasks .card.has-overflow > .card-content,
.is-max-width-desktop > .card.has-overflow:has(ul.tasks) > .card-content,
.content .card.has-overflow:has(ul.tasks) > .card-content {
  padding: 0 !important;
  background: transparent !important;
}

ul.tasks,
.show-tasks ul.tasks {
  list-style: none !important;
  margin: 0 !important;
  padding: 0.35rem 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  background: transparent !important;
}

ul.tasks > li,
.show-tasks ul.tasks > li {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Card shell: body | favorite — high specificity beats .loader-container resets */
#app ul.tasks .task.single-task.loader-container,
#app ul.tasks .single-task.task.loader-container,
#app .show-tasks .task.single-task.loader-container,
#app .show-tasks .single-task.task.loader-container,
ul.tasks .single-task.task,
ul.tasks .task.single-task,
.show-tasks .single-task.task,
.show-tasks .task.single-task {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 1.75rem !important;
  grid-template-rows: auto !important;
  align-items: start !important;
  column-gap: 0.85rem !important;
  row-gap: 0 !important;
  flex-wrap: nowrap !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 4px 14px rgba(15, 23, 42, 0.07) !important;
  padding: 1.75rem 1.85rem !important;
  color: var(--avers-text) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Hide mark-done checkbox on list cards — tap opens the task */
ul.tasks .single-task > span:first-child:has(.fancy-checkbox),
ul.tasks .single-task > span:first-child:has(input[type="checkbox"]),
.show-tasks .single-task > span:first-child:has(.fancy-checkbox),
.show-tasks .single-task > span:first-child:has(input[type="checkbox"]),
ul.tasks .single-task .fancy-checkbox,
.show-tasks .single-task .fancy-checkbox {
  display: none !important;
}

ul.tasks .single-task:hover,
.show-tasks .single-task:hover,
#app ul.tasks .task.single-task.loader-container:hover,
#app .show-tasks .task.single-task.loader-container:hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #94a3b8 !important;
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.06),
    0 8px 20px rgba(15, 23, 42, 0.1) !important;
}

ul.tasks .single-task > span:first-child,
.show-tasks .single-task > span:first-child {
  display: none !important;
}

/*
 * Body: wrap row so meta can spread horizontally
 * 1) header (full width)
 * 2) labels + avatars (left) ··· due + icons (right)
 */
ul.tasks .single-task > .tasktext,
.show-tasks .single-task > .tasktext {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: flex-start !important;
  gap: 0.95rem 1.35rem !important;
  flex: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  hyphens: none !important;
  word-break: normal !important;
}

ul.tasks .single-task > .favorite,
.show-tasks .single-task > .favorite {
  grid-column: 2 !important;
  grid-row: 1 !important;
  opacity: 0.35 !important;
  width: 1.5rem !important;
  inline-size: 1.5rem !important;
  justify-self: end !important;
  margin: 0 !important;
  padding-block-start: 0.15rem !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: 1 !important;
}

ul.tasks .single-task > .progress,
ul.tasks .single-task > progress,
.show-tasks .single-task .progress {
  grid-column: 1 / -1 !important;
  margin-block-start: 0.5rem !important;
}

/* --- Header: project eyebrow, then title ····· priority --- */
ul.tasks .single-task .tasktext > span.is-inline-flex,
.show-tasks .single-task .tasktext > span.is-inline-flex {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 0.55rem 0.95rem !important;
  flex: 1 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

ul.tasks .single-task .task-project,
.show-tasks .single-task .task-project {
  order: 0 !important;
  flex: 1 0 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.6875rem !important;
  font-weight: var(--avers-font-weight) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--avers-text-muted) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

ul.tasks .single-task .task-link,
.show-tasks .single-task .task-link {
  order: 1 !important;
  flex: 1 1 12rem !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.975rem !important;
  font-weight: var(--avers-font-weight) !important;
  line-height: 1.4 !important;
  color: var(--avers-text) !important;
  text-decoration: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

ul.tasks .single-task .priority-label,
.show-tasks .single-task .priority-label {
  order: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.2rem !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  margin-inline-start: auto !important;
  padding: 0.2rem 0.55rem !important;
  font-size: 0.75rem !important;
  font-weight: var(--avers-font-weight) !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  hyphens: none !important;
  background: #fff7ed !important;
  border-radius: 6px !important;
  line-height: 1.2 !important;
}

ul.tasks .single-task .priority-label .icon,
.show-tasks .single-task .priority-label .icon {
  padding-inline-end: 0 !important;
  font-size: 0.7rem !important;
}

ul.tasks .single-task a,
ul.tasks .single-task .tasktext,
.show-tasks .single-task a {
  color: var(--avers-text) !important;
}

/* --- Meta strip: left cluster + right cluster --- */
ul.tasks .single-task .labels,
.show-tasks .single-task .labels {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.35rem !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 {
  margin: 0 !important;
  border-radius: 6px !important;
  font-size: 0.6875rem !important;
  font-weight: var(--avers-font-weight) !important;
  padding: 0.2rem 0.5rem !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
}

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

ul.tasks .single-task .assignees-list .username,
.show-tasks .single-task .assignees-list .username {
  display: none !important;
}

ul.tasks .single-task .assignees-list .avatar-wrapper,
.show-tasks .single-task .assignees-list .avatar-wrapper {
  margin: 0 !important;
}

ul.tasks .single-task .assignees-list .user img,
ul.tasks .single-task .assignees-list .avatar,
.show-tasks .single-task .assignees-list .avatar {
  width: 24px !important;
  height: 24px !important;
  block-size: 24px !important;
  inline-size: 24px !important;
  border: 1.5px solid #fff !important;
  box-shadow: 0 0 0 1px #e2e8f0 !important;
}

/* Push due (+ following icons) to the right half of the card */
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;
  padding: 0.15rem 0 !important;
  font-size: 0.8125rem !important;
  font-style: normal !important;
  color: var(--avers-text-muted) !important;
  line-height: 1.3 !important;
}

ul.tasks .single-task .dueDate time,
.show-tasks .single-task .dueDate time {
  font-style: normal !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: 500 !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;
  flex-wrap: nowrap !important;
  gap: 0.55rem !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  color: var(--avers-text-muted) !important;
  font-size: 0.8125rem !important;
}

/* If there is no due date, still park icons on the right */
ul.tasks .single-task .tasktext > .labels + span:not(.assignees-list),
ul.tasks .single-task .tasktext > .assignees-list + span:not(.checklist-summary),
.show-tasks .single-task .tasktext > .labels + span:not(.assignees-list),
.show-tasks .single-task .tasktext > .assignees-list + span:not(.checklist-summary) {
  margin-inline-start: auto !important;
}

ul.tasks .single-task .tasktext > .dueDate + span,
.show-tasks .single-task .tasktext > .dueDate + span {
  margin-inline-start: 0 !important;
}

ul.tasks .single-task .project-task-icon,
.show-tasks .single-task .project-task-icon {
  margin: 0 !important;
  color: var(--avers-text-muted) !important;
  opacity: 0.8 !important;
}

ul.tasks .single-task .checklist-summary,
.show-tasks .single-task .checklist-summary {
  flex: 0 0 auto !important;
  margin: 0 !important;
  color: var(--avers-text-muted) !important;
  font-size: 0.75rem !important;
}

ul.tasks .single-task .color-bubble,
.show-tasks .single-task .color-bubble {
  width: 0.5rem !important;
  height: 0.5rem !important;
  flex-shrink: 0 !important;
}

ul.tasks .single-task .popup,
.show-tasks .single-task .popup {
  /* stay out of the meta flex row when closed */
  flex: 0 0 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

ul.tasks .single-task .popup.is-open,
.show-tasks .single-task .popup.is-open {
  flex: 1 0 100% !important;
  width: 100% !important;
  height: auto !important;
  position: relative !important;
  inset-block-start: 0 !important;
}

html.dark ul.tasks .single-task.task,
html.dark .show-tasks .single-task.task,
html.dark #app ul.tasks .task.single-task.loader-container,
html.dark #app .show-tasks .task.single-task.loader-container {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--avers-text) !important;
  border-color: #cbd5e1 !important;
}

/* =========================================================
   MOBILE — undo desktop-only layout constraints
   Tablet/phone: stack task detail, full-width fields, readable lists
   ========================================================= */
@media screen and (max-width: 1023px) {
  /* Home / overview: keep greeting readable on light workspace */
  .app-content,
  .app-content .content,
  .content.has-text-centered,
  .show-tasks {
    color: var(--avers-text) !important;
  }

  .app-content h1,
  .app-content h2,
  .app-content h3,
  .content h1,
  .content h2,
  .content h3,
  .show-tasks h2,
  .show-tasks h3,
  .content.has-text-centered h1 {
    color: var(--avers-text) !important;
    opacity: 1 !important;
  }

  /* Task detail: column stack — actions BELOW content, never beside */
  .task-view-container > .task-view > .columns,
  .task-view > .columns.mbs-2,
  .task-view > .columns {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 1rem !important;
  }

  .task-view .column.detail-content,
  .task-view .detail-content.is-two-thirds,
  .task-view .detail-content {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    order: 1 !important;
  }

  .task-view .column.action-buttons,
  .task-view .action-buttons.is-one-third,
  .task-view .action-buttons {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    order: 2 !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
  }

  .task-view .action-buttons .button,
  .task-view .action-buttons .button.avers-done-btn,
  .task-view .action-buttons .button--mark-done {
    width: 100% !important;
    white-space: normal !important;
    justify-content: center !important;
  }

  /* Detail attribute grid: one field per row, no 11rem crush */
  .task-view .details.columns,
  .detail-content > .details.columns {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  .task-view .details.columns > .column,
  .task-view .details.columns > *,
  .task-view .details.columns > * > .column,
  .task-view .details .column.assignees,
  .task-view .details.columns > *:not(.assignees),
  .task-view .details.columns > *:not(.assignees) .column {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .task-view .details .column:not(.assignees) .select,
  .task-view .details .column:not(.assignees) .select select,
  .task-view .details .column:not(.assignees) .date-input,
  .task-view .details .date-input,
  .task-view .labels-list .multiselect .input-wrapper,
  .task-view .details .multiselect .input-wrapper {
    max-width: 100% !important;
    width: 100% !important;
  }

  .task-view .labels-list.details,
  .task-view .details.labels-list {
    max-width: 100% !important;
  }

  /* Assignees: keep avatar+X chip compact on narrow screens */
  .task-view .details .assignees .assignees-list,
  .task-view .edit-assignees .assignees-list {
    display: contents !important;
  }

  .task-view .assignees-list .remove-assignee,
  .assignees .assignees-list .remove-assignee,
  .task-view .edit-assignees .remove-assignee {
    position: static !important;
    margin-inline-start: 0.15rem !important;
    inset: auto !important;
  }

  .task-view .assignees-list,
  .assignees .assignees-list {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .task-view .details .assignees .input-wrapper .assignee .username,
  .task-view .edit-assignees .input-wrapper .assignee .username {
    display: none !important;
  }

  .task-view nav.subtitle,
  .task-view .subtitle {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  /* Task list cards (mobile): compact — priority + label + avatar on one row */
  .single-task.task,
  .task.single-task,
  .show-tasks .task,
  ul.tasks .single-task.task,
  .show-tasks .single-task.task,
  #app ul.tasks .task.single-task.loader-container,
  #app .show-tasks .task.single-task.loader-container {
    padding: 0.95rem 1rem !important;
    column-gap: 0.5rem !important;
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
  }

  .task .tasktext,
  .single-task .tasktext,
  ul.tasks .single-task > .tasktext,
  .show-tasks .single-task > .tasktext {
    min-width: 0 !important;
    max-width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-content: flex-start !important;
    gap: 0.4rem 0.45rem !important;
  }

  /* Flatten header so priority can sit on the same row as labels/avatars */
  ul.tasks .single-task .tasktext > span.is-inline-flex,
  .show-tasks .single-task .tasktext > span.is-inline-flex {
    display: contents !important;
  }

  ul.tasks .single-task .task-project,
  .show-tasks .single-task .task-project,
  .task .task-project,
  .single-task .task-project {
    order: 0 !important;
    flex: 1 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
  }

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

  /* Tooltip wraps the title link — flatten so order/width still apply */
  ul.tasks .single-task .task-glance-trigger,
  .show-tasks .single-task .task-glance-trigger {
    display: contents !important;
  }

  .task .priority-label,
  .single-task .priority-label,
  ul.tasks .single-task .priority-label,
  .show-tasks .single-task .priority-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.15rem !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    hyphens: none !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    margin-inline-start: 0 !important;
    order: 2 !important;
    padding: 0.12rem 0.4rem !important;
    font-size: 0.6875rem !important;
  }

  .task .priority-label > span:last-child,
  .single-task .priority-label > span:not(.icon) {
    white-space: nowrap !important;
    word-break: keep-all !important;
    hyphens: none !important;
  }

  .task .labels,
  .single-task .labels,
  ul.tasks .single-task .labels,
  .show-tasks .single-task .labels {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    flex: 0 1 auto !important;
    max-width: calc(100% - 7rem) !important;
    gap: 0.25rem !important;
    margin: 0 !important;
    margin-inline-start: 0 !important;
    order: 2 !important;
    overflow: hidden !important;
  }

  .task .assignees-list,
  .single-task .assignees-list,
  ul.tasks .single-task .assignees-list,
  .show-tasks .single-task .assignees-list {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    gap: 0.15rem !important;
    margin: 0 !important;
    margin-inline-start: auto !important;
    order: 2 !important;
  }

  ul.tasks .single-task .labels .tag,
  .show-tasks .single-task .labels .tag {
    padding: 0.12rem 0.4rem !important;
    font-size: 0.6875rem !important;
  }

  ul.tasks .single-task .assignees-list .user img,
  ul.tasks .single-task .assignees-list .avatar,
  .show-tasks .single-task .assignees-list .avatar {
    width: 22px !important;
    height: 22px !important;
    block-size: 22px !important;
    inline-size: 22px !important;
  }

  ul.tasks .single-task .dueDate,
  .show-tasks .single-task .dueDate {
    order: 3 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    margin-inline-start: 0 !important;
    padding: 0 !important;
    font-size: 0.75rem !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),
  ul.tasks .single-task .tasktext > .labels + span:not(.assignees-list),
  ul.tasks .single-task .tasktext > .assignees-list + span:not(.checklist-summary),
  .show-tasks .single-task .tasktext > .labels + span:not(.assignees-list),
  .show-tasks .single-task .tasktext > .assignees-list + span:not(.checklist-summary) {
    order: 3 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    margin-inline-start: auto !important;
    gap: 0.4rem !important;
  }

  ul.tasks .single-task .tasktext > .dueDate + span,
  .show-tasks .single-task .tasktext > .dueDate + span {
    margin-inline-start: auto !important;
  }

  ul.tasks .single-task .checklist-summary,
  .show-tasks .single-task .checklist-summary {
    order: 4 !important;
    flex: 1 0 100% !important;
  }

  .task .assignees-list .assignee,
  .single-task .assignees-list .assignee {
    margin-inline-start: 0 !important;
  }

  ul.tasks .single-task .color-bubble,
  .show-tasks .single-task .color-bubble {
    order: 1 !important;
  }

  /* Gantt / table: don’t force desktop min widths */
  .project-gantt .gantt-options .field {
    min-width: 0 !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  .project-table .filter-container,
  .filter-container {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

@media screen and (max-width: 768px) {
  .task-view .heading .input,
  .task-view .heading input.title,
  .task-view h1.input,
  .task-view .title.input {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
  }

  .task-view .action-buttons {
    padding: 0.65rem !important;
  }

  /* Prefer slightly tighter page padding if wrapper allows */
  .app-content {
    padding-inline: 0.5rem !important;
  }

  .is-max-width-desktop {
    max-width: 100% !important;
    padding-inline: 0 !important;
  }
}