/* Task opens as a pane on the right; the list or board stays visible and usable next to it.
   One column: header with «Завершить задачу», title, fields as «label — value» rows,
   description, subtasks, discussion, and the comment box pinned to the bottom. */

#taskDetails.task-concept,
#taskDetails.task-concept[aria-hidden="false"] {
  position: fixed !important;
  inset: 0 0 0 auto !important;
  width: min(620px, 100vw) !important;
  max-width: none !important;
  height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-left: 1px solid #e3dfea !important;
  border-radius: 0 !important;
  box-shadow: -12px 0 32px #1d17290f !important;
  overflow-y: auto !important;
  z-index: 60 !important;
}
#taskDetails.task-concept[aria-hidden="true"] { display: none !important; }

/* No dimmed backdrop: the rest of the page stays clickable, another task opens in the same pane */
#detailsBackdrop { display: none !important; }
.app.details-open .workspace { overflow: auto !important; }
@media (min-width: 1280px) {
  #taskDetails.task-concept, #taskDetails.task-concept[aria-hidden="false"] { width: min(620px, 42vw) !important; }
  .app.details-open .workspace { margin-right: min(620px, 42vw); }
}

/* Header: complete button on the left, link / actions / close on the right */
#taskDetails.task-concept .concept-head {
  grid-template-columns: auto minmax(0, 1fr) 32px 32px 32px !important;
  align-items: center !important;
  min-height: 56px !important;
  padding: 10px 16px 10px 20px !important;
  background: #fff !important;
  backdrop-filter: none !important;
}
#taskDetails.task-concept .concept-breadcrumb { visibility: hidden; }
#taskDetails.task-concept .concept-head > .complete-toggle {
  display: inline-flex !important;
  justify-content: flex-start !important;
  gap: 6px;
  width: auto !important;
  min-width: 0 !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 12px 0 32px !important;
  border: 1px solid #d8d2e2 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #3d3748 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
#taskDetails.task-concept .concept-head > .complete-toggle::before {
  content: "" !important;
  position: absolute !important;
  left: 11px;
  top: 50%;
  width: 13px !important;
  height: 13px !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  border: 1.5px solid #9b93a8 !important;
  border-radius: 50% !important;
  background: none !important;
}
#taskDetails.task-concept .concept-head > .complete-toggle:hover { border-color: #1f9d6b !important; background: #effaf5 !important; color: #16815f !important; }
#taskDetails.task-concept .concept-head > .complete-toggle:hover::before { border-color: #1f9d6b !important; }
#taskDetails.task-concept .concept-head > .complete-toggle.done { border-color: #1f9d6b !important; background: #1f9d6b !important; color: #fff !important; }
#taskDetails.task-concept .concept-head > .complete-toggle.done::before { border-color: #fff !important; background: radial-gradient(circle, #fff 35%, transparent 38%) !important; }

/* One column in reading order */
#taskDetails.task-concept .concept-body { display: flex !important; flex-direction: column; padding: 18px 24px 0; }
#taskDetails.task-concept :is(.concept-work, #taskForm, .task-main-fields) { display: contents !important; }
#taskDetails.task-concept .concept-kicker { display: none !important; }
#taskDetails.task-concept .task-title-field { order: 1; max-width: none !important; }
#taskDetails.task-concept .concept-status { order: 2; margin: 8px 0 14px !important; }
#taskDetails.task-concept #taskMetadata { order: 3; }
#taskDetails.task-concept .task-description-field { order: 4; margin: 18px 0 18px !important; }
#taskDetails.task-concept #taskChecklistPanel { order: 5; }
#taskDetails.task-concept .concept-tabs { order: 6; }
#taskDetails.task-concept #taskAttachmentsPanel { order: 7; }
#taskDetails.task-concept #taskCommentsPanel { order: 8; }
#taskDetails.task-concept #commentForm { order: 9; }

#taskDetails.task-concept .task-title-field textarea,
#taskDetails.task-concept .task-title-field textarea:focus,
#taskDetails.task-concept .task-title-field textarea:focus-visible { font-size: 24px !important; font-weight: 600 !important; letter-spacing: -.2px !important; }

/* Fields as rows: grey label on the left, value on the right */
#taskDetails.task-concept #taskMetadata {
  --meta-label: 130px;
  display: grid !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
#taskDetails.task-concept #taskMetadata label.field,
#taskDetails.task-concept #taskMetadata .concept-project {
  display: grid !important;
  grid-template-columns: var(--meta-label) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 38px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
#taskDetails.task-concept #taskMetadata label.field > span,
#taskDetails.task-concept #taskMetadata .concept-project > small,
#taskDetails.task-concept #taskMetadata .tag-field .field-head > span {
  color: #6f6780 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
#taskDetails.task-concept #taskMetadata .concept-project > strong { color: #1f1b26; font-size: 14px; font-weight: 400; }
#taskDetails.task-concept #taskMetadata :is(select, input[type="date"]) {
  width: auto !important;
  max-width: 100% !important;
  min-height: 32px !important;
  padding: 0 8px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #1f1b26 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  justify-self: start;
}
#taskDetails.task-concept #taskMetadata :is(select, input[type="date"]):hover:not(:disabled) { border-color: #ddd6ea !important; }
#taskDetails.task-concept #taskMetadata :is(select, input[type="date"]):focus-visible { border-color: #7954d6 !important; outline: 0; }

/* Assignee: avatar next to the name */
#taskDetails.task-concept #taskMetadata .concept-assignee { display: grid !important; grid-template-columns: var(--meta-label) 24px minmax(0, 1fr); align-items: center; column-gap: 8px; min-height: 38px; margin: 0 !important; padding: 0 !important; }
#taskDetails.task-concept #taskMetadata .concept-assignee > label.field { display: contents !important; }
#taskDetails.task-concept #taskMetadata .concept-assignee > label > span { grid-column: 1; grid-row: 1; }
#taskDetails.task-concept #taskMetadata .concept-assignee select { grid-column: 3; grid-row: 1; }
#taskDetails.task-concept #taskMetadata #taskAssigneeAvatar { position: static !important; grid-column: 2; grid-row: 1; display: grid; place-items: center; }
#taskDetails.task-concept #taskMetadata #taskAssigneeAvatar :is(.avatar, .concept-empty-person) { width: 24px !important; height: 24px !important; min-width: 24px !important; font-size: 10px !important; }

/* Due date with quick dates and «осталось N дней» under it */
#taskDetails.task-concept #taskMetadata .task-deadline-row { display: grid !important; grid-template-columns: var(--meta-label) minmax(0, 1fr) !important; align-items: center; column-gap: 8px; row-gap: 4px; min-height: 38px; margin: 0 !important; padding: 0 !important; }
#taskDetails.task-concept #taskMetadata .task-deadline-row > label.field { display: contents !important; }
#taskDetails.task-concept #taskMetadata .task-deadline-row > label > span { grid-column: 1; }
#taskDetails.task-concept #taskMetadata .task-deadline-row input { grid-column: 2; }
#taskDetails.task-concept #taskMetadata .task-deadline-row > :is(.task-due-quick, .task-due-remaining) { grid-column: 2; margin: 0 0 4px 8px !important; }

/* Participants and tags: picker in the value column, «Изменить» at the end */
#taskDetails.task-concept #taskMetadata .concept-people { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
#taskDetails.task-concept #taskMetadata .task-collaborators-field > * { margin: 0 !important; }
#taskDetails.task-concept #taskMetadata .task-collaborators-field > span { grid-column: 1; grid-row: 1; }
#taskDetails.task-concept #taskMetadata .task-collaborators-field { grid-template-columns: var(--meta-label) minmax(0, 1fr) auto !important; }
#taskDetails.task-concept #taskMetadata .task-collaborators-field > #collaboratorPicker { grid-column: 2; grid-row: 1; }
#taskDetails.task-concept #taskMetadata .task-collaborators-field > #toggleCollaboratorPicker { grid-column: 3; grid-row: 1; }
#taskDetails.task-concept #taskMetadata .tag-field { display: grid !important; grid-template-columns: var(--meta-label) minmax(0, 1fr) auto auto; align-items: center; gap: 8px; min-height: 38px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
#taskDetails.task-concept #taskMetadata .tag-field > .field-head { display: contents !important; }
#taskDetails.task-concept #taskMetadata .tag-field .field-head > span { grid-column: 1; grid-row: 1; }
#taskDetails.task-concept #taskMetadata .tag-field #tagPicker { grid-column: 2; grid-row: 1; }
#taskDetails.task-concept #taskMetadata .tag-field #addTagFromTask { grid-column: 3; grid-row: 1; }
#taskDetails.task-concept #taskMetadata .tag-field #toggleTagPicker { grid-column: 4; grid-row: 1; }

/* Discussion: comment box stays at the bottom of the pane */
#taskDetails.task-concept #commentForm {
  position: sticky !important;
  bottom: 0;
  z-index: 5;
  margin: 12px -24px 0 !important;
  padding: 12px 24px 16px !important;
  border: 0 !important;
  border-top: 1px solid #ece8f2 !important;
  border-radius: 0 !important;
  background: #fff !important;
}
#taskDetails.task-concept #commentForm textarea { border: 1px solid #e3ddec !important; border-radius: 8px !important; padding: 8px 10px !important; }

/* Phones: the pane covers the screen */
@media (max-width: 760px) {
  #taskDetails.task-concept,
  #taskDetails.task-concept[aria-hidden="false"] { width: 100vw !important; border-left: 0 !important; z-index: 90 !important; }
  #taskDetails.task-concept .concept-body { padding: 14px 16px 0; }
  #taskDetails.task-concept #taskMetadata { --meta-label: 104px; }
  #taskDetails.task-concept #commentForm { margin: 12px -16px 0 !important; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)) !important; }
}

/* Dark theme */
html[data-theme="dark"] #taskDetails.task-concept { border-left-color: var(--d-border) !important; }
html[data-theme="dark"] #taskDetails.task-concept .concept-head,
html[data-theme="dark"] #taskDetails.task-concept #commentForm { background: var(--d-surface) !important; border-color: var(--d-border) !important; }
html[data-theme="dark"] #taskDetails.task-concept .concept-head > .complete-toggle:not(.done) { border-color: var(--d-border-strong) !important; background: transparent !important; color: var(--d-text) !important; }
html[data-theme="dark"] #taskDetails.task-concept #taskMetadata :is(select, input[type="date"]),
html[data-theme="dark"] #taskDetails.task-concept #taskMetadata .concept-project > strong { color: var(--d-text) !important; }
html[data-theme="dark"] #taskDetails.task-concept #taskMetadata :is(label.field > span, .concept-project > small, .tag-field .field-head > span) { color: var(--d-muted) !important; }
#taskDetails.task-concept #taskMetadata label.field.task-collaborators-field { grid-template-columns: var(--meta-label) minmax(0, 1fr) auto !important; }
#taskDetails.task-concept #taskMetadata label.field.task-collaborators-field > #collaboratorPicker { grid-column: 2 !important; grid-row: 1 !important; }
#taskDetails.task-concept #taskMetadata label.field.task-collaborators-field > #toggleCollaboratorPicker { grid-column: 3 !important; grid-row: 1 !important; }
#taskDetails.task-concept #taskMetadata label.field.task-collaborators-field > span { grid-column: 1 !important; grid-row: 1 !important; }
#taskDetails.task-concept #taskMetadata .concept-project > strong { padding-left: 8px; }
#taskDetails.task-concept #taskMetadata .concept-people { display: grid !important; grid-template-columns: var(--meta-label) minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 6px; min-height: 38px; }
#taskDetails.task-concept #taskMetadata .concept-people > label.field.task-collaborators-field { display: contents !important; }
#taskDetails.task-concept #taskMetadata .concept-people > #taskHeaderSummary { grid-column: 2 !important; grid-row: 1 !important; margin: 0 !important; padding: 0 0 0 8px !important; border: 0 !important; background: none !important; }
#taskDetails.task-concept #taskMetadata .concept-people #collaboratorPicker { grid-column: 2 / -1 !important; grid-row: 2 !important; }
#taskDetails.task-concept #taskMetadata div.field.tag-field { grid-template-columns: var(--meta-label) minmax(0, 1fr) auto auto !important; }
@layer dark-theme {
  html[data-theme="dark"] #taskDetails.task-concept #taskMetadata.concept-meta { background: transparent !important; border: 0 !important; }
}