Modals

<section class="athena-modal-demo-grid" aria-label="Modal examples">
      <article class="athena-card p-4"><span class="athena-feature-icon"><i class="bi bi-shield-check" aria-hidden="true"></i></span><h2 class="h5">Confirmation Modal</h2><p class="text-secondary mb-0">For destructive, security, and workflow confirmation steps.</p><button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#athenaConfirmModal">Open Confirmation</button></article>
      <article class="athena-card p-4"><span class="athena-feature-icon"><i class="bi bi-input-cursor-text" aria-hidden="true"></i></span><h2 class="h5">Form Modal</h2><p class="text-secondary mb-0">Use forms, validation messages, help text, and grouped controls inside dialogs.</p><button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#athenaFormModal">Open Form</button></article>
      <article class="athena-card p-4"><span class="athena-feature-icon"><i class="bi bi-graph-up-arrow" aria-hidden="true"></i></span><h2 class="h5">Insight Modal</h2><p class="text-secondary mb-0">Cards, progress, lists, empty states, and metadata can sit inside a modal body.</p><button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#athenaInsightModal">Open Insight</button></article>
      <article class="athena-card p-4"><span class="athena-feature-icon"><i class="bi bi-table" aria-hidden="true"></i></span><h2 class="h5">Table Modal</h2><p class="text-secondary mb-0">Responsive tables and action rows work inside larger modal layouts.</p><button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#athenaTableModal">Open Table</button></article>
      <article class="athena-card p-4"><span class="athena-feature-icon"><i class="bi bi-arrows-fullscreen" aria-hidden="true"></i></span><h2 class="h5">Full-Screen Modal</h2><p class="text-secondary mb-0">Use full-screen modals for dense setup, review, or multi-step workflows.</p><button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#athenaFullscreenModal">Open Full Screen</button></article>
      <article class="athena-card p-4"><span class="athena-feature-icon"><i class="bi bi-layout-sidebar-inset-reverse" aria-hidden="true"></i></span><h2 class="h5">Offcanvas Drawer</h2><p class="text-secondary mb-0">Use drawers for contextual editing without taking over the whole page.</p><button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#athenaDrawer" aria-controls="athenaDrawer">Open Drawer</button></article>
    </section>

    <section class="athena-card p-4 mt-4">
      <h2 class="h4">Modal Guidance</h2>
      <div class="row g-4">
        <div class="col-12 col-lg-4"><h3 class="h6">Accessibility</h3><p class="text-secondary mb-0">Every modal has a labelled title, a keyboard-reachable close control, and meaningful button text.</p></div>
        <div class="col-12 col-lg-4"><h3 class="h6">Content</h3><p class="text-secondary mb-0">Use cards, tables, forms, alerts, progress, lists, and empty states inside modals when the task needs them.</p></div>
        <div class="col-12 col-lg-4"><h3 class="h6">Security</h3><p class="text-secondary mb-0">Do not perform destructive actions on open. Keep final confirmation wired to trusted backend handlers.</p></div>
      </div>
    </section>

    <div class="modal fade" id="athenaConfirmModal" tabindex="-1" aria-labelledby="athenaConfirmModalTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><h2 class="modal-title h5" id="athenaConfirmModalTitle">Confirm Access Change</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><div class="alert alert-warning mb-3" role="alert"><i class="bi bi-exclamation-triangle" aria-hidden="true"></i> This demo shows the confirmation pattern only.</div><p class="mb-0">You are about to revoke administrator access for Avery Stone. In production, wire this action to a protected backend route.</p></div><div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button><button type="button" class="btn btn-danger">Revoke Access</button></div></div></div>
    </div>

    <div class="modal fade" id="athenaFormModal" tabindex="-1" aria-labelledby="athenaFormModalTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg"><div class="modal-content"><div class="modal-header"><h2 class="modal-title h5" id="athenaFormModalTitle">Create Review Task</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><form><div class="modal-body"><div class="row g-3"><div class="col-12 col-md-6"><label class="form-label" for="modal-task-name">Task Name</label><input class="form-control" id="modal-task-name" type="text" value="Quarterly access review"></div><div class="col-12 col-md-6"><label class="form-label" for="modal-task-owner">Owner</label><select class="form-select" id="modal-task-owner"><option>Avery Stone</option><option>Rina Park</option><option>Aisha Khan</option></select></div><div class="col-12"><label class="form-label" for="modal-task-note">Instructions</label><textarea class="form-control" id="modal-task-note" rows="4">Check privileged accounts, stale sessions, and MFA coverage.</textarea></div></div></div><div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button><button type="submit" class="btn btn-primary">Create Task</button></div></form></div></div>
    </div>

    <div class="modal fade" id="athenaInsightModal" tabindex="-1" aria-labelledby="athenaInsightModalTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg"><div class="modal-content"><div class="modal-header"><h2 class="modal-title h5" id="athenaInsightModalTitle">Campaign Insight</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><div class="row g-3"><div class="col-12 col-md-4"><article class="athena-card p-3 shadow-none"><p class="text-secondary mb-1">Conversion</p><strong class="h3">8.4%</strong><span class="badge text-bg-success">+1.2%</span></article></div><div class="col-12 col-md-4"><article class="athena-card p-3 shadow-none"><p class="text-secondary mb-1">Reach</p><strong class="h3">42k</strong><span class="badge text-bg-info">Live</span></article></div><div class="col-12 col-md-4"><article class="athena-card p-3 shadow-none"><p class="text-secondary mb-1">Budget</p><strong class="h3">71%</strong><span class="badge text-bg-warning">Watch</span></article></div></div><div class="athena-empty compact mt-3"><i class="bi bi-inbox" aria-hidden="true"></i><p>No unresolved insight notes.</p></div></div><div class="modal-footer"><button type="button" class="btn btn-primary" data-bs-dismiss="modal">Done</button></div></div></div>
    </div>

    <div class="modal fade" id="athenaTableModal" tabindex="-1" aria-labelledby="athenaTableModalTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-xl"><div class="modal-content"><div class="modal-header"><h2 class="modal-title h5" id="athenaTableModalTitle">Recent Records</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><div class="table-responsive"><table class="table table-hover align-middle"><caption>Recent modal records</caption><thead><tr><th scope="col">Record</th><th scope="col">Owner</th><th scope="col">Status</th><th scope="col">Updated</th></tr></thead><tbody><tr><th scope="row">Billing Review</th><td>Avery Stone</td><td><span class="badge text-bg-success">Ready</span></td><td>Today</td></tr><tr><th scope="row">Security Evidence</th><td>Aisha Khan</td><td><span class="badge text-bg-warning">Review</span></td><td>Yesterday</td></tr><tr><th scope="row">Content Approval</th><td>Rina Park</td><td><span class="badge text-bg-info">Active</span></td><td>Jun 3</td></tr></tbody></table></div></div><div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Export</button></div></div></div>
    </div>

    <div class="modal fade" id="athenaFullscreenModal" tabindex="-1" aria-labelledby="athenaFullscreenModalTitle" aria-hidden="true">
      <div class="modal-dialog modal-fullscreen-lg-down modal-xl"><div class="modal-content"><div class="modal-header"><h2 class="modal-title h5" id="athenaFullscreenModalTitle">Workspace Setup</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><div class="row g-4"><div class="col-12 col-lg-4"><article class="athena-card p-4 h-100 shadow-none"><h3 class="h5">1. Details</h3><p class="text-secondary">Collect organisation, region, and owner details.</p></article></div><div class="col-12 col-lg-4"><article class="athena-card p-4 h-100 shadow-none"><h3 class="h5">2. Permissions</h3><p class="text-secondary">Assign roles, invite users, and require MFA.</p></article></div><div class="col-12 col-lg-4"><article class="athena-card p-4 h-100 shadow-none"><h3 class="h5">3. Review</h3><p class="text-secondary">Confirm settings before the backend creates the workspace.</p></article></div></div></div><div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button><button type="button" class="btn btn-primary">Continue</button></div></div></div>
    </div>

    <div class="offcanvas offcanvas-end" tabindex="-1" id="athenaDrawer" aria-labelledby="athenaDrawerTitle">
      <div class="offcanvas-header"><h2 class="offcanvas-title h5" id="athenaDrawerTitle">Edit Record</h2><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button></div><div class="offcanvas-body"><form class="athena-stack"><div><label class="form-label" for="drawer-title">Title</label><input id="drawer-title" class="form-control" type="text" value="Quarterly planning"></div><div><label class="form-label" for="drawer-status">Status</label><select id="drawer-status" class="form-select"><option>Draft</option><option selected>In Review</option><option>Published</option></select></div><button class="btn btn-primary" type="submit">Save Changes</button></form></div>
    </div>