/**
 * KpfTaskModal — redesign for #task-modal (view_task_template.php)
 * Header / two-column body / right-hand "Task Info" list.
 * Perfex sets real per-status/per-priority colours inline (format_task_status,
 * task_priority_color) — this file only refines shape/spacing and never
 * overrides those inline colours, so status meaning stays intact.
 */

html body.app.admin #task-modal .modal-dialog {
  width: 96%;
  max-width: 980px;
}

html body.app.admin #task-modal .modal-content {
  border: 1px solid var(--kodex-border-subtle, #edeff7) !important;
  border-radius: 6px !important;
  box-shadow: 0 24px 64px -12px rgba(20, 20, 26, 0.28) !important;
  overflow: hidden !important;
}

/* ========== Header ========== */
html body.app.admin #task-modal .task-single-header {
  position: relative !important;
  padding: 20px 56px 18px 24px !important;
  border-bottom: 1px solid var(--kodex-border-subtle, #edeff7) !important;
  background: color-mix(in srgb, var(--kodex-action-primary, #001bff) 4%, var(--kodex-bg-surface, #fff)) !important;
}

html body.app.admin #task-modal .task-single-header .modal-title {
  flex-wrap: wrap !important;
  gap: 8px 10px !important;
  margin: 0 !important;
  font-family: var(--kodex-font-display, 'Neue Haas Grotesk Display', Satoshi, system-ui, sans-serif) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.3 !important;
  color: var(--kodex-text-primary, #14141a) !important;
}

html body.app.admin #task-modal .task-single-header .modal-title .label {
  border-radius: 4px !important;
  padding: 3px 9px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  vertical-align: middle !important;
}

html body.app.admin #task-modal .task-single-header > p {
  margin-top: 8px !important;
  font-size: 12.5px !important;
  color: var(--kodex-text-muted, #6e7180) !important;
}

html body.app.admin #task-modal .task-single-header .close {
  position: absolute !important;
  top: 16px !important;
  right: 18px !important;
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  opacity: 1 !important;
  color: var(--kodex-text-secondary, #40424d) !important;
  transition: background 0.14s ease, color 0.14s ease;
}

html body.app.admin #task-modal .task-single-header .close:hover {
  background: var(--kodex-bg-subtle, #f5f5f5) !important;
  color: var(--kodex-text-primary, #14141a) !important;
}

html body.app.admin #task-modal .task-single-header .back-to-from-task {
  position: absolute !important;
  top: 20px !important;
  left: 24px !important;
  color: var(--kodex-text-muted, #6e7180) !important;
}

/* ========== Body columns ========== */
html body.app.admin #task-modal .modal-body {
  padding: 0 !important;
}

html body.app.admin #task-modal .modal-body > .row {
  margin: 0 !important;
}

html body.app.admin #task-modal .task-single-col-left {
  padding: 22px 24px !important;
}

html body.app.admin #task-modal .task-single-col-right {
  padding: 22px 24px !important;
  border-left: 1px solid var(--kodex-border-subtle, #edeff7) !important;
  background: var(--kodex-bg-subtle, #fafafb) !important;
}

@media (max-width: 991px) {
  html body.app.admin #task-modal .task-single-col-right {
    border-left: 0 !important;
    border-top: 1px solid var(--kodex-border-subtle, #edeff7) !important;
  }
}

/* Alerts (billed / others working on task) */
html body.app.admin #task-modal .task-single-col-left .alert {
  border: 1px solid var(--kodex-border-subtle, #edeff7) !important;
  border-left: 3px solid var(--kodex-action-primary, #001bff) !important;
  border-radius: 4px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

html body.app.admin #task-modal .task-single-col-left .alert-success {
  border-left-color: var(--kodex-crm-stat-positive, #0d7a4e) !important;
}

/* ========== Section headings + dividers ========== */
html body.app.admin #task-modal .task-single-col-left hr,
html body.app.admin #task-modal .task-single-col-right hr,
html body.app.admin #task-modal .task-single-col-right hr.task-info-separator {
  margin: 18px 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--kodex-border-subtle, #edeff7) !important;
}

html body.app.admin #task-modal h4.th,
html body.app.admin #task-modal h4.chk-heading,
html body.app.admin #task-modal h4.task-info-heading {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 10px !important;
  font-family: var(--kodex-font-body, Satoshi, system-ui, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--kodex-text-primary, #14141a) !important;
}

html body.app.admin #task-modal .task-single-col-right h4.task-info-heading svg {
  color: var(--kodex-action-primary, #001bff) !important;
}

/* ========== Right column: Task Info rows ========== */
html body.app.admin #task-modal .task-single-col-right > .task-single-menu.task-menu-options {
  margin-bottom: 4px !important;
}

html body.app.admin #task-modal .task-info-heading .task-info-icon {
  color: var(--kodex-action-primary, #001bff) !important;
}

html body.app.admin #task-modal .task-info {
  margin: 0 0 4px !important;
}

html body.app.admin #task-modal .task-info h5 {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 9px 10px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--kodex-text-muted, #6e7180) !important;
  transition: background 0.14s ease;
}

html body.app.admin #task-modal .task-info .task-info-icon {
  flex: 0 0 auto !important;
  width: 16px !important;
  text-align: center !important;
  color: var(--kodex-text-muted, #6e7180) !important;
  font-size: 13px !important;
}

/* Push value to the right; label text stays where it is in DOM order */
html body.app.admin #task-modal .task-info h5 > span:not(.task-info-icon),
html body.app.admin #task-modal .task-info h5 > .task-single-menu,
html body.app.admin #task-modal .task-info h5 input.task-info-inline-input-edit {
  margin-left: auto !important;
  font-weight: 700 !important;
  color: var(--kodex-text-primary, #14141a) !important;
  text-align: right !important;
}

html body.app.admin #task-modal .task-info h5 > div.tw-shrink-0 {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

html body.app.admin #task-modal .task-info-inline-input-edit {
  max-width: 130px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
}

html body.app.admin #task-modal .task-single-inline-wrap:hover h5,
html body.app.admin #task-modal .task-info-inline-input-edit:hover,
html body.app.admin #task-modal .task-info-inline-input-edit:focus {
  background: var(--kodex-bg-surface, #fff) !important;
  border-color: var(--kodex-border-default, #d3d6e0) !important;
}

html body.app.admin #task-modal .task-info:not(.task-single-inline-wrap):hover h5 {
  background: var(--kodex-bg-surface, #fff) !important;
}

html body.app.admin #task-modal .task-info .task-single-menu .trigger {
  color: inherit !important;
}

/* ========== Assignee / follower avatar chips ========== */
html body.app.admin #task-modal .task_users_wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

html body.app.admin #task-modal .task-user {
  position: relative !important;
  border-radius: 4px !important;
}

html body.app.admin #task-modal .task-user img {
  border-radius: 4px !important;
  border: 1px solid var(--kodex-border-subtle, #edeff7) !important;
}

/* ========== Description ========== */
html body.app.admin #task-modal #task_view_description.tc-content {
  padding: 12px 14px !important;
  border: 1px solid var(--kodex-border-subtle, #edeff7) !important;
  border-radius: 4px !important;
  background: var(--kodex-bg-subtle, #fafafb) !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}

html body.app.admin #task-modal .task-no-description {
  background: transparent !important;
  border-style: dashed !important;
}