{% macro metric_tile(label, value, delta='', tone='neutral') -%}
<article class="hil-metric hil-metric-{{ tone }}">
  <span class="hil-metric-label">{{ label }}</span>
  <strong class="hil-metric-value">{{ value }}</strong>
  {% if delta %}<small class="hil-metric-delta">{{ delta }}</small>{% endif %}
</article>
{%- endmacro %}

{% macro kpi_card(label, value, subtitle='', tone='neutral') -%}
<article class="hil-kpi hil-kpi-{{ tone }}">
  <span class="hil-kpi-label">{{ label }}</span>
  <strong class="hil-kpi-value">{{ value }}</strong>
  {% if subtitle %}<small class="hil-kpi-subtitle">{{ subtitle }}</small>{% endif %}
</article>
{%- endmacro %}

{% macro stat_block(label, value, detail='', tone='neutral') -%}
<article class="hil-stat-block hil-stat-{{ tone }}">
  <span class="hil-stat-label">{{ label }}</span>
  <strong class="hil-stat-value">{{ value }}</strong>
  {% if detail %}<small class="hil-stat-detail">{{ detail }}</small>{% endif %}
</article>
{%- endmacro %}

{% macro empty_state(title, message, action_text='', action_href='', tone='neutral') -%}
<section class="hil-empty-state hil-empty-{{ tone }}">
  <h4>{{ title }}</h4>
  <p>{{ message }}</p>
  {% if action_text and action_href %}
    <a href="{{ action_href }}" class="hil-btn hil-btn-primary hil-btn-sm">{{ action_text }}</a>
  {% endif %}
</section>
{%- endmacro %}

{% macro loading_state(lines=3) -%}
<div class="hil-loading-state" aria-live="polite" aria-busy="true">
  <div class="hil-skeleton-block" aria-hidden="true">
    {% for _ in range(lines) %}
    <div class="hil-skeleton-line"></div>
    {% endfor %}
  </div>
</div>
{%- endmacro %}

{% macro activity_feed(items) -%}
<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>
{%- endmacro %}

{% macro task_list(items) -%}
<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>
{%- 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 %}