@{
    ViewData["Title"] = "Theme Audit";
}

<style>
    .theme-audit-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
        gap: 1.5rem;
        align-items: start;
    }

    .theme-audit-preview {
        min-width: 0;
        padding: 1rem;
        border: 1px solid var(--bs-border-color);
        border-radius: .5rem;
        background: var(--bs-body-bg);
        color: var(--bs-body-color);
    }

    .theme-audit-section {
        margin-top: 1.5rem;
        padding-top: 1rem;
        border-top: 1px solid var(--bs-border-color);
    }

    .theme-audit-section > h2 {
        margin-bottom: 1rem;
        font-size: 1rem;
    }

    .theme-audit-button-stack {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
    }

    .theme-audit-timeline {
        overflow-x: auto;
        padding-bottom: .25rem;
    }

    .theme-audit-popover-sample,
    .theme-audit-modal-sample {
        margin-top: .75rem;
        max-width: 100%;
    }

    .theme-audit-popover-sample.popover {
        position: static;
        display: block;
        max-width: 22rem;
        z-index: auto;
    }

</style>

<div class="page-heading compact">
    <div>
        <p class="eyebrow">Admin utility</p>
        <h1>Dark Theme Audit</h1>
        <p class="lead-text">Hidden internal component samples for checking PlotDirector light and dark theme coverage.</p>
    </div>
</div>

<div class="alert alert-info">
    This page is intentionally not linked from public navigation. Use it to log visual issues; avoid treating these samples as a new design system.
</div>

<div class="theme-audit-grid">
    <section class="theme-audit-preview" data-theme="light" data-bs-theme="light" aria-label="Light theme preview">
        <div class="page-heading compact mb-0">
            <div>
                <p class="eyebrow">Light theme</p>
                <h1>Component Samples</h1>
                <p class="lead-text">Representative UI elements using current Bootstrap and PlotDirector classes.</p>
            </div>
        </div>

        <section class="theme-audit-section">
            <h2>Typography</h2>
            <nav class="breadcrumb-trail" aria-label="Sample breadcrumb">
                <a href="#">Projects</a>
                <a href="#">The Brass Orchard</a>
                <span>Theme audit</span>
            </nav>
            <p class="eyebrow">Scene planning</p>
            <h1>Page heading</h1>
            <h2>Subheading</h2>
            <p class="lead-text">A lead paragraph for introduction copy and overview states.</p>
            <p class="muted mb-0">Muted helper text for metadata, hints, and quieter descriptions.</p>
        </section>

        <section class="theme-audit-section">
            <h2>Cards</h2>
            <div class="content-grid">
                <article class="plain-card">
                    <p class="eyebrow">Standard card</p>
                    <h3>Project overview</h3>
                    <p>Card body text with a short action row.</p>
                    <div class="button-row">
                        <button class="btn btn-outline-primary btn-sm" type="button">Open</button>
                        <button class="btn btn-outline-secondary btn-sm" type="button">Edit</button>
                    </div>
                </article>
                <article class="plain-card">
                    <p class="eyebrow">Dashboard card</p>
                    <p class="writer-kpi">42%</p>
                    <p>Draft progress this week.</p>
                </article>
            </div>
            <div class="empty-panel mt-3">
                <h2>Empty state</h2>
                <p>No matching scenes were found for this filter.</p>
                <button class="btn btn-primary" type="button">Create sample</button>
            </div>
        </section>

        <section class="theme-audit-section">
            <h2>Tables</h2>
            <div class="table-responsive">
                <table class="table table-sm align-middle">
                    <thead>
                        <tr>
                            <th>Scene</th>
                            <th>Status</th>
                            <th>Warnings</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Chapter 3, Scene 2</td>
                            <td><span class="badge text-bg-success">Drafted</span></td>
                            <td><span class="severity-pill warning">Warning</span></td>
                        </tr>
                        <tr>
                            <td>Chapter 4, Scene 1</td>
                            <td><span class="badge text-bg-light">Outline</span></td>
                            <td><span class="severity-pill info">Info</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <section class="theme-audit-section">
            <h2>Forms</h2>
            <form>
                <div class="row g-2">
                    <div class="col-sm-6">
                        <label class="form-label" for="light-title">Text input</label>
                        <input class="form-control is-invalid" id="light-title" value="The missing ledger" />
                        <span class="text-danger">Example validation message.</span>
                        <span class="field-validation-error d-block">Field validation error sample.</span>
                    </div>
                    <div class="col-sm-6">
                        <label class="form-label" for="light-date">Date input</label>
                        <input class="form-control" id="light-date" type="date" value="2026-06-18" />
                    </div>
                    <div class="col-12">
                        <label class="form-label" for="light-summary">Textarea</label>
                        <textarea class="form-control" id="light-summary" rows="3">A compact sample of longer scene notes.</textarea>
                    </div>
                    <div class="col-sm-6">
                        <label class="form-label" for="light-select">Select list</label>
                        <select class="form-select" id="light-select">
                            <option>Outline</option>
                            <option selected>Draft</option>
                            <option>Revision</option>
                        </select>
                    </div>
                    <div class="col-sm-6">
                        <label class="form-label d-block">Checkboxes and radios</label>
                        <label class="form-check">
                            <input class="form-check-input" type="checkbox" checked />
                            <span class="form-check-label">Track continuity</span>
                        </label>
                        <label class="form-check">
                            <input class="form-check-input" name="light-radio" type="radio" checked />
                            <span class="form-check-label">Primary</span>
                        </label>
                        <label class="form-check">
                            <input class="form-check-input" name="light-radio" type="radio" />
                            <span class="form-check-label">Secondary</span>
                        </label>
                    </div>
                </div>
            </form>
        </section>

        <section class="theme-audit-section">
            <h2>Buttons</h2>
            <div class="theme-audit-button-stack">
                <button class="btn btn-primary" type="button">Primary</button>
                <button class="btn btn-secondary" type="button">Secondary</button>
                <button class="btn btn-outline-primary" type="button">Outline</button>
                <button class="btn btn-danger" type="button">Danger</button>
                <button class="btn btn-success" type="button">Success</button>
                <button class="btn btn-warning" type="button">Warning</button>
                <button class="btn btn-outline-secondary btn-sm" type="button">Small</button>
                <button class="btn btn-primary" type="button" disabled>Disabled</button>
            </div>
        </section>

        <section class="theme-audit-section">
            <h2>Alerts and Badges</h2>
            <div class="alert alert-info">Info alert sample.</div>
            <div class="alert alert-success">Success alert sample.</div>
            <div class="alert alert-warning">Warning alert sample.</div>
            <div class="alert alert-danger mb-3">Danger alert sample.</div>
            <div class="theme-audit-button-stack">
                <span class="badge text-bg-success">Active</span>
                <span class="badge text-bg-info">Info</span>
                <span class="badge text-bg-warning">Review</span>
                <span class="badge text-bg-danger">Blocked</span>
                <span class="status-pill">Status pill</span>
                <span class="severity-pill info">Info</span>
                <span class="severity-pill warning">Warning</span>
                <span class="severity-pill error">Error</span>
                <span class="archived-badge">Archived</span>
            </div>
        </section>

        <section class="theme-audit-section">
            <h2>Navigation Components</h2>
            <ul class="nav nav-pills mb-3">
                <li class="nav-item"><a class="nav-link active" href="#">Overview</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Scenes</a></li>
                <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
            </ul>
            <div class="accordion mb-3" id="light-audit-accordion">
                <div class="accordion-item">
                    <h3 class="accordion-header">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#light-audit-collapse">Accordion sample</button>
                    </h3>
                    <div class="accordion-collapse collapse show" id="light-audit-collapse">
                        <div class="accordion-body">Collapsible content using Bootstrap accordion styling.</div>
                    </div>
                </div>
            </div>
            <div class="dropdown mb-3">
                <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown</button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Open scene</a></li>
                    <li><a class="dropdown-item" href="#">Export notes</a></li>
                </ul>
            </div>
            <nav aria-label="Light pagination">
                <ul class="pagination pagination-sm mb-0">
                    <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">Next</a></li>
                    <li class="page-item disabled"><a class="page-link" href="#">Last</a></li>
                </ul>
            </nav>
        </section>

        <section class="theme-audit-section">
            <h2>Modals and Overlays</h2>
            <button class="btn btn-primary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#lightThemeAuditModal">Open modal</button>
            <button class="plotline-help-icon ms-2" type="button" data-help-icon data-help-key="theme.audit" data-help-title="Help popover" data-help-summary="Sample help popover content." data-help-micro="Help trigger">?</button>
            <div class="popover plotline-help-popover theme-audit-popover-sample bs-popover-bottom" role="tooltip">
                <div class="popover-arrow"></div>
                <h3 class="popover-header">Help popover</h3>
                <div class="popover-body">
                    Sample popover content with a <a class="plotline-help-more" href="#">More...</a> link.
                </div>
            </div>
            <div class="modal-content plotline-confirm-modal theme-audit-modal-sample">
                <div class="modal-header">
                    <h2 class="modal-title fs-5">Visible modal content sample</h2>
                </div>
                <div class="modal-body">Inline modal surface for reviewing body contrast without opening the dialog.</div>
                <div class="modal-footer">
                    <button class="btn btn-outline-secondary" type="button">Cancel</button>
                    <button class="btn btn-primary" type="button">Confirm</button>
                </div>
            </div>
            <div class="modal fade" id="lightThemeAuditModal" tabindex="-1" aria-labelledby="lightThemeAuditModalTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content plotline-confirm-modal">
                        <div class="modal-header">
                            <h2 class="modal-title fs-5" id="lightThemeAuditModalTitle">Modal sample</h2>
                            <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">Modal body content for contrast and border checks.</div>
                        <div class="modal-footer">
                            <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Cancel</button>
                            <button class="btn btn-primary" type="button">Confirm</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="theme-audit-section">
            <h2>Progress and Timeline</h2>
            <div class="progress mb-3" role="progressbar" aria-label="Draft progress" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
                <div class="progress-bar" style="width: 65%">65%</div>
            </div>
            <div class="theme-audit-timeline timeline-workspace">
                <div class="timeline-chapter" style="--chapter-scene-count: 2;">
                    <div class="timeline-chapter-title"><strong>Chapter 7</strong><span>Two scenes</span></div>
                    <div class="timeline-scenes">
                        <article class="timeline-scene-card selected">
                            <strong>Scene 1</strong>
                            <p class="scene-summary">A public reveal changes the stakes.</p>
                            <div class="scene-badge-row"><span class="badge text-bg-warning">Revision</span></div>
                        </article>
                        <article class="timeline-scene-card">
                            <strong>Scene 2</strong>
                            <p class="scene-summary">The character chooses a side.</p>
                            <div class="scene-badge-row"><span class="badge text-bg-success">Draft</span></div>
                        </article>
                    </div>
                </div>
            </div>
        </section>

    </section>

    <section class="theme-audit-preview" data-theme="dark" data-bs-theme="dark" aria-label="Dark theme preview">
        <div class="page-heading compact mb-0">
            <div>
                <p class="eyebrow">Dark theme</p>
                <h1>Component Samples</h1>
                <p class="lead-text">The same representative elements scoped to dark theme attributes.</p>
            </div>
        </div>

        <section class="theme-audit-section">
            <h2>Typography</h2>
            <nav class="breadcrumb-trail" aria-label="Sample breadcrumb">
                <a href="#">Projects</a>
                <a href="#">The Brass Orchard</a>
                <span>Theme audit</span>
            </nav>
            <p class="eyebrow">Scene planning</p>
            <h1>Page heading</h1>
            <h2>Subheading</h2>
            <p class="lead-text">A lead paragraph for introduction copy and overview states.</p>
            <p class="muted mb-0">Muted helper text for metadata, hints, and quieter descriptions.</p>
        </section>

        <section class="theme-audit-section">
            <h2>Cards</h2>
            <div class="content-grid">
                <article class="plain-card">
                    <p class="eyebrow">Standard card</p>
                    <h3>Project overview</h3>
                    <p>Card body text with a short action row.</p>
                    <div class="button-row">
                        <button class="btn btn-outline-primary btn-sm" type="button">Open</button>
                        <button class="btn btn-outline-secondary btn-sm" type="button">Edit</button>
                    </div>
                </article>
                <article class="plain-card">
                    <p class="eyebrow">Dashboard card</p>
                    <p class="writer-kpi">42%</p>
                    <p>Draft progress this week.</p>
                </article>
            </div>
            <div class="empty-panel mt-3">
                <h2>Empty state</h2>
                <p>No matching scenes were found for this filter.</p>
                <button class="btn btn-primary" type="button">Create sample</button>
            </div>
        </section>

        <section class="theme-audit-section">
            <h2>Tables</h2>
            <div class="table-responsive">
                <table class="table table-sm align-middle">
                    <thead>
                        <tr>
                            <th>Scene</th>
                            <th>Status</th>
                            <th>Warnings</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Chapter 3, Scene 2</td>
                            <td><span class="badge text-bg-success">Drafted</span></td>
                            <td><span class="severity-pill warning">Warning</span></td>
                        </tr>
                        <tr>
                            <td>Chapter 4, Scene 1</td>
                            <td><span class="badge text-bg-light">Outline</span></td>
                            <td><span class="severity-pill info">Info</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <section class="theme-audit-section">
            <h2>Forms</h2>
            <form>
                <div class="row g-2">
                    <div class="col-sm-6">
                        <label class="form-label" for="dark-title">Text input</label>
                        <input class="form-control is-invalid" id="dark-title" value="The missing ledger" />
                        <span class="text-danger">Example validation message.</span>
                        <span class="field-validation-error d-block">Field validation error sample.</span>
                    </div>
                    <div class="col-sm-6">
                        <label class="form-label" for="dark-date">Date input</label>
                        <input class="form-control" id="dark-date" type="date" value="2026-06-18" />
                    </div>
                    <div class="col-12">
                        <label class="form-label" for="dark-summary">Textarea</label>
                        <textarea class="form-control" id="dark-summary" rows="3">A compact sample of longer scene notes.</textarea>
                    </div>
                    <div class="col-sm-6">
                        <label class="form-label" for="dark-select">Select list</label>
                        <select class="form-select" id="dark-select">
                            <option>Outline</option>
                            <option selected>Draft</option>
                            <option>Revision</option>
                        </select>
                    </div>
                    <div class="col-sm-6">
                        <label class="form-label d-block">Checkboxes and radios</label>
                        <label class="form-check">
                            <input class="form-check-input" type="checkbox" checked />
                            <span class="form-check-label">Track continuity</span>
                        </label>
                        <label class="form-check">
                            <input class="form-check-input" name="dark-radio" type="radio" checked />
                            <span class="form-check-label">Primary</span>
                        </label>
                        <label class="form-check">
                            <input class="form-check-input" name="dark-radio" type="radio" />
                            <span class="form-check-label">Secondary</span>
                        </label>
                    </div>
                </div>
            </form>
        </section>

        <section class="theme-audit-section">
            <h2>Buttons</h2>
            <div class="theme-audit-button-stack">
                <button class="btn btn-primary" type="button">Primary</button>
                <button class="btn btn-secondary" type="button">Secondary</button>
                <button class="btn btn-outline-primary" type="button">Outline</button>
                <button class="btn btn-danger" type="button">Danger</button>
                <button class="btn btn-success" type="button">Success</button>
                <button class="btn btn-warning" type="button">Warning</button>
                <button class="btn btn-outline-secondary btn-sm" type="button">Small</button>
                <button class="btn btn-primary" type="button" disabled>Disabled</button>
            </div>
        </section>

        <section class="theme-audit-section">
            <h2>Alerts and Badges</h2>
            <div class="alert alert-info">Info alert sample.</div>
            <div class="alert alert-success">Success alert sample.</div>
            <div class="alert alert-warning">Warning alert sample.</div>
            <div class="alert alert-danger mb-3">Danger alert sample.</div>
            <div class="theme-audit-button-stack">
                <span class="badge text-bg-success">Active</span>
                <span class="badge text-bg-info">Info</span>
                <span class="badge text-bg-warning">Review</span>
                <span class="badge text-bg-danger">Blocked</span>
                <span class="status-pill">Status pill</span>
                <span class="severity-pill info">Info</span>
                <span class="severity-pill warning">Warning</span>
                <span class="severity-pill error">Error</span>
                <span class="archived-badge">Archived</span>
            </div>
        </section>

        <section class="theme-audit-section">
            <h2>Navigation Components</h2>
            <ul class="nav nav-pills mb-3">
                <li class="nav-item"><a class="nav-link active" href="#">Overview</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Scenes</a></li>
                <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
            </ul>
            <div class="accordion mb-3" id="dark-audit-accordion">
                <div class="accordion-item">
                    <h3 class="accordion-header">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#dark-audit-collapse">Accordion sample</button>
                    </h3>
                    <div class="accordion-collapse collapse show" id="dark-audit-collapse">
                        <div class="accordion-body">Collapsible content using Bootstrap accordion styling.</div>
                    </div>
                </div>
            </div>
            <div class="dropdown mb-3">
                <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown</button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Open scene</a></li>
                    <li><a class="dropdown-item" href="#">Export notes</a></li>
                </ul>
            </div>
            <nav aria-label="Dark pagination">
                <ul class="pagination pagination-sm mb-0">
                    <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">Next</a></li>
                    <li class="page-item disabled"><a class="page-link" href="#">Last</a></li>
                </ul>
            </nav>
        </section>

        <section class="theme-audit-section">
            <h2>Modals and Overlays</h2>
            <button class="btn btn-primary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#darkThemeAuditModal">Open modal</button>
            <button class="plotline-help-icon ms-2" type="button" data-help-icon data-help-key="theme.audit" data-help-title="Help popover" data-help-summary="Sample help popover content." data-help-micro="Help trigger" data-theme-audit-dark-popover="true">?</button>
            <div class="popover plotline-help-popover theme-audit-popover-sample bs-popover-bottom" role="tooltip" data-theme="dark" data-bs-theme="dark">
                <div class="popover-arrow"></div>
                <h3 class="popover-header">Help popover</h3>
                <div class="popover-body">
                    Sample popover content with a <a class="plotline-help-more" href="#">More...</a> link.
                </div>
            </div>
            <div class="modal-content plotline-confirm-modal theme-audit-modal-sample">
                <div class="modal-header">
                    <h2 class="modal-title fs-5">Visible modal content sample</h2>
                </div>
                <div class="modal-body">Inline modal surface for reviewing body contrast without opening the dialog.</div>
                <div class="modal-footer">
                    <button class="btn btn-outline-secondary" type="button">Cancel</button>
                    <button class="btn btn-primary" type="button">Confirm</button>
                </div>
            </div>
            <div class="modal fade" id="darkThemeAuditModal" tabindex="-1" aria-labelledby="darkThemeAuditModalTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content plotline-confirm-modal">
                        <div class="modal-header">
                            <h2 class="modal-title fs-5" id="darkThemeAuditModalTitle">Modal sample</h2>
                            <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">Modal body content for contrast and border checks.</div>
                        <div class="modal-footer">
                            <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Cancel</button>
                            <button class="btn btn-primary" type="button">Confirm</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="theme-audit-section">
            <h2>Progress and Timeline</h2>
            <div class="progress mb-3" role="progressbar" aria-label="Draft progress" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
                <div class="progress-bar" style="width: 65%">65%</div>
            </div>
            <div class="theme-audit-timeline timeline-workspace">
                <div class="timeline-chapter" style="--chapter-scene-count: 2;">
                    <div class="timeline-chapter-title"><strong>Chapter 7</strong><span>Two scenes</span></div>
                    <div class="timeline-scenes">
                        <article class="timeline-scene-card selected">
                            <strong>Scene 1</strong>
                            <p class="scene-summary">A public reveal changes the stakes.</p>
                            <div class="scene-badge-row"><span class="badge text-bg-warning">Revision</span></div>
                        </article>
                        <article class="timeline-scene-card">
                            <strong>Scene 2</strong>
                            <p class="scene-summary">The character chooses a side.</p>
                            <div class="scene-badge-row"><span class="badge text-bg-success">Draft</span></div>
                        </article>
                    </div>
                </div>
            </div>
        </section>

    </section>
</div>

@section Scripts {
    <script>
        (() => {
            document.querySelectorAll("[data-theme-audit-dark-popover]").forEach((trigger) => {
                trigger.addEventListener("shown.bs.popover", () => {
                    const popoverId = trigger.getAttribute("aria-describedby");
                    const popover = popoverId ? document.getElementById(popoverId) : null;
                    if (!popover) return;

                    popover.dataset.theme = "dark";
                    popover.dataset.bsTheme = "dark";
                    popover.classList.add("theme-audit-dark-popover");
                });
            });
        })();
    </script>
}