{% extends 'base.html' %}
{% load i18n %}
{% load static %}

{% block content %}
<div class="apple-wrap link-detail-wrap">

    <!-- Header + metadata card -->
    <div class="apple-card">
        <div class="link-header-row">
            <div class="link-type-badge-row">
                <h1 class="link-detail-title">{% trans "Link Details" %}</h1>
                {% if '{' in link.original_url|default:'' and '}' in link.original_url|default:'' %}
                    <span class="badge badge-template"><i class="fas fa-magic" aria-hidden="true"></i>{% trans "Template" %}</span>
                {% elif link.link_type == 'LINK' %}
                    <span class="badge badge-link"><i class="fas fa-link" aria-hidden="true"></i>{% trans "Link" %}</span>
                {% elif link.link_type == 'ACTION' %}
                    <span class="badge badge-action"><i class="fas fa-bolt" aria-hidden="true"></i>{% trans "Action" %}</span>
                {% else %}
                    <span class="badge badge-custom"><i class="fas fa-code" aria-hidden="true"></i>{% trans "Custom" %}</span>
                {% endif %}
            </div>
            <div class="link-header-actions">
                <a href="{% url 'redirect_to_original' link.alias %}" target="_blank" class="action-btn action-btn-green">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                    </svg>
                    {% trans "Go to link" %}
                </a>
                <a href="{% url 'link_update' link.pk %}" class="action-btn action-btn-blue">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                    </svg>
                    {% trans "Edit" %}
                </a>
            </div>
        </div>

        <dl class="link-meta-grid">
            <div class="link-meta-item">
                <dt>{% trans "Alias" %}</dt>
                <dd>{{ link.alias }}</dd>
            </div>
            <div class="link-meta-item">
                <dt>{% trans "Click Count" %}</dt>
                <dd>{{ link.click_count }}</dd>
            </div>
            <div class="link-meta-item">
                <dt>{% trans "Created At" %}</dt>
                <dd>{{ link.created_at|date:"Y-m-d H:i" }}</dd>
            </div>
            <div class="link-meta-item">
                <dt>{% trans "Updated At" %}</dt>
                <dd>{{ link.updated_at|date:"Y-m-d H:i" }}</dd>
            </div>
            {% if link.link_type == 'LINK' %}
                <div class="link-meta-item span-2">
                    <dt>{% trans "Original URL" %}</dt>
                    <dd>
                        <a href="{{ link.original_url }}" target="_blank">{{ link.original_url }}</a>
                    </dd>
                </div>
            {% endif %}
            {% if link.description %}
            <div class="link-meta-item span-2">
                <dt>{% trans "Description" %}</dt>
                <dd>{{ link.description }}</dd>
            </div>
            {% endif %}
            {% if link.tags.exists %}
            <div class="link-meta-item span-2">
                <dt>{% trans "Tags" %}</dt>
                <dd>
                    <div class="link-meta-tags">
                        {% for tag in link.tags.all %}
                        {% with number=forloop.counter %}
                        <a href="{% url 'tag-detail' tag.slug %}"
                           class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium transition duration-150 {% if number|divisibleby:10 %}tag-10{% elif number|divisibleby:9 %}tag-9{% elif number|divisibleby:8 %}tag-8{% elif number|divisibleby:7 %}tag-7{% elif number|divisibleby:6 %}tag-6{% elif number|divisibleby:5 %}tag-5{% elif number|divisibleby:4 %}tag-4{% elif number|divisibleby:3 %}tag-3{% elif number|divisibleby:2 %}tag-2{% else %}tag-1{% endif %}">
                            {{ tag.name }}
                        </a>
                        {% endwith %}
                        {% endfor %}
                    </div>
                </dd>
            </div>
            {% endif %}
        </dl>
    </div>

    {% if link.link_type == 'CUSTOM' %}
    <div class="apple-card section-spacing">
        <h2 class="section-title-sm mb-4">{% trans "Custom Content" %}</h2>
        <div class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl max-w-none">
            {{ rendered_text|safe }}
        </div>
    </div>
    {% endif %}

    <div class="apple-card section-spacing">
        <div class="stats-header">
            <h2 class="section-title-sm">{% trans "Click Statistics" %} - {{ period_name }}</h2>
            <div class="period-toggle-group">
                <button onclick="changePeriod('3m')" class="period-btn {% if current_period == '3m' %}active{% endif %}" data-period="3m">
                    {% trans "3 Months" %}
                </button>
                <button onclick="changePeriod('6m')" class="period-btn {% if current_period == '6m' %}active{% endif %}" data-period="6m">
                    {% trans "6 Months" %}
                </button>
                <button onclick="changePeriod('1y')" class="period-btn {% if current_period == '1y' %}active{% endif %}" data-period="1y">
                    {% trans "1 Year" %}
                </button>
                <button onclick="changePeriod('all')" class="period-btn {% if current_period == 'all' %}active{% endif %}" data-period="all">
                    {% trans "All Time" %}
                </button>
            </div>
        </div>
        <div style="height: 400px; position: relative;">
            <canvas id="clickChart"></canvas>
        </div>
    </div>

    <div class="apple-card section-spacing">
        <h2 class="section-title-sm mb-4">{% trans "Change History" %}</h2>
        {% if change_logs %}
            <ul class="change-log-list">
            {% for log in change_logs %}
                <li class="change-log-item">
                    {% if log.change_type == 'url_change' %}
                        <div class="change-icon change-icon-blue">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
                            </svg>
                        </div>
                        <div class="change-log-body">
                            <div class="change-log-title-row">
                                <p class="change-log-title">{% trans "URL Changed" %}</p>
                                <span class="change-log-time">{{ log.changed_at|date:"Y-m-d H:i" }}</span>
                            </div>
                            {% if log.old_url %}
                                <p class="change-log-detail change-url-old">{{ log.old_url }}</p>
                            {% endif %}
                            {% if log.new_url %}
                                <p class="change-log-detail change-url-new">{{ log.new_url }}</p>
                            {% endif %}
                        </div>
                    {% elif log.change_type == 'task_toggle' %}
                        <div class="change-icon change-icon-purple">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
                            </svg>
                        </div>
                        <div class="change-log-body">
                            <div class="change-log-title-row">
                                <p class="change-log-title">{% trans "Task Toggled" %}</p>
                                <span class="change-log-time">{{ log.changed_at|date:"Y-m-d H:i" }}</span>
                            </div>
                            {% if log.metadata %}
                                <div class="change-log-detail">
                                    {% if log.metadata.task_text %}
                                        <p style="font-weight: 500; color: var(--apple-text); margin-bottom: 0.25rem;">
                                            "{{ log.metadata.task_text }}"
                                        </p>
                                    {% endif %}
                                    <p>
                                        <span class="{% if log.metadata.old_state %}change-url-new{% else %}change-log-time{% endif %}">
                                            {% if log.metadata.old_state %}☑{% else %}☐{% endif %}
                                        </span>
                                        →
                                        <span class="{% if log.metadata.new_state %}change-url-new{% else %}change-log-time{% endif %}">
                                            {% if log.metadata.new_state %}☑{% else %}☐{% endif %}
                                        </span>
                                        <span class="ml-1">{% if log.metadata.new_state %}{% trans "checked" %}{% else %}{% trans "unchecked" %}{% endif %}</span>
                                    </p>
                                </div>
                            {% endif %}
                        </div>
                    {% elif log.change_type == 'content_edit' %}
                        <div class="change-icon change-icon-green">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                            </svg>
                        </div>
                        <div class="change-log-body">
                            <div class="change-log-title-row">
                                <p class="change-log-title">{% trans "Content Edited" %}</p>
                                <span class="change-log-time">{{ log.changed_at|date:"Y-m-d H:i" }}</span>
                            </div>
                            {% if log.metadata %}
                                <div class="change-log-detail">
                                    {{ log.metadata|safe }}
                                </div>
                            {% endif %}
                        </div>
                    {% else %}
                        <div class="change-icon change-icon-gray">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                        <div class="change-log-body">
                            <div class="change-log-title-row">
                                <p class="change-log-title">{% trans "Change" %}</p>
                                <span class="change-log-time">{{ log.changed_at|date:"Y-m-d H:i" }}</span>
                            </div>
                        </div>
                    {% endif %}
                </li>
            {% endfor %}
            </ul>
        {% else %}
            <p class="empty-history">{% trans "No changes recorded." %}</p>
        {% endif %}
    </div>

</div>
{% endblock %}

{% block extra_js %}
<!-- Chart.js (CDN — page-specific, benefits from edge proximity) -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var ctx = document.getElementById('clickChart').getContext('2d');
        var clickData = {{ click_stats|safe }};
        var intervalDays = {{ interval_days }};

        var chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: clickData.map(item => {
                    // Use custom label if available, otherwise format date based on interval
                    if (item.label) {
                        return item.label;
                    }

                    const date = new Date(item.date);
                    if (intervalDays === 1) {
                        // Daily: show "Jan 15"
                        return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
                    } else if (intervalDays <= 14) {
                        // Weekly/Bi-weekly: show "1/15"
                        return date.toLocaleDateString('en-US', { month: 'numeric', day: 'numeric' });
                    } else {
                        // Monthly: show "Jan 2025"
                        return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
                    }
                }),
                datasets: [{
                    label: '{% trans "Clicks" %}',
                    data: clickData.map(item => item.count),
                    backgroundColor: 'rgba(0, 113, 227, 0.08)',
                    borderColor: 'rgba(0, 113, 227, 1)',
                    borderWidth: 3,
                    fill: true,
                    tension: 0.4,
                    pointBackgroundColor: 'rgba(0, 113, 227, 1)',
                    pointBorderColor: '#ffffff',
                    pointBorderWidth: 2,
                    pointRadius: 4,
                    pointHoverRadius: 6,
                    pointHoverBackgroundColor: 'rgba(0, 113, 227, 1)',
                    pointHoverBorderColor: '#ffffff',
                    pointHoverBorderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(0, 0, 0, 0.05)',
                            borderDash: [2, 2]
                        },
                        ticks: {
                            stepSize: 1,
                            color: '#6b7280',
                            font: {
                                size: 12
                            }
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            color: '#6b7280',
                            font: {
                                size: 12
                            },
                            maxTicksLimit: intervalDays === 1 ? 15 : 10
                        }
                    }
                },
                elements: {
                    line: {
                        borderJoinStyle: 'round'
                    }
                }
            }
        });

        const colors = [
            'bg-blue-50 hover:bg-blue-100 text-blue-700',
            'bg-green-50 hover:bg-green-100 text-green-700',
            'bg-yellow-50 hover:bg-yellow-100 text-yellow-700',
            'bg-red-50 hover:bg-red-100 text-red-700',
            'bg-indigo-50 hover:bg-indigo-100 text-indigo-700',
            'bg-purple-50 hover:bg-purple-100 text-purple-700',
            'bg-pink-50 hover:bg-pink-100 text-pink-700',
            'bg-cyan-50 hover:bg-cyan-100 text-cyan-700',
            'bg-orange-50 hover:bg-orange-100 text-orange-700',
            'bg-teal-50 hover:bg-teal-100 text-teal-700',
            'bg-lime-50 hover:bg-lime-100 text-lime-700',
            'bg-emerald-50 hover:bg-emerald-100 text-emerald-700',
            'bg-sky-50 hover:bg-sky-100 text-sky-700',
            'bg-violet-50 hover:bg-violet-100 text-violet-700',
            'bg-rose-50 hover:bg-rose-100 text-rose-700',
            'bg-amber-50 hover:bg-amber-100 text-amber-700'
        ];

        document.querySelectorAll('.tag-card').forEach(tag => {
            const randomColor = colors[Math.floor(Math.random() * colors.length)];
            tag.classList.add(...randomColor.split(' '));
        });
    });

    // Function to change time period
    function changePeriod(period) {
        const url = new URL(window.location.href);
        url.searchParams.set('period', period);
        window.location.href = url.toString();
    }

    // Task checkbox functionality
    document.querySelectorAll('.task-checkbox').forEach(checkbox => {
        checkbox.addEventListener('change', async function(e) {
            const taskHash = this.getAttribute('data-hash');
            const linkId = {{ link.id }};

            try {
                const response = await fetch(`/link/${linkId}/toggle_task/`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ task_hash: taskHash })
                });

                if (!response.ok) {
                    this.checked = !this.checked;
                    console.error('Failed to update task state');
                }
            } catch (error) {
                this.checked = !this.checked;
                console.error('Error updating task:', error);
            }
        });
    });
</script>
{% endblock %}

{% block extra_css %}
<style>
  /* ============================================================
     Apple-inspired design system — Link detail page
     Mirrors the home page: #f5f5f7 canvas, SF typography, soft
     shadows, pill buttons, generous rounded cards.
     ============================================================ */
  :root {
    --apple-bg: #f5f5f7;
    --apple-text: #1d1d1f;
    --apple-gray: #6e6e73;
    --apple-blue: #0071e3;
    --apple-blue-hover: #0077ed;
    --apple-red: #ff3b30;
    --apple-green: #1e7b34;
    --apple-purple: #8944ab;
    --apple-separator: rgba(0, 0, 0, 0.06);
    --apple-ease: cubic-bezier(0.28, 0.11, 0.32, 1);
    --apple-radius-lg: 28px;
    --apple-radius-md: 22px;
    --apple-radius-sm: 14px;
    --apple-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.05);
    --apple-shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.10);
  }

  body {
    background-color: var(--apple-bg) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
      "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--apple-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .apple-wrap { max-width: 72rem; margin: 0 auto; }
  .link-detail-wrap { padding: 0 0.25rem; }

  .apple-card {
    background: #fff;
    border-radius: var(--apple-radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: var(--apple-shadow-card);
    padding: clamp(1.25rem, 4vw, 2.25rem);
  }
  .section-spacing { margin-top: 1.75rem; }
  .section-title-sm { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; color: var(--apple-text); }
  .mb-4 { margin-bottom: 1rem; }

  /* ---------- Header ---------- */
  .link-header-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
  .link-type-badge-row { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; }
  .link-detail-title { font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 700; letter-spacing: -0.02em; color: var(--apple-text); }
  .link-header-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

  .badge {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.28rem 0.72rem; border-radius: 980px;
    font-size: 0.78rem; font-weight: 600;
  }
  .badge-template { background: rgba(191, 90, 242, 0.12); color: #8944ab; }
  .badge-link { background: rgba(0, 113, 227, 0.10); color: var(--apple-blue); }
  .badge-custom { background: rgba(48, 209, 88, 0.15); color: #1e7b34; }
  .badge-action { background: rgba(191, 90, 242, 0.12); color: #8944ab; }

  .action-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.55rem 1.1rem; border-radius: 980px;
    font-size: 0.88rem; font-weight: 600; border: none; cursor: pointer;
    text-decoration: none; white-space: nowrap;
    transition: background 0.25s var(--apple-ease), color 0.25s var(--apple-ease), transform 0.2s var(--apple-ease);
  }
  .action-btn:active { transform: scale(0.96); }
  .action-btn svg { width: 1rem; height: 1rem; }
  .action-btn-green { background: rgba(48, 209, 88, 0.14); color: var(--apple-green); }
  .action-btn-green:hover { background: rgba(48, 209, 88, 0.22); color: var(--apple-green); }
  .action-btn-blue { background: rgba(0, 113, 227, 0.10); color: var(--apple-blue); }
  .action-btn-blue:hover { background: rgba(0, 113, 227, 0.18); color: var(--apple-blue); }

  /* ---------- Meta grid ---------- */
  .link-meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; }
  @media (max-width: 640px) { .link-meta-grid { grid-template-columns: 1fr; } }
  .link-meta-item.span-2 { grid-column: 1 / -1; }
  .link-meta-item dt { font-size: 0.76rem; font-weight: 600; color: var(--apple-gray); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 0.3rem; }
  .link-meta-item dd { font-size: 0.95rem; color: var(--apple-text); margin: 0; word-break: break-all; }
  .link-meta-item dd a { color: var(--apple-blue); text-decoration: none; }
  .link-meta-item dd a:hover { text-decoration: underline; }
  .link-meta-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }

  /* ---------- Prose (custom content) ---------- */
  .prose {
      color: var(--apple-text);
      max-width: 65ch;
  }
  .prose p {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
  }
  .prose a {
      color: var(--apple-blue);
      text-decoration: underline;
  }
  .prose strong {
      font-weight: 600;
  }
  .prose ul {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
      list-style-type: disc;
      padding-left: 1.625em;
  }
  .prose ol {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
      list-style-type: decimal;
      padding-left: 1.625em;
  }
  .prose h1 {
      font-size: 2.25em;
      margin-top: 0;
      margin-bottom: 0.8888889em;
      line-height: 1.1111111;
  }
  .prose h2 {
      font-size: 1.5em;
      margin-top: 2em;
      margin-bottom: 1em;
      line-height: 1.3333333;
  }
  .prose h3 {
      font-size: 1.25em;
      margin-top: 1.6em;
      margin-bottom: 0.6em;
      line-height: 1.6;
  }
  .prose img {
      margin-top: 2em;
      margin-bottom: 2em;
      border-radius: var(--apple-radius-sm);
  }
  .prose code {
      color: var(--apple-text);
      font-weight: 600;
  }
  .prose pre {
      color: #e5e7eb;
      background-color: #1f2937;
      overflow-x: auto;
      font-size: 0.875em;
      line-height: 1.7142857;
      margin-top: 1.7142857em;
      margin-bottom: 1.7142857em;
      border-radius: var(--apple-radius-sm);
      padding-top: 0.8571429em;
      padding-right: 1.1428571em;
      padding-bottom: 0.8571429em;
      padding-left: 1.1428571em;
  }

  /* ---------- Click statistics ---------- */
  .stats-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
  .period-toggle-group { display: inline-flex; gap: 0.35rem; background: var(--apple-bg); padding: 0.3rem; border-radius: 980px; }
  .period-btn {
      padding: 0.45rem 0.95rem;
      font-size: 0.83rem;
      font-weight: 600;
      border-radius: 980px;
      border: none;
      background: transparent;
      color: var(--apple-gray);
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease;
  }
  .period-btn:hover {
      color: var(--apple-text);
  }
  .period-btn.active {
      background: #fff;
      color: var(--apple-blue);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  /* Chart container styling */
  #clickChart {
      border-radius: var(--apple-radius-sm);
  }

  /* ---------- Change history timeline ---------- */
  .change-log-list { list-style: none; margin: 0; padding: 0; }
  .change-log-item { display: flex; gap: 0.9rem; padding: 1rem 0; border-bottom: 1px solid var(--apple-separator); }
  .change-log-item:last-child { border-bottom: none; padding-bottom: 0; }
  .change-log-item:first-child { padding-top: 0; }
  .change-icon {
      flex-shrink: 0; width: 2.2rem; height: 2.2rem; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
  }
  .change-icon svg { width: 1.1rem; height: 1.1rem; }
  .change-icon-blue { background: rgba(0, 113, 227, 0.10); color: var(--apple-blue); }
  .change-icon-purple { background: rgba(191, 90, 242, 0.12); color: var(--apple-purple); }
  .change-icon-green { background: rgba(48, 209, 88, 0.14); color: var(--apple-green); }
  .change-icon-gray { background: var(--apple-bg); color: var(--apple-gray); }
  .change-log-body { flex: 1; min-width: 0; }
  .change-log-title-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
  .change-log-title { font-size: 0.92rem; font-weight: 600; color: var(--apple-text); margin: 0; }
  .change-log-time { font-size: 0.78rem; color: var(--apple-gray); }
  .change-log-detail { margin-top: 0.35rem; font-size: 0.86rem; color: var(--apple-gray); }
  .change-url-old { color: var(--apple-red); text-decoration: line-through; }
  .change-url-new { color: var(--apple-green); }
  .empty-history { font-size: 0.9rem; color: var(--apple-gray); }

  /* ---------- Task List Styles ---------- */
  .task-item {
      list-style: none;
      padding-left: 0;
  }

  .task-checkbox {
      margin-right: 0.5rem;
      cursor: pointer;
      width: 1.1em;
      height: 1.1em;
      vertical-align: middle;
  }

  .task-checkbox:hover {
      opacity: 0.7;
  }
</style>
{% endblock %}
