---
---

<div
    class="hero-dashboard"
    role="img"
    aria-label="TenantAtlas — change history, restore preview, and a review queue with baseline drift and evidence links"
>
    <div class="dashboard-chrome">
        <div class="dashboard-titlebar">
            <div class="flex items-center gap-2">
                <div class="flex gap-1.5">
                    <span class="dot dot-red"></span>
                    <span class="dot dot-yellow"></span>
                    <span class="dot dot-green"></span>
                </div>
                <span class="titlebar-label">TenantAtlas — Governance Surface</span>
            </div>
            <div class="titlebar-url">
                <span class="url-text">app.tenantatlas.com/admin/governance/change-history</span>
            </div>
        </div>

        <div class="dashboard-body">
            <div class="dashboard-sidebar">
                <div class="sidebar-logo">TA</div>
                <div class="sidebar-nav">
                    <div class="nav-item active">
                        <div class="nav-dot"></div>
                        <span>Change history</span>
                    </div>
                    <div class="nav-item">
                        <div class="nav-dot"></div>
                        <span>Restore preview</span>
                    </div>
                    <div class="nav-item">
                        <div class="nav-dot"></div>
                        <span>Review queue</span>
                    </div>
                    <div class="nav-item">
                        <div class="nav-dot"></div>
                        <span>Evidence</span>
                    </div>
                    <div class="nav-item">
                        <div class="nav-dot"></div>
                        <span>Assignments</span>
                    </div>
                </div>
                <div class="sidebar-divider"></div>
                <div class="sidebar-nav">
                    <div class="nav-item">
                        <div class="nav-dot muted"></div>
                        <span>Settings</span>
                    </div>
                    <div class="nav-item">
                        <div class="nav-dot muted"></div>
                        <span>Audit Log</span>
                    </div>
                </div>
            </div>

            <div class="dashboard-main">
                <div class="stats-row">
                    <div class="stat-card">
                        <span class="stat-label">Baseline drift</span>
                        <span class="stat-value">2 items need review</span>
                        <span class="stat-change neutral">Windows baseline and Conditional Access</span>
                    </div>
                    <div class="stat-card">
                        <span class="stat-label">Restore preview</span>
                        <span class="stat-value">Scope and assignments validated</span>
                        <span class="stat-change positive">Confirmation required before execution</span>
                    </div>
                    <div class="stat-card">
                        <span class="stat-label">Evidence linked</span>
                        <span class="stat-value">3 change records attached</span>
                        <span class="stat-change neutral">Review context stays with the operator path</span>
                    </div>
                </div>

                <div class="activity-grid">
                    <div class="activity-section">
                        <div class="activity-header">
                            <span class="activity-title">Change record</span>
                            <span class="activity-badge">Review active</span>
                        </div>
                        <div class="activity-table">
                            <div class="table-row">
                                <span class="row-status warning"></span>
                                <span class="row-name">Windows Compliance Baseline</span>
                                <span class="row-type">Baseline drift</span>
                                <span class="row-time">Needs review</span>
                            </div>
                            <div class="table-row">
                                <span class="row-status success"></span>
                                <span class="row-name">BitLocker policy restore</span>
                                <span class="row-type">Restore preview</span>
                                <span class="row-time">Assignments in scope</span>
                            </div>
                            <div class="table-row">
                                <span class="row-status success"></span>
                                <span class="row-name">Conditional Access MFA</span>
                                <span class="row-type">Evidence linked</span>
                                <span class="row-time">Ready for approval</span>
                            </div>
                        </div>
                    </div>

                    <div class="queue-column">
                        <div class="queue-card">
                            <span class="queue-label">Restore preview</span>
                            <p class="queue-title">Scope and assignment edges stay visible before execution.</p>
                            <ul class="queue-list">
                                <li>Scope validated</li>
                                <li>Assignments included</li>
                                <li>Confirmation required</li>
                            </ul>
                        </div>
                        <div class="queue-card">
                            <span class="queue-label">Review queue</span>
                            <ul class="queue-list">
                                <li>Baseline drift awaiting reviewer</li>
                                <li>Restore plan queued for approval</li>
                                <li>Evidence pack linked to the change record</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="evidence-strip">Evidence stays linked to the change record before an operator acts.</div>
            </div>
        </div>
    </div>
</div>

<style>
    .hero-dashboard {
        border-radius: 1rem;
        overflow: hidden;
        border: 1px solid rgba(20, 20, 20, 0.08);
        box-shadow:
            0 24px 80px rgba(20, 20, 20, 0.1),
            0 8px 24px rgba(0, 0, 0, 0.05);
        background: white;
    }

    .dashboard-chrome {
        display: flex;
        flex-direction: column;
    }

    .dashboard-titlebar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.65rem 1rem;
        background: #fafafa;
        border-bottom: 1px solid rgba(20, 20, 20, 0.06);
    }

    .dot {
        display: block;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
    }

    .dot-red { background: #ff5f57; }
    .dot-yellow { background: #febc2e; }
    .dot-green { background: #28c840; }

    .titlebar-label {
        font-size: 0.7rem;
        font-weight: 500;
        color: rgba(20, 20, 20, 0.45);
        margin-left: 0.5rem;
    }

    .titlebar-url {
        font-size: 0.65rem;
        color: rgba(20, 20, 20, 0.35);
        background: rgba(20, 20, 20, 0.04);
        padding: 0.2rem 0.6rem;
        border-radius: 0.25rem;
    }

    .url-text {
        font-family: var(--font-mono);
    }

    .dashboard-body {
        display: grid;
        grid-template-columns: 140px 1fr;
        min-height: 260px;
    }

    .dashboard-sidebar {
        padding: 0.75rem;
        background: #f8f9fb;
        border-right: 1px solid rgba(20, 20, 20, 0.05);
    }

    .sidebar-logo {
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 0.5rem;
        background: var(--color-ink-900);
        color: white;
        font-size: 0.6rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.75rem;
    }

    .sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }

    .sidebar-divider {
        height: 1px;
        background: rgba(20, 20, 20, 0.06);
        margin: 0.5rem 0;
    }

    .nav-item {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.3rem 0.4rem;
        font-size: 0.65rem;
        color: rgba(20, 20, 20, 0.5);
        border-radius: 0.3rem;
    }

    .nav-item.active {
        background: rgba(40, 60, 120, 0.06);
        color: var(--color-ink-900);
        font-weight: 600;
    }

    .nav-dot {
        width: 0.35rem;
        height: 0.35rem;
        border-radius: 50%;
        background: var(--color-brand-500);
        opacity: 0.6;
    }

    .nav-dot.muted {
        background: rgba(20, 20, 20, 0.18);
    }

    .nav-item.active .nav-dot {
        opacity: 1;
    }

    .dashboard-main {
        padding: 0.75rem;
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
    }

    .stats-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .stat-card {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        padding: 0.5rem 0.6rem;
        border-radius: 0.5rem;
        border: 1px solid rgba(20, 20, 20, 0.05);
        background: #fbfbfd;
    }

    .stat-label {
        font-size: 0.55rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: rgba(20, 20, 20, 0.45);
        font-weight: 500;
    }

    .stat-value {
        font-size: 0.94rem;
        font-weight: 700;
        color: var(--color-ink-900);
        letter-spacing: -0.02em;
        line-height: 1.25;
    }

    .stat-change {
        font-size: 0.55rem;
        font-weight: 500;
        line-height: 1.35;
    }

    .stat-change.positive {
        color: var(--color-mint-700);
    }

    .stat-change.neutral {
        color: rgba(20, 20, 20, 0.4);
    }

    .activity-section {
        border: 1px solid rgba(20, 20, 20, 0.05);
        border-radius: 0.5rem;
        overflow: hidden;
    }

    .activity-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.28fr) minmax(14rem, 0.92fr);
        gap: 0.5rem;
    }

    .activity-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.45rem 0.6rem;
        background: #fafafa;
        border-bottom: 1px solid rgba(20, 20, 20, 0.05);
    }

    .activity-title {
        font-size: 0.65rem;
        font-weight: 600;
        color: var(--color-ink-900);
    }

    .activity-badge {
        font-size: 0.55rem;
        font-weight: 600;
        background: rgba(40, 60, 120, 0.07);
        color: var(--color-brand-500);
        padding: 0.1rem 0.4rem;
        border-radius: 999px;
    }

    .activity-table {
        display: flex;
        flex-direction: column;
    }

    .queue-column {
        display: grid;
        gap: 0.5rem;
    }

    .queue-card {
        border: 1px solid rgba(20, 20, 20, 0.05);
        border-radius: 0.5rem;
        background: #fbfbfd;
        padding: 0.65rem 0.7rem;
    }

    .queue-label {
        display: inline-flex;
        font-size: 0.55rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(20, 20, 20, 0.42);
    }

    .queue-title {
        margin: 0.45rem 0 0;
        font-size: 0.72rem;
        font-weight: 600;
        line-height: 1.45;
        color: var(--color-ink-900);
    }

    .queue-list {
        margin: 0.55rem 0 0;
        padding-left: 1rem;
        display: grid;
        gap: 0.35rem;
        font-size: 0.64rem;
        line-height: 1.45;
        color: rgba(20, 20, 20, 0.56);
    }

    .evidence-strip {
        border-radius: 0.5rem;
        background: rgba(40, 60, 120, 0.06);
        color: var(--color-ink-800);
        font-size: 0.64rem;
        font-weight: 600;
        line-height: 1.4;
        padding: 0.5rem 0.65rem;
    }

    .table-row {
        display: grid;
        grid-template-columns: 0.5rem 1fr auto auto;
        gap: 0.5rem;
        align-items: center;
        padding: 0.4rem 0.6rem;
        font-size: 0.6rem;
        border-bottom: 1px solid rgba(20, 20, 20, 0.04);
    }

    .table-row:last-child {
        border-bottom: none;
    }

    .row-status {
        width: 0.45rem;
        height: 0.45rem;
        border-radius: 50%;
    }

    .row-status.success {
        background: var(--color-mint-500);
    }

    .row-status.warning {
        background: #febc2e;
    }

    .row-name {
        font-weight: 500;
        color: var(--color-ink-900);
    }

    .row-type {
        color: rgba(20, 20, 20, 0.4);
        font-weight: 500;
    }

    .row-time {
        color: rgba(20, 20, 20, 0.35);
    }

    @media (max-width: 640px) {
        .dashboard-body {
            grid-template-columns: 1fr;
        }

        .dashboard-sidebar {
            display: none;
        }

        .stats-row {
            grid-template-columns: 1fr;
        }

        .titlebar-url {
            display: none;
        }

        .activity-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
