<?php $pageTitle = 'Email Notifications'; ?>
<?php include dirname(__DIR__) . '/partials/help-styles.php'; ?>

<style>
.nf-page { max-width: 920px; }
.nf-section { margin-bottom: 2.75rem; }
.nf-section > h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 1rem; padding-bottom: .45rem; border-bottom: 2px solid var(--border-color); color: var(--text-primary); display: flex; align-items: center; gap: .55rem; }
.nf-cat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.nf-flow { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; margin-bottom: .85rem; overflow: hidden; }
.nf-flow-head { padding: .6rem 1rem; display: flex; align-items: center; gap: .6rem; border-bottom: 1px solid var(--border-color); }
.nf-icon { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nf-flow-title { font-weight: 600; font-size: .9rem; color: var(--text-primary); }
.nf-badge { margin-left: auto; font-size: .75rem; color: var(--text-muted); background: var(--bg-secondary); padding: 2px 8px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
.nf-badge-off { background: #fef9c3; color: #854d0e; }
.nf-flow-body { padding: .85rem 1rem; display: flex; align-items: stretch; gap: 0; }
.nf-step { display: flex; flex-direction: column; justify-content: center; }
.nf-arrow { display: flex; align-items: center; padding: 0 .65rem; color: var(--text-muted); font-size: 1.2rem; flex-shrink: 0; }
.nf-box { border-radius: 7px; padding: .55rem .8rem; font-size: .85rem; line-height: 1.5; }
.nf-box b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .2rem; opacity: .65; }
.nf-trigger { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.nf-mail { background: #eff6ff; border: 1px solid #93c5fd; color: #1e3a5f; min-width: 190px; }
.nf-mail .sub { font-weight: 600; font-size: .87rem; margin-bottom: .25rem; }
.nf-mail .prv { font-size: .8rem; color: #3b5998; opacity: .85; }
.nf-recv { background: #fdf4ff; border: 1px solid #e9d5ff; color: #581c87; }
.nf-recv ul { margin: .2rem 0 0; padding-left: 1rem; font-size: .82rem; }
.nf-recv li { margin-bottom: .1rem; }
.nf-cond { padding: 0 1rem .7rem; display: flex; flex-direction: column; gap: .3rem; }
.nf-cond-box { border-radius: 6px; padding: .4rem .75rem; font-size: .81rem; }
.nf-cond-box strong { font-weight: 700; }
.cond-std { background: #fffbeb; border: 1px solid #fcd34d; color: #78350f; }
.cond-note { background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12; }
.cond-off { background: #fef9c3; border: 1px solid #fde047; color: #713f12; }
.nf-toc { background: var(--bg-secondary); border-radius: 10px; padding: 1rem 1.2rem; margin-bottom: 2.25rem; }
.nf-toc p { font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: 0 0 .55rem; }
.nf-toc-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .15rem .5rem; }
.nf-toc a { font-size: .87rem; color: var(--color-primary); text-decoration: none; display: block; padding: .12rem 0; }
.nf-toc a:hover { text-decoration: underline; }
@media (max-width: 640px) {
    .nf-flow-body { flex-direction: column; gap: .4rem; }
    .nf-arrow { padding: .25rem 0; transform: rotate(90deg); align-self: center; }
    .nf-badge { display: none; }
}
</style>

<div class="page-header">
    <div class="page-header-left">
        <a href="/help" class="btn btn-ghost btn-sm">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
            Manual
        </a>
        <h1 class="page-title">Email Notifications</h1>
    </div>
</div>

<div class="nf-page">

<p style="color:var(--text-secondary);font-size:.97rem;line-height:1.75;margin-bottom:1.6rem;max-width:800px">
    Every automatic email at a glance — <strong>trigger · content · recipients</strong>. Emails are only sent when SMTP is configured and notifications are enabled. Some emails can be disabled per project (Project settings → Notifications).
</p>

<div class="nf-toc">
    <p>Contents</p>
    <div class="nf-toc-cols">
        <div>
            <a href="#start">① Task Start &amp; Predecessors</a>
            <a href="#deadlines">② Deadlines &amp; Reminders</a>
            <a href="#assignment">③ Assignment &amp; Removal</a>
        </div>
        <div>
            <a href="#changes">④ Task Changes</a>
            <a href="#manager">⑤ Manager Notifications</a>
            <a href="#account">⑥ Account &amp; Login</a>
        </div>
        <div>
            <a href="#admin">⑦ Administration</a>
            <a href="#external">⑧ External Participants</a>
        </div>
    </div>
</div>

<div class="nf-section" id="start">
<h2><span class="nf-cat-dot" style="background:#22c55e"></span>① Task Start &amp; Predecessors</h2>

<div class="nf-flow">
    <div class="nf-flow-head">
        <div class="nf-icon" style="background:#dcfce7;color:#15803d"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
        <span class="nf-flow-title">Task without predecessor starts today</span>
        <span class="nf-badge">daily · cron job</span>
    </div>
    <div class="nf-cond"><div class="nf-cond-box cond-std"><strong>Conditions:</strong> Start date = Today &nbsp;·&nbsp; no predecessor task &nbsp;·&nbsp; task not yet done &nbsp;·&nbsp; project setting enabled</div></div>
    <div class="nf-flow-body">
        <div class="nf-step"><div class="nf-box nf-trigger"><b>Trigger</b>Daily cron job</div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step" style="flex:1"><div class="nf-box nf-mail"><b>Example email</b><div class="sub">Plenvo: Task can be started – Website Relaunch</div><div class="prv">Hello Anna, the task <em>Website Relaunch</em> in project <em>Web Project 2025</em> starts today. You can begin now. Due: 15 Jun 2025.</div></div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step"><div class="nf-box nf-recv"><b>Recipients</b><ul><li>Assignees (internal)</li><li>Assignees (external, with email)</li></ul></div></div>
    </div>
</div>

<div class="nf-flow">
    <div class="nf-flow-head">
        <div class="nf-icon" style="background:#dcfce7;color:#15803d"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg></div>
        <span class="nf-flow-title">Last predecessor task completed</span>
        <span class="nf-badge">immediately · status change</span>
    </div>
    <div class="nf-cond">
        <div class="nf-cond-box cond-std"><strong>Conditions:</strong> Task A set to "Done" &nbsp;·&nbsp; A is a predecessor of B &nbsp;·&nbsp; all predecessors of B are now done &nbsp;·&nbsp; B itself still open</div>
        <div class="nf-cond-box cond-note"><strong>Note:</strong> B's start date is irrelevant — the email fires even if the start date is in the past.</div>
    </div>
    <div class="nf-flow-body">
        <div class="nf-step"><div class="nf-box nf-trigger"><b>Trigger</b>User marks<br>predecessor task<br>as "Done"</div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step" style="flex:1"><div class="nf-box nf-mail"><b>Example email</b><div class="sub">Plenvo: Task can be started – Design Draft</div><div class="prv">Hello Max, all predecessor tasks of <em>Design Draft</em> in project <em>Web Project</em> are now complete. You can start your task now.</div></div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step"><div class="nf-box nf-recv"><b>Recipients</b><ul><li>Assignees of the <em>successor</em> task (internal + external)</li></ul></div></div>
    </div>
</div>
</div>

<div class="nf-section" id="deadlines">
<h2><span class="nf-cat-dot" style="background:#f59e0b"></span>② Deadlines &amp; Reminders</h2>

<div class="nf-flow">
    <div class="nf-flow-head">
        <div class="nf-icon" style="background:#fef3c7;color:#b45309"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg></div>
        <span class="nf-flow-title">3-day deadline reminder</span><span class="nf-badge">daily · cron job</span>
    </div>
    <div class="nf-cond"><div class="nf-cond-box cond-std"><strong>Conditions:</strong> Due date = Today + 3 days &nbsp;·&nbsp; task not yet done</div></div>
    <div class="nf-flow-body">
        <div class="nf-step"><div class="nf-box nf-trigger"><b>Trigger</b>Daily cron job</div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step" style="flex:1"><div class="nf-box nf-mail"><b>Example email</b><div class="sub">Plenvo: Reminder – Submit Proposal</div><div class="prv">Hello Lisa, reminder: The task <em>Submit Proposal</em> in project <em>Client Project</em> is due in <strong>3 days</strong>.</div></div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step"><div class="nf-box nf-recv"><b>Recipients</b><ul><li>Assignees (internal)</li><li>Assignees (external, with email)</li></ul></div></div>
    </div>
</div>

<div class="nf-flow">
    <div class="nf-flow-head">
        <div class="nf-icon" style="background:#fef3c7;color:#b45309"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg></div>
        <span class="nf-flow-title">Task is due today</span><span class="nf-badge">daily · cron job</span>
    </div>
    <div class="nf-cond"><div class="nf-cond-box cond-std"><strong>Conditions:</strong> Due date = Today &nbsp;·&nbsp; task not yet done</div></div>
    <div class="nf-flow-body">
        <div class="nf-step"><div class="nf-box nf-trigger"><b>Trigger</b>Daily cron job</div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step" style="flex:1"><div class="nf-box nf-mail"><b>Example email</b><div class="sub">Plenvo: Due today – Prepare Presentation</div><div class="prv">Hello Tom, reminder: The task <em>Prepare Presentation</em> in project <em>Quarterly Report</em> is due <strong>today</strong>.</div></div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step"><div class="nf-box nf-recv"><b>Recipients</b><ul><li>Assignees (internal)</li><li>Assignees (external, with email)</li></ul></div></div>
    </div>
</div>

<div class="nf-flow">
    <div class="nf-flow-head">
        <div class="nf-icon" style="background:#fee2e2;color:#b91c1c"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>
        <span class="nf-flow-title">Task is overdue</span><span class="nf-badge">daily · cron job</span>
    </div>
    <div class="nf-cond"><div class="nf-cond-box cond-std"><strong>Conditions:</strong> Due date = Yesterday &nbsp;·&nbsp; task not yet done &nbsp;·&nbsp; sent to <em>project managers</em>, not assignees</div></div>
    <div class="nf-flow-body">
        <div class="nf-step"><div class="nf-box nf-trigger"><b>Trigger</b>Daily cron job<br>(day after due date)</div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step" style="flex:1"><div class="nf-box nf-mail"><b>Example email</b><div class="sub">Plenvo: Overdue task – Server Migration</div><div class="prv">The task <em>Server Migration</em> (Project: IT Infrastructure) is <strong>overdue</strong>. Was due: 10 May 2025.</div></div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step"><div class="nf-box nf-recv"><b>Recipients</b><ul><li>Project owners</li><li>Project managers</li></ul></div></div>
    </div>
</div>
</div>

<div class="nf-section" id="assignment">
<h2><span class="nf-cat-dot" style="background:#06b6d4"></span>③ Assignment &amp; Removal</h2>

<div class="nf-flow">
    <div class="nf-flow-head">
        <div class="nf-icon" style="background:#cffafe;color:#0e7490"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg></div>
        <span class="nf-flow-title">Task assigned (internal user)</span><span class="nf-badge">immediately</span>
    </div>
    <div class="nf-cond"><div class="nf-cond-box cond-std"><strong>Conditions:</strong> Internal user added as assignee &nbsp;·&nbsp; project setting enabled</div></div>
    <div class="nf-flow-body">
        <div class="nf-step"><div class="nf-box nf-trigger"><b>Trigger</b>Manager assigns<br>task to user</div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step" style="flex:1"><div class="nf-box nf-mail"><b>Example email</b><div class="sub">Plenvo: Task assigned – Create Concept</div><div class="prv">Hello Anna, you have been assigned the task <em>Create Concept</em> in project <em>Web Project</em>.</div></div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step"><div class="nf-box nf-recv"><b>Recipients</b><ul><li>Newly assigned user</li></ul></div></div>
    </div>
</div>

<div class="nf-flow">
    <div class="nf-flow-head">
        <div class="nf-icon" style="background:#cffafe;color:#0e7490"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg></div>
        <span class="nf-flow-title">Task assigned (external participant)</span><span class="nf-badge">immediately</span>
    </div>
    <div class="nf-cond"><div class="nf-cond-box cond-std"><strong>Conditions:</strong> External participant added as assignee &nbsp;·&nbsp; email address stored &nbsp;·&nbsp; project setting enabled</div></div>
    <div class="nf-flow-body">
        <div class="nf-step"><div class="nf-box nf-trigger"><b>Trigger</b>Manager assigns<br>external participant</div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step" style="flex:1"><div class="nf-box nf-mail"><b>Example email</b><div class="sub">Plenvo: Task assigned – Check Delivery</div><div class="prv">Hello Sandra, you have been assigned the task <em>Check Delivery</em> in project <em>Warehouse Project</em>. <em>[link to task overview]</em></div></div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step"><div class="nf-box nf-recv"><b>Recipients</b><ul><li>External participant<br>(at their email)</li></ul></div></div>
    </div>
</div>

<div class="nf-flow">
    <div class="nf-flow-head">
        <div class="nf-icon" style="background:#cffafe;color:#0e7490"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="23" y1="11" x2="17" y2="11"/></svg></div>
        <span class="nf-flow-title">Removed from task</span><span class="nf-badge">immediately</span>
    </div>
    <div class="nf-cond"><div class="nf-cond-box cond-std"><strong>Conditions:</strong> User or external participant removed from task &nbsp;·&nbsp; project setting enabled</div></div>
    <div class="nf-flow-body">
        <div class="nf-step"><div class="nf-box nf-trigger"><b>Trigger</b>Manager removes<br>person from task</div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step" style="flex:1"><div class="nf-box nf-mail"><b>Example email</b><div class="sub">Plenvo: Removed from task – Create Concept</div><div class="prv">Hello Anna, you have been removed from the task <em>Create Concept</em> in project <em>Web Project</em>.</div></div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step"><div class="nf-box nf-recv"><b>Recipients</b><ul><li>Removed person<br>(internal or external)</li></ul></div></div>
    </div>
</div>
</div>

<div class="nf-section" id="changes">
<h2><span class="nf-cat-dot" style="background:#6366f1"></span>④ Task Changes &amp; Comments</h2>

<div class="nf-flow">
    <div class="nf-flow-head">
        <div class="nf-icon" style="background:#e0e7ff;color:#4338ca"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></div>
        <span class="nf-flow-title">Task changed (deadline, priority, description …)</span><span class="nf-badge">immediately</span>
    </div>
    <div class="nf-cond"><div class="nf-cond-box cond-std"><strong>Conditions:</strong> Task saved with a content change &nbsp;·&nbsp; recipient is not the one who made the change &nbsp;·&nbsp; project setting enabled</div></div>
    <div class="nf-flow-body">
        <div class="nf-step"><div class="nf-box nf-trigger"><b>Trigger</b>Manager or member<br>saves task changes</div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step" style="flex:1"><div class="nf-box nf-mail"><b>Example email</b><div class="sub">Plenvo: Task changed – Create Concept</div><div class="prv">Hello Tom, the task <em>Create Concept</em> in project <em>Web Project</em> has been updated.</div></div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step"><div class="nf-box nf-recv"><b>Recipients</b><ul><li>All assignees (except author of change)</li><li>internal + external</li></ul></div></div>
    </div>
</div>

<div class="nf-flow">
    <div class="nf-flow-head">
        <div class="nf-icon" style="background:#e0e7ff;color:#4338ca"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg></div>
        <span class="nf-flow-title">Comment added</span><span class="nf-badge">immediately</span>
    </div>
    <div class="nf-cond"><div class="nf-cond-box cond-std"><strong>Conditions:</strong> Comment saved by internal user or external participant &nbsp;·&nbsp; recipient is not the commenter &nbsp;·&nbsp; project setting enabled</div></div>
    <div class="nf-flow-body">
        <div class="nf-step"><div class="nf-box nf-trigger"><b>Trigger</b>User or external<br>writes a comment</div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step" style="flex:1"><div class="nf-box nf-mail"><b>Example email</b><div class="sub">Plenvo: New comment – Logo Draft</div><div class="prv">Hello Max, <em>Klaus Müller</em> has commented on task <em>Logo Draft</em> in project <em>Rebranding</em>.</div></div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step"><div class="nf-box nf-recv"><b>Recipients</b><ul><li>All assignees (except commenter)</li><li>internal + external</li></ul></div></div>
    </div>
</div>

<div class="nf-flow">
    <div class="nf-flow-head">
        <div class="nf-icon" style="background:#e0e7ff;color:#4338ca"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/><circle cx="9" cy="10" r="1" fill="currentColor"/><circle cx="12" cy="10" r="1" fill="currentColor"/><circle cx="15" cy="10" r="1" fill="currentColor"/></svg></div>
        <span class="nf-flow-title">@Mention in a comment</span><span class="nf-badge">immediately</span>
    </div>
    <div class="nf-cond"><div class="nf-cond-box cond-std"><strong>Conditions:</strong> Comment contains @Name of a project member or external participant &nbsp;·&nbsp; mentioned person is not the commenter</div></div>
    <div class="nf-flow-body">
        <div class="nf-step"><div class="nf-box nf-trigger"><b>Trigger</b>Comment with<br>@Lisa saved</div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step" style="flex:1"><div class="nf-box nf-mail"><b>Example email</b><div class="sub">Plenvo: You were mentioned – Create Concept</div><div class="prv">Hello Lisa, <em>Klaus Müller</em> mentioned you in a comment on task <em>Create Concept</em> in project <em>Web Project</em>.</div></div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step"><div class="nf-box nf-recv"><b>Recipients</b><ul><li>@Mentioned person<br>(internal or external)</li></ul></div></div>
    </div>
</div>

<div class="nf-flow">
    <div class="nf-flow-head">
        <div class="nf-icon" style="background:#e0e7ff;color:#4338ca"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/></svg></div>
        <span class="nf-flow-title">New file attachment uploaded</span><span class="nf-badge">immediately</span>
    </div>
    <div class="nf-cond"><div class="nf-cond-box cond-std"><strong>Conditions:</strong> File attached to a task &nbsp;·&nbsp; recipient is not the uploader &nbsp;·&nbsp; project setting enabled</div></div>
    <div class="nf-flow-body">
        <div class="nf-step"><div class="nf-box nf-trigger"><b>Trigger</b>User uploads file<br>to a task</div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step" style="flex:1"><div class="nf-box nf-mail"><b>Example email</b><div class="sub">Plenvo: New attachment – Create Concept</div><div class="prv">Hello Tom, a new attachment has been uploaded to task <em>Create Concept</em> in project <em>Web Project</em>.</div></div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step"><div class="nf-box nf-recv"><b>Recipients</b><ul><li>All assignees (except uploader)</li><li>internal + external</li></ul></div></div>
    </div>
</div>
</div>

<div class="nf-section" id="manager">
<h2><span class="nf-cat-dot" style="background:#ec4899"></span>⑤ Manager Notifications</h2>

<div class="nf-flow">
    <div class="nf-flow-head">
        <div class="nf-icon" style="background:#fce7f3;color:#be185d"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
        <span class="nf-flow-title">New task created</span><span class="nf-badge">immediately</span>
    </div>
    <div class="nf-cond"><div class="nf-cond-box cond-std"><strong>Conditions:</strong> Task created in project &nbsp;·&nbsp; creator is not themselves a manager &nbsp;·&nbsp; project setting enabled</div></div>
    <div class="nf-flow-body">
        <div class="nf-step"><div class="nf-box nf-trigger"><b>Trigger</b>Member creates<br>a new task</div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step" style="flex:1"><div class="nf-box nf-mail"><b>Example email</b><div class="sub">Plenvo: New task – Write Proposal</div><div class="prv">A new task was created in project <em>Client Project</em>: <em>Write Proposal</em>. Created by: <em>Anna Müller</em>.</div></div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step"><div class="nf-box nf-recv"><b>Recipients</b><ul><li>Project owners</li><li>Project managers</li></ul></div></div>
    </div>
</div>

<div class="nf-flow">
    <div class="nf-flow-head">
        <div class="nf-icon" style="background:#fce7f3;color:#be185d"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg></div>
        <span class="nf-flow-title">Task completed</span><span class="nf-badge">immediately</span>
    </div>
    <div class="nf-cond"><div class="nf-cond-box cond-std"><strong>Conditions:</strong> Task status changes to a "Done" status &nbsp;·&nbsp; completer is not themselves a manager &nbsp;·&nbsp; project setting enabled</div></div>
    <div class="nf-flow-body">
        <div class="nf-step"><div class="nf-box nf-trigger"><b>Trigger</b>User or external<br>sets status to "Done"</div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step" style="flex:1"><div class="nf-box nf-mail"><b>Example email</b><div class="sub">Plenvo: Task completed – Write Test Report</div><div class="prv">Task <em>Write Test Report</em> (Project: QA Cycle) has been completed. Completed by: <em>Tom Schmidt</em>.</div></div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step"><div class="nf-box nf-recv"><b>Recipients</b><ul><li>Project owners</li><li>Project managers</li></ul></div></div>
    </div>
</div>

<div class="nf-flow">
    <div class="nf-flow-head">
        <div class="nf-icon" style="background:#fce7f3;color:#be185d"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg></div>
        <span class="nf-flow-title">Any project activity (opt-in)</span>
        <span class="nf-badge nf-badge-off">Default: disabled</span>
    </div>
    <div class="nf-cond">
        <div class="nf-cond-box cond-off"><strong>Disabled by default.</strong> Must be enabled per project under Project settings → Notifications.</div>
        <div class="nf-cond-box cond-std"><strong>When enabled — triggers:</strong> Any status change, comment, or edit by a project member or external participant</div>
    </div>
    <div class="nf-flow-body">
        <div class="nf-step"><div class="nf-box nf-trigger"><b>Trigger</b>Any activity<br>on a task</div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step" style="flex:1"><div class="nf-box nf-mail"><b>Example email</b><div class="sub">Plenvo: Activity – Client Project</div><div class="prv"><em>Anna Müller</em> – status changed<br>Task: <em>Write Proposal</em></div></div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step"><div class="nf-box nf-recv"><b>Recipients</b><ul><li>Project owners</li><li>Project managers</li></ul></div></div>
    </div>
</div>
</div>

<div class="nf-section" id="account">
<h2><span class="nf-cat-dot" style="background:#8b5cf6"></span>⑥ Account &amp; Login</h2>

<div class="nf-flow">
    <div class="nf-flow-head">
        <div class="nf-icon" style="background:#ede9fe;color:#6d28d9"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg></div>
        <span class="nf-flow-title">Confirm email address</span><span class="nf-badge">immediately · registration</span>
    </div>
    <div class="nf-flow-body">
        <div class="nf-step"><div class="nf-box nf-trigger"><b>Trigger</b>New account<br>registered</div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step" style="flex:1"><div class="nf-box nf-mail"><b>Example email</b><div class="sub">Plenvo: Confirm your email address</div><div class="prv">Click the link to confirm your email address and activate your account. The link is valid for 24 hours.</div></div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step"><div class="nf-box nf-recv"><b>Recipients</b><ul><li>Newly registered user</li></ul></div></div>
    </div>
</div>

<div class="nf-flow">
    <div class="nf-flow-head">
        <div class="nf-icon" style="background:#ede9fe;color:#6d28d9"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg></div>
        <span class="nf-flow-title">Password reset</span><span class="nf-badge">immediately · on request</span>
    </div>
    <div class="nf-flow-body">
        <div class="nf-step"><div class="nf-box nf-trigger"><b>Trigger</b>User clicks<br>"Forgot password?"</div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step" style="flex:1"><div class="nf-box nf-mail"><b>Example email</b><div class="sub">Plenvo: Reset your password</div><div class="prv">You requested a password reset. Click the link to set a new password. Valid for 1 hour.</div></div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step"><div class="nf-box nf-recv"><b>Recipients</b><ul><li>Requesting user</li></ul></div></div>
    </div>
</div>

<div class="nf-flow">
    <div class="nf-flow-head">
        <div class="nf-icon" style="background:#ede9fe;color:#6d28d9"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div>
        <span class="nf-flow-title">Two-factor login (email code)</span><span class="nf-badge">immediately · on login</span>
    </div>
    <div class="nf-cond"><div class="nf-cond-box cond-std"><strong>Conditions:</strong> User has email 2FA enabled, or administrator has enforced MFA for all users</div></div>
    <div class="nf-flow-body">
        <div class="nf-step"><div class="nf-box nf-trigger"><b>Trigger</b>User signs in</div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step" style="flex:1"><div class="nf-box nf-mail"><b>Example email</b><div class="sub">Plenvo: Your login code 483021</div><div class="prv">Hello, your login code is: <strong style="letter-spacing:.15em">483021</strong>. Valid for 20 minutes.</div></div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step"><div class="nf-box nf-recv"><b>Recipients</b><ul><li>Signing-in user</li></ul></div></div>
    </div>
</div>

<div class="nf-flow">
    <div class="nf-flow-head">
        <div class="nf-icon" style="background:#ede9fe;color:#6d28d9"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg></div>
        <span class="nf-flow-title">Group invitation</span><span class="nf-badge">immediately · on invitation</span>
    </div>
    <div class="nf-flow-body">
        <div class="nf-step"><div class="nf-box nf-trigger"><b>Trigger</b>Group admin<br>invites a new user</div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step" style="flex:1"><div class="nf-box nf-mail"><b>Example email</b><div class="sub">Plenvo: You have been invited</div><div class="prv">You were invited by <em>Klaus Müller</em> to join the team. Click the link to activate your account.</div></div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step"><div class="nf-box nf-recv"><b>Recipients</b><ul><li>Invited person</li></ul></div></div>
    </div>
</div>
</div>

<div class="nf-section" id="admin">
<h2><span class="nf-cat-dot" style="background:#64748b"></span>⑦ Administration</h2>

<div class="nf-flow">
    <div class="nf-flow-head">
        <div class="nf-icon" style="background:#f1f5f9;color:#475569"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/></svg></div>
        <span class="nf-flow-title">New user registration</span><span class="nf-badge">immediately · on registration</span>
    </div>
    <div class="nf-cond"><div class="nf-cond-box cond-std"><strong>Conditions:</strong> Public registration is enabled &nbsp;·&nbsp; new user registers (awaiting email verification)</div></div>
    <div class="nf-flow-body">
        <div class="nf-step"><div class="nf-box nf-trigger"><b>Trigger</b>New user<br>registers</div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step" style="flex:1"><div class="nf-box nf-mail"><b>Example email</b><div class="sub">Plenvo: New registration – anna.mueller</div><div class="prv">A new user has registered and is awaiting email confirmation:<br>Username: <em>anna.mueller</em> &nbsp;·&nbsp; Email: <em>anna@example.com</em></div></div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step"><div class="nf-box nf-recv"><b>Recipients</b><ul><li>All admins</li></ul></div></div>
    </div>
</div>

<div class="nf-flow">
    <div class="nf-flow-head">
        <div class="nf-icon" style="background:#f1f5f9;color:#475569"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg></div>
        <span class="nf-flow-title">Request: permission to create groups</span><span class="nf-badge">immediately · on request</span>
    </div>
    <div class="nf-cond"><div class="nf-cond-box cond-std"><strong>Conditions:</strong> User without group creation rights submits a request under Settings → Preferences</div></div>
    <div class="nf-flow-body">
        <div class="nf-step"><div class="nf-box nf-trigger"><b>Trigger</b>User requests<br>group creation<br>permission</div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step" style="flex:1"><div class="nf-box nf-mail"><b>Example email</b><div class="sub">Plenvo: Group request from anna.mueller</div><div class="prv">A user is requesting permission to create their own groups:<br>Username: <em>anna.mueller</em> &nbsp;·&nbsp; Email: <em>anna@example.com</em></div></div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step"><div class="nf-box nf-recv"><b>Recipients</b><ul><li>All admins</li></ul></div></div>
    </div>
</div>
</div>

<div class="nf-section" id="external">
<h2><span class="nf-cat-dot" style="background:#f59e0b"></span>⑧ External Participants</h2>

<div class="nf-flow">
    <div class="nf-flow-head">
        <div class="nf-icon" style="background:#fef3c7;color:#b45309"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg></div>
        <span class="nf-flow-title">Identity check after inactivity</span><span class="nf-badge">after 3 h inactivity</span>
    </div>
    <div class="nf-cond">
        <div class="nf-cond-box cond-std"><strong>Conditions:</strong> External opens their share link &nbsp;·&nbsp; last activity was more than 3 hours ago &nbsp;·&nbsp; email address stored</div>
        <div class="nf-cond-box cond-note"><strong>Note:</strong> Externals without a stored email address are exempt from this check.</div>
    </div>
    <div class="nf-flow-body">
        <div class="nf-step"><div class="nf-box nf-trigger"><b>Trigger</b>External opens<br>share link after<br>a long pause</div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step" style="flex:1"><div class="nf-box nf-mail"><b>Example email</b><div class="sub">Plenvo: Your access code 719204</div><div class="prv">Hello Sandra, your access code for the external task view is: <strong style="letter-spacing:.15em">719204</strong>. Valid for 20 minutes.</div></div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step"><div class="nf-box nf-recv"><b>Recipients</b><ul><li>External participant<br>(at their email)</li></ul></div></div>
    </div>
</div>

<div class="nf-flow">
    <div class="nf-flow-head">
        <div class="nf-icon" style="background:#fef3c7;color:#b45309"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg></div>
        <span class="nf-flow-title">External changes status or comments</span><span class="nf-badge">immediately</span>
    </div>
    <div class="nf-cond"><div class="nf-cond-box cond-std"><strong>Conditions:</strong> Activity mail to manager (if "any activity" project setting is on) &nbsp;·&nbsp; comment mail to all assignees (always, if project setting enabled)</div></div>
    <div class="nf-flow-body">
        <div class="nf-step"><div class="nf-box nf-trigger"><b>Trigger</b>External sets status<br>or writes a comment</div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step" style="flex:1"><div class="nf-box nf-mail"><b>Example email</b><div class="sub">Plenvo: Task completed – Check Delivery</div><div class="prv">Task <em>Check Delivery</em> completed by <em>Sandra Meier (External)</em>. Project: <em>Warehouse Project</em>.</div></div></div>
        <div class="nf-arrow">→</div>
        <div class="nf-step"><div class="nf-box nf-recv"><b>Recipients</b><ul><li>Managers (on completion)</li><li>All assignees (on comment)</li></ul></div></div>
    </div>
</div>
</div>

<div style="display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid var(--border-color)">
    <span style="font-size:.78rem;font-weight:600;color:var(--text-muted);align-self:center">Legend:</span>
    <span style="display:flex;align-items:center;gap:.35rem;font-size:.8rem;color:#166534"><span style="width:11px;height:11px;border-radius:2px;background:#dcfce7;border:1px solid #86efac;display:inline-block"></span>Trigger</span>
    <span style="display:flex;align-items:center;gap:.35rem;font-size:.8rem;color:#1e3a5f"><span style="width:11px;height:11px;border-radius:2px;background:#eff6ff;border:1px solid #93c5fd;display:inline-block"></span>Email content (example)</span>
    <span style="display:flex;align-items:center;gap:.35rem;font-size:.8rem;color:#581c87"><span style="width:11px;height:11px;border-radius:2px;background:#fdf4ff;border:1px solid #e9d5ff;display:inline-block"></span>Recipients</span>
    <span style="display:flex;align-items:center;gap:.35rem;font-size:.8rem;color:#78350f"><span style="width:11px;height:11px;border-radius:2px;background:#fffbeb;border:1px solid #fcd34d;display:inline-block"></span>Condition</span>
    <span style="display:flex;align-items:center;gap:.35rem;font-size:.8rem;color:#713f12"><span style="width:11px;height:11px;border-radius:2px;background:#fef9c3;border:1px solid #fde047;display:inline-block"></span>Default: disabled</span>
</div>

</div>
