/**
 * TaskBuilder - Open Task SaaS theme
 * Scoped entirely to .wppm-ot-shell (the #wppm_open_task form) so it cannot leak
 * into other pages or modals. Colors saved under Settings > Appearance > Individual
 * Task (widget header/body, comment colors, send button) are applied inline by the
 * template; this file never overrides those — only shape, spacing and typography.
 */
.wppm-ot-shell,
.wppm-ot-shell *,
.wppm-ot-shell *::before,
.wppm-ot-shell *::after {
  box-sizing: border-box;
}
.wppm-ot-shell {
  --ot-primary: #4f46e5;
  --ot-primary-dark: #4338ca;
  --ot-primary-light: #eef2ff;
  --ot-ink: #111827;
  --ot-muted: #6b7280;
  --ot-border: #e5e7eb;
  --ot-surface: #ffffff;
  --ot-bg: #f8fafc;
  --ot-soft: #f1f5f9;
  --ot-danger: #dc2626;
  --ot-danger-light: #fee2e2;
  --ot-radius: 14px;
  --ot-radius-sm: 10px;
  --ot-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -12px rgba(16,24,40,.10);
  --ot-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: block;
  background: var(--ot-bg);
  padding: 20px 22px 24px;
  border-radius: var(--ot-radius);
  font-family: var(--ot-font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ot-ink);
}
.wppm-ot-shell .dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
  line-height: 1;
}

/* ===================== Header ===================== */
.wppm-ot-shell .wppm-ot-header {
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ot-border);
}
.wppm-ot-shell .wppm-ot-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  float: none;
}
/* "← Task List" link above the heading (same as "← Project List" on a project) */
.wppm-ot-shell .wppm-ot-headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.wppm-ot-shell .wppm-ot-back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: -4px;
  padding: 2px 6px 2px 2px;
  border-radius: 6px;
  color: var(--ot-muted);
  font: 600 12px/1.4 var(--ot-font);
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.wppm-ot-shell .wppm-ot-back .dashicons {
  width: 15px;
  height: 15px;
  font-size: 15px;
}
.wppm-ot-shell .wppm-ot-back:hover {
  background: var(--ot-primary-light);
  color: var(--ot-primary);
}
.wppm-ot-shell .wppm-ot-back:focus-visible {
  outline: 2px solid var(--ot-primary);
  outline-offset: 2px;
}
.wppm-ot-shell .wppm-ot-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}
.wppm-ot-shell .wppm-ot-heading .wppm-heading-inline {
  margin: 0 !important;
  padding: 0;
  font: 700 22px/1.3 var(--ot-font);
  letter-spacing: -0.01em;
  color: var(--ot-ink);
}
.wppm-ot-shell .wppm-ot-crumb {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 320px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ot-primary-light);
  color: var(--ot-primary-dark);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wppm-ot-shell .wppm-ot-crumb .dashicons {
  font-size: 13px;
  width: 13px;
  height: 13px;
}
/* Icon action buttons. Flex items are blockified, so the inline
   display:none / display:inline permission styles keep working. */
.wppm-ot-shell .wppm-ot-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.wppm-ot-shell .wppm-ot-actions > span {
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 !important;
  padding: 0;
  border: 1px solid var(--ot-border);
  border-radius: 9px;
  background: var(--ot-surface);
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  line-height: 0;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .05s ease;
}
/* Visible buttons (inline "display:inline" from the permission checks) become centered
   icon squares; ones hidden with "display:none" are left alone. */
.wppm-ot-shell .wppm-ot-actions > span:not([style*="none"]) {
  display: inline-flex !important;
}
/* Archived tasks hide the print icon itself rather than its button — drop the empty square. */
.wppm-ot-shell .wppm-ot-actions > span:has(> img[style*="none"]) {
  display: none !important;
}
.wppm-ot-shell .wppm-ot-actions > span:hover {
  border-color: #c7d2fe;
  background: var(--ot-primary-light);
  box-shadow: var(--ot-shadow);
}
.wppm-ot-shell .wppm-ot-actions > span:active {
  transform: translateY(1px);
}
.wppm-ot-shell .wppm-ot-actions > span img {
  width: 16px;
  height: 16px;
  margin: 0;
  opacity: .8;
}
.wppm-ot-shell .wppm-ot-actions > span a {
  display: inline-flex;
  line-height: 0;
}
/* plus.svg is a self-colored two-tone badge — tint the button instead of the icon. */
.wppm-ot-shell .wppm-ot-actions > #wppm_add_new_task_btn {
  background: var(--ot-primary-light);
  border-color: #c7d2fe;
}
.wppm-ot-shell .wppm-ot-actions > #wppm_add_new_task_btn img {
  opacity: 1;
}
.wppm-ot-shell .wppm-ot-actions > #wppm_add_new_task_btn:hover {
  background: #e0e7ff;
  border-color: #a5b4fc;
}
.wppm-ot-shell .wppm-ot-actions > #wppm_delete_task_btn:hover {
  border-color: #fecaca;
  background: var(--ot-danger-light);
}
/* Print menu (Open in browser / Download PDF) */
.wppm-ot-shell #wppmprint_menu {
  top: 42px;
  left: 0;
  margin: 0;
  min-width: 190px;
  padding: 4px;
  border: 1px solid var(--ot-border);
  border-radius: 10px;
  background: var(--ot-surface);
  box-shadow: 0 12px 28px -8px rgba(16,24,40,.22), 0 2px 6px rgba(16,24,40,.06);
  z-index: 1000;
}
.wppm-ot-shell #wppmprint_menu a {
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--ot-ink);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.wppm-ot-shell #wppmprint_menu a:hover {
  background: var(--ot-soft);
}

/* ===================== Layout ===================== */
.wppm-ot-shell #wppm_load_individual_task_container {
  margin-top: 0;
}
.wppm-ot-shell .wppm-ot-main {
  padding-left: 0;
  padding-right: 18px;
}
.wppm-ot-shell .wppm-ot-sidebar {
  margin-top: 0 !important;
}

/* ===================== Cards ===================== */
.wppm-ot-shell .wppm-ot-card {
  background: var(--ot-surface);
  border: 1px solid var(--ot-border) !important;
  border-radius: var(--ot-radius);
  box-shadow: var(--ot-shadow);
  padding: 20px 22px !important;
  margin: 0 0 10px !important;
}
/* An empty checklist section (nothing to show, no permission to add) disappears. */
.wppm-ot-shell .wppm_task_checklist_container:not(:has(#wppm_checklist_container > *, #wppm_add_checklist_container)) {
  display: none;
}

/* ===================== Details card ===================== */
.wppm-ot-shell .wppm_task_label {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font: 700 21px/1.35 var(--ot-font) !important;
  color: var(--ot-ink);
  word-break: break-word;
}
/* Title row: name on the left, Quick Edit + Edit Task on the right */
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-title-row .wppm_task_label {
  flex: 1 1 260px;
  min-width: 0;
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-title-actions {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-quick-edit,
.wppm-ot-shell #wppm_individual_edit_task_subject.wppm_action_btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  width: auto;
  height: 34px;
  margin: 0;
  padding: 0 13px !important;
  border-radius: 9px !important;
  font: 600 12.5px/1 var(--ot-font) !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
/* Quick Edit: the primary, most-used action */
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-quick-edit {
  border: 1px solid transparent;
  background: var(--ot-primary);
  box-shadow: 0 1px 2px rgba(79,70,229,.25);
  color: #fff;
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-quick-edit:hover {
  background: var(--ot-primary-dark);
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-quick-edit:focus-visible,
.wppm-ot-shell #wppm_individual_edit_task_subject:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ot-primary-light);
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-quick-edit .dashicons {
  width: 15px;
  height: 15px;
  font-size: 15px;
}
/* Edit Task: the full editor, secondary */
.wppm-ot-shell #wppm_individual_edit_task_subject.wppm_action_btn {
  border: 1px solid var(--ot-border) !important;
  background: var(--ot-surface) !important;
  color: var(--ot-ink) !important;
}
.wppm-ot-shell #wppm_individual_edit_task_subject.wppm_action_btn:hover {
  border-color: #c7d2fe !important;
  background: var(--ot-primary-light) !important;
}
.wppm-ot-shell #wppm_individual_edit_task_subject img {
  width: 13px;
  opacity: .75;
}

/* ---------- Property bar: status / priority / assignees / due, each directly editable ---------- */
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-props {
  gap: 8px;
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop {
  position: relative;
  display: inline-flex;
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  max-width: 260px;
  height: 30px;
  margin: 0;
  padding: 0 11px !important;
  border: 1px solid transparent;
  border-radius: 999px !important;
  font: 700 11px/1 var(--ot-font) !important;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow .12s ease, filter .12s ease, background-color .12s ease, border-color .12s ease;
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-btn:disabled {
  cursor: default;
  opacity: 1;
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-btn:not(:disabled):hover {
  filter: brightness(.97);
  box-shadow: 0 0 0 3px rgba(79,70,229,.10);
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ot-primary-light);
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-btn .dashicons {
  width: 13px;
  height: 13px;
  font-size: 13px;
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-btn.is-empty {
  border-color: var(--ot-border);
  background: var(--ot-surface);
  color: var(--ot-muted);
}
/* Small chevron on editable pills */
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-caret {
  width: 0;
  height: 0;
  margin-left: 1px;
  border-top: 4px solid currentColor;
  border-right: 3.5px solid transparent;
  border-left: 3.5px solid transparent;
  opacity: .55;
}
/* Assignees / due: neutral chips in sentence case */
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-soft {
  border-color: var(--ot-border);
  background: var(--ot-surface);
  color: var(--ot-ink);
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0;
  text-transform: none;
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-soft:not(:disabled):hover {
  border-color: #c7d2fe;
  background: var(--ot-primary-light);
  filter: none;
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-soft .dashicons {
  color: var(--ot-muted);
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-text em {
  color: var(--ot-muted);
  font-style: normal;
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-soft.is-overdue {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-soft.is-overdue .dashicons {
  color: #dc2626;
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-avatars {
  display: inline-flex;
  margin-left: -6px;
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-avatars img {
  display: block;
  width: 20px !important;
  height: 20px !important;
  margin: 0 0 0 -6px !important;
  border: 2px solid #fff;
  border-radius: 50%;
  object-fit: cover;
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-avatars img:first-child {
  margin-left: 0 !important;
}
/* Due date: the picker's (invisible) input; the calendar is positioned under the chip */
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-due-input {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}
/* Saving state */
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop.is-saving .wppm-ot-prop-btn {
  opacity: .6;
  cursor: wait;
}

/* Dropdown menu */
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 6px);
  left: 0;
  display: none;
  flex-direction: column;
  min-width: 190px;
  max-height: 280px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--ot-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 36px -12px rgba(16,24,40,.28), 0 2px 6px rgba(16,24,40,.06);
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop.is-open .wppm-ot-prop-menu {
  display: flex;
  animation: wppm-ot-menu-in .12s ease-out;
}
@keyframes wppm-ot-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop.is-open .wppm-ot-prop-menu { animation: none; }
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-menu-title {
  padding: 6px 8px 4px;
  color: var(--ot-muted);
  font: 600 10.5px/1.3 var(--ot-font);
  letter-spacing: .05em;
  text-transform: uppercase;
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ot-ink);
  font: 500 13px/1.3 var(--ot-font);
  text-align: left;
  cursor: pointer;
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-menu button:hover,
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-menu button:focus-visible {
  outline: none;
  background: var(--ot-bg);
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-menu button[aria-checked="true"] {
  background: var(--ot-primary-light);
  color: var(--ot-primary-dark);
  font-weight: 600;
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-menu button[aria-checked="true"]::after {
  content: "\f147"; /* dashicons-yes */
  margin-left: auto;
  font: normal 16px/1 dashicons;
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-menu-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(15,23,42,.08);
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-menu-dot.is-none {
  border: 1.5px dashed #cbd5e1;
  background: transparent;
  box-shadow: none;
}
@media (max-width: 600px) {
  :is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-title-actions {
    width: 100%;
  }
  :is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-quick-edit,
  .wppm-ot-shell #wppm_individual_edit_task_subject.wppm_action_btn {
    flex: 1 1 0;
    justify-content: center;
  }
}
.wppm-ot-shell .wppm-ot-title-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.wppm-ot-shell .wppm-ot-id {
  font-size: 12px;
  font-weight: 600;
  color: var(--ot-muted);
  font-variant-numeric: tabular-nums;
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-pill .dashicons {
  font-size: 12px;
  width: 12px;
  height: 12px;
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-pill-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.wppm-ot-shell .wppm-ot-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ot-soft);
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.wppm-ot-shell .wppm-ot-chip .dashicons {
  font-size: 13px;
  width: 13px;
  height: 13px;
}
.wppm-ot-shell .wppm_subtask_parent_link {
  margin-top: 10px;
  font: 12.5px var(--ot-font);
  color: var(--ot-muted);
}
.wppm-ot-shell .wppm_subtask_parent_link a {
  color: var(--ot-primary);
  font-weight: 600;
}
/* Detail rows: label / value */
.wppm-ot-shell .wppm-ot-details > .row {
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--ot-border);
}
.wppm-ot-shell .wppm-ot-details > .row:first-child {
  display: block;
  padding: 0 0 16px;
}
.wppm-ot-shell .wppm-ot-details > .row:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}
.wppm-ot-shell .wppm-ot-details > .row > [class*="col-"] {
  float: none;
  padding-left: 0;
}
.wppm-ot-shell .wppm-ot-details > .row > .col-sm-3 {
  flex: 0 0 150px;
  width: 150px;
}
.wppm-ot-shell .wppm-ot-details > .row > .col-sm-9 {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.wppm-ot-shell .wppm_task_details_label {
  float: none !important;
  width: auto !important;
  margin: 2px 0 !important;
  font: 600 11px/1.5 var(--ot-font) !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ot-muted) !important;
  cursor: default;
}
.wppm-ot-shell .wppm_task_details {
  font: 500 13.5px/1.5 var(--ot-font) !important;
  color: var(--ot-ink);
  border-bottom: 1px dashed #cbd5e1;
}
.wppm-ot-shell #wppm_edit_tstart_date,
.wppm-ot-shell #wppm_edit_tend_date {
  padding: 2px 8px;
  border: 1px dashed #cbd5e1;
  border-radius: 7px;
  font-variant-numeric: tabular-nums;
  transition: background-color .12s ease, border-color .12s ease;
}
.wppm-ot-shell #wppm_edit_tstart_date:hover,
.wppm-ot-shell #wppm_edit_tend_date:hover {
  background: var(--ot-primary-light);
  border-color: #a5b4fc;
}
.wppm-ot-shell .wppm_task_description {
  display: block;
  font: 13.5px/1.65 var(--ot-font) !important;
  color: var(--ot-ink);
}
.wppm-ot-shell .wppm_task_description p:first-child {
  margin-top: 0;
}
.wppm-ot-shell .wppm_task_description p:last-child {
  margin-bottom: 0;
}
.wppm-ot-shell .wppm_admin_label {
  display: inline-block;
  padding: 4px 11px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* ===================== Subtasks & checklists ===================== */
.wppm-ot-shell .wppm-ot-card > .row,
.wppm-ot-shell #wppm_checklist_container > .row {
  margin-left: 0;
  margin-right: 0;
}
.wppm-ot-shell .wppm-ot-card > .row > [class*="col-"],
.wppm-ot-shell #wppm_checklist_container > .row > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}
.wppm-ot-shell .wppm_checklist_label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 0 !important;
  font: 700 15px/1.3 var(--ot-font) !important;
  color: var(--ot-ink);
}
.wppm-ot-shell .wppm_checklist_label img {
  width: 18px;
  height: 18px;
  padding: 4px;
  box-sizing: content-box;
  border-radius: 7px;
  background: var(--ot-primary-light);
}
.wppm-ot-shell .wppm_progress_bar_container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 4px !important;
}
.wppm-ot-shell .wppm_progress_bar_container > .col-sm-4 {
  flex: 0 0 auto;
  width: auto;
  padding: 0;
}
.wppm-ot-shell .wppm_progress_bar_container > .wppm_progress_bar {
  flex: 1 1 auto;
  width: auto;
}
.wppm-ot-shell .wppm_progressbar_label {
  position: static;
  width: auto;
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  color: var(--ot-muted);
  font-variant-numeric: tabular-nums;
}
.wppm-ot-shell .wppm_progress_bar {
  height: 6px;
  margin: 0 !important;
  padding: 0;
  border-radius: 999px;
  background: #eef0f4;
}
.wppm-ot-shell .wppm_checkprogress {
  border-radius: 999px;
}
.wppm-ot-shell .wppm_checklist_items_container {
  margin: 12px 0 6px !important;
}
.wppm-ot-shell .wppm_checklist_items_container .wppm_checklist_item {
  margin: 0 0 6px !important;
  padding: 8px 10px;
  border: 1px solid var(--ot-border);
  border-radius: 9px;
  background: var(--ot-surface);
  transition: border-color .12s ease, background-color .12s ease;
}
.wppm-ot-shell .wppm_checklist_items_container .wppm_checklist_item:hover {
  border-color: #c7d2fe;
  background: #fafbff;
}
.wppm-ot-shell .wppm_checklist_item > [class*="col-"] {
  display: flex;
  align-items: center;
  gap: 4px;
  float: none;
  padding: 0;
}
.wppm-ot-shell .wppm_checklist_item > .col-sm-8 {
  flex: 1 1 auto;
  min-width: 0;
}
.wppm-ot-shell .wppm_checklist_item > .col-sm-4 {
  flex: 0 0 auto;
  width: auto;
  justify-content: flex-end;
  gap: 8px;
}
.wppm-ot-shell .wppm_checklist_item > .col-sm-4[style*="none"] {
  display: none !important;
}
.wppm-ot-shell .wppm_checklist_item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0 6px 0 0 !important;
  accent-color: var(--ot-primary);
  cursor: pointer;
}
.wppm-ot-shell .wppm_checklist_item label {
  margin: 0;
  padding: 0 !important;
  font: 13.5px/1.4 var(--ot-font) !important;
  color: var(--ot-ink);
}
.wppm-ot-shell .wppm_checklist_item input[type="checkbox"]:checked + label {
  color: var(--ot-muted);
  text-decoration: line-through;
}
.wppm-ot-shell .wppm_chk_items_drag {
  margin-right: 4px !important;
  color: #cbd5e1;
  font-size: 13px;
}
.wppm-ot-shell .wppm_checklist_item img {
  width: 14px;
  opacity: .6;
}
.wppm-ot-shell .wppm_checklist_item img:hover {
  opacity: 1;
}
.wppm-ot-shell .wppm_checklist_item .avatar {
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--ot-border);
}
/* "+ Add subtask" / "+ Add item" / "+ Add a checklist" */
.wppm-ot-shell .wppm_add_checklist,
.wppm-ot-shell #wppm_add_checklist {
  display: inline-flex;
  align-items: center;
  float: none;
  width: auto;
  margin: 0 !important;
  padding: 6px 12px;
  border: 1px dashed #c7d2fe !important;
  border-radius: 8px;
  color: var(--ot-primary) !important;
  font: 600 12.5px/1.2 var(--ot-font) !important;
  text-decoration: none !important;
  transition: background-color .12s ease;
}
.wppm-ot-shell .wppm_add_checklist:hover,
.wppm-ot-shell #wppm_add_checklist:hover {
  background: var(--ot-primary-light);
}
.wppm-ot-shell #wppm_add_checklist_container {
  margin-top: 14px;
}
.wppm-ot-shell .wppm_delete_checklist {
  margin: 0;
  border-bottom: none;
  font: 600 12px/1.2 var(--ot-font);
  color: var(--ot-danger) !important;
}
.wppm-ot-shell .wppm_delete_checklist:hover {
  color: #b91c1c !important;
  border-bottom: none !important;
  text-decoration: underline !important;
}
.wppm-ot-shell .wppm_edit_checklist {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0 14px 0 0;
  border-bottom: none;
  cursor: pointer;
  font: 600 12px/1.2 var(--ot-font);
  color: var(--ot-primary) !important;
  text-decoration: none;
}
.wppm-ot-shell .wppm_edit_checklist .dashicons {
  width: 14px;
  height: 14px;
  font-size: 14px;
}
.wppm-ot-shell .wppm_edit_checklist:hover,
.wppm-ot-shell .wppm_edit_checklist:focus-visible {
  border-bottom: none !important;
  text-decoration: underline !important;
  outline: none;
}
.wppm-ot-shell .wppm_checklist_divider {
  margin: 14px 0;
  border: none;
  border-top: 1px solid var(--ot-border);
}
.wppm-ot-shell .wppm-ot-card input[type="text"],
.wppm-ot-shell .wppm-ot-card textarea,
.wppm-ot-shell .wppm-ot-card select.form-control {
  border: 1px solid var(--ot-border) !important;
  border-radius: 8px !important;
  box-shadow: none;
  font-family: var(--ot-font) !important;
  font-size: 13px !important;
}
.wppm-ot-shell .wppm-ot-card input[type="text"],
.wppm-ot-shell .wppm-ot-card select.form-control {
  min-height: 36px;
}
.wppm-ot-shell .wppm-ot-card input[type="text"]:focus,
.wppm-ot-shell .wppm-ot-card textarea:focus,
.wppm-ot-shell .wppm-ot-card select.form-control:focus {
  outline: none;
  border-color: var(--ot-primary) !important;
  box-shadow: 0 0 0 3px var(--ot-primary-light);
}
.wppm-ot-shell .wppm-ot-card .btn-success {
  border-radius: 8px;
  font-weight: 600;
}

/* ===================== Subtasks & checklists: polished look =====================
   CSS only: markup, ids and the JS that checks / adds / deletes / reorders items
   are unchanged. Inline colors the JS writes on the progress fill are overridden. */

/* Section titles: tinted icon tile (indigo = subtasks, green = checklists) */
.wppm-ot-shell #wppm_task_subtask_container .wppm_checklist_label img,
.wppm-ot-shell #wppm_checklist_container .wppm_checklist_label img {
  width: 16px;
  height: 16px;
  padding: 7px;
  border-radius: 9px;
}
.wppm-ot-shell #wppm_checklist_container .wppm_checklist_label img {
  background: #ecfdf5;
}
.wppm-ot-shell #wppm_task_subtask_container > .row:first-child,
.wppm-ot-shell #wppm_checklist_container > .row {
  display: flex;
  align-items: center;
}
.wppm-ot-shell #wppm_checklist_container > .row > .col-sm-8 {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}
.wppm-ot-shell #wppm_checklist_container > .row > .col-sm-4 {
  flex: 0 0 auto;
  width: auto;
}

/* Progress: thicker rounded track, gradient fill, count/percent as a pill */
.wppm-ot-shell .wppm-ot-card .wppm_progress_bar {
  height: 8px;
  overflow: hidden;
  background: #eef0f4;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.06);
}
.wppm-ot-shell .wppm-ot-card .wppm_checkprogress {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6) !important;
  transition: width .35s ease;
}
.wppm-ot-shell #wppm_checklist_container .wppm_checkprogress {
  background: linear-gradient(90deg, #10b981, #14b8a6) !important;
}
.wppm-ot-shell .wppm-ot-card .wppm_checkprogress[style*="width: 100%"],
.wppm-ot-shell .wppm-ot-card .wppm_checkprogress[style*="width:100%"] {
  background: linear-gradient(90deg, #10b981, #059669) !important;
}
.wppm-ot-shell .wppm-ot-card .wppm_progressbar_label {
  display: inline-flex;
  align-items: center;
  min-width: 38px;
  height: 22px;
  justify-content: center;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--ot-soft);
  color: #475569;
  font-size: 11px;
}

/* Item rows */
.wppm-ot-shell .wppm_checklist_items_container .wppm_checklist_item {
  min-height: 44px;
  padding: 8px 10px 8px 12px;
  border-radius: 10px;
  transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.wppm-ot-shell .wppm_checklist_items_container .wppm_checklist_item:hover {
  box-shadow: 0 4px 12px -6px rgba(79,70,229,.25);
}
.wppm-ot-shell .wppm_checklist_items_container .wppm_checklist_item:has(input[type="checkbox"]:checked) {
  background: var(--ot-bg);
}

/* Round-cornered custom checkbox with a white tick */
.wppm-ot-shell .wppm_checklist_item input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  position: relative;
  width: 18px;
  height: 18px;
  margin: 0 8px 0 0 !important;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.wppm-ot-shell .wppm_checklist_item input[type="checkbox"]::before {
  content: none !important; /* WP admin's own tick */
}
.wppm-ot-shell .wppm_checklist_item input[type="checkbox"]:hover:not(:disabled) {
  border-color: var(--ot-primary);
}
.wppm-ot-shell .wppm_checklist_item input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ot-primary-light);
}
.wppm-ot-shell .wppm_checklist_item input[type="checkbox"]:checked {
  border-color: transparent;
  background: var(--ot-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
}
.wppm-ot-shell #wppm_checklist_container .wppm_checklist_item input[type="checkbox"]:checked {
  background-color: #10b981;
}
.wppm-ot-shell .wppm_checklist_item input[type="checkbox"]:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.wppm-ot-shell .wppm_checklist_item label {
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .15s ease;
}
.wppm-ot-shell #wppm_subtask_items_container .wppm_checklist_item label:hover {
  color: var(--ot-primary);
}

/* Drag handle: faint until the row is hovered */
.wppm-ot-shell .wppm_chk_items_drag {
  cursor: grab;
  opacity: .5;
  transition: opacity .12s ease, color .12s ease;
}
.wppm-ot-shell .wppm_checklist_item:hover .wppm_chk_items_drag {
  opacity: 1;
  color: #94a3b8;
}

/* Row actions: square icon buttons (edit / delete) */
.wppm-ot-shell .wppm_checklist_item > .col-sm-4 > span[onclick] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  cursor: pointer;
  transition: background-color .12s ease;
}
.wppm-ot-shell .wppm_checklist_item > .col-sm-4 > span[onclick]:hover {
  background: var(--ot-soft);
}
.wppm-ot-shell .wppm_checklist_item > .col-sm-4 > span[onclick*="delete"]:hover {
  background: var(--ot-danger-light);
}
.wppm-ot-shell .wppm_checklist_item > .col-sm-4 > span[onclick] img {
  width: 13px;
}

/* Subtask assignees: overlapping avatar stack + "+N" bubble */
.wppm-ot-shell #wppm_subtask_items_container .wppm_checklist_item > .col-sm-4 {
  gap: 0;
}
.wppm-ot-shell #wppm_subtask_items_container .wppm_checklist_item .avatar {
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--ot-border);
}
.wppm-ot-shell #wppm_subtask_items_container .wppm_checklist_item .avatar + .avatar,
.wppm-ot-shell #wppm_subtask_items_container .wppm_checklist_item .avatar + .wppm_subtask_more_users {
  margin-left: -7px !important;
}
.wppm-ot-shell #wppm_subtask_items_container .wppm_subtask_more_users {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--ot-primary-light);
  color: var(--ot-primary-dark);
  font: 700 10px/1 var(--ot-font);
  box-shadow: 0 0 0 1px #c7d2fe;
}
/* "Convert to Task": small ghost pill */
.wppm-ot-shell #wppm_subtask_items_container .wppm_checklist_item a[onclick*="convert"] {
  display: inline-flex;
  align-items: center;
  height: 24px;
  margin: 0 4px 0 10px !important;
  padding: 0 9px;
  border: 1px solid var(--ot-border);
  border-radius: 999px;
  color: #475569 !important;
  font: 600 11px/1 var(--ot-font) !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.wppm-ot-shell #wppm_subtask_items_container .wppm_checklist_item a[onclick*="convert"]:hover {
  border-color: #c7d2fe;
  background: var(--ot-primary-light);
  color: var(--ot-primary) !important;
}
/* On mouse devices the row actions fade in on hover */
@media (hover: hover) {
  .wppm-ot-shell #wppm_subtask_items_container .wppm_checklist_item a[onclick*="convert"],
  .wppm-ot-shell #wppm_subtask_items_container .wppm_checklist_item span[onclick*="delete"] {
    opacity: 0;
    transition: opacity .12s ease, background-color .12s ease;
  }
  .wppm-ot-shell #wppm_subtask_items_container .wppm_checklist_item:hover a[onclick*="convert"],
  .wppm-ot-shell #wppm_subtask_items_container .wppm_checklist_item:hover span[onclick*="delete"],
  .wppm-ot-shell #wppm_subtask_items_container .wppm_checklist_item:focus-within a[onclick*="convert"],
  .wppm-ot-shell #wppm_subtask_items_container .wppm_checklist_item:focus-within span[onclick*="delete"] {
    opacity: 1;
  }
}

/* "Delete Checklist": quiet pill, red on hover */
.wppm-ot-shell .wppm_delete_checklist {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .12s ease;
}
.wppm-ot-shell .wppm_delete_checklist:hover {
  background: var(--ot-danger-light);
  text-decoration: none !important;
}

/* Inline "add item" / "add checklist" rows: input + Add + cancel in one line */
.wppm-ot-shell [id^="wppm_add_new_checklist_item_"] > .col-sm-12,
.wppm-ot-shell #wppm_add_new_checklist > .col-sm-12 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
}
.wppm-ot-shell [id^="wppm_add_new_checklist_item_"] input[type="text"],
.wppm-ot-shell #wppm_add_new_checklist input#wppm_checklist_label {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  margin: 0 !important;
  padding: 0 12px !important;
  border-radius: 9px !important;
  background: #fff;
  color: var(--ot-ink);
  font: 400 13.5px/1 var(--ot-font) !important;
}
.wppm-ot-shell [id^="wppm_add_new_checklist_item_"] .btn-success,
.wppm-ot-shell #wppm_add_new_checklist .btn-success {
  flex: none;
  height: 38px;
  margin: 0 !important;
  padding: 0 16px;
  border: none;
  border-radius: 9px;
  background: var(--ot-primary);
  font: 600 13px/1 var(--ot-font);
}
.wppm-ot-shell [id^="wppm_add_new_checklist_item_"] .btn-success:hover,
.wppm-ot-shell #wppm_add_new_checklist .btn-success:hover {
  background: var(--ot-primary-dark);
}
.wppm-ot-shell [id^="wppm_add_new_checklist_item_"] span[onclick],
.wppm-ot-shell #wppm_add_new_checklist span[onclick] {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
}
.wppm-ot-shell [id^="wppm_add_new_checklist_item_"] span[onclick]:hover,
.wppm-ot-shell #wppm_add_new_checklist span[onclick]:hover {
  background: var(--ot-soft);
}
.wppm-ot-shell [id^="wppm_add_new_checklist_item_"] span[onclick] img,
.wppm-ot-shell #wppm_add_new_checklist span[onclick] img {
  width: 12px;
}
.wppm-ot-shell #wppm_add_new_checklist {
  margin: 12px 0 0;
}

/* "+ Add subtask" form: soft panel, small uppercase labels */
.wppm-ot-shell #wppm_add_subtask_label_container:not([style*="none"]) {
  margin-top: 4px;
  padding: 16px 16px 14px !important;
  border: 1px solid var(--ot-border);
  border-radius: 12px;
  background: var(--ot-bg);
}
.wppm-ot-shell #wppm_add_subtask_label_container .row {
  margin-left: -6px;
  margin-right: -6px;
}
.wppm-ot-shell #wppm_add_subtask_label_container .row > [class*="col-"] {
  padding-left: 6px;
  padding-right: 6px;
}
.wppm-ot-shell #wppm_add_subtask_label_container .wppm_task_frm_fields {
  margin-bottom: 12px;
}
.wppm-ot-shell #wppm_add_subtask_label_container .wppm_form_field_label {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--ot-muted);
  font: 600 11px/1.4 var(--ot-font);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.wppm-ot-shell #wppm_add_subtask_label_container .wppm_form_field_label b {
  font-weight: 600;
}
.wppm-ot-shell #wppm_add_subtask_label_container .wppm_task_frm_fields br {
  display: none;
}
.wppm-ot-shell #wppm_add_subtask_label_container .form-control {
  background-color: #fff;
}
.wppm-ot-shell #wppm_add_subtask_label_container .btn-success {
  height: 36px;
  padding: 0 18px;
  border: none;
  background: var(--ot-primary);
}
.wppm-ot-shell #wppm_add_subtask_label_container .btn-success:hover {
  background: var(--ot-primary-dark);
}
.wppm-ot-shell #wppm_add_subtask_label_container .wppm_reset_btn {
  height: 36px;
  margin-left: 6px;
  padding: 0 16px;
  border: 1px solid var(--ot-border);
  border-radius: 8px;
  background: #fff;
  color: var(--ot-ink);
  font: 600 13px/1 var(--ot-font);
  cursor: pointer;
}
.wppm-ot-shell #wppm_add_subtask_label_container .wppm_reset_btn:hover {
  background: var(--ot-soft);
}
/* Picked assignees as pills */
.wppm-ot-shell .wppm_subtask_filter_display_users_container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}
.wppm-ot-shell .wppm_subtask_filter_display_users_container:empty {
  display: none;
}
.wppm-ot-shell .wppm_subtask_filter_display_users_container .flex-container {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 28px;
  margin: 0;
  padding: 0 4px 0 12px;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  background: var(--ot-primary-light);
  color: var(--ot-primary-dark);
  font: 600 12px/1 var(--ot-font);
}
.wppm-ot-shell .wppm_subtask_filter_display_users_container .wppm_filter_display_text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wppm-ot-shell .wppm_subtask_filter_display_users_container .wppm_filter_display_remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
}
.wppm-ot-shell .wppm_subtask_filter_display_users_container .wppm_filter_display_remove:hover {
  background: #fff;
}
.wppm-ot-shell .wppm_subtask_filter_display_users_container .wppm_filter_display_remove img {
  width: 9px;
}
/* Assignee suggestions (appended next to the input) */
.wppm-ot-shell #wppm_add_subtask_label_container .ui-autocomplete {
  max-height: 220px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--ot-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 16px 36px -12px rgba(16,24,40,.28);
}
.wppm-ot-shell #wppm_add_subtask_label_container .ui-autocomplete .ui-menu-item-wrapper {
  padding: 7px 10px;
  border: none !important;
  border-radius: 7px;
}
.wppm-ot-shell #wppm_add_subtask_label_container .ui-autocomplete .ui-state-active {
  margin: 0;
  background: var(--ot-primary-light) !important;
  color: var(--ot-primary-dark) !important;
}

/* ===================== Comment box ===================== */
.wppm-ot-shell .wppm_task_discussion {
  font: 700 15px/1.3 var(--ot-font) !important;
  color: var(--ot-ink);
}
.wppm-ot-shell #wppm_task_comment {
  display: block;
  width: 100% !important;
  min-height: 46px;
  margin: 10px 0 0 !important;
  padding: 11px 13px !important;
  border: 1px solid var(--ot-border) !important;
  border-radius: 10px !important;
  background: var(--ot-bg);
  color: var(--ot-ink) !important;
  font: 13.5px/1.5 var(--ot-font) !important;
  resize: vertical;
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.wppm-ot-shell #wppm_task_comment:focus {
  outline: none;
  background: var(--ot-surface);
  border-color: var(--ot-primary) !important;
  box-shadow: 0 0 0 3px var(--ot-primary-light);
}
.wppm-ot-shell #wppm_comment_btn {
  margin: 0;
  padding: 12px 0 0;
}
.wppm-ot-shell #wppm_attach_file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--ot-border);
  border-radius: 8px;
  color: var(--ot-ink) !important;
  font: 600 12.5px/1.2 var(--ot-font) !important;
  text-decoration: none !important;
}
.wppm-ot-shell #wppm_attach_file::before {
  content: "\f546";
  font: normal 15px/1 dashicons;
  color: var(--ot-muted);
}
.wppm-ot-shell #wppm_attach_file:hover {
  background: var(--ot-bg);
}
.wppm-ot-shell .wppm-btn,
.wppm-ot-shell .wppm-btn-cancel {
  margin: 0 0 0 8px !important;
  padding: 8px 18px !important;
  border-radius: 9px !important;
  font: 700 12.5px/1.2 var(--ot-font) !important;
  letter-spacing: .02em;
  cursor: pointer;
}
.wppm-ot-shell .wppm-btn-cancel {
  border: 1px solid var(--ot-border) !important;
  background: var(--ot-surface) !important;
  color: var(--ot-ink) !important;
}
.wppm-ot-shell .wppm-btn-cancel:hover {
  background: var(--ot-soft) !important;
}
.wppm-ot-shell .wppm_attachment_container {
  margin-top: 8px;
}

/* ---------- Comment attachments: upload progress cards ----------
   Task comment box (.wppm-ot-shell .wppm_attachment_container) and project comment
   box (.wppm-op-shell .wppm_proj_attachment_container; this file also loads there).
   Markup comes from wppm_upload_file(): .wppm_attachment > .progress >
   .progress-bar (file name, width = % uploaded) + .wppm_attachment_cancel.
   CSS only: the bar becomes a tinted fill behind a file card, with the name always
   readable on top and a solid accent line along the bottom showing the progress. */
.wppm-ot-shell .wppm_attachment_container:not([style*="none"]),
.wppm-op-shell .wppm_proj_attachment_container:not([style*="none"]) {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.wppm-ot-shell .wppm_attachment_container .wppm_attachment,
.wppm-op-shell .wppm_proj_attachment_container .wppm_attachment {
  flex: 0 1 260px;
  min-width: 0;
  max-width: 100%;
}
.wppm-ot-shell .wppm_attachment_container .progress,
.wppm-op-shell .wppm_proj_attachment_container .progress {
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;
  margin: 0;
  padding: 0 6px 0 42px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,.05);
}
/* File icon tile */
.wppm-ot-shell .wppm_attachment_container .progress::before,
.wppm-op-shell .wppm_proj_attachment_container .progress::before {
  content: "\f498"; /* dashicons-media-default */
  position: absolute;
  z-index: 2;
  left: 8px;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #eef2ff;
  color: #4f46e5;
  font: normal 15px/1 dashicons;
  transform: translateY(-50%);
}
/* The bar: a soft fill growing behind the card, accent line at the bottom,
   file name drawn on top (overflow visible so it shows from 0%). */
.wppm-ot-shell .wppm_attachment_container .progress-bar,
.wppm-op-shell .wppm_proj_attachment_container .progress-bar {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  float: none;
  height: auto;
  min-width: 0;
  padding: 0;
  text-indent: 42px; /* not padding: the fill must be able to start at 0% */
  overflow: visible;
  background: linear-gradient(90deg, rgba(99,102,241,.10), rgba(139,92,246,.16)) !important;
  box-shadow: inset 0 -3px 0 #6366f1;
  color: #111827;
  font: 600 12.5px/42px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-align: left;
  white-space: nowrap;
  transition: width .3s ease, background-color .2s ease;
}
/* Still uploading: gentle shimmer on the fill */
.wppm-ot-shell .wppm_attachment_container .progress-bar:not(.progress-bar-success):not(.progress-bar-danger),
.wppm-op-shell .wppm_proj_attachment_container .progress-bar:not(.progress-bar-success):not(.progress-bar-danger) {
  background-image: linear-gradient(90deg, rgba(99,102,241,.08) 0%, rgba(139,92,246,.22) 50%, rgba(99,102,241,.08) 100%) !important;
  background-size: 200% 100% !important;
  animation: wppm-upload-shimmer 1.4s linear infinite;
}
@keyframes wppm-upload-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wppm-ot-shell .wppm_attachment_container .progress-bar,
  .wppm-op-shell .wppm_proj_attachment_container .progress-bar {
    animation: none !important;
  }
}
/* Done */
.wppm-ot-shell .wppm_attachment_container .progress-bar.progress-bar-success,
.wppm-op-shell .wppm_proj_attachment_container .progress-bar.progress-bar-success {
  background: rgba(16,185,129,.08) !important;
  box-shadow: inset 0 -3px 0 #10b981;
}
.wppm-ot-shell .wppm_attachment_container .progress:has(.progress-bar-success)::before,
.wppm-op-shell .wppm_proj_attachment_container .progress:has(.progress-bar-success)::before {
  content: "\f147"; /* dashicons-yes */
  background: #ecfdf5;
  color: #059669;
  font-size: 18px;
}
/* Failed */
.wppm-ot-shell .wppm_attachment_container .progress-bar.progress-bar-danger,
.wppm-op-shell .wppm_proj_attachment_container .progress-bar.progress-bar-danger {
  background: rgba(239,68,68,.08) !important;
  box-shadow: inset 0 -3px 0 #ef4444;
  color: #b91c1c;
}
.wppm-ot-shell .wppm_attachment_container .progress:has(.progress-bar-danger),
.wppm-op-shell .wppm_proj_attachment_container .progress:has(.progress-bar-danger) {
  border-color: #fecaca;
}
.wppm-ot-shell .wppm_attachment_container .progress:has(.progress-bar-danger)::before,
.wppm-op-shell .wppm_proj_attachment_container .progress:has(.progress-bar-danger)::before {
  content: "\f534"; /* dashicons-warning */
  background: #fef2f2;
  color: #dc2626;
}
/* Remove button, pinned to the right edge of the card */
.wppm-ot-shell .wppm_attachment_container .wppm_attachment_cancel,
.wppm-op-shell .wppm_proj_attachment_container .wppm_attachment_cancel {
  position: absolute;
  z-index: 3;
  right: 6px;
  top: 50%;
  float: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  border-radius: 7px;
  background: rgba(255,255,255,.9);
  transform: translateY(-50%);
  transition: background-color .12s ease;
}
.wppm-ot-shell .wppm_attachment_container .wppm_attachment_cancel:not([style*="none"]),
.wppm-op-shell .wppm_proj_attachment_container .wppm_attachment_cancel:not([style*="none"]) {
  display: inline-flex !important;
}
.wppm-ot-shell .wppm_attachment_container .wppm_attachment_cancel:hover,
.wppm-op-shell .wppm_proj_attachment_container .wppm_attachment_cancel:hover {
  background: #fee2e2;
}
.wppm-ot-shell .wppm_attachment_container .wppm_attachment_cancel img,
.wppm-op-shell .wppm_proj_attachment_container .wppm_attachment_cancel img {
  width: 10px;
  height: 10px;
}

/* ===================== Activity / comment thread ===================== */
.wppm-ot-shell .wppm-ot-thread-list {
  position: relative;
}
.wppm-ot-shell .wppm_thread {
  display: flex;
  gap: 12px;
  width: 100%;
  margin: 0 0 12px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--ot-border) !important;
  border-radius: var(--ot-radius-sm);
  background: var(--ot-surface);
  transition: box-shadow .12s ease;
}
.wppm-ot-shell .wppm_thread:hover {
  box-shadow: var(--ot-shadow);
}
.wppm-ot-shell .wppm_thread_avatar {
  display: block;
  flex: 0 0 auto;
  width: auto;
  padding: 0;
}
.wppm-ot-shell .wppm_thread_avatar img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--ot-surface), 0 0 0 3px var(--ot-border);
}
.wppm-ot-shell .wppm_thread_body {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}
.wppm-ot-shell .wppm_thread_user_name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-bottom: 6px !important;
  font: 13px/1.4 var(--ot-font) !important;
  color: var(--ot-muted);
}
.wppm-ot-shell .wppm_thread_user_name strong {
  font-weight: 700;
}
.wppm-ot-shell .wppm_comment_date {
  font-size: 11.5px !important;
}
.wppm-ot-shell .wppm_thread_action {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
  float: none;
  opacity: 0;
  transition: opacity .12s ease;
}
.wppm-ot-shell .wppm_thread:hover .wppm_thread_action,
.wppm-ot-shell .wppm_thread:focus-within .wppm_thread_action {
  opacity: 1;
}
.wppm-ot-shell .wppm_thread_action > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
}
.wppm-ot-shell .wppm_thread_action > span:hover {
  background: var(--ot-soft);
}
.wppm-ot-shell .wppm_thread_action img {
  width: 13px;
  opacity: .65;
}
.wppm-ot-shell .wppm_thread_messege {
  font: 13.5px/1.6 var(--ot-font) !important;
  word-break: break-word;
}
.wppm-ot-shell .wppm_thread_messege p {
  margin: 0 0 6px;
}
.wppm-ot-shell .wppm_thread_messege p:last-child {
  margin-bottom: 0;
}
.wppm-ot-shell .wppm_attachment_title {
  font: 600 12px/1.4 var(--ot-font) !important;
  color: var(--ot-muted);
}
.wppm-ot-shell .wppm_attachment_tbl {
  margin-top: 6px;
  border-collapse: separate;
  border-spacing: 0 4px;
}
.wppm-ot-shell .wppm_attachment_tr td {
  padding: 4px 8px !important;
  border-radius: 7px;
  background: var(--ot-bg);
}
.wppm-ot-shell .wppm_attachment_link {
  color: var(--ot-primary);
  font-size: 12.5px;
  font-weight: 600;
}
/* System activity (status / priority / creator / assignee changes): compact timeline row */
.wppm-ot-shell .wppm_thread.is-log {
  align-items: center;
  gap: 10px;
  margin: 0 0 6px 18px !important;
  padding: 6px 4px 6px 14px !important;
  border: none !important;
  border-left: 2px solid var(--ot-border) !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.wppm-ot-shell .wppm_thread.is-log:hover {
  box-shadow: none;
}
.wppm-ot-shell .wppm_thread.is-log .wppm_thread_avatar img {
  width: 22px;
  height: 22px;
  box-shadow: none;
}
.wppm-ot-shell .wppm_thread.is-log .wppm_thread_body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}
.wppm-ot-shell .wppm_thread.is-log .wppm_thread_user_name {
  margin: 0 !important;
  font-size: 12.5px !important;
}
.wppm-ot-shell .wppm_thread.is-log .wppm_thread_messege {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12.5px !important;
}
.wppm-ot-shell .wppm_thread.is-log .wppm_thread_messege img {
  width: 12px;
  opacity: .5;
}
.wppm-ot-shell .wppm_thread.is-log .wppm_admin_label {
  padding: 2px 8px !important;
  font-size: 9.5px !important;
}

/* ---------- Activity logs: colored timeline (task + project) ----------
   Task rows: .wppm-ot-shell .wppm_thread.is-log; project rows:
   .wppm-op-shell .wppm_proj_thread.is-log (this file also loads on the project page).
   A .wppm-log-<comment_type> class picks each node's icon and color.
   Consecutive log rows share one unbroken line. */
.wppm-ot-shell .wppm_thread.is-log,
.wppm-op-shell .wppm_proj_thread.is-log {
  --log-c: #6366f1;
  --log-bg: #eef2ff;
  --log-icon: "\f469"; /* dashicons-clock */
  position: relative;
  align-items: center;
  min-height: 40px;
  margin: 0 0 0 20px !important;
  padding: 7px 10px 7px 24px !important;
  border-left: 2px solid #e5e7eb !important;
  border-radius: 0 10px 10px 0 !important;
  transition: background-color .12s ease;
}
.wppm-ot-shell .wppm_thread.is-log:hover,
.wppm-op-shell .wppm_proj_thread.is-log:hover {
  background: #f8fafc !important;
}
/* Space before / after a run of log rows, so the line doesn't touch comment cards */
.wppm-ot-shell .wppm_thread:not(.is-log) + .wppm_thread.is-log,
.wppm-op-shell .wppm_proj_thread:not(.is-log) + .wppm_proj_thread.is-log {
  margin-top: 6px !important;
}
.wppm-ot-shell .wppm_thread.is-log + .wppm_thread:not(.is-log),
.wppm-op-shell .wppm_proj_thread.is-log + .wppm_proj_thread:not(.is-log) {
  margin-top: 12px !important;
}
/* Node on the line */
.wppm-ot-shell .wppm_thread.is-log::before,
.wppm-op-shell .wppm_proj_thread.is-log::before {
  content: var(--log-icon);
  position: absolute;
  left: -13px;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--log-bg);
  color: var(--log-c);
  box-shadow: 0 0 0 3px #fff;
  font: normal 13px/1 dashicons;
  transform: translateY(-50%);
}
/* Per-type node */
.wppm-ot-shell .wppm_thread.wppm-log-change_task_status,
.wppm-op-shell .wppm_proj_thread.wppm-log-change_proj_status {
  --log-c: #4f46e5;
  --log-bg: #eef2ff;
  --log-icon: "\f503"; /* dashicons-randomize */
}
.wppm-ot-shell .wppm_thread.wppm-log-change_task_priority {
  --log-c: #ea580c;
  --log-bg: #fff7ed;
  --log-icon: "\f227"; /* dashicons-flag */
}
.wppm-ot-shell .wppm_thread.wppm-log-change_task_creator,
.wppm-op-shell .wppm_proj_thread.wppm-log-change_proj_creator {
  --log-c: #9333ea;
  --log-bg: #faf5ff;
  --log-icon: "\f110"; /* dashicons-admin-users */
}
.wppm-ot-shell .wppm_thread.wppm-log-change_assign_user,
.wppm-op-shell .wppm_proj_thread.wppm-log-change_assign_user {
  --log-c: #0284c7;
  --log-bg: #f0f9ff;
  --log-icon: "\f307"; /* dashicons-groups */
}
.wppm-op-shell .wppm_proj_thread.wppm-log-change_proj_cat {
  --log-c: #0d9488;
  --log-bg: #f0fdfa;
  --log-icon: "\f318"; /* dashicons-category */
}
.wppm-ot-shell .wppm_thread.wppm-log-delete_task_comment,
.wppm-op-shell .wppm_proj_thread.wppm-log-delete_proj_comment {
  --log-c: #dc2626;
  --log-bg: #fef2f2;
  --log-icon: "\f182"; /* dashicons-trash */
}
/* Row content: small avatar, name + action, change chips, date pushed right */
.wppm-ot-shell .wppm_thread.is-log .wppm_thread_avatar img,
.wppm-op-shell .wppm_proj_thread.is-log .wppm_thread_avatar img {
  display: block;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50%;
  box-shadow: none;
}
.wppm-ot-shell .wppm_thread.is-log .wppm_thread_body,
.wppm-op-shell .wppm_proj_thread.is-log .wppm_thread_body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
}
.wppm-ot-shell .wppm_thread.is-log .wppm_thread_user_name,
.wppm-op-shell .wppm_proj_thread.is-log .wppm_thread_user_name {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  margin: 0 !important;
  color: #475569;
  font-size: 12.5px !important;
}
.wppm-ot-shell .wppm_thread.is-log .wppm_thread_user_name strong,
.wppm-op-shell .wppm_proj_thread.is-log .wppm_thread_user_name strong {
  font-weight: 700;
}
.wppm-ot-shell .wppm_thread.is-log .wppm_comment_date,
.wppm-op-shell .wppm_proj_thread.is-log .wppm_comment_date {
  order: 9;
  margin-left: auto;
  font-size: 11px !important;
  white-space: nowrap;
}
.wppm-ot-shell .wppm_thread.is-log .wppm_comment_date i,
.wppm-op-shell .wppm_proj_thread.is-log .wppm_comment_date i {
  font-style: normal;
}
.wppm-ot-shell .wppm_thread.is-log .wppm_thread_action:empty,
.wppm-op-shell .wppm_proj_thread.is-log .wppm_thread_action:empty {
  display: none;
}
/* "Old → New" as chips */
.wppm-ot-shell .wppm_thread.is-log .wppm_thread_messege,
.wppm-op-shell .wppm_proj_thread.is-log .wppm_thread_messege {
  gap: 6px;
}
.wppm-ot-shell .wppm_thread.is-log .wppm_thread_messege > span,
.wppm-op-shell .wppm_proj_thread.is-log .wppm_thread_messege > span {
  margin: 0 !important;
}
.wppm-ot-shell .wppm_thread.is-log .wppm_thread_messege > span:not(.wppm_admin_label),
.wppm-op-shell .wppm_proj_thread.is-log .wppm_thread_messege > span:not(.wppm_admin_label) {
  display: inline-flex;
  align-items: center;
  max-width: 220px;
  height: 22px;
  padding: 0 9px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Assignee changes list many names: let those chips grow and wrap instead of
   cutting the list off at 220px with an ellipsis. */
.wppm-ot-shell .wppm_thread.is-log.wppm-log-change_assign_user .wppm_thread_messege,
.wppm-op-shell .wppm_proj_thread.is-log.wppm-log-change_assign_user .wppm_thread_messege {
  flex-wrap: wrap;
}
.wppm-ot-shell .wppm_thread.is-log.wppm-log-change_assign_user .wppm_thread_messege > span:not(.wppm_admin_label),
.wppm-op-shell .wppm_proj_thread.is-log.wppm-log-change_assign_user .wppm_thread_messege > span:not(.wppm_admin_label) {
  max-width: 100%;
  height: auto;
  min-height: 22px;
  padding: 3px 10px;
  overflow: visible;
  border-radius: 12px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* The "old" side reads as past */
.wppm-ot-shell .wppm_thread.is-log .wppm_thread_messege > span:first-child,
.wppm-op-shell .wppm_proj_thread.is-log .wppm_thread_messege > span:first-child {
  opacity: .7;
}
.wppm-ot-shell .wppm_thread.is-log .wppm_thread_messege .wppm_admin_label,
.wppm-op-shell .wppm_proj_thread.is-log .wppm_thread_messege .wppm_admin_label {
  display: inline-flex;
  align-items: center;
  height: 20px;
  border-radius: 999px !important;
}
.wppm-ot-shell .wppm_thread.is-log .wppm_thread_messege img,
.wppm-op-shell .wppm_proj_thread.is-log .wppm_thread_messege img {
  width: 11px;
  opacity: .45;
}
/* Deleted-comment notice: plain muted italic line */
.wppm-ot-shell .wppm_thread.wppm-log-delete_task_comment .wppm_thread_messege,
.wppm-op-shell .wppm_proj_thread.wppm-log-delete_proj_comment .wppm_thread_messege {
  color: #94a3b8 !important;
  font-style: italic;
}
.wppm-ot-shell .wppm_thread.wppm-log-delete_task_comment .wppm_thread_messege p,
.wppm-op-shell .wppm_proj_thread.wppm-log-delete_proj_comment .wppm_thread_messege p {
  margin: 0;
}
@media (max-width: 600px) {
  .wppm-ot-shell .wppm_thread.is-log .wppm_comment_date,
  .wppm-op-shell .wppm_proj_thread.is-log .wppm_comment_date {
    margin-left: 0;
    flex-basis: 100%;
  }
}

/* ===================== Sidebar widgets ===================== */
.wppm-ot-shell .wppm-ot-sidebar > .wppm_widget {
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: 1px solid var(--ot-border) !important;
  border-radius: var(--ot-radius-sm) !important;
  box-shadow: var(--ot-shadow);
  overflow: hidden;
}
.wppm-ot-shell .wppm-ot-sidebar .wppm-widget-header {
  padding: 12px 14px !important;
}
.wppm-ot-shell .wppm-ot-sidebar .widget_header {
  margin: 0 !important;
  font: 700 11px/1.3 var(--ot-font) !important;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.wppm-ot-shell .wppm-ot-sidebar .wppm_edit_task_details_widget {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: 0 !important;
  border-radius: 6px;
  float: none !important;
}
.wppm-ot-shell .wppm-ot-sidebar .wppm_edit_task_details_widget:hover {
  background: rgba(0,0,0,.06);
}
.wppm-ot-shell .wppm-ot-sidebar .wppm_edit_task_details_widget img {
  width: 12px;
  opacity: .8;
}
.wppm-ot-shell .wppm-ot-sidebar .widget_divider {
  margin: 0 !important;
  border: none;
  border-top: 1px solid var(--ot-border);
}
.wppm-ot-shell .wppm-ot-sidebar .wppm-widget-body {
  display: block;
  padding: 12px 14px 14px !important;
}
.wppm-ot-shell .wppm-ot-sidebar .wppm_sidebar_labels {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  font-size: 12.5px !important;
}
.wppm-ot-shell .wppm-ot-sidebar .wppm_label_info {
  margin: 0;
  font-size: 12.5px !important;
  font-weight: 600;
}
.wppm-ot-shell .wppm-ot-sidebar #wppm_task_users,
.wppm-ot-shell .wppm-ot-sidebar .wppm-widget-body {
  margin-left: 0;
  margin-bottom: 0;
}
.wppm-ot-shell .wppm-ot-sidebar #wppm_task_users {
  display: block !important;
  padding: 0 !important;
}
/* One user per row: the creator widget's row, and each row inside the Users list. */
.wppm-ot-shell #wppm_raisedby_widget .wppm-widget-body > div,
.wppm-ot-shell .wppm-ot-sidebar #wppm_task_users > div {
  display: flex !important;
  align-items: center;
  gap: 9px;
  padding: 4px 0 !important;
}
.wppm-ot-shell .wppm-ot-sidebar .wppm_task_user_avatar {
  padding: 0 !important;
  line-height: 0;
}
.wppm-ot-shell .wppm-ot-sidebar .wppm_task_user_avatar img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--ot-border);
}
.wppm-ot-shell .wppm-ot-sidebar .wppm_task_user_names {
  padding: 0 !important;
  font: 600 13px/1.3 var(--ot-font) !important;
}
.wppm-ot-shell .wppm-ot-sidebar .wppm_display_user_none {
  font-size: 12.5px;
}

/* ---------- People widgets: compact round pills (Task Creator + Users) ----------
   Each user is a small pill (round avatar + name) that never grows wider than
   the widget; long names end with an ellipsis. CSS only, no markup changes. */
.wppm-ot-shell .wppm-ot-sidebar #wppm_task_users {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
}
.wppm-ot-shell #wppm_raisedby_widget .wppm-widget-body > div,
.wppm-ot-shell .wppm-ot-sidebar #wppm_task_users > div {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  padding: 3px 10px 3px 3px !important;
  border: 1px solid var(--ot-border);
  border-radius: 999px;
  background: #f8fafc;
  vertical-align: middle;
}
/* Fixed round frame; the image fills it exactly, whatever margin/float/size
   WordPress or the theme puts on img.avatar. */
.wppm-ot-shell .wppm-ot-sidebar .wppm_task_user_avatar {
  display: block !important;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50%;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px #e0e7ff;
}
.wppm-ot-shell .wppm-ot-sidebar .wppm_task_user_avatar img {
  display: block !important;
  float: none !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: none !important;
}
.wppm-ot-shell .wppm-ot-sidebar .wppm_task_user_names {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-size: 12px !important;
  line-height: 1.3 !important;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wppm-ot-shell .wppm-ot-sidebar #wppm_task_users .wppm_display_user_none {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 999px;
  background: #f8fafc;
  font-size: 12px;
}

/* ===================== Alerts =====================
   Toast (top right) matching the Settings screens (wppm-settings-saas.css), e.g. the
   checklist "Order saved." message. The markup's <img> icon is replaced by a ::before
   icon so success and error get matching colors; ids and show/hide JS are unchanged. */
.wppm-ot-shell .wppm_alert.alert {
  --ot-toast-accent: #16a34a;
  --ot-toast-tint: #dcfce7;
  --ot-toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  position: fixed;
  top: 46px;
  right: 24px;
  z-index: 100000;
  /* hidden by its inline display:none; jQuery show/slideDown then keep this flex display */
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
  max-width: min(420px, calc(100vw - 32px));
  margin: 0;
  padding: 12px 18px 12px 14px;
  border: 1px solid #e5e7eb;
  border-left: 4px solid var(--ot-toast-accent);
  border-radius: 12px;
  background: #ffffff;
  color: #111827;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  box-shadow: 0 2px 4px rgba(16,24,40,.06), 0 16px 32px -12px rgba(16,24,40,.22);
}
.wppm-ot-shell .wppm_alert.alert-danger {
  --ot-toast-accent: #dc2626;
  --ot-toast-tint: #fee2e2;
  --ot-toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='12' y1='6' x2='12' y2='13'/%3E%3Cline x1='12' y1='18' x2='12.01' y2='18'/%3E%3C/svg%3E");
}
.wppm-ot-shell .wppm_alert.alert::before {
  content: "";
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ot-toast-tint) var(--ot-toast-icon) center / 16px 16px no-repeat;
}
.wppm-ot-shell .wppm_alert.alert > img,
.wppm-ot-shell .wppm_alert.alert > i {
  display: none;
}
.wppm-ot-shell .wppm_alert .wppm_alert_text {
  flex: 1 1 auto;
  min-width: 0;
  color: #111827;
}
@media (max-width: 782px) {
  .wppm-ot-shell .wppm_alert.alert {
    top: 58px;
    right: 16px;
    left: 16px;
    min-width: 0;
    max-width: none;
  }
}

/* ===================== Responsive ===================== */
@media (max-width: 991px) {
  .wppm-ot-shell .wppm-ot-main {
    padding-right: 12px;
  }
}
@media (max-width: 767px) {
  .wppm-ot-shell {
    padding: 14px 12px 18px;
    border-radius: 0;
  }
  .wppm-ot-shell .wppm-ot-main {
    padding-right: 0;
  }
  .wppm-ot-shell .wppm-ot-sidebar {
    margin-top: 4px !important;
    padding-left: 0;
    padding-right: 0;
  }
  /* admin.css stacks both halves of a subtask/checklist row full-width on mobile;
     keep name and its avatars/actions on one line instead. */
  .wppm-ot-shell .wppm_checklist_items_container .wppm_checklist_item {
    flex-wrap: nowrap;
  }
  .wppm-ot-shell .wppm_checklist_items_container .wppm_checklist_item > [class*="col-"] {
    width: auto;
    margin-top: 0;
  }
  .wppm-ot-shell .wppm-ot-actions {
    margin-left: 0;
  }
  .wppm-ot-shell .wppm-ot-card {
    padding: 16px !important;
  }
  .wppm-ot-shell .wppm-ot-details > .row:not(:first-child) {
    flex-direction: column;
    gap: 2px;
  }
  .wppm-ot-shell .wppm-ot-details > .row > .col-sm-3 {
    flex-basis: auto;
    width: auto;
  }
  .wppm-ot-shell .wppm_task_label {
    font-size: 18px !important;
  }
  .wppm-ot-shell #wppm_comment_btn > [class*="col-"] {
    width: 100%;
  }
  .wppm-ot-shell #wppm_comment_btn .col-sm-6:last-of-type {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }
  .wppm-ot-shell .wppm_thread {
    display: flex;
  }
  .wppm-ot-shell .wppm_thread_action {
    opacity: 1;
  }
}

/* ===================== Open task header buttons (SaaS) =====================
   Icons are inline SVGs in currentColor (wppm_open_task.php); ids, titles, onclick and the
   inline display:none/inline permission styles are unchanged.
   Layout: [ + Add New ] | [List][Dashboard] [Clone][Print][Archive][add-ons] | [Delete]
   (grouped with CSS order, the markup order is untouched). */
.wppm-ot-shell .wppm-ot-actions > span {
  position: relative;
  order: 9; /* add-on buttons go with the tools group */
  color: #475569;
}
.wppm-ot-shell .wppm-ot-actions > span .wppm-ot-icon {
  display: block;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.wppm-ot-shell .wppm-ot-actions > span a {
  color: inherit;
}
.wppm-ot-shell .wppm-ot-actions > span:hover {
  color: var(--ot-primary, #4f46e5);
}
.wppm-ot-shell .wppm-ot-actions > span:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(79,70,229,.30);
}
/* Archived tasks hide the print icon itself rather than its button: drop the empty square */
.wppm-ot-shell .wppm-ot-actions > span:has(> svg[style*="none"]) {
  display: none !important;
}

/* Order + group dividers */
.wppm-ot-shell .wppm-ot-actions > #wppm_add_new_task_btn   { order: 1; }
.wppm-ot-shell .wppm-ot-actions > #wppm_task_list_btn      { order: 2; }
.wppm-ot-shell .wppm-ot-actions > #wppm_dashboard_btn      { order: 3; }
.wppm-ot-shell .wppm-ot-actions > #wppm_clone_task_btn     { order: 6; }
.wppm-ot-shell .wppm-ot-actions > #wppm_print_task_btn     { order: 7; }
.wppm-ot-shell .wppm-ot-actions > #wppm_archieve_task_btn  { order: 8; }
.wppm-ot-shell .wppm-ot-actions > #wppm_delete_task_btn    { order: 10; }
.wppm-ot-shell .wppm-ot-actions > #wppm_task_list_btn,
.wppm-ot-shell .wppm-ot-actions > #wppm_delete_task_btn {
  margin-left: 11px !important;
}
.wppm-ot-shell .wppm-ot-actions > #wppm_task_list_btn::before,
.wppm-ot-shell .wppm-ot-actions > #wppm_delete_task_btn::before {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: -10px;
  width: 1px;
  background: #e2e8f0;
}
/* Space between navigation and tools */
.wppm-ot-shell .wppm-ot-actions > #wppm_clone_task_btn {
  margin-left: 6px !important;
}

/* Primary: Add New (same style as the other "Add New" buttons) */
.wppm-ot-shell .wppm-ot-actions > #wppm_add_new_task_btn {
  gap: 6px;
  width: auto;
  padding: 0 14px 0 12px;
  border-color: transparent;
  background: #4f46e5;
  color: #ffffff;
  font: 600 13px/1 var(--ot-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 1px 2px rgba(15,23,42,.12),
    0 4px 12px -6px rgba(79,70,229,.55);
}
.wppm-ot-shell .wppm-ot-actions > #wppm_add_new_task_btn .wppm-ot-icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.4;
}
.wppm-ot-shell .wppm-ot-actions > #wppm_add_new_task_btn:hover {
  border-color: transparent;
  background: #4338ca;
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 1px 2px rgba(15,23,42,.12),
    0 6px 16px -6px rgba(79,70,229,.65);
}

/* Danger: Delete */
.wppm-ot-shell .wppm-ot-actions > #wppm_delete_task_btn:hover {
  color: #dc2626;
}

/* Print menu opens under the Print button, aligned to the right edge */
.wppm-ot-shell #wppmprint_menu {
  left: auto;
  right: 0;
}

@media (max-width: 600px) {
  /* Icon-only Add New on small screens; the label stays for screen readers */
  .wppm-ot-shell .wppm-ot-actions > #wppm_add_new_task_btn {
    width: 36px;
    padding: 0;
  }
  .wppm-ot-shell .wppm-ot-actions > #wppm_add_new_task_btn .wppm-ot-btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* =====================================================================
   Task overview sidebar widgets (Status, Task Creator, Users, add-on widgets)
   Same card look as the project overview sidebar. CSS only: no widths or negative
   margins, so nothing can overflow the sidebar. Header / body colors from
   Settings > Appearance > Widget stay inline; the user pills come from the rules above.
   ===================================================================== */
.wppm-ot-shell .wppm-ot-sidebar > .wppm_widget {
  border-radius: 14px !important;
  background: var(--ot-surface);
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 16px -10px rgba(16,24,40,.12);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.wppm-ot-shell .wppm-ot-sidebar > .wppm_widget:hover {
  border-color: #d5d9e6 !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 24px -14px rgba(16,24,40,.22);
}
/* Header: icon tile + title + edit button */
.wppm-ot-shell .wppm-ot-sidebar .wppm-widget-header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 12px 10px 14px !important;
}
.wppm-ot-shell .wppm-ot-sidebar .widget_header {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  margin: 0 !important;
  font-size: 11.5px !important;
  letter-spacing: .06em;
}
.wppm-ot-shell .wppm-ot-sidebar .widget_header::before {
  content: "\f469"; /* dashicons-clock (fallback for add-on widgets) */
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #64748b;
  font: normal 14px/1 dashicons;
  letter-spacing: 0;
  text-transform: none;
}
.wppm-ot-shell #wppm_status_widget .widget_header::before {
  content: "\f503"; /* dashicons-randomize */
  background: #eef2ff;
  color: #4f46e5;
}
.wppm-ot-shell #wppm_raisedby_widget .widget_header::before {
  content: "\f110"; /* dashicons-admin-users */
  background: #faf5ff;
  color: #9333ea;
}
.wppm-ot-shell #wppm_task_users_widget_container .widget_header::before {
  content: "\f307"; /* dashicons-groups */
  background: #f0f9ff;
  color: #0284c7;
}
/* Edit button: quiet square, clearer on hover */
.wppm-ot-shell .wppm-ot-sidebar .wppm_edit_task_details_widget {
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.wppm-ot-shell .wppm-ot-sidebar .wppm_edit_task_details_widget:hover {
  border-color: var(--ot-border);
  background: var(--ot-surface);
}
.wppm-ot-shell .wppm-ot-sidebar .wppm_edit_task_details_widget img {
  width: 13px;
  opacity: .6;
  transition: opacity .12s ease;
}
.wppm-ot-shell .wppm-ot-sidebar > .wppm_widget:hover .wppm_edit_task_details_widget img,
.wppm-ot-shell .wppm-ot-sidebar .wppm_edit_task_details_widget:hover img {
  opacity: 1;
}
/* Status row: "Status:" on the left, pill on the right */
.wppm-ot-shell #wppm_status_widget .wppm_sidebar_labels {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
}
.wppm-ot-shell #wppm_status_widget .wppm_admin_label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 11px !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wppm-ot-shell #wppm_status_widget .wppm_admin_label::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
/* User pills: indigo tint on hover */
.wppm-ot-shell #wppm_raisedby_widget .wppm-widget-body > div:hover,
.wppm-ot-shell .wppm-ot-sidebar #wppm_task_users > div:hover {
  border-color: #c7d2fe;
  background: #eef2ff;
}

/* ---------- Property bar: Project chip (move task) ---------- */
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-menu.wppm-ot-prop-menu-wide {
  min-width: 240px;
  max-width: min(320px, calc(100vw - 32px));
  max-height: 340px;
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-menu .wppm-ot-menu-icon {
  flex: none;
  width: 14px;
  height: 14px;
  color: #94a3b8;
  font-size: 14px;
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-menu button[aria-checked="true"] .wppm-ot-menu-icon {
  color: var(--ot-primary);
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-menu .wppm-ot-menu-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-menu .wppm-ot-prop-search {
  box-sizing: border-box;
  width: 100%;
  height: 34px;
  margin: 2px 0 6px;
  padding: 0 10px 0 32px;
  border: 1px solid var(--ot-border);
  border-radius: 8px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px 50% / 14px 14px;
  box-shadow: none;
  color: var(--ot-ink);
  font: 13px/1 var(--ot-font);
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-menu .wppm-ot-prop-search:focus {
  outline: none;
  border-color: var(--ot-primary);
  box-shadow: 0 0 0 3px var(--ot-primary-light);
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-menu .wppm-ot-prop-menu-empty {
  padding: 10px 8px;
  color: var(--ot-muted);
  font-size: 12.5px;
  text-align: center;
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-menu .wppm-ot-prop-menu-empty[hidden] {
  display: none;
}
:is(.wppm-ot-shell, .wppm-op-shell) .wppm-ot-prop-menu .wppm-ot-prop-menu-note {
  margin: 6px 2px 2px;
  padding: 8px 8px 2px;
  border-top: 1px solid var(--ot-border);
  color: var(--ot-muted);
  font-size: 11.5px;
  line-height: 1.45;
}

/* ---------- Comments: modern SaaS card (same as the open project page) ----------
   Real comments only (log rows keep the timeline above). CSS only: markup, ids, JS and
   the Appearance colors (inline on the name / date / message) are unchanged. */
.wppm-ot-shell .wppm_thread:not(.is-log) {
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px !important;
  margin: 0 0 12px !important;
  border: 1px solid var(--ot-border) !important;
  border-radius: 12px;
  background: var(--ot-surface);
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wppm-ot-shell .wppm_thread:not(.is-log):hover {
  border-color: #d8dee8 !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 24px -14px rgba(16,24,40,.18);
}
.wppm-ot-shell .wppm_thread:not(.is-log) .wppm_thread_avatar {
  padding: 2px 0 0;
}
.wppm-ot-shell .wppm_thread:not(.is-log) .wppm_thread_avatar img {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--ot-primary-light);
}
/* Header: name · date ........ actions */
.wppm-ot-shell .wppm_thread:not(.is-log) .wppm_thread_user_name {
  gap: 4px 8px;
  min-height: 26px;
  margin: 0 0 4px !important;
  font-size: 13.5px !important;
}
.wppm-ot-shell .wppm_thread:not(.is-log) .wppm_thread_user_name > span:empty {
  display: none;
}
.wppm-ot-shell .wppm_thread:not(.is-log) .wppm_comment_date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px !important;
  opacity: .85;
}
.wppm-ot-shell .wppm_thread:not(.is-log) .wppm_comment_date::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .6;
}
.wppm-ot-shell .wppm_thread:not(.is-log) .wppm_comment_date i {
  font-style: normal;
}
.wppm-ot-shell .wppm_thread:not(.is-log) .wppm_thread_action {
  gap: 2px;
}
.wppm-ot-shell .wppm_thread:not(.is-log) .wppm_thread_action > span {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  cursor: pointer;
  transition: background-color .12s ease;
}
/* Body */
.wppm-ot-shell .wppm_thread:not(.is-log) .wppm_thread_messege {
  line-height: 1.65 !important;
}
.wppm-ot-shell .wppm_thread:not(.is-log) .wppm_thread_messege img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
/* Attachments: file chips */
.wppm-ot-shell .wppm_thread:not(.is-log) .wppm_attachment_title {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.wppm-ot-shell .wppm_thread:not(.is-log) .wppm_attachment_tbl {
  border-spacing: 0 6px;
}
.wppm-ot-shell .wppm_thread:not(.is-log) .wppm_attachment_tr td {
  padding: 6px 8px 6px 10px !important;
  border: 1px solid var(--ot-border);
  border-radius: 8px;
}
.wppm-ot-shell .wppm_thread:not(.is-log) .wppm_attachment_link {
  text-decoration: none;
}
.wppm-ot-shell .wppm_thread:not(.is-log) .wppm_attachment_file_name {
  padding: 0 6px 0 0 !important;
}
@media (max-width: 600px) {
  .wppm-ot-shell .wppm_thread:not(.is-log) {
    gap: 12px;
    padding: 14px !important;
  }
  .wppm-ot-shell .wppm_thread:not(.is-log) .wppm_thread_avatar img {
    width: 32px;
    height: 32px;
  }
  /* Touch screens have no hover: keep edit / delete visible */
  .wppm-ot-shell .wppm_thread:not(.is-log) .wppm_thread_action {
    opacity: 1;
  }
}

/* ===================== Comment actions: modern SaaS buttons (task + project) =====================
   CSS only: ids, onclick handlers, show / hide of the row and the "SEND" label are unchanged.
   Left: Attach Files. Right: Cancel, then Send (primary last). Send gets the modern indigo look
   only while it still has the default color (#5067c5); a color set in Appearance is kept. */
:is(.wppm-ot-shell #wppm_comment_btn, .wppm-op-shell #wppm_proj_comment_btn) {
  --cb-primary: #4f46e5;
  --cb-primary-dark: #4338ca;
  --cb-ring: rgba(79,70,229,.22);
  --cb-border: #e2e8f0;
  --cb-ink: #1f2937;
  --cb-muted: #64748b;
  margin: 0 !important;
  padding: 12px 0 0 !important;
}
/* One flex line, Attach left, Cancel / Send right, wrapping when narrow instead of the two
   50% Bootstrap float columns. Shown by an inline "display: block" (markup or jQuery .show())
   or "display: flex" (.show() after .hide() restores the last display); hidden by "display: none". */
:is(.wppm-ot-shell #wppm_comment_btn, .wppm-op-shell #wppm_proj_comment_btn) {
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
}
:is(.wppm-ot-shell #wppm_comment_btn, .wppm-op-shell #wppm_proj_comment_btn)[style*="block"] {
  display: flex !important;
}
/* Bootstrap's .row clearfix pseudo-elements would become flex items */
:is(.wppm-ot-shell #wppm_comment_btn, .wppm-op-shell #wppm_proj_comment_btn)::before,
:is(.wppm-ot-shell #wppm_comment_btn, .wppm-op-shell #wppm_proj_comment_btn)::after {
  content: none !important;
}
:is(.wppm-ot-shell #wppm_comment_btn, .wppm-op-shell #wppm_proj_comment_btn) > [class*="col-"] {
  float: none;
  width: auto;
  min-height: 0;
  padding: 0;
}
:is(.wppm-ot-shell #wppm_comment_btn, .wppm-op-shell #wppm_proj_comment_btn) > [class*="col-"]:first-of-type {
  display: flex;
  align-items: center;
}
/* Right column: buttons side by side (floats in admin.css put Send before Cancel) */
:is(.wppm-ot-shell #wppm_comment_btn, .wppm-op-shell #wppm_proj_comment_btn) > [class*="col-"]:last-of-type {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
/* Shared button shape */
:is(#wppm_attach_file, #wppm_proj_attach_file,
    #wppm_individual_cancel_comment_btn, #wppm_individual_cancel_proj_comment_btn,
    #wppm_individual_submit_task_comment_btn, #wppm_individual_submit_proj_comment_btn) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  float: none !important;
  height: 36px;
  margin: 0 !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: .01em;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .08s ease;
}
:is(#wppm_attach_file, #wppm_proj_attach_file,
    #wppm_individual_cancel_comment_btn, #wppm_individual_cancel_proj_comment_btn,
    #wppm_individual_submit_task_comment_btn, #wppm_individual_submit_proj_comment_btn):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cb-ring, rgba(79,70,229,.22)) !important;
}
:is(#wppm_attach_file, #wppm_proj_attach_file,
    #wppm_individual_cancel_comment_btn, #wppm_individual_cancel_proj_comment_btn,
    #wppm_individual_submit_task_comment_btn, #wppm_individual_submit_proj_comment_btn):active {
  transform: translateY(1px);
}
/* Attach Files: outline button with a paperclip */
:is(.wppm-ot-shell #wppm_attach_file, .wppm-op-shell #wppm_proj_attach_file) {
  border: 1px solid var(--cb-border) !important;
  background: #fff !important;
  color: var(--cb-ink) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.05);
}
:is(.wppm-ot-shell #wppm_attach_file, .wppm-op-shell #wppm_proj_attach_file)::before {
  content: "";
  width: 15px;
  height: 15px;
  background-color: var(--cb-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") center / contain no-repeat;
  font: inherit;
}
:is(.wppm-ot-shell #wppm_attach_file, .wppm-op-shell #wppm_proj_attach_file):hover {
  border-color: #c7d2fe !important;
  background: #eef2ff !important;
  color: var(--cb-primary) !important;
}
:is(.wppm-ot-shell #wppm_attach_file, .wppm-op-shell #wppm_proj_attach_file):hover::before {
  background-color: var(--cb-primary);
}
/* Cancel: quiet ghost button */
:is(#wppm_individual_cancel_comment_btn, #wppm_individual_cancel_proj_comment_btn) {
  order: 1;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--cb-muted) !important;
  box-shadow: none;
}
:is(#wppm_individual_cancel_comment_btn, #wppm_individual_cancel_proj_comment_btn):hover {
  background: #f1f5f9 !important;
  color: var(--cb-ink) !important;
}
/* Send: primary, last, with a paper-plane icon */
:is(#wppm_individual_submit_task_comment_btn, #wppm_individual_submit_proj_comment_btn) {
  order: 2;
  min-width: 96px;
  border: 1px solid transparent !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(15,23,42,.12), 0 6px 14px -8px rgba(79,70,229,.6);
}
:is(#wppm_individual_submit_task_comment_btn, #wppm_individual_submit_proj_comment_btn)::before {
  content: "";
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
:is(#wppm_individual_submit_task_comment_btn, #wppm_individual_submit_proj_comment_btn):hover {
  filter: brightness(.94);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 4px rgba(15,23,42,.12), 0 10px 20px -10px rgba(79,70,229,.7);
}
/* Default Appearance color only: modern indigo */
:is(#wppm_individual_submit_task_comment_btn, #wppm_individual_submit_proj_comment_btn)[style*="5067c5" i] {
  background: linear-gradient(180deg, #5b52f0 0%, #4f46e5 100%) !important;
  color: #fff !important;
}
:is(#wppm_individual_submit_task_comment_btn, #wppm_individual_submit_proj_comment_btn)[style*="5067c5" i]:hover {
  background: linear-gradient(180deg, #4f46e5 0%, #4338ca 100%) !important;
  filter: none;
}
:is(#wppm_individual_submit_task_comment_btn, #wppm_individual_submit_proj_comment_btn)[disabled] {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}
/* Phones: Attach on its own line, Cancel / Send full width */
@media (max-width: 600px) {
  :is(.wppm-ot-shell #wppm_comment_btn, .wppm-op-shell #wppm_proj_comment_btn) > [class*="col-"] {
    width: 100%;
  }
  :is(#wppm_individual_cancel_comment_btn, #wppm_individual_cancel_proj_comment_btn,
      #wppm_individual_submit_task_comment_btn, #wppm_individual_submit_proj_comment_btn) {
    flex: 1 1 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(#wppm_attach_file, #wppm_proj_attach_file,
      #wppm_individual_cancel_comment_btn, #wppm_individual_cancel_proj_comment_btn,
      #wppm_individual_submit_task_comment_btn, #wppm_individual_submit_proj_comment_btn) {
    transition: none;
  }
}
/* Project comment box already has 12px under the textarea. Its textarea / TinyMCE keeps the
   15px Bootstrap column gutter (the task card removes it), so match it on the sides to line
   Attach Files and Send up with the editor's edges. */
.wppm-op-shell #wppm_proj_comment_btn {
  padding: 0 15px !important;
}

/* =====================================================================
   Toolbar "More" menu (project Overview / Tasks / Kanban headers and the task overview)
   Built by wppm_toolbar_more_init() in admin.js: the primary action stays in the toolbar,
   the other buttons (core + add-on) are moved, as the same elements, into this menu.
   Their inline display:none (permission) still hides them; colors from Appearance are
   overridden only inside the menu.
   ===================================================================== */
:is(.wppm-op-shell, .wppm-ot-shell) .wppm-tb-more {
  position: relative;
  display: inline-flex;
  flex: none;
}
:is(.wppm-op-shell, .wppm-ot-shell) .wppm-tb-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  margin: 0;
  padding: 0 12px 0 10px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15,23,42,.06);
  color: #334155;
  font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
:is(.wppm-op-shell, .wppm-ot-shell) .wppm-tb-more-btn:hover,
:is(.wppm-op-shell, .wppm-ot-shell) .wppm-tb-more.is-open .wppm-tb-more-btn {
  border-color: #c7d2fe;
  background: #eef2ff;
  color: #4338ca;
}
:is(.wppm-op-shell, .wppm-ot-shell) .wppm-tb-more-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(79,70,229,.22);
}
/* Three horizontal dots */
:is(.wppm-op-shell, .wppm-ot-shell) .wppm-tb-more-dots {
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
}
:is(.wppm-op-shell, .wppm-ot-shell) .wppm-tb-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
  max-width: min(300px, calc(100vw - 32px));
  padding: 6px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 16px 36px -12px rgba(16,24,40,.28), 0 2px 6px rgba(16,24,40,.06);
  text-align: left;
}
:is(.wppm-op-shell, .wppm-ot-shell) .wppm-tb-menu[hidden] {
  display: none;
}
/* Menu rows (ids in the selector so they win over the toolbar-button rules) */
:is(#wppm_open_project, #wppm_open_project_kanban_view, #wppm_open_project_tasks_view, #wppm_open_task) .wppm-tb-menu > .wppm-tb-item {
  position: static;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  height: auto;
  min-height: 36px;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #1f2937 !important;
  font: 500 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  text-align: left;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transform: none !important;
}
/* Rows not hidden by a permission style are flex rows */
:is(#wppm_open_project, #wppm_open_project_kanban_view, #wppm_open_project_tasks_view, #wppm_open_task) .wppm-tb-menu > .wppm-tb-item:not([style*="display:none"]):not([style*="display: none"]) {
  display: flex !important;
}
:is(#wppm_open_project, #wppm_open_project_kanban_view, #wppm_open_project_tasks_view, #wppm_open_task) .wppm-tb-menu > .wppm-tb-item:hover,
:is(#wppm_open_project, #wppm_open_project_kanban_view, #wppm_open_project_tasks_view, #wppm_open_task) .wppm-tb-menu > .wppm-tb-item:focus-visible {
  outline: none;
  background: #f1f5f9 !important;
  color: #111827 !important;
}
:is(#wppm_open_project, #wppm_open_project_kanban_view, #wppm_open_project_tasks_view, #wppm_open_task) .wppm-tb-menu > .wppm-tb-item > span {
  display: inline-flex;
  align-items: center;
  margin: 0 !important;
}
/* Icons: one size, muted; the inline-SVG task icons follow the text color */
:is(#wppm_open_project, #wppm_open_project_kanban_view, #wppm_open_project_tasks_view, #wppm_open_task) .wppm-tb-menu > .wppm-tb-item img,
:is(#wppm_open_project, #wppm_open_project_kanban_view, #wppm_open_project_tasks_view, #wppm_open_task) .wppm-tb-menu > .wppm-tb-item svg.wppm-ot-icon {
  flex: none;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  opacity: .7;
  filter: none;
}
:is(#wppm_open_project, #wppm_open_project_kanban_view, #wppm_open_project_tasks_view, #wppm_open_task) .wppm-tb-menu > .wppm-tb-item a {
  display: inline-flex;
  align-items: center;
  color: inherit;
  line-height: 0;
  text-decoration: none;
}
:is(#wppm_open_project, #wppm_open_project_kanban_view, #wppm_open_project_tasks_view, #wppm_open_task) .wppm-tb-menu .wppm-tb-label {
  display: inline;
}
/* Delete: red, after a separator */
:is(#wppm_open_project, #wppm_open_project_kanban_view, #wppm_open_project_tasks_view, #wppm_open_task) .wppm-tb-menu > .wppm-tb-item.is-danger,
:is(#wppm_open_project, #wppm_open_project_kanban_view, #wppm_open_project_tasks_view) .wppm-op-actions--modern .wppm-tb-menu > #wppm_delete_project_btn.wppm-tb-item {
  border: none !important;
  background: transparent !important;
  color: #dc2626 !important;
}
:is(#wppm_open_project, #wppm_open_project_kanban_view, #wppm_open_project_tasks_view, #wppm_open_task) .wppm-tb-menu > .wppm-tb-item.is-danger:hover,
:is(#wppm_open_project, #wppm_open_project_kanban_view, #wppm_open_project_tasks_view, #wppm_open_task) .wppm-tb-menu > .wppm-tb-item.is-danger:focus-visible,
:is(#wppm_open_project, #wppm_open_project_kanban_view, #wppm_open_project_tasks_view) .wppm-op-actions--modern .wppm-tb-menu > #wppm_delete_project_btn.wppm-tb-item:hover {
  background: #fef2f2 !important;
  color: #b91c1c !important;
}
:is(#wppm_open_project, #wppm_open_project_kanban_view, #wppm_open_project_tasks_view, #wppm_open_task) .wppm-tb-menu > .wppm-tb-item.is-danger img {
  opacity: 1;
  /* tint the icon red (#dc2626) */
  filter: brightness(0) saturate(100%) invert(20%) sepia(93%) saturate(4262%) hue-rotate(352deg) brightness(91%) contrast(92%);
}
:is(.wppm-op-shell, .wppm-ot-shell) .wppm-tb-sep {
  height: 1px;
  margin: 4px 6px;
  background: #e5e7eb;
}
/* Phones: the project toolbar scrolls sideways, which would clip the menu; with the menu
   there are only two buttons, so let it wrap normally. */
@media (max-width: 600px) {
  .wppm-op-shell .wppm-op-actions:has(> .wppm-tb-more) {
    flex-wrap: wrap;
    overflow: visible;
  }
}
/* Same order on every toolbar: More, then the primary action on the right */
.wppm-op-shell .wppm-op-actions > .wppm-tb-more {
  order: -1;
}
/* Project toolbar icons are white (made for colored buttons): darken them in the menu */
:is(#wppm_open_project, #wppm_open_project_kanban_view, #wppm_open_project_tasks_view) .wppm-tb-menu > .wppm-tb-item:not(.is-danger) img {
  filter: brightness(0);
  opacity: .55;
}
/* Phones: toolbars sit on the left, so the menu opens to the right of More */
@media (max-width: 600px) {
  :is(.wppm-op-shell, .wppm-ot-shell) .wppm-tb-menu {
    right: auto;
    left: 0;
  }
}

/* =====================================================================
   Task overview polish (same system as the project overview)
   ===================================================================== */
/* ---------- Header: one line, Task List / project / Task #id ---------- */
.wppm-ot-shell .wppm-ot-headline {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}
.wppm-ot-shell .wppm-ot-toolbar {
  align-items: center !important;
}
.wppm-ot-shell .wppm-ot-headline .wppm-ot-back {
  flex: none;
  margin-left: -6px;
  padding: 5px 8px 5px 4px;
  border-radius: 8px;
  font-size: 13px;
}
.wppm-ot-shell .wppm-ot-crumbs {
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
}
.wppm-ot-shell .wppm-ot-crumb-sep {
  flex: none;
  color: #cbd5e1;
  font-size: 15px;
}
.wppm-ot-shell .wppm-ot-crumbs .wppm-ot-crumb {
  min-width: 0;
  max-width: 260px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ot-muted);
  font-size: 13px;
  font-weight: 600;
}
.wppm-ot-shell .wppm-ot-crumbs .wppm-heading-inline {
  flex: none;
  font: 700 15px/1.3 var(--ot-font) !important;
  white-space: nowrap;
}
.wppm-ot-shell .wppm-ot-crumb-id {
  color: var(--ot-muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- Details: sections of label / value tiles ---------- */
.wppm-ot-shell .wppm-op-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ot-border);
}
.wppm-ot-shell .wppm-op-section-title {
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: none !important;
  color: var(--ot-ink) !important;
  font: 700 12px/1.3 var(--ot-font) !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.wppm-ot-shell .wppm-op-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  margin: 0;
}
.wppm-ot-shell .wppm-op-fact {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--ot-border);
  border-radius: 10px;
  background: var(--ot-bg);
}
.wppm-ot-shell .wppm-op-fact dt {
  display: block;
  width: auto !important;
  float: none !important;
  margin: 0 0 4px !important;
  color: var(--ot-muted) !important;
  font: 600 11px/1.3 var(--ot-font) !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: default;
}
.wppm-ot-shell .wppm-op-fact dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.wppm-ot-shell .wppm-op-fact dd .wppm_task_details {
  display: inline-block;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ot-ink);
  font: 600 13.5px/1.4 var(--ot-font) !important;
  cursor: default;
}
.wppm-ot-shell .wppm-op-fact .is-editable {
  border-bottom: 1px dashed #cbd5e1 !important;
  cursor: pointer !important;
}
.wppm-ot-shell .wppm-op-fact .is-editable:hover {
  border-bottom-color: var(--ot-primary) !important;
  color: var(--ot-primary) !important;
}
.wppm-ot-shell .wppm-op-fact .is-editable:focus-visible {
  outline: none;
  border-radius: 4px !important;
  box-shadow: 0 0 0 3px var(--ot-primary-light);
}
.wppm-ot-shell .wppm-op-fact .is-empty {
  color: var(--ot-muted) !important;
  font-weight: 500 !important;
}
.wppm-ot-shell .wppm-op-fact.is-overdue {
  border-color: #fecaca;
  background: #fef2f2;
}
.wppm-ot-shell .wppm-op-fact.is-overdue dt {
  color: #b91c1c !important;
}
.wppm-ot-shell .wppm-op-fact-tag {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  max-width: 100%;
}
.wppm-ot-shell .wppm-op-fact-tag .dashicons {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--ot-muted);
  font-size: 14px;
}
.wppm-ot-shell .wppm-op-fact .wppm_admin_label {
  display: inline-block;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.wppm-ot-shell .wppm-op-desc-section .wppm_task_description {
  display: block;
  color: #334155;
  font-size: 13.5px;
  line-height: 1.6;
}
.wppm-ot-shell .wppm-op-desc-section .wppm_task_description > :first-child { margin-top: 0; }
.wppm-ot-shell .wppm-op-desc-section .wppm_task_description > :last-child { margin-bottom: 0; }
.wppm-ot-shell .wppm-op-desc-section .wppm_task_description img {
  max-width: 100%;
  height: auto;
}
.wppm-ot-shell .wppm-op-cf-section .wppm-cf-type-file {
  grid-column: span 2;
}
.wppm-ot-shell .wppm-op-cf-section .wppm_attachment_tbl {
  width: 100%;
  margin: 0;
}
.wppm-ot-shell .wppm-op-cf-section .wppm_attachment_tbl td {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0;
  border: none;
}
@media (max-width: 600px) {
  .wppm-ot-shell .wppm-op-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wppm-ot-shell .wppm-op-cf-section .wppm-cf-type-file {
    grid-column: 1 / -1;
  }
}

/* ---------- Sidebar: compact Status / Task Creator / Assignees ---------- */
.wppm-ot-shell #wppm_status_widget.wppm-ot-widget-compact .widget_header {
  flex: 0 1 auto;
}
.wppm-ot-shell #wppm_status_widget.wppm-ot-widget-compact .wppm-widget-header > .wppm_admin_label {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
  padding: 5px 11px !important;
  overflow: hidden;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wppm-ot-shell #wppm_status_widget.wppm-ot-widget-compact .wppm-widget-header > .wppm_admin_label::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.wppm-ot-shell #wppm_status_widget.wppm-ot-widget-compact .wppm-widget-body {
  padding: 0 14px 12px !important;
}
.wppm-ot-shell #wppm_status_widget .wppm_sidebar_labels.wppm-ot-deadline {
  display: flex;
}
.wppm-ot-shell .wppm-ot-sidebar .wppm-ot-deadline {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--ot-bg);
  color: #334155 !important;
  font-size: 12.5px !important;
  font-weight: 600;
}
.wppm-ot-shell .wppm-ot-sidebar .wppm-ot-deadline .dashicons {
  width: 15px;
  height: 15px;
  color: var(--ot-muted);
  font-size: 15px;
}
.wppm-ot-shell .wppm-ot-sidebar .wppm-ot-deadline-date {
  margin-left: auto;
  color: var(--ot-muted);
  font-weight: 500;
  white-space: nowrap;
}
.wppm-ot-shell .wppm-ot-sidebar .wppm-ot-deadline.is-overdue { background: #fef2f2; color: #b91c1c !important; }
.wppm-ot-shell .wppm-ot-sidebar .wppm-ot-deadline.is-overdue .dashicons { color: #dc2626; }
.wppm-ot-shell .wppm-ot-sidebar .wppm-ot-deadline.is-soon { background: #fffbeb; color: #b45309 !important; }
.wppm-ot-shell .wppm-ot-sidebar .wppm-ot-deadline.is-soon .dashicons { color: #d97706; }
.wppm-ot-shell .wppm-ot-sidebar .wppm-ot-deadline.is-done { background: #f0fdf4; color: #15803d !important; }
.wppm-ot-shell .wppm-ot-sidebar .wppm-ot-deadline.is-done .dashicons { color: #16a34a; }
.wppm-ot-shell .wppm-ot-sidebar .wppm-ot-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 10.5px;
  letter-spacing: 0;
}
/* People rows instead of pills */
.wppm-ot-shell .wppm-ot-sidebar #wppm_task_users {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
}
.wppm-ot-shell #wppm_raisedby_widget .wppm-widget-body > .wppm-ot-person,
.wppm-ot-shell .wppm-ot-sidebar #wppm_task_users > .wppm-ot-person {
  display: flex !important;
  align-items: center;
  gap: 10px;
  max-width: none;
  padding: 5px 6px !important;
  border: none;
  border-radius: 9px;
  background: transparent;
}
.wppm-ot-shell #wppm_raisedby_widget .wppm-widget-body > .wppm-ot-person:hover,
.wppm-ot-shell .wppm-ot-sidebar #wppm_task_users > .wppm-ot-person:hover {
  background: var(--ot-bg);
}
.wppm-ot-shell .wppm-ot-sidebar .wppm-ot-person .wppm_task_user_avatar {
  flex-basis: 30px;
  width: 30px;
  height: 30px;
}
.wppm-ot-shell #wppm_raisedby_widget .wppm-ot-person .wppm_task_user_avatar {
  flex-basis: 36px;
  width: 36px;
  height: 36px;
}
.wppm-ot-shell .wppm-ot-sidebar .wppm-ot-person-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.wppm-ot-shell .wppm-ot-sidebar .wppm-ot-person-link {
  text-decoration: none;
}
.wppm-ot-shell .wppm-ot-sidebar .wppm-ot-person-link:hover,
.wppm-ot-shell .wppm-ot-sidebar .wppm-ot-person-link:focus-visible {
  color: var(--ot-primary) !important;
  text-decoration: underline;
}
.wppm-ot-shell .wppm-ot-sidebar .wppm-ot-person-meta {
  overflow: hidden;
  color: var(--ot-muted);
  font-size: 11.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wppm-ot-shell .wppm-ot-sidebar .wppm_edit_task_details_widget:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ot-primary-light);
}
/* Checklist card title, like Subtasks */
.wppm-ot-shell .wppm-ot-checklists-head {
  margin-bottom: 4px !important;
}
/* The chips row above already ends with a divider: no second line before the tiles */
.wppm-ot-shell .wppm-ot-details .wppm-op-facts-section {
  margin-top: 0;
  padding-top: 14px;
  border-top: none;
}

/* =====================================================================
   Task overview v2: icon list details, card headers with actions, empty states
   ===================================================================== */
/* ---------- Details: two columns of icon + label + value, separated by lines ---------- */
.wppm-ot-shell .wppm-ot-details .wppm-op-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
  row-gap: 0;
}
.wppm-ot-shell .wppm-ot-details .wppm-op-fact {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  padding: 12px 0;
  border: none;
  border-bottom: 1px solid #eef2f7;
  border-radius: 0;
  background: transparent;
}
.wppm-ot-shell .wppm-ot-details .wppm-op-fact > dt,
.wppm-ot-shell .wppm-ot-details .wppm-op-fact > dd {
  grid-column: 2;
}
.wppm-ot-shell .wppm-ot-details .wppm-op-fact > dt {
  margin: 0 0 2px !important;
}
.wppm-ot-shell .wppm-op-fact-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50%;
  background: var(--ot-soft);
  color: #475569;
  font-size: 17px !important;
}
.wppm-ot-shell .wppm-ot-details .wppm-op-fact.is-overdue {
  border-color: #eef2f7;
  background: transparent;
}
.wppm-ot-shell .wppm-ot-details .wppm-op-fact.is-overdue .wppm-op-fact-icon {
  background: #fef2f2;
  color: #dc2626;
}
/* Custom fields (no icon): label and value use the full width */
.wppm-ot-shell .wppm-ot-details .wppm-cf-fact {
  grid-template-columns: minmax(0, 1fr);
}
.wppm-ot-shell .wppm-ot-details .wppm-cf-fact > dt,
.wppm-ot-shell .wppm-ot-details .wppm-cf-fact > dd {
  grid-column: 1;
}
.wppm-ot-shell .wppm-ot-details .wppm-op-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wppm-ot-shell .wppm-ot-details .wppm-op-section-title .dashicons {
  width: 16px;
  height: 16px;
  color: var(--ot-muted);
  font-size: 16px;
}
@media (max-width: 600px) {
  .wppm-ot-shell .wppm-ot-details .wppm-op-facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Card headers: title on the left, add action on the right ---------- */
.wppm-ot-shell .wppm-ot-card-head {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px !important;
}
.wppm-ot-shell .wppm-ot-card-head::before,
.wppm-ot-shell .wppm-ot-card-head::after {
  content: none !important;
}
.wppm-ot-shell .wppm-ot-card-head > [class*="col-"] {
  float: none;
  width: auto;
  padding: 0;
}
.wppm-ot-shell .wppm-ot-card-head-actions {
  margin-left: auto;
}
.wppm-ot-shell .wppm-ot-card-add {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #e0e7ff;
  border-radius: 9px;
  background: var(--ot-primary-light);
  color: var(--ot-primary);
  font: 600 12.5px/1 var(--ot-font);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.wppm-ot-shell .wppm-ot-card-add:hover {
  border-color: #c7d2fe;
  background: #e0e7ff;
}
.wppm-ot-shell .wppm-ot-card-add:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #c7d2fe;
}
.wppm-ot-shell .wppm-ot-card-add .dashicons {
  width: 14px;
  height: 14px;
  font-size: 14px;
}
/* The old in-card add links stay in the page (scripts use them) but the header button replaces them */
.wppm-ot-shell #wppm_task_subtask_container .row:has(> .col-sm-12 > #wppm_add_subtask_btn) {
  display: none !important;
}
.wppm-ot-shell #wppm_add_checklist_container #wppm_add_checklist {
  display: none !important;
}
.wppm-ot-shell #wppm_add_checklist_container > br {
  display: none;
}

/* ---------- Empty states ---------- */
.wppm-ot-shell .wppm-ot-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 6px 0 2px;
  padding: 18px 14px;
  border-radius: 12px;
  background: var(--ot-bg);
  text-align: center;
}
.wppm-ot-shell .wppm-ot-empty-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 40px !important;
  margin-bottom: 4px;
  border-radius: 12px;
  background: var(--ot-primary-light);
  color: var(--ot-primary);
  font-size: 20px !important;
}
.wppm-ot-shell .wppm-ot-empty-title {
  color: var(--ot-ink);
  font: 600 13.5px/1.3 var(--ot-font);
}
.wppm-ot-shell .wppm-ot-empty-text {
  color: var(--ot-muted);
  font-size: 12.5px;
}
/* The round icon already shows the folder; no second one inside the Project value */
.wppm-ot-shell .wppm-ot-details .wppm-op-fact-tag .dashicons {
  display: none;
}