/* ═══════════════════════════════════════════════════════════ */
/*  People Picker — all rules scoped to .pp- prefix           */
/*  All positioning/display rules use !important to prevent   */
/*  parent modal CSS from overriding.                         */
/* ═══════════════════════════════════════════════════════════ */

/* ── CHIP DISPLAY (in host forms) ── */
.people-field { border: 1px solid #e2e8f0 !important; border-radius: 8px !important; padding: 8px 10px !important; min-height: 42px !important; display: flex !important; flex-wrap: wrap !important; gap: 5px !important; align-items: center !important; background: #fafbfc !important; cursor: pointer !important; transition: all 0.15s !important; }
.people-field:hover { border-color: #93c5fd !important; background: #f8fafc !important; }
.people-field.has-items { background: white !important; }

.person-chip { display: inline-flex !important; align-items: center !important; gap: 5px !important; background: #eff6ff !important; border: 1px solid #bfdbfe !important; border-radius: 16px !important; padding: 3px 8px 3px 3px !important; font-size: 11px !important; font-weight: 500 !important; color: #1e293b !important; transition: all 0.1s !important; }
.person-chip:hover { background: #dbeafe !important; }
.person-chip .av { width: 20px !important; height: 20px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 8px !important; font-weight: 700 !important; color: white !important; flex-shrink: 0 !important; }
.person-chip .remove-chip { background: none !important; border: none !important; color: #93c5fd !important; cursor: pointer !important; font-size: 14px !important; line-height: 1 !important; padding: 0 1px !important; margin-left: 2px !important; }
.person-chip .remove-chip:hover { color: #ef4444 !important; }

.group-chip { background: #f5f3ff !important; border-color: #ddd6fe !important; color: #5b21b6 !important; }
.group-chip:hover { background: #ede9fe !important; }
.group-chip .remove-chip { color: #c4b5fd !important; }
.group-chip .group-icon { font-size: 12px !important; margin-right: -2px !important; }

.people-field .add-trigger { display: inline-flex !important; align-items: center !important; gap: 4px !important; color: #2563eb !important; font-size: 11px !important; font-weight: 600 !important; cursor: pointer !important; padding: 3px 6px !important; border-radius: 4px !important; transition: background 0.1s !important; white-space: nowrap !important; }
.people-field .add-trigger:hover { background: #eff6ff !important; }
.people-field .empty-hint { color: #94a3b8 !important; font-size: 12px !important; }

/* ── MODAL OVERLAY ── */
.pp-overlay { position: fixed !important; inset: 0 !important; background: rgba(15,23,42,0.45) !important; z-index: 10000 !important; display: none !important; align-items: center !important; justify-content: center !important; backdrop-filter: blur(2px) !important; animation: ppFadeIn 0.15s !important; }
.pp-overlay.show { display: flex !important; }
@keyframes ppFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ppSlideUp { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── MODAL ── */
.pp-modal { background: white !important; border-radius: 14px !important; width: 680px !important; max-height: 80vh !important; display: flex !important; flex-direction: column !important; box-shadow: 0 24px 64px rgba(0,0,0,0.18) !important; animation: ppSlideUp 0.2s !important; overflow: hidden !important; }

/* ── HEADER ── */
.pp-header { display: flex !important; align-items: center !important; padding: 14px 20px !important; border-bottom: 1px solid #e2e8f0 !important; background: #fafbfc !important; flex-shrink: 0 !important; }
.pp-header h3 { font-size: 15px !important; font-weight: 700 !important; color: #0f172a !important; flex: 1 !important; margin: 0 !important; }
.pp-header .pp-close { background: none !important; border: none !important; font-size: 20px !important; color: #94a3b8 !important; cursor: pointer !important; padding: 2px 6px !important; border-radius: 4px !important; }
.pp-header .pp-close:hover { color: #475569 !important; background: #f1f5f9 !important; }

/* ── SEARCH BAR ── */
.pp-search-bar { display: flex !important; align-items: center !important; gap: 8px !important; padding: 10px 20px !important; border-bottom: 1px solid #f1f5f9 !important; background: white !important; flex-shrink: 0 !important; }
.pp-search-bar .search-icon { color: #94a3b8 !important; font-size: 14px !important; flex-shrink: 0 !important; }
.pp-search-bar input { flex: 1 !important; border: none !important; outline: none !important; font-size: 13px !important; padding: 4px 0 !important; background: transparent !important; }
.pp-search-bar input::placeholder { color: #cbd5e1 !important; }
.pp-selected-count { font-size: 11px !important; color: #2563eb !important; font-weight: 600 !important; background: #eff6ff !important; padding: 3px 10px !important; border-radius: 10px !important; white-space: nowrap !important; }

/* ── BODY (two-pane) ── */
.pp-body { display: flex !important; flex: 1 !important; overflow: hidden !important; min-height: 320px !important; }

/* ── LEFT SIDEBAR ── */
.pp-sidebar { width: 200px !important; border-right: 1px solid #e2e8f0 !important; display: flex !important; flex-direction: column !important; background: #fafbfc !important; flex-shrink: 0 !important; }
.pp-sidebar-header { padding: 10px 14px 6px !important; font-size: 10px !important; font-weight: 700 !important; color: #94a3b8 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; }
.pp-sidebar-list { flex: 1 !important; overflow-y: auto !important; }
.pp-org-item { display: flex !important; align-items: center !important; gap: 8px !important; padding: 8px 14px !important; cursor: pointer !important; font-size: 12px !important; font-weight: 500 !important; color: #334155 !important; border-left: 3px solid transparent !important; transition: all 0.1s !important; position: relative !important; }
.pp-org-item:hover { background: #f0f7ff !important; }
.pp-org-item.active { background: #eff6ff !important; border-left-color: #2563eb !important; color: #1d4ed8 !important; font-weight: 600 !important; }
.pp-org-item .org-color { width: 8px !important; height: 8px !important; border-radius: 2px !important; flex-shrink: 0 !important; }
.pp-org-item .org-count { font-size: 10px !important; color: #94a3b8 !important; margin-left: auto !important; font-weight: 400 !important; }
.pp-org-item.active .org-count { color: #60a5fa !important; }
.pp-org-item .org-check-count { position: absolute !important; right: 8px !important; top: 4px !important; background: #2563eb !important; color: white !important; font-size: 8px !important; font-weight: 700 !important; width: 14px !important; height: 14px !important; border-radius: 7px !important; display: flex !important; align-items: center !important; justify-content: center !important; }

.pp-sidebar-divider { height: 1px !important; background: #e2e8f0 !important; margin: 6px 0 !important; }

.pp-saved-item { display: flex !important; align-items: center !important; gap: 8px !important; padding: 8px 14px !important; cursor: pointer !important; font-size: 12px !important; font-weight: 500 !important; color: #6d28d9 !important; border-left: 3px solid transparent !important; transition: all 0.1s !important; }
.pp-saved-item:hover { background: #faf5ff !important; }
.pp-saved-item.active { background: #f5f3ff !important; border-left-color: #7c3aed !important; font-weight: 600 !important; }
.pp-saved-item .group-icon { font-size: 13px !important; }
.pp-saved-item .org-count { font-size: 10px !important; color: #a78bfa !important; margin-left: auto !important; font-weight: 400 !important; }

/* ── RIGHT CONTENT ── */
.pp-content { flex: 1 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; min-width: 0 !important; }

.pp-content-header { display: flex !important; align-items: center !important; gap: 10px !important; padding: 10px 16px !important; background: white !important; border-bottom: 1px solid #f1f5f9 !important; flex-shrink: 0 !important; }
.pp-content-header .org-name { font-size: 13px !important; font-weight: 700 !important; color: #1e293b !important; }
.pp-content-header .org-trade { font-size: 10px !important; color: #64748b !important; background: #f1f5f9 !important; padding: 2px 8px !important; border-radius: 4px !important; }
.pp-select-all { display: flex !important; align-items: center !important; gap: 6px !important; margin-left: auto !important; font-size: 11px !important; color: #2563eb !important; cursor: pointer !important; font-weight: 600 !important; }
.pp-select-all input { accent-color: #2563eb !important; }

/* ── People list ── */
.pp-people-list { flex: 1 !important; overflow-y: auto !important; }
.pp-person-row { display: flex !important; align-items: center !important; gap: 10px !important; padding: 9px 16px !important; border-bottom: 1px solid #f8fafc !important; cursor: pointer !important; transition: background 0.08s !important; }
.pp-person-row:hover { background: #f0f7ff !important; }
.pp-person-row.checked { background: #eff6ff !important; }
.pp-person-row input[type="checkbox"] { accent-color: #2563eb !important; width: 15px !important; height: 15px !important; cursor: pointer !important; flex-shrink: 0 !important; }
.pp-person-row .av { width: 30px !important; height: 30px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 11px !important; font-weight: 700 !important; color: white !important; flex-shrink: 0 !important; }
.pp-person-info { flex: 1 !important; min-width: 0 !important; }
.pp-person-info .name { font-size: 13px !important; font-weight: 600 !important; color: #1e293b !important; }
.pp-person-info .detail { font-size: 11px !important; color: #64748b !important; margin-top: 1px !important; }
.pp-person-role { font-size: 10px !important; color: #94a3b8 !important; background: #f8fafc !important; padding: 2px 8px !important; border-radius: 4px !important; white-space: nowrap !important; }

/* ── "All" grouped view ── */
.pp-all-group { padding: 0 !important; }
.pp-all-group-header { display: flex !important; align-items: center !important; gap: 8px !important; padding: 6px 16px !important; background: #f8fafc !important; border-bottom: 1px solid #e2e8f0 !important; cursor: pointer !important; user-select: none !important; }
.pp-all-group-header .org-dot { width: 6px !important; height: 6px !important; border-radius: 2px !important; }
.pp-all-group-header .group-name { font-size: 11px !important; font-weight: 700 !important; color: #475569 !important; text-transform: uppercase !important; letter-spacing: 0.3px !important; flex: 1 !important; }
.pp-all-group-header .expand-icon { font-size: 9px !important; color: #94a3b8 !important; transition: transform 0.2s !important; }
.pp-all-group-header .select-all-mini { font-size: 10px !important; color: #2563eb !important; font-weight: 600 !important; cursor: pointer !important; margin-left: auto !important; padding: 2px 6px !important; border-radius: 3px !important; }
.pp-all-group-header .select-all-mini:hover { background: #eff6ff !important; }

/* ── SELECTED PREVIEW (bottom) ── */
.pp-selected-preview { border-top: 1px solid #e2e8f0 !important; padding: 10px 16px !important; background: #fafbfc !important; flex-shrink: 0 !important; }
.pp-selected-label { font-size: 10px !important; font-weight: 700 !important; color: #64748b !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; margin-bottom: 6px !important; }
.pp-selected-chips { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; max-height: 60px !important; overflow-y: auto !important; }
.pp-mini-chip { display: inline-flex !important; align-items: center !important; gap: 3px !important; background: #eff6ff !important; border: 1px solid #bfdbfe !important; border-radius: 12px !important; padding: 2px 6px 2px 2px !important; font-size: 10px !important; font-weight: 500 !important; color: #1e293b !important; }
.pp-mini-chip .av-mini { width: 16px !important; height: 16px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 7px !important; font-weight: 700 !important; color: white !important; }
.pp-mini-chip .rm { background: none !important; border: none !important; color: #93c5fd !important; cursor: pointer !important; font-size: 12px !important; line-height: 1 !important; }
.pp-mini-chip .rm:hover { color: #ef4444 !important; }
.pp-empty-selected { font-size: 11px !important; color: #94a3b8 !important; font-style: italic !important; }

/* ── FOOTER ── */
.pp-footer { display: flex !important; align-items: center !important; gap: 8px !important; padding: 12px 20px !important; border-top: 1px solid #e2e8f0 !important; background: white !important; flex-shrink: 0 !important; }
.pp-save-group-btn { display: flex !important; align-items: center !important; gap: 4px !important; background: none !important; border: 1px solid #ddd6fe !important; border-radius: 6px !important; padding: 6px 12px !important; font-size: 11px !important; font-weight: 600 !important; color: #7c3aed !important; cursor: pointer !important; }
.pp-save-group-btn:hover { background: #faf5ff !important; }
.pp-footer-spacer { flex: 1 !important; }
.pp-cancel-btn { padding: 8px 16px !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 600 !important; cursor: pointer !important; border: 1px solid #d1d5db !important; background: white !important; color: #475569 !important; }
.pp-cancel-btn:hover { background: #f1f5f9 !important; }
.pp-confirm-btn { padding: 8px 20px !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 600 !important; cursor: pointer !important; border: none !important; background: #2563eb !important; color: white !important; }
.pp-confirm-btn:hover { background: #1d4ed8 !important; }

/* ── SAVE GROUP INLINE FORM ── */
.pp-save-inline { display: flex !important; align-items: center !important; gap: 8px !important; margin-right: auto !important; }
.pp-save-inline input { padding: 5px 10px !important; border: 1px solid #ddd6fe !important; border-radius: 6px !important; font-size: 12px !important; outline: none !important; width: 180px !important; }
.pp-save-inline input:focus { border-color: #7c3aed !important; box-shadow: 0 0 0 2px rgba(124,58,237,0.15) !important; }
.pp-save-inline .save-confirm { padding: 5px 12px !important; border-radius: 6px !important; font-size: 11px !important; font-weight: 600 !important; cursor: pointer !important; border: none !important; background: #7c3aed !important; color: white !important; }
.pp-save-inline .save-confirm:hover { background: #6d28d9 !important; }
.pp-save-inline .save-cancel { background: none !important; border: none !important; color: #94a3b8 !important; cursor: pointer !important; font-size: 14px !important; }

/* ═══════════════════════════════════════════════════════════ */
/*  Assignee Tracker — Card Row Design (Option A)             */
/*  Shared across RFI + Submittal detail views                */
/* ═══════════════════════════════════════════════════════════ */

.at-progress { height: 3px !important; background: #e2e8f0 !important; border-radius: 2px !important; margin-bottom: 12px !important; overflow: hidden !important; }
.at-progress-fill { height: 100% !important; border-radius: 2px !important; transition: width 0.3s !important; }
.at-progress-fill.green { background: #10b981 !important; }
.at-progress-fill.blue { background: #3b82f6 !important; }
.at-progress-fill.red { background: #ef4444 !important; }

.at-list { display: flex !important; flex-direction: column !important; gap: 6px !important; }

.at-row { display: flex !important; align-items: center !important; gap: 8px !important; padding: 6px 10px !important; border-radius: 8px !important; background: #f8fafc !important; border: 1px solid #f1f5f9 !important; transition: all 0.15s !important; }
.at-row:hover { background: #f0f7ff !important; border-color: #e0ecff !important; }
.at-row.at-active { background: #f0f7ff !important; border-color: #bfdbfe !important; }
.at-row.at-dimmed { opacity: 0.45 !important; }
.at-row.at-muted { opacity: 0.7 !important; }

.at-row .at-av { width: 24px !important; height: 24px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 9px !important; font-weight: 700 !important; color: white !important; flex-shrink: 0 !important; }
.at-row .at-info { flex: 1 !important; min-width: 0 !important; }
.at-row .at-name { font-size: 11px !important; font-weight: 600 !important; color: #1e293b !important; }
.at-row .at-company { font-size: 9px !important; color: #94a3b8 !important; }
.at-row .at-step { font-size: 8px !important; font-weight: 700 !important; color: #94a3b8 !important; background: #f1f5f9 !important; border-radius: 4px !important; padding: 2px 5px !important; flex-shrink: 0 !important; }

.at-badge { font-size: 8px !important; font-weight: 700 !important; padding: 2px 8px !important; border-radius: 10px !important; flex-shrink: 0 !important; text-transform: uppercase !important; letter-spacing: 0.3px !important; white-space: nowrap !important; }
.at-badge-pending { background: #fef3c7 !important; color: #92400e !important; }
.at-badge-responded { background: #d1fae5 !important; color: #065f46 !important; }
.at-badge-bic { background: #dbeafe !important; color: #1e40af !important; }
.at-badge-overdue { background: #fee2e2 !important; color: #991b1b !important; }
.at-badge-approved { background: #d1fae5 !important; color: #065f46 !important; }
.at-badge-approved-noted { background: #dbeafe !important; color: #1e40af !important; }
.at-badge-no-exception { background: #f0fdf4 !important; color: #166534 !important; }
.at-badge-revise { background: #fef3c7 !important; color: #92400e !important; }
.at-badge-rejected { background: #fee2e2 !important; color: #991b1b !important; }
.at-badge-waiting { background: #f1f5f9 !important; color: #94a3b8 !important; }
.at-badge-reviewing { background: #dbeafe !important; color: #1e40af !important; }

.at-bic { font-size: 7px !important; font-weight: 700 !important; color: white !important; background: #2563eb !important; padding: 1px 5px !important; border-radius: 3px !important; margin-left: 3px !important; }
.at-req { color: #ef4444 !important; font-size: 9px !important; margin-left: 2px !important; }

.at-note { font-size: 10px !important; color: #475569 !important; background: #f8fafc !important; border-left: 2px solid #cbd5e1 !important; padding: 4px 8px !important; margin-top: 4px !important; border-radius: 0 4px 4px 0 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
.at-note.at-note-ok { border-left-color: #10b981 !important; background: #f0fdf4 !important; color: #065f46 !important; }
.at-note.at-note-noted { border-left-color: #3b82f6 !important; background: #eff6ff !important; color: #1e40af !important; }
.at-note.at-note-revise { border-left-color: #f59e0b !important; background: #fffbeb !important; color: #92400e !important; }
.at-note.at-note-reject { border-left-color: #ef4444 !important; background: #fef2f2 !important; color: #991b1b !important; }

.at-add-row { display: flex !important; justify-content: center !important; padding: 5px 0 !important; }
.at-add-btn { background: none !important; border: 1px dashed #cbd5e1 !important; border-radius: 6px !important; padding: 4px 12px !important; font-size: 10px !important; font-weight: 600 !important; color: #2563eb !important; cursor: pointer !important; transition: all 0.15s !important; }
.at-add-btn:hover { border-color: #93c5fd !important; background: #eff6ff !important; }

.at-template { display: inline-flex !important; align-items: center !important; gap: 4px !important; font-size: 8px !important; color: #7c3aed !important; background: #f5f3ff !important; border: 1px solid #ede9fe !important; border-radius: 4px !important; padding: 2px 6px !important; margin-top: 6px !important; }

.at-closed-banner { display: flex !important; align-items: center !important; gap: 6px !important; padding: 6px 12px !important; border-radius: 6px !important; margin-bottom: 10px !important; font-size: 10px !important; font-weight: 600 !important; }
.at-closed-banner .at-closed-icon { font-size: 12px !important; }
.at-closed-banner.at-closed-ok { background: #f0fdf4 !important; border: 1px solid #bbf7d0 !important; color: #166534 !important; }
.at-closed-banner.at-closed-reject { background: #fef2f2 !important; border: 1px solid #fecaca !important; color: #991b1b !important; }
.at-closed-banner .at-closed-date { font-weight: 400 !important; margin-left: auto !important; font-size: 10px !important; color: #4ade80 !important; }
.at-closed-banner.at-closed-reject .at-closed-date { color: #f87171 !important; }

/* Response actions (for active reviewer) */
.at-resp-area { width: 100% !important; margin-top: 6px !important; padding-top: 6px !important; border-top: 1px solid #e2e8f0 !important; }
.at-resp-area textarea { width: 100% !important; border: 1px solid #d1d5db !important; border-radius: 5px !important; padding: 5px 7px !important; font-size: 10px !important; resize: vertical !important; min-height: 40px !important; outline: none !important; font-family: inherit !important; box-sizing: border-box !important; }
.at-resp-area textarea:focus { border-color: #3b82f6 !important; box-shadow: 0 0 0 2px rgba(59,130,246,0.15) !important; }
.at-resp-actions { display: flex !important; gap: 4px !important; margin-top: 6px !important; flex-wrap: wrap !important; }
.at-resp-btn { padding: 3px 8px !important; border-radius: 4px !important; font-size: 8px !important; font-weight: 700 !important; cursor: pointer !important; border: 1px solid !important; transition: all 0.12s !important; text-transform: uppercase !important; letter-spacing: 0.3px !important; }
.at-resp-btn:hover { filter: brightness(0.95) !important; }
.at-resp-btn.at-btn-approve { background: #d1fae5 !important; border-color: #6ee7b7 !important; color: #065f46 !important; }
.at-resp-btn.at-btn-noted { background: #dbeafe !important; border-color: #93c5fd !important; color: #1e40af !important; }
.at-resp-btn.at-btn-no-exc { background: #f0fdf4 !important; border-color: #bbf7d0 !important; color: #166534 !important; }
.at-resp-btn.at-btn-revise { background: #fef3c7 !important; border-color: #fde68a !important; color: #92400e !important; }
.at-resp-btn.at-btn-reject { background: #fee2e2 !important; border-color: #fecaca !important; color: #991b1b !important; }