/* ================================================================
   Work Enhance Styles
   ================================================================ */

/* §1 — Confirm Overlay (shared by project builder + report wizard) */
.wke-confirm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100001;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
}
.wke-confirm-overlay.is-open {
  display: flex;
}
.wke-confirm-box {
  background: var(--c-surface, #fff);
  border-radius: 16px;
  padding: 28px 32px 24px;
  max-width: 420px;
  width: 92vw;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  text-align: center;
  animation: wkeSlideUp .2s ease;
}
@keyframes wkeSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wke-confirm-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-text, #1e293b);
  margin-bottom: 8px;
}
.wke-confirm-msg {
  font-size: .88rem;
  color: var(--c-gray, #64748b);
  line-height: 1.5;
  margin-bottom: 20px;
}
.wke-confirm-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.wke-btn {
  padding: 9px 18px;
  border-radius: 10px;
  font-size: .85rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.wke-btn--cancel {
  background: var(--c-border, #e2e8f0);
  color: var(--c-text, #1e293b);
}
.wke-btn--cancel:hover { background: #cbd5e1; }
.wke-btn--discard {
  background: #fef2f2;
  color: #dc2626;
}
.wke-btn--discard:hover { background: #fee2e2; }
.wke-btn--save {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff;
  box-shadow: 0 2px 8px rgba(124,58,237,.3);
}
.wke-btn--save:hover { box-shadow: 0 4px 14px rgba(124,58,237,.4); }

/* §2 — Inline date picker (keep for standalone pickers if needed) */
.wke-inline-date {
  font-size: .88rem;
  padding: 8px 12px;
  border: 2px solid var(--c-accent, #7c3aed);
  border-radius: 10px;
  background: var(--c-surface, #fff);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  outline: none;
  min-width: 160px;
}

/* §3 — Inline assignee picker (keep for standalone pickers if needed) */
.wke-inline-assignee {
  background: var(--c-surface, #fff);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
  border: 1px solid var(--c-border, #e2e8f0);
  min-width: 200px;
  max-width: 260px;
  overflow: hidden;
}
.wke-ia-search {
  padding: 8px 10px;
  border-bottom: 1px solid var(--c-border, #e2e8f0);
}
.wke-ia-input {
  width: 100%;
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: .85rem;
  outline: none;
}
.wke-ia-input:focus { border-color: var(--c-accent, #7c3aed); }
.wke-ia-list {
  max-height: 200px;
  overflow-y: auto;
}
.wke-ia-item {
  padding: 8px 14px;
  font-size: .85rem;
  cursor: pointer;
  transition: background .1s;
}
.wke-ia-item:hover {
  background: var(--c-hover, #f1f5f9);
}

/* §4 — Priority badge is display-only (no click-to-cycle). Editing happens
   through the pencil → inline editor, so the pill shows no interactive
   affordance. */
.mw-task-card .mw-pill--pri {
  cursor: default;
}

/* §5 — Edit (pencil) button on task cards.
   Hidden by default; revealed only when hovering/focusing THAT card, and
   only injected on cards the current user owns (see work-enhance.js). */
.wke-card-edit-btn {
  /* Always in the layout (so it can transition SMOOTHLY), but invisible and
     non-interactive until you hover/focus the card — the exact pattern the
     delete (×) button uses, which is proven to reveal reliably here.
     opacity+transform animate; display:none can't. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink3, #8d8d8d);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(6px) scale(.9);
  pointer-events: none;
  transition: opacity .18s var(--ease-spring, ease),
              transform .18s var(--ease-spring, ease),
              background .14s, color .14s;
}
.wke-card-edit-btn svg {
  width: 15px;
  height: 15px;
}
/* Reveal on card hover / keyboard focus */
.mw-task-card:hover .wke-card-edit-btn,
.mw-task-card:focus-within .wke-card-edit-btn,
.wke-card-edit-btn:focus-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.wke-card-edit-btn:hover {
  background: var(--c-green-bg, #defbe6);
  color: var(--c-green, #16a34a);
}
.wke-card-edit-btn:focus-visible {
  outline: 2px solid var(--c-green, #16a34a);
  outline-offset: 1px;
}

/* The compact task-card hover tooltips (priority/status/due "tips") live on
   pills INSIDE a card that has overflow:hidden, so the pure-CSS ::after
   tooltip gets clipped — you get a stray half-box like "…first". The pill
   labels already say everything, so suppress those clipped tooltips on task
   cards. (Tooltips elsewhere — goal alerts, panels — are unaffected.) */
.mw-task-card [data-wk-tip]::after,
.mw-task-card [data-wk-tip]::before {
  display: none !important;
}

/* §6 — While editing, the inline editor (a sibling inserted right after the
   card) visually replaces the card, so hide the card itself entirely. */
.mw-task-card.wke-editing {
  display: none;
}

/* §6b — Inline title rename on the card front (click the title to edit it in
   place). Show a clear editable affordance without shifting layout. */
.mw-task-card-title {
  cursor: text;
  border-radius: 5px;
}
/* …but NOT on a deliverable. Its title is not renamed from the card front
   (see _wireInlineTitleRename), so a text caret out here is a lie about what
   the click does — the card opens the record. */
.wk-deliv-card .mw-task-card-title { cursor: inherit; }
.mw-task-card-title.wke-title-editing {
  outline: 2px solid var(--c-green, #16a34a);
  outline-offset: 2px;
  background: var(--c-green-bg, #f0fdf4);
  cursor: text;
  white-space: normal;
  -webkit-user-modify: read-write-plaintext-only;
}

/* §7 — Full inline editor panel (green-themed to match the app) */
.wke-inline-editor {
  background: var(--surf, #fff);
  border: 1px solid var(--c-green-soft, #a7f0ba);
  border-radius: var(--radius, 16px);
  margin: 4px 0 8px;
  box-shadow: var(--shadow-lg, 0 8px 28px rgba(0,0,0,.09));
  animation: wkeSlideUp .2s var(--ease-spring, ease);
  overflow: visible;
}
.wke-ie-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-s, #f4f4f4);
  background: var(--c-green-bg, #defbe6);
  border-radius: var(--radius, 16px) var(--radius, 16px) 0 0;
}
.wke-ie-label {
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink, #161616);
  display: flex;
  align-items: center;
  gap: 7px;
}
.wke-ie-label::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-green, #16a34a);
}
.wke-ie-actions {
  display: flex;
  gap: 8px;
}
.wke-ie-btn {
  padding: 7px 18px;
  border-radius: var(--radius-sm, 10px);
  font-size: .82rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .1s;
}
.wke-ie-btn:active { transform: translateY(1px); }
.wke-ie-btn--save {
  background: var(--c-green, #16a34a);
  color: #fff;
  box-shadow: 0 2px 8px rgba(22,163,74,.25);
}
.wke-ie-btn--save:hover {
  background: #128a3e;
  box-shadow: 0 4px 14px rgba(22,163,74,.35);
}
.wke-ie-btn--cancel {
  background: var(--wt-neutral-bg, #f4f4f4);
  color: var(--ink2, #525252);
}
.wke-ie-btn--cancel:hover { background: var(--border, #e0e0e0); }

.wke-ie-body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wke-ie-row {
  display: flex;
  gap: 12px;
}
.wke-ie-field {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.wke-ie-field--full {
  width: 100%;
}
.wke-ie-lbl {
  font-size: .72rem;
  font-weight: 700;
  color: var(--ink2-4, #6b7280);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.wke-ie-input,
.wke-ie-select,
.wke-ie-textarea {
  font-size: .88rem;
  padding: 9px 11px;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: var(--radius-sm, 10px);
  background: var(--surf, #fff);
  color: var(--ink, #161616);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.wke-ie-input:focus,
.wke-ie-select:focus,
.wke-ie-textarea:focus {
  border-color: var(--c-green, #16a34a);
  box-shadow: 0 0 0 3px rgba(22,163,74,.12);
}
.wke-ie-textarea {
  resize: vertical;
  min-height: 48px;
}
.wke-ie-time-row {
  display: flex;
  gap: 8px;
}
.wke-ie-input--sm {
  width: 70px;
  flex-shrink: 0;
}
.wke-ie-select--sm {
  width: 80px;
  flex-shrink: 0;
}
.wke-ie-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  color: var(--ink, #161616);
  cursor: pointer;
  padding: 8px 0;
}
.wke-ie-check-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--c-green, #16a34a);
  cursor: pointer;
}

/* §8 — Assignee faces picker */
.wke-ie-assignee { position: relative; }
.wke-asg-current {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: var(--radius-sm, 10px);
  background: var(--surf, #fff);
  cursor: pointer;
  min-height: 42px;
  transition: border-color .15s, box-shadow .15s;
}
.wke-asg-current:hover { border-color: var(--c-green-soft, #a7f0ba); }
.wke-asg-current:focus-visible {
  outline: none;
  border-color: var(--c-green, #16a34a);
  box-shadow: 0 0 0 3px rgba(22,163,74,.12);
}
.wke-asg-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.wke-asg-name {
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink, #161616);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wke-asg-empty {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .86rem;
  color: var(--ink3, #8d8d8d);
}
.wke-asg-empty svg { width: 16px; height: 16px; }
.wke-asg-caret { width: 16px; height: 16px; color: var(--ink3, #8d8d8d); flex-shrink: 0; }

/* Face avatar (shared look for chip + list) */
.wke-asg-face,
.wke-asg-opt-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  line-height: 1;
}
.wke-asg-face--img, .wke-asg-opt-face--img { background: #e0e0e0; }
.wke-asg-face img,
.wke-asg-opt-face img { width: 100%; height: 100%; object-fit: cover; }

/* Dropdown — positioned as position:fixed by JS (see _asgPosition) so it
   escapes the card's overflow:hidden and the scrollable list. z-index sits
   above the app chrome so it's never covered. */
.wke-asg-pop {
  position: fixed;
  z-index: 3000;
  background: var(--surf, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: var(--radius-sm, 10px);
  box-shadow: var(--shadow-xl, 0 16px 48px rgba(0,0,0,.18));
  padding: 8px;
  animation: wkeSlideUp .14s var(--ease-spring, ease);
}
.wke-asg-pop[hidden] { display: none; }
.wke-asg-search {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 8px;
  font-size: .84rem;
  font-family: inherit;
  outline: none;
  margin-bottom: 6px;
}
.wke-asg-search:focus { border-color: var(--c-green, #16a34a); box-shadow: 0 0 0 3px rgba(22,163,74,.1); }
.wke-asg-list { max-height: 230px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.wke-asg-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background .12s;
}
.wke-asg-opt:hover { background: var(--wt-neutral-bg, #f4f4f4); }
.wke-asg-opt.is-selected { background: var(--c-green-bg, #defbe6); }
.wke-asg-opt-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wke-asg-opt-name { font-size: .86rem; font-weight: 600; color: var(--ink, #161616); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wke-asg-opt-role { font-size: .74rem; color: var(--ink3, #8d8d8d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wke-asg-empty--opt {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--wt-neutral-bg, #f4f4f4);
  justify-content: center;
}
.wke-asg-empty--opt svg { width: 15px; height: 15px; color: var(--ink3, #8d8d8d); }
.wke-asg-opt-check { width: 17px; height: 17px; color: var(--c-green, #16a34a); flex-shrink: 0; opacity: 0; }
.wke-asg-opt.is-selected .wke-asg-opt-check { opacity: 1; }

/* Responsive: stack fields on small screens */
@media (max-width: 560px) {
  .wke-ie-row { flex-direction: column; gap: 10px; }
}