{% macro kpi_grid(items) -%}
<div class="hil-kpi-grid">
  {% for item in items %}
    <article class="hil-kpi hil-kpi-{{ item.tone|default('neutral') }}">
      <span class="hil-kpi-label">{{ item.label }}</span>
      <strong class="hil-kpi-value">{{ item.value }}</strong>
      {% if item.subtitle %}<small class="hil-kpi-subtitle">{{ item.subtitle }}</small>{% endif %}
    </article>
  {% endfor %}
</div>
{%- endmacro %}

{% macro chart_container(id, title='', caption='') -%}
<section class="hil-chart-container">
  {% if title or caption %}
  <header class="hil-section-header">
    <div>
      {% if title %}<h3>{{ title }}</h3>{% endif %}
      {% if caption %}<p>{{ caption }}</p>{% endif %}
    </div>
  </header>
  {% endif %}
  <div class="hil-chart-shell">{{ caller() if caller else '' }}</div>
</section>
{%- endmacro %}

{% macro recent_activity(items, title='Recent Activity') -%}
<section class="hil-activity-panel">
  <header class="hil-section-header">
    <h3>{{ title }}</h3>
  </header>
  <ol class="hil-activity-feed">
    {% for item in items %}
    <li class="hil-activity-item">
      <strong>{{ item.title }}</strong>
      {% if item.detail %}<p>{{ item.detail }}</p>{% endif %}
      {% if item.time %}<time datetime="{{ item.datetime|default('') }}">{{ item.time }}</time>{% endif %}
    </li>
    {% endfor %}
  </ol>
</section>
{%- endmacro %}

{% macro task_list(items, title='Tasks') -%}
<section class="hil-task-panel">
  <header class="hil-section-header">
    <h3>{{ title }}</h3>
  </header>
  <ul class="hil-task-list">
    {% for item in items %}
    <li>
      <span class="hil-task-title">{{ item.title }}</span>
      {% if item.detail %}<span class="hil-task-detail">{{ item.detail }}</span>{% endif %}
    </li>
    {% endfor %}
  </ul>
</section>
{%- endmacro %}

{% macro notification_panel(items, title='Notifications') -%}
<section class="hil-notification-panel">
  <header class="hil-section-header">
    <h3>{{ title }}</h3>
  </header>
  <div class="hil-notification-list">
    {% for item in items %}
      <div class="hil-notification hil-notification-{{ item.tone|default('info') }}" role="status" aria-live="polite">
        {% if item.title %}<strong>{{ item.title }}</strong>{% endif %}
        <span>{{ item.message }}</span>
      </div>
    {% endfor %}
  </div>
</section>
{%- endmacro %}