{# Activity Log Component Macro - Clean Terminal Design #}
{% macro activity_log(id="activity-log", height="200px", title="Activity Log", subtitle="", placeholder="Ready...") %}
<div class="activity-log-wrapper" style="
    border-radius: 12px;
    overflow: hidden;
    background: #0d1117;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
">
    <!-- Terminal Header -->
    <div style="
        background: #161b22;
        padding: 10px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    ">
        <span style="color: #e6edf3; font-weight: 600; font-size: 0.85rem;">
            {{ title }}
        </span>
        {% if subtitle %}
        {{ subtitle|safe }}
        {% endif %}
    </div>

    <!-- Terminal Output -->
    <div id="{{ id }}" style="
        height: {{ height }};
        overflow-y: auto;
        padding: 16px;
        font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
        font-size: 0.8rem;
        line-height: 1.6;
        color: #8b949e;
        background: #0d1117;
    ">
        <div style="color: #484f58; font-style: italic;">{{ placeholder }}</div>
    </div>
</div>
{% endmacro %}