<div data-controller="sidebar">
  <div class="tw:flex tw:min-h-screen tw:bg-background">
    <aside class="tw-sidebar">
      <!-- Logo -->
      <div class="tw-sidebar-logo">
        <a href="#" class="tw-sidebar-logo-link">
          <img src="/mat-plus-logo.png" alt="MAT plus — home">
        </a>
      </div>
      <!-- Navigation -->
      <nav class="tw-sidebar-nav" role="navigation" aria-label="MAT navigation">
        <a href="#"
         class="tw-sidebar-item"
         data-label="MAT Templates"
         >
          <i class="fa-light fa-files tw-sidebar-icon"></i>
          <span class="tw:sr-only">MAT Templates</span>
        </a>
        <a href="#"
         class="tw-sidebar-item"
         data-label="Insights"
         >
          <i class="fa-light fa-chart-mixed tw-sidebar-icon"></i>
          <span class="tw:sr-only">Insights</span>
        </a>
        <a href="#"
         class="tw-sidebar-item"
         data-label="Destination Tracker"
         >
          <i class="fa-light fa-school-flag tw-sidebar-icon"></i>
          <span class="tw:sr-only">Destination Tracker</span>
        </a>
        <a href="#"
         class="tw-sidebar-item tw-active"
         data-label="Student Retention"
         aria-current="page">
          <i class="fa-light fa-graduation-cap tw-sidebar-icon"></i>
          <span class="tw:sr-only">Student Retention</span>
        </a>
        <button type="button"
              class="tw-sidebar-item"
              data-sidebar-target="item"
              data-action="click->sidebar#toggleDrawer"
          data-drawer="events_calendar"
          data-label="Events & Calendar"
          aria-expanded="false">
          <i class="fa-light fa-calendar-star tw-sidebar-icon"></i>
          <span class="tw:sr-only">Events & Calendar</span>
        </button>
        <button type="button"
              class="tw-sidebar-item"
              data-sidebar-target="item"
              data-action="click->sidebar#toggleDrawer"
          data-drawer="enquiries_surveys"
          data-label="Enquiries & Surveys"
          aria-expanded="false">
          <i class="fa-light fa-envelope tw-sidebar-icon"></i>
          <span class="tw:sr-only">Enquiries & Surveys</span>
        </button>
      </nav>
      <!-- Bottom Section -->
      <div class="tw-sidebar-bottom">
        <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
          data-drawer="trust_settings"
          data-label="Trust Settings"
          aria-expanded="false">
          <i class="fa-light fa-cog tw-sidebar-icon"></i>
          <span class="tw:sr-only">Trust Settings</span>
        </button>
        <a href="#" class="tw-sidebar-item" data-label="Sign out">
          <i class="fa-light fa-sign-out tw-sidebar-icon"></i>
          <span class="tw:sr-only">Sign out</span>
        </a>
      </div>
    </aside>
    <div class="tw-sidebar-drawer"
       data-sidebar-target="drawer"
       data-drawer-id="events_calendar"
       aria-label="Events & Calendar navigation">
      <div class="tw-sidebar-drawer-header">EVENTS & CALENDAR</div>
      <nav class="tw-drawer-nav">
        <a href="/lookbook/preview/projects/mat_plus/events"
           class="tw-drawer-item">
          <span class="tw-drawer-item-label">Events</span>
        </a>
        <a href="#"
           class="tw-drawer-item">
          <span class="tw-drawer-item-label">Calendar</span>
        </a>
      </nav>
    </div>
    <div class="tw-sidebar-drawer"
       data-sidebar-target="drawer"
       data-drawer-id="enquiries_surveys"
       aria-label="Enquiries & Surveys navigation">
      <div class="tw-sidebar-drawer-header">ENQUIRIES & SURVEYS</div>
      <nav class="tw-drawer-nav">
        <a href="/lookbook/preview/projects/mat_enquiries/all_enquiries"
           class="tw-drawer-item">
          <span class="tw-drawer-item-label">Enquiries</span>
        </a>
        <a href="/lookbook/preview/projects/mat_surveys/surveys"
           class="tw-drawer-item">
          <span class="tw-drawer-item-label">Surveys</span>
        </a>
      </nav>
    </div>
    <div class="tw-sidebar-drawer"
       data-sidebar-target="drawer"
       data-drawer-id="trust_settings"
       aria-label="Trust Settings navigation">
      <div class="tw-sidebar-drawer-header">TRUST SETTINGS</div>
      <nav class="tw-drawer-nav">
        <a href="#"
           class="tw-drawer-item">
          <span class="tw-drawer-item-label">Settings</span>
        </a>
        <a href="#"
           class="tw-drawer-item">
          <span class="tw-drawer-item-label">Admins & Staff</span>
        </a>
        <a href="#"
           class="tw-drawer-item">
          <span class="tw-drawer-item-label">Invitation</span>
        </a>
        <a href="#"
           class="tw-drawer-item">
          <span class="tw-drawer-item-label">Group Linking Requests</span>
        </a>
        <a href="#"
           class="tw-drawer-item">
          <span class="tw-drawer-item-label">Password & Security</span>
        </a>
        <a href="#"
           class="tw-drawer-item">
          <span class="tw-drawer-item-label">Old Dashboard</span>
        </a>
      </nav>
    </div>
    <!-- ============================================
       Main Content Area (offset by sidebar)
       ============================================ -->
    <div class="tw:ml-16 tw:flex-1 tw:min-w-0 tw:flex tw:flex-col">
      <header class="tw:sticky tw:top-0 tw:z-40 tw:flex tw:items-center tw:justify-between tw:h-16 tw:px-6 tw:bg-neutral-0 tw:border-b tw:border-neutral-200" role="banner">
        <!-- Left: Trust identity -->
        <div class="tw:flex tw:items-center tw:gap-3">
          <div class="tw:w-10 tw:h-10 tw:rounded-lg tw:bg-neutral-100 tw:flex tw:items-center tw:justify-center tw:text-neutral-400 tw:shrink-0">
            <i class="fa-regular fa-building tw:text-lg" aria-hidden="true"></i>
          </div>
          <div>
            <div class="fw-bold tw:text-body-m tw:leading-body-m tw:text-neutral-900">Demo School Trust</div>
            <div class="tw:hidden tw:md:block tw:text-body-xs tw:leading-body-xs text-muted">39 Schools • 4 Regions • 30,000+ Students</div>
          </div>
        </div>
        <!-- Right: Search + action buttons + notifications + avatar -->
        <div class="tw-topbar-right">
          <!-- Search -->
          <div class="tw:hidden tw:lg:flex tw-topbar-search">
            <div class="tw-input-group tw-has-icon-start">
              <i class="fa-regular fa-magnifying-glass tw-input-group-icon tw-input-group-icon-start"></i>
              <input type="search" class="tw-form-control" placeholder="Search students, schools..." aria-label="Search">
            </div>
          </div>
          <!-- Action Buttons -->
          <button type="button" class="tw-btn tw-btn-outline-success tw-btn-multiline tw:hidden tw:xl:inline-flex" data-controller="tooltip" data-tooltip-content-value="Referral Program" data-tooltip-placement-value="bottom">
            <i class="fa-solid fa-gift tw-icon-16"></i>
            Refer<br>
             & Save
          </button>
          <button type="button" class="tw-btn tw-btn-outline-primary tw-btn-multiline tw:hidden tw:xl:inline-flex" data-controller="tooltip" data-tooltip-content-value="Discuss Ideas & Submit Feature Requests" data-tooltip-placement-value="bottom">
            <i class="fa-solid fa-users tw-icon-16"></i>
            Applicaa<br>
             Community
          </button>
          <button type="button" class="tw-btn tw-btn-outline-primary tw-btn-multiline tw:hidden tw:xl:inline-flex" data-controller="tooltip" data-tooltip-content-value="Support & Feature Requests" data-tooltip-placement-value="bottom">
            <i class="fa-solid fa-comment-question tw-icon-16"></i>
            Support<br>
             & Requests
          </button>
          <div class="tw-topbar-action-icons">
            <button type="button" class="tw-btn tw-btn-tertiary tw-btn-icon tw-topbar-notification-btn" aria-label="Notifications" data-controller="tooltip" data-tooltip-content-value="Notification" data-tooltip-placement-value="bottom">
              <i class="fa-solid fa-bell tw-icon-16"></i>
            </button>
          </div>
          <div class="tw-topbar-divider"></div>
          <!-- User Avatar Dropdown -->
          <div class="tw-dropdown tw-dropdown-icon tw-dropdown-borderless" data-controller="dropdown">
            <button type="button" class="tw-dropdown-trigger tw-topbar-avatar"
                  aria-label="User menu"
                  aria-haspopup="true"
                  aria-expanded="false"
                  data-dropdown-target="trigger"
                  data-action="click->dropdown#toggle keydown->dropdown#keydown">
              <div class="tw-avatar tw-avatar-primary" role="img" aria-label="Jane Doe">
                <span>JD</span>
              </div>
            </button>
            <div class="tw-dropdown-menu tw-dropdown-menu-end" role="menu" data-dropdown-target="menu" tabindex="-1">
              <div class="tw-dropdown-header">John Doe</div>
              <div class="tw-dropdown-divider"></div>
              <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                <i class="fa-regular fa-circle-sterling tw-dropdown-item-icon"></i>
                <span class="tw-dropdown-item-text">Referrals & billing</span>
              </button>
              <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                <i class="fa-regular fa-lock tw-dropdown-item-icon"></i>
                <span class="tw-dropdown-item-text">Password & security</span>
              </button>
              <div class="tw-dropdown-divider"></div>
              <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                <i class="fa-regular fa-layer-group tw-dropdown-item-icon"></i>
                <span class="tw-dropdown-item-text">Multiple form</span>
              </button>
              <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                <i class="fa-regular fa-envelope tw-dropdown-item-icon"></i>
                <span class="tw-dropdown-item-text">Email preferences</span>
              </button>
              <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                <i class="fa-regular fa-right-from-bracket tw-dropdown-item-icon"></i>
                <span class="tw-dropdown-item-text">Logout</span>
              </button>
            </div>
          </div>
        </div>
      </header>
      <!-- ============================================
         Page Content
         ============================================ -->
      <main class="tw:flex-1 tw:min-w-0 tw:bg-background tw:flex tw:flex-col">
        <div id="studentRetentionView" class="tw-container-fluid tw:pb-6" data-controller="tabs mat-retention popup">
          <!-- Page Header -->
          <div class="tw-page-header tw-page-header-flush">
            <div class="tw-page-header-main">
              <div class="tw-page-header-title-group">
                <h1 class="tw-page-header-title">Student Retention</h1>
                <span class="tw-page-header-subtitle">Track and improve student retention across transition points</span>
              </div>
            </div>
          </div>
          <!-- Tabs -->
          <div class="tw-tabs" role="tablist" aria-label="Student retention sections">
            <button class="tw-tab tw-active" type="button" role="tab" aria-selected="true" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown">Dashboard</button>
            <button class="tw-tab" type="button" role="tab" aria-selected="false" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown">Pipeline</button>
            <button class="tw-tab" type="button" role="tab" aria-selected="false" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown">Flight Risk</button>
            <button class="tw-tab" type="button" role="tab" aria-selected="false" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown">Competitors</button>
          </div>
          <div class="tw-tab-content tw:mt-6">
            <!-- ===== DASHBOARD ===== -->
            <div class="tw-tab-panel tw-active" role="tabpanel" data-tabs-target="panel">
              <!-- Alert banner -->
              <div class="tw-inline-notification tw-inline-notification-warning tw:mb-6" role="alert">
                <i class="fa-solid fa-triangle-exclamation tw-inline-notification-icon" aria-hidden="true"></i>
                <div class="tw-inline-notification-content">
                  <div class="tw-inline-notification-title">14 students flagged as high flight risk</div>
                  <div class="tw-inline-notification-message">For Year 7 transition — 14 have not engaged with any trust secondary events.</div>
                  <div class="tw-inline-notification-actions">
                    <button type="button" class="tw-btn tw-btn-outline-warning tw-btn-sm" data-action="click->mat-retention#goToFlightRisk">View details <i class="fa-solid fa-arrow-right tw:ml-1" aria-hidden="true"></i></button>
                  </div>
                </div>
              </div>
              <!-- KPI cards -->
              <div class="tw:grid tw:grid-cols-1 tw:sm:grid-cols-2 tw:lg:grid-cols-4 tw:gap-4 tw:mb-6">
                <div class="tw-card">
                  <div class="tw-card-body">
                    <div class="tw:text-body-xs tw:leading-body-xs tw:uppercase tw:tracking-wide tw:text-muted tw:font-semibold">Trust-Wide Retention Rate</div>
                    <div class="tw:text-3xl tw:font-bold tw:text-success tw:mt-1">78%</div>
                    <div class="tw:text-body-s tw:leading-body-s tw:text-success tw:mt-1"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i> 3% vs last year</div>
                  </div>
                </div>
                <div class="tw-card">
                  <div class="tw-card-body">
                    <div class="tw:text-body-xs tw:leading-body-xs tw:uppercase tw:tracking-wide tw:text-muted tw:font-semibold">Students at Transition</div>
                    <div class="tw:text-3xl tw:font-bold tw:mt-1">487</div>
                    <div class="tw:text-body-s tw:leading-body-s tw:text-muted tw:mt-1">Across 3 phases</div>
                  </div>
                </div>
                <div class="tw-card">
                  <div class="tw-card-body">
                    <div class="tw:text-body-xs tw:leading-body-xs tw:uppercase tw:tracking-wide tw:text-muted tw:font-semibold">Flight Risk (High)</div>
                    <div class="tw:text-3xl tw:font-bold tw:text-danger tw:mt-1">14</div>
                    <div class="tw:text-body-s tw:leading-body-s tw:text-danger tw:mt-1"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i> 4 since last month</div>
                  </div>
                </div>
                <div class="tw-card">
                  <div class="tw-card-body">
                    <div class="tw:text-body-xs tw:leading-body-xs tw:uppercase tw:tracking-wide tw:text-muted tw:font-semibold">Est. Revenue at Risk</div>
                    <div class="tw:text-3xl tw:font-bold tw:text-warning tw:mt-1">£462K</div>
                    <div class="tw:text-body-s tw:leading-body-s tw:text-muted tw:mt-1">Over 5-year period</div>
                  </div>
                </div>
              </div>
              <!-- Row: Transition Phase + Trend -->
              <div class="tw:grid tw:grid-cols-1 tw:lg:grid-cols-2 tw:gap-5 tw:mb-6">
                <!-- Retention by Transition Phase -->
                <div class="tw-card">
                  <div class="tw-card-header tw:flex tw:items-center tw:justify-between">
                    <h3 class="tw-h6 tw-card-title tw:mb-0">Retention by Transition Phase</h3>
                    <span class="tw-badge tw-badge-info-subtle">Live Tracking</span>
                  </div>
                  <div class="tw-card-body">
                    <div class="tw:flex tw:items-end tw:gap-2">
                      <div class="tw:flex-1 tw:text-center">
                        <div class="tw:w-14 tw:mx-auto tw:rounded-t-lg tw:bg-primary tw:h-40"></div>
                        <div class="tw:text-body-lg tw:font-bold tw:mt-0.5">312</div>
                        <div class="tw:text-body-xs tw:leading-body-xs tw:text-muted">Year 6</div>
                        <div class="tw:text-body-xs tw:leading-body-xs tw:text-muted">in trust primaries</div>
                      </div>
                      <div class="tw:flex-1 tw:text-center">
                        <div class="tw:w-14 tw:mx-auto tw:rounded-t-lg tw:bg-success tw:h-32"></div>
                        <div class="tw:text-body-lg tw:font-bold tw:mt-0.5">249</div>
                        <div class="tw:text-body-xs tw:leading-body-xs tw:text-muted">→ Year 7</div>
                        <div class="tw:text-body-xs tw:leading-body-xs tw:text-success">80% retained</div>
                      </div>
                      <div class="tw:flex-1 tw:text-center">
                        <div class="tw:w-14 tw:mx-auto tw:rounded-t-lg tw:bg-primary tw:h-24"></div>
                        <div class="tw:text-body-lg tw:font-bold tw:mt-0.5">175</div>
                        <div class="tw:text-body-xs tw:leading-body-xs tw:text-muted">Year 11</div>
                        <div class="tw:text-body-xs tw:leading-body-xs tw:text-muted">in trust secondaries</div>
                      </div>
                      <div class="tw:flex-1 tw:text-center">
                        <div class="tw:w-14 tw:mx-auto tw:rounded-t-lg tw:bg-warning tw:h-16"></div>
                        <div class="tw:text-body-lg tw:font-bold tw:mt-0.5">118</div>
                        <div class="tw:text-body-xs tw:leading-body-xs tw:text-muted">→ Year 12</div>
                        <div class="tw:text-body-xs tw:leading-body-xs tw:text-warning">67% retained</div>
                      </div>
                    </div>
                    <div class="tw:mt-4 tw:pt-4 tw:border-t tw:border-neutral-200 tw:text-body-s tw:leading-body-s tw:text-muted">
                      <h4 class="tw:mb-0">Biggest leakage:</h4>
                      <p>Year 11 → Sixth Form — 57 students at risk of leaving to FE colleges</p>
                    </div>
                  </div>
                </div>
                <!-- Retention Trend (5 Years) -->
                <div class="tw-card">
                  <div class="tw-card-header">
                    <h3 class="tw-h6 tw-card-title tw:mb-0">Retention Trend (5 Years)</h3>
                  </div>
                  <div class="tw-card-body">
                    <div class="tw:flex tw:items-end tw:gap-3">
                      <div class="tw:flex-1 tw:text-center">
                        <div class="tw:flex tw:gap-1 tw:items-end tw:justify-center">
                          <div class="tw:w-6 tw:bg-primary tw:rounded-t tw:h-28"></div>
                          <div class="tw:w-6 tw:bg-warning tw:rounded-t tw:h-20"></div>
                        </div>
                        <div class="tw:text-body-lg tw:text-muted tw:mt-0.5 tw:font-bold">21/22</div>
                        <div class="tw:text-body-xs tw:leading-body-xs tw:text-muted">70% / 55%</div>
                      </div>
                      <div class="tw:flex-1 tw:text-center">
                        <div class="tw:flex tw:gap-1 tw:items-end tw:justify-center">
                          <div class="tw:w-6 tw:bg-primary tw:rounded-t tw:h-24"></div>
                          <div class="tw:w-6 tw:bg-warning tw:rounded-t tw:h-20"></div>
                        </div>
                        <div class="tw:text-body-lg tw:text-muted tw:mt-0.5 tw:font-bold">22/23</div>
                        <div class="tw:text-body-xs tw:leading-body-xs tw:text-muted">72% / 58%</div>
                      </div>
                      <div class="tw:flex-1 tw:text-center">
                        <div class="tw:flex tw:gap-1 tw:items-end tw:justify-center">
                          <div class="tw:w-6 tw:bg-primary tw:rounded-t tw:h-32"></div>
                          <div class="tw:w-6 tw:bg-warning tw:rounded-t tw:h-20"></div>
                        </div>
                        <div class="tw:text-body-lg tw:text-muted tw:mt-0.5 tw:font-bold">23/24</div>
                        <div class="tw:text-body-xs tw:leading-body-xs tw:text-muted">75% / 60%</div>
                      </div>
                      <div class="tw:flex-1 tw:text-center">
                        <div class="tw:flex tw:gap-1 tw:items-end tw:justify-center">
                          <div class="tw:w-6 tw:bg-primary tw:rounded-t tw:h-32"></div>
                          <div class="tw:w-6 tw:bg-warning tw:rounded-t tw:h-24"></div>
                        </div>
                        <div class="tw:text-body-lg tw:text-muted tw:mt-0.5 tw:font-bold">24/25</div>
                        <div class="tw:text-body-xs tw:leading-body-xs tw:text-muted">77% / 63%</div>
                      </div>
                      <div class="tw:flex-1 tw:text-center">
                        <div class="tw:flex tw:gap-1 tw:items-end tw:justify-center">
                          <div class="tw:w-6 tw:bg-primary tw:rounded-t tw:h-40"></div>
                          <div class="tw:w-6 tw:bg-warning tw:rounded-t tw:h-24"></div>
                        </div>
                        <div class="tw:text-body-lg tw:text-muted tw:mt-0.5 tw:font-bold">25/26</div>
                        <div class="tw:text-body-xs tw:leading-body-xs tw:text-muted">80% / 67%</div>
                      </div>
                    </div>
                    <div class="tw:flex tw:justify-center tw:gap-6 tw:mt-6">
                      <div class="tw:flex tw:items-center tw:gap-1.5"><span class="tw:inline-block tw:w-3 tw:h-3 tw:bg-primary tw:rounded-sm"></span><span class="tw:text-body-s tw:leading-body-s">Primary → Secondary</span></div>
                      <div class="tw:flex tw:items-center tw:gap-1.5"><span class="tw:inline-block tw:w-3 tw:h-3 tw:bg-warning tw:rounded-sm"></span><span class="tw:text-body-s tw:leading-body-s">Secondary → Sixth Form</span></div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Row: School-Level + Upcoming Actions -->
              <div class="tw:grid tw:grid-cols-1 tw:lg:grid-cols-2 tw:gap-5">
                <!-- School-Level Retention -->
                <div class="tw-card">
                  <div class="tw-card-header">
                    <h3 class="tw-h6 tw-card-title tw:mb-0">School-Level Retention</h3>
                  </div>
                  <div class="tw-card-body tw:p-0">
                    <table class="tw-table tw-table-hover">
                      <thead>
                        <tr>
                          <th>School</th>
                          <th>Phase</th>
                          <th>Students</th>
                          <th>Retention</th>
                          <th>Trend</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr class="tw-table-row-clickable" data-action="click->mat-retention#goToPipelineForSchool" data-school="Demo Tindal Primary" data-phase="yr6">
                          <td class="tw:font-medium">Demo Tindal Primary</td>
                          <td class="tw:text-muted">Yr6→7</td>
                          <td>124</td>
                          <td>
                            <div class="tw:flex tw:items-center tw:gap-2">
                              <div class="tw:w-24 tw:h-2 tw:bg-neutral-100 tw:rounded-full tw:overflow-hidden">
                                <div class="tw:h-full tw:rounded-full tw:bg-success tw:w-5/6"></div>
                              </div>
                              <span class="tw:text-body-xs tw:leading-body-xs">86%</span></div>
                          </td>
                          <td class="tw:text-body-xs tw:leading-body-xs tw:text-success"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i> 4%</td>
                        </tr>
                        <tr class="tw-table-row-clickable" data-action="click->mat-retention#goToPipelineForSchool" data-school="Demo John Archer" data-phase="yr6">
                          <td class="tw:font-medium">Demo John Archer</td>
                          <td class="tw:text-muted">Yr6→7</td>
                          <td>98</td>
                          <td>
                            <div class="tw:flex tw:items-center tw:gap-2">
                              <div class="tw:w-24 tw:h-2 tw:bg-neutral-100 tw:rounded-full tw:overflow-hidden">
                                <div class="tw:h-full tw:rounded-full tw:bg-warning tw:w-4/5"></div>
                              </div>
                              <span class="tw:text-body-xs tw:leading-body-xs">79%</span></div>
                          </td>
                          <td class="tw:text-body-xs tw:leading-body-xs tw:text-success"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i> 2%</td>
                        </tr>
                        <tr class="tw-table-row-clickable" data-action="click->mat-retention#goToPipelineForSchool" data-school="Demo Atwood" data-phase="yr6">
                          <td class="tw:font-medium">Demo Atwood</td>
                          <td class="tw:text-muted">Yr6→7</td>
                          <td>90</td>
                          <td>
                            <div class="tw:flex tw:items-center tw:gap-2">
                              <div class="tw:w-24 tw:h-2 tw:bg-neutral-100 tw:rounded-full tw:overflow-hidden">
                                <div class="tw:h-full tw:rounded-full tw:bg-warning tw:w-3/4"></div>
                              </div>
                              <span class="tw:text-body-xs tw:leading-body-xs">72%</span></div>
                          </td>
                          <td class="tw:text-body-xs tw:leading-body-xs tw:text-danger"><i class="fa-solid fa-arrow-down" aria-hidden="true"></i> 1%</td>
                        </tr>
                        <tr class="tw-table-row-clickable" data-action="click->mat-retention#goToPipelineForSchool" data-school="Demo Priory" data-phase="yr6">
                          <td class="tw:font-medium">Demo Priory</td>
                          <td class="tw:text-muted">Yr6→7</td>
                          <td>45</td>
                          <td>
                            <div class="tw:flex tw:items-center tw:gap-2">
                              <div class="tw:w-24 tw:h-2 tw:bg-neutral-100 tw:rounded-full tw:overflow-hidden">
                                <div class="tw:h-full tw:rounded-full tw:bg-success tw:w-5/6"></div>
                              </div>
                              <span class="tw:text-body-xs tw:leading-body-xs">84%</span></div>
                          </td>
                          <td class="tw:text-body-xs tw:leading-body-xs tw:text-success"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i> 3%</td>
                        </tr>
                        <tr class="tw-table-row-clickable" data-action="click->mat-retention#goToPipelineForSchool" data-school="Demo Boulton" data-phase="yr6">
                          <td class="tw:font-medium">Demo Boulton</td>
                          <td class="tw:text-muted">Yr6→7</td>
                          <td>38</td>
                          <td>
                            <div class="tw:flex tw:items-center tw:gap-2">
                              <div class="tw:w-24 tw:h-2 tw:bg-neutral-100 tw:rounded-full tw:overflow-hidden">
                                <div class="tw:h-full tw:rounded-full tw:bg-warning tw:w-3/4"></div>
                              </div>
                              <span class="tw:text-body-xs tw:leading-body-xs">76%</span></div>
                          </td>
                          <td class="tw:text-body-xs tw:leading-body-xs tw:text-success"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i> 1%</td>
                        </tr>
                        <tr class="tw-table-row-clickable" data-action="click->mat-retention#goToPipelineForSchool" data-school="Demo Academy" data-phase="yr11">
                          <td class="tw:font-medium">Demo Academy</td>
                          <td class="tw:text-muted">Yr11→12</td>
                          <td>175</td>
                          <td>
                            <div class="tw:flex tw:items-center tw:gap-2">
                              <div class="tw:w-24 tw:h-2 tw:bg-neutral-100 tw:rounded-full tw:overflow-hidden">
                                <div class="tw:h-full tw:rounded-full tw:bg-danger tw:w-2/3"></div>
                              </div>
                              <span class="tw:text-body-xs tw:leading-body-xs">67%</span></div>
                          </td>
                          <td class="tw:text-body-xs tw:leading-body-xs tw:text-success"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i> 5%</td>
                        </tr>
                        <tr class="tw-table-row-clickable" data-action="click->mat-retention#goToPipelineForSchool" data-school="Demo Kings Academy" data-phase="yr11">
                          <td class="tw:font-medium">Demo Kings Academy</td>
                          <td class="tw:text-muted">Yr11→12</td>
                          <td>120</td>
                          <td>
                            <div class="tw:flex tw:items-center tw:gap-2">
                              <div class="tw:w-24 tw:h-2 tw:bg-neutral-100 tw:rounded-full tw:overflow-hidden">
                                <div class="tw:h-full tw:rounded-full tw:bg-warning tw:w-3/4"></div>
                              </div>
                              <span class="tw:text-body-xs tw:leading-body-xs">71%</span></div>
                          </td>
                          <td class="tw:text-body-xs tw:leading-body-xs tw:text-success"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i> 3%</td>
                        </tr>
                        <tr>
                          <td class="tw:font-medium">Demo Victoria Academy</td>
                          <td class="tw:text-muted">Yr11→12</td>
                          <td>95</td>
                          <td>
                            <div class="tw:flex tw:items-center tw:gap-2">
                              <div class="tw:w-24 tw:h-2 tw:bg-neutral-100 tw:rounded-full tw:overflow-hidden">
                                <div class="tw:h-full tw:rounded-full tw:bg-danger tw:w-3/5"></div>
                              </div>
                              <span class="tw:text-body-xs tw:leading-body-xs">64%</span></div>
                          </td>
                          <td class="tw:text-body-xs tw:leading-body-xs tw:text-danger"><i class="fa-solid fa-arrow-down" aria-hidden="true"></i> 2%</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
                <!-- Upcoming Actions -->
                <div class="tw-card">
                  <div class="tw-card-header tw:flex tw:items-center tw:justify-between">
                    <h3 class="tw-h6 tw-card-title tw:mb-0">Upcoming Actions</h3>
                    <span class="tw-badge tw-badge-primary-subtle">This Week</span>
                  </div>
                  <div class="tw-card-body">
                    <div class="tw-timeline">
                      <div class="tw-timeline-item" data-controller="collapsible">
                        <div class="tw-timeline-icon tw-timeline-icon-green"><i class="fa-regular fa-clipboard-check" aria-hidden="true"></i></div>
                        <div class="tw-timeline-card">
                          <button class="tw-timeline-card-header" type="button" data-action="click->collapsible#toggle" aria-expanded="false">
                            <span class="tw-timeline-card-type tw-timeline-card-type-green">Survey</span>
                            <span class="tw-timeline-card-title">Year 5 parent survey sent</span>
                            <time class="tw-timeline-card-time" datetime="2026-02-10">Mon 10 Feb</time>
                            <i class="fa-solid fa-chevron-down tw-timeline-card-chevron" data-collapsible-target="icon" aria-hidden="true"></i>
                          </button>
                          <div class="tw-collapsible-content" data-collapsible-target="content">
                            <div class="tw-timeline-card-detail">
                              <div class="tw-timeline-card-detail-inner tw:text-body-s tw:leading-body-s tw:text-muted">Demo Tindal Primary — 67% response rate so far (209 of 312 families). Demo Atwood is lowest at 54%; a reminder is scheduled via the school office.</div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="tw-timeline-item" data-controller="collapsible">
                        <div class="tw-timeline-icon tw-timeline-icon-blue"><i class="fa-regular fa-paper-plane" aria-hidden="true"></i></div>
                        <div class="tw-timeline-card">
                          <button class="tw-timeline-card-header" type="button" data-action="click->collapsible#toggle" aria-expanded="false">
                            <span class="tw-timeline-card-type tw-timeline-card-type-blue">Email</span>
                            <span class="tw-timeline-card-title">Sixth form taster day invites sent</span>
                            <time class="tw-timeline-card-time" datetime="2026-02-10">Mon 10 Feb</time>
                            <i class="fa-solid fa-chevron-down tw-timeline-card-chevron" data-collapsible-target="icon" aria-hidden="true"></i>
                          </button>
                          <div class="tw-collapsible-content" data-collapsible-target="content">
                            <div class="tw-timeline-card-detail">
                              <div class="tw-timeline-card-detail-inner tw:text-body-s tw:leading-body-s tw:text-muted">Sent to all 175 Year 11 students across Demo Academy and Demo Kings Academy.</div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="tw-timeline-item" data-controller="collapsible">
                        <div class="tw-timeline-icon tw-timeline-icon-neutral"><i class="fa-regular fa-envelope" aria-hidden="true"></i></div>
                        <div class="tw-timeline-card">
                          <button class="tw-timeline-card-header" type="button" data-action="click->collapsible#toggle" aria-expanded="false">
                            <span class="tw-timeline-card-type tw-timeline-card-type-neutral">Email</span>
                            <span class="tw-timeline-card-title">Re-engagement email to high-risk Year 6 families</span>
                            <time class="tw-timeline-card-time" datetime="2026-02-12">Wed 12 Feb</time>
                            <i class="fa-solid fa-chevron-down tw-timeline-card-chevron" data-collapsible-target="icon" aria-hidden="true"></i>
                          </button>
                          <div class="tw-collapsible-content" data-collapsible-target="content">
                            <div class="tw-timeline-card-detail">
                              <div class="tw-timeline-card-detail-inner tw:text-body-s tw:leading-body-s tw:text-muted">Targets the 14 students flagged as high flight risk, personalised by each family's top risk factor.</div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="tw-timeline-item" data-controller="collapsible">
                        <div class="tw-timeline-icon tw-timeline-icon-neutral"><i class="fa-regular fa-calendar" aria-hidden="true"></i></div>
                        <div class="tw-timeline-card">
                          <button class="tw-timeline-card-header" type="button" data-action="click->collapsible#toggle" aria-expanded="false">
                            <span class="tw-timeline-card-type tw-timeline-card-type-neutral">Event</span>
                            <span class="tw-timeline-card-title">Demo Academy open evening</span>
                            <time class="tw-timeline-card-time" datetime="2026-02-13">Thu 13 Feb</time>
                            <i class="fa-solid fa-chevron-down tw-timeline-card-chevron" data-collapsible-target="icon" aria-hidden="true"></i>
                          </button>
                          <div class="tw-collapsible-content" data-collapsible-target="content">
                            <div class="tw-timeline-card-detail">
                              <div class="tw-timeline-card-detail-inner tw:text-body-s tw:leading-body-s tw:text-muted">Track attendance of trust feeder-school students — sign-ins feed back into each student's engagement score.</div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="tw-timeline-item" data-controller="collapsible">
                        <div class="tw-timeline-icon tw-timeline-icon-neutral"><i class="fa-regular fa-chart-column" aria-hidden="true"></i></div>
                        <div class="tw-timeline-card">
                          <button class="tw-timeline-card-header" type="button" data-action="click->collapsible#toggle" aria-expanded="false">
                            <span class="tw-timeline-card-type tw-timeline-card-type-neutral">Report</span>
                            <span class="tw-timeline-card-title">Weekly retention report to trust board</span>
                            <time class="tw-timeline-card-time" datetime="2026-02-14">Fri 14 Feb</time>
                            <i class="fa-solid fa-chevron-down tw-timeline-card-chevron" data-collapsible-target="icon" aria-hidden="true"></i>
                          </button>
                          <div class="tw-collapsible-content" data-collapsible-target="content">
                            <div class="tw-timeline-card-detail">
                              <div class="tw-timeline-card-detail-inner tw:text-body-s tw:leading-body-s tw:text-muted">Trust-wide retention summary, flight-risk movements since last week, and the school-level breakdown.</div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="tw-timeline-item" data-controller="collapsible">
                        <div class="tw-timeline-icon tw-timeline-icon-neutral"><i class="fa-regular fa-flag-checkered" aria-hidden="true"></i></div>
                        <div class="tw-timeline-card">
                          <button class="tw-timeline-card-header" type="button" data-action="click->collapsible#toggle" aria-expanded="false">
                            <span class="tw-timeline-card-type tw-timeline-card-type-neutral">Milestone</span>
                            <span class="tw-timeline-card-title">National Offer Day — Year 7 allocations published</span>
                            <time class="tw-timeline-card-time" datetime="2026-03-01">1 Mar</time>
                            <i class="fa-solid fa-chevron-down tw-timeline-card-chevron" data-collapsible-target="icon" aria-hidden="true"></i>
                          </button>
                          <div class="tw-collapsible-content" data-collapsible-target="content">
                            <div class="tw-timeline-card-detail">
                              <div class="tw-timeline-card-detail-inner tw:text-body-s tw:leading-body-s tw:text-muted">Year 7 allocation results are published nationally. Final retention numbers are known; welcome and onboarding begins for confirmed students.</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- ===== PIPELINE ===== -->
            <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel" hidden>
              <!-- Filters -->
              <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-3 tw:mb-5">
                <div class="tw:w-48">
                  <select class="tw-form-select" aria-label="Transition phase" data-mat-retention-target="phaseSelect" data-action="change->mat-retention#renderPipeline">
                    <option value="yr6">Year 6 → Year 7</option>
                    <option value="yr11" selected>Year 11 → Year 12</option>
                  </select>
                </div>
                <div class="tw:w-56">
                  <select class="tw-form-select" aria-label="School" data-mat-retention-target="schoolSelect" data-action="change->mat-retention#renderPipeline">
                    <option value="">All Schools</option>
                  </select>
                </div>
              </div>
              <!-- Engagement Journey (Year 11 only) -->
              <div class="tw-card tw:mb-6" data-mat-retention-target="engJourney">
                <div class="tw-card-header tw:flex tw:items-center tw:justify-between">
                  <h3 class="tw-h6 tw-card-title tw:mb-0">Engagement Journey — Year 11 → Year 12 (2026 Entry)</h3>
                  <span class="tw-badge tw-badge-info-subtle">Internal Retention</span></div>
                <div class="tw-card-body tw:overflow-x-auto">
                  <div class="tw:flex" data-mat-retention-target="engStages"></div>
                </div>
              </div>
              <!-- Cohort Pipeline funnel -->
              <div class="tw-card tw:mb-6">
                <div class="tw-card-header">
                  <h3 class="tw-h6 tw-card-title tw:mb-0">Cohort Pipeline — <span data-mat-retention-target="funnelLabel">Year 11 → Year 12 (2026 Entry)</span></h3>
                </div>
                <div class="tw-card-body tw:p-0 tw:border-b tw:border-neutral-200">
                  <div class="tw:flex tw:items-stretch tw:relative">
                    <div class="tw:flex-1 tw:p-4 tw:text-center tw:cursor-pointer tw:hover:text-neutral-50 tw:hover:bg-neutral-50 tw:text-neutral-0 tw:focus-visible:outline-none tw:relative tw:focus-visible:ring-2 tw:focus-visible:ring-primary/25" role="button" tabindex="0" data-intent="" data-mat-retention-target="funnelTile" data-funnel-bg="tw:bg-primary-100" data-funnel-text="tw:text-primary-100" data-action="click->mat-retention#funnelClick keydown->mat-retention#funnelKeydown">
                      <div class="tw:text-neutral-800">
                        <div class="tw:text-3xl tw:font-bold tw:text-primary" data-mat-retention-target="funnelTotal">0</div>
                        <div class="tw:text-body-s tw:leading-body-xs tw:mt-1 tw:font-semibold">Total Cohort</div>
                      </div>
                      <svg width="9" height="100" viewBox="0 0 9 100" class="tw:absolute tw:-ml-0.5 tw:z-10 tw:top-0 tw:left-full tw:h-full">
                        <path d="M0.493779 -3.49691e-07L8.49377 50L0.493774 100" fill="currentColor" stroke="rgba(0,0,0,0.12)"/>
                      </svg>
                    </div>
                    <div class="tw:flex-1 tw:p-4 tw:text-center tw:cursor-pointer tw:hover:text-neutral-50 tw:hover:bg-neutral-50 tw:text-neutral-0 tw:focus-visible:outline-none tw:relative tw:focus-visible:ring-2 tw:focus-visible:ring-primary/25" role="button" tabindex="0" data-intent="Staying" data-mat-retention-target="funnelTile" data-funnel-bg="tw:bg-green-100" data-funnel-text="tw:text-green-100" data-action="click->mat-retention#funnelClick keydown->mat-retention#funnelKeydown">
                      <div class="tw:text-neutral-800">
                        <div class="tw:text-3xl tw:font-bold tw:text-success" data-mat-retention-target="funnelStay">0</div>
                        <div class="tw:text-body-s tw:leading-body-xs tw:mt-1 tw:font-semibold">Intent to Stay</div>
                        <div class="tw:text-body-xs tw:leading-body-xs tw:mt-0.5" data-mat-retention-target="funnelStayPct">0% of cohort</div>
                      </div>
                      <svg width="9" height="100" viewBox="0 0 9 100" class="tw:absolute tw:-ml-0.5 tw:z-10 tw:top-0 tw:left-full tw:h-full">
                        <path d="M0.493779 -3.49691e-07L8.49377 50L0.493774 100" fill="currentColor" stroke="rgba(0,0,0,0.12)"/>
                      </svg>
                    </div>
                    <div class="tw:flex-1 tw:p-4 tw:text-center tw:cursor-pointer tw:hover:text-neutral-50 tw:hover:bg-neutral-50 tw:text-neutral-0 tw:focus-visible:outline-none tw:relative tw:focus-visible:ring-2 tw:focus-visible:ring-primary/25" role="button" tabindex="0" data-intent="Undecided" data-mat-retention-target="funnelTile" data-funnel-bg="tw:bg-orange-100" data-funnel-text="tw:text-orange-100" data-action="click->mat-retention#funnelClick keydown->mat-retention#funnelKeydown">
                      <div class="tw:text-neutral-800">
                        <div class="tw:text-3xl tw:font-bold tw:text-warning" data-mat-retention-target="funnelUndecided">0</div>
                        <div class="tw:text-body-s tw:leading-body-xs tw:mt-1 tw:font-semibold">Undecided</div>
                        <div class="tw:text-body-xs tw:leading-body-xs tw:mt-0.5">Opportunity zone</div>
                      </div>
                      <svg width="9" height="100" viewBox="0 0 9 100" class="tw:absolute tw:-ml-0.5 tw:z-10 tw:top-0 tw:left-full tw:h-full">
                        <path d="M0.493779 -3.49691e-07L8.49377 50L0.493774 100" fill="currentColor" stroke="rgba(0,0,0,0.12)"/>
                      </svg>
                    </div>
                    <div class="tw:flex-1 tw:p-4 tw:text-center tw:cursor-pointer tw:hover:text-neutral-50 tw:hover:bg-neutral-50 tw:text-neutral-0 tw:focus-visible:outline-none tw:relative tw:focus-visible:ring-2 tw:focus-visible:ring-primary/25" role="button" tabindex="0" data-intent="Leaving" data-mat-retention-target="funnelTile" data-funnel-bg="tw:bg-red-100" data-funnel-text="tw:text-red-100" data-action="click->mat-retention#funnelClick keydown->mat-retention#funnelKeydown">
                      <div class="tw:text-neutral-800">
                        <div class="tw:text-3xl tw:font-bold tw:text-danger" data-mat-retention-target="funnelLeaving">0</div>
                        <div class="tw:text-body-s tw:leading-body-xs tw:mt-1 tw:font-semibold">Likely Leaving</div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- Student-Level Detail table -->
                <div class="tw:px-4 tw:py-3 tw:flex tw:items-center tw:justify-between tw:gap-3">
                  <div class="tw:flex tw:items-center tw:gap-3">
                    <h3 class="tw-h4 tw:mb-0 tw:text-neutral-600">Student-Level Detail</h3>
                    <span class="tw-badge tw-badge-secondary-subtle" data-mat-retention-target="studentCount">0 students</span>
                  </div>
                  <div class="tw:w-48">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Engagement" data-mat-retention-target="engSelect" data-action="change->mat-retention#renderPipeline">
                      <option value="">All Engagement</option>
                      <option value="Highly Engaged">Highly Engaged</option>
                      <option value="Warm">Warm</option>
                      <option value="Needs Nurture">Needs Nurture</option>
                      <option value="Disengaged">Disengaged</option>
                    </select>
                  </div>
                </div>
                <div class="tw-card-body tw:p-0 tw:overflow-x-auto">
                  <table class="tw-table">
                    <thead>
                      <tr>
                        <th>Student</th>
                        <th>School</th>
                        <th>Intent</th>
                        <th>Open Evening</th>
                        <th>Survey</th>
                        <th data-mat-retention-target="yr11Col">Eligibility</th>
                        <th data-mat-retention-target="yr11Col">Engagement</th>
                        <th>Risk</th>
                        <th>Action</th>
                      </tr>
                    </thead>
                    <tbody data-mat-retention-target="studentRows"></tbody>
                  </table>
                </div>
              </div>
            </div>
            <!-- ===== FLIGHT RISK ===== -->
            <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel" hidden>
              <div class="tw-inline-notification tw-inline-notification-warning tw:mb-6">
                <i class="fa-solid fa-triangle-exclamation tw-inline-notification-icon" aria-hidden="true"></i>
                <div class="tw-inline-notification-content">
                  <div class="tw-inline-notification-title">14 students scored as High Flight Risk</div>
                  <div class="tw-inline-notification-message">Based on: no open-evening attendance, negative/no survey response, distance from trust secondary, no sibling connection.</div>
                </div>
              </div>
              <div class="tw:space-y-5">
                <!-- Risk Score Breakdown -->
                <div class="tw-card">
                  <div class="tw-card-header">
                    <h3 class="tw-h6 tw-card-title tw:mb-0">Risk Score Breakdown</h3>
                  </div>
                  <div class="tw-card-body">
                    <div class="tw:grid tw:gap-6 tw:lg:grid-cols-10">
                      <!-- Left (70%): risk distribution bars -->
                      <div class="tw:lg:col-span-7">
                        <div class="tw:mb-5">
                          <div class="tw:flex tw:justify-between tw:items-center tw:mb-2 tw:text-body-s tw:leading-body-s"><span><i class="fa-solid fa-circle fa-2xs tw:text-success" aria-hidden="true"></i> Low Risk (0–2)</span><strong>14 students</strong></div>
                          <div class="tw:w-full tw:h-2 tw:bg-neutral-100 tw:rounded-full tw:overflow-hidden">
                            <div class="tw:h-full tw:rounded-full tw:bg-success tw:w-2/5"></div>
                          </div>
                        </div>
                        <div class="tw:mb-5">
                          <div class="tw:flex tw:justify-between tw:items-center tw:mb-2 tw:text-body-s tw:leading-body-s"><span><i class="fa-solid fa-circle fa-2xs tw:text-warning" aria-hidden="true"></i> Medium Risk (3–4)</span><strong>9 students</strong></div>
                          <div class="tw:w-full tw:h-2 tw:bg-neutral-100 tw:rounded-full tw:overflow-hidden">
                            <div class="tw:h-full tw:rounded-full tw:bg-warning tw:w-1/4"></div>
                          </div>
                        </div>
                        <div>
                          <div class="tw:flex tw:justify-between tw:items-center tw:mb-2 tw:text-body-s tw:leading-body-s"><span><i class="fa-solid fa-circle fa-2xs tw:text-danger" aria-hidden="true"></i> High Risk (5)</span><strong>14 students</strong></div>
                          <div class="tw:w-full tw:h-2 tw:bg-neutral-100 tw:rounded-full tw:overflow-hidden">
                            <div class="tw:h-full tw:rounded-full tw:bg-danger tw:w-2/5"></div>
                          </div>
                        </div>
                      </div>
                      <!-- Right (30%, min width): weighted factors -->
                      <div class="tw:lg:col-span-3 tw:lg:min-w-64 tw:pt-4 tw:border-t tw:border-neutral-200 tw:lg:pt-0 tw:lg:border-t-0 tw:lg:pl-6 tw:lg:border-l">
                        <div class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:mb-2">Risk Factors Weighted</div>
                        <ul class="tw-list-unstyled tw:text-body-xs tw:leading-5 tw:text-muted tw:space-y-1">
                          <li><i class="fa-regular fa-location-dot tw:w-4 tw:text-center" aria-hidden="true"></i> Distance from trust secondary: <strong>25%</strong></li>
                          <li><i class="fa-regular fa-school tw:w-4 tw:text-center" aria-hidden="true"></i> Open evening attendance: <strong>20%</strong></li>
                          <li><i class="fa-regular fa-clipboard-list tw:w-4 tw:text-center" aria-hidden="true"></i> Survey response / intent: <strong>20%</strong></li>
                          <li><i class="fa-regular fa-people-roof tw:w-4 tw:text-center" aria-hidden="true"></i> Sibling at trust school: <strong>15%</strong></li>
                          <li><i class="fa-regular fa-envelope tw:w-4 tw:text-center" aria-hidden="true"></i> Email engagement rate: <strong>10%</strong></li>
                          <li><i class="fa-regular fa-star tw:w-4 tw:text-center" aria-hidden="true"></i> Parent satisfaction (last survey): <strong>10%</strong></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- High Risk Students -->
                <div class="tw-card">
                  <div class="tw-card-header tw:flex tw:items-center tw:justify-between">
                    <h3 class="tw-h6 tw-card-title tw:mb-0">High Risk Students</h3>
                    <button type="button" class="tw-btn tw-btn-primary tw-btn-sm"><i class="fa-regular fa-paper-plane tw:mr-1.5" aria-hidden="true"></i> Bulk Email Campaign</button></div>
                  <div class="tw-card-body tw:p-0">
                    <table class="tw-table tw-table-hover">
                      <thead>
                        <tr>
                          <th>Student</th>
                          <th>School</th>
                          <th>Top Risk Factor</th>
                          <th></th>
                        </tr>
                      </thead>
                      <tbody data-mat-retention-target="highRiskRows"></tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            <!-- ===== COMPETITORS ===== -->
            <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel" hidden>
              <div class="tw-inline-notification tw-inline-notification-warning tw:mb-6">
                <i class="fa-solid fa-lightbulb tw-inline-notification-icon" aria-hidden="true"></i>
                <div class="tw-inline-notification-content">
                  <div class="tw-inline-notification-title">Key insight</div>
                  <div class="tw-inline-notification-message">City College is your biggest competitor for sixth form — and it's getting worse. 28 Year 11 students chose vocational routes. Consider: expanding BTEC/T-Level offerings, or a college partnership to keep students in the trust ecosystem.</div>
                </div>
              </div>
              <div class="tw-card">
                <div class="tw-card-header tw:flex tw:items-center tw:justify-between">
                  <h3 class="tw-h6 tw-card-title tw:mb-0">Where Are We Losing Students To?</h3>
                  <span class="tw-badge tw-badge-danger-subtle">Competitor Analysis</span></div>
                <div class="tw-card-body tw:p-0 tw:overflow-x-auto">
                  <table class="tw-table tw-table-hover">
                    <thead>
                      <tr>
                        <th>Competitor School</th>
                        <th>Type</th>
                        <th>Ofsted</th>
                        <th>Lost (25/26)</th>
                        <th>Lost (24/25)</th>
                        <th>Trend</th>
                        <th>Primary Reason</th>
                        <th></th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr class="tw-table-row-clickable" data-action="click->mat-retention#toggleCompetitor" data-competitor="St Mary's Grammar">
                        <td class="tw:font-medium">St Mary's Grammar</td>
                        <td class="tw:text-muted">Grammar</td>
                        <td class="tw:text-muted">Outstanding</td>
                        <td class="tw:font-bold tw:text-danger">18</td>
                        <td class="tw:text-muted">22</td>
                        <td class="tw:text-body-xs tw:leading-body-xs tw:text-success"><i class="fa-solid fa-arrow-down" aria-hidden="true"></i> improving</td>
                        <td class="tw:text-muted">Academic selection</td>
                        <td><button type="button" class="tw-btn tw-btn-secondary tw-btn-sm" data-action="click->mat-retention#toggleCompetitor" data-competitor="St Mary's Grammar">Detail</button></td>
                      </tr>
                      <tr class="tw-table-row-clickable" data-action="click->mat-retention#toggleCompetitor" data-competitor="Oakfield School">
                        <td class="tw:font-medium">Oakfield School</td>
                        <td class="tw:text-muted">Academy</td>
                        <td class="tw:text-muted">Outstanding</td>
                        <td class="tw:font-bold tw:text-warning">14</td>
                        <td class="tw:text-muted">11</td>
                        <td class="tw:text-body-xs tw:leading-body-xs tw:text-danger"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i> worsening</td>
                        <td class="tw:text-muted">Proximity (Demo Atwood families)</td>
                        <td><button type="button" class="tw-btn tw-btn-secondary tw-btn-sm" data-action="click->mat-retention#toggleCompetitor" data-competitor="Oakfield School">Detail</button></td>
                      </tr>
                      <tr class="tw-table-row-clickable" data-action="click->mat-retention#toggleCompetitor" data-competitor="Riverside Academy">
                        <td class="tw:font-medium">Riverside Academy</td>
                        <td class="tw:text-muted">Academy</td>
                        <td class="tw:text-muted">Good</td>
                        <td class="tw:font-bold tw:text-warning">12</td>
                        <td class="tw:text-muted">14</td>
                        <td class="tw:text-body-xs tw:leading-body-xs tw:text-success"><i class="fa-solid fa-arrow-down" aria-hidden="true"></i> improving</td>
                        <td class="tw:text-muted">Specialist sports programme</td>
                        <td><button type="button" class="tw-btn tw-btn-secondary tw-btn-sm" data-action="click->mat-retention#toggleCompetitor" data-competitor="Riverside Academy">Detail</button></td>
                      </tr>
                      <tr class="tw-table-row-clickable" data-action="click->mat-retention#toggleCompetitor" data-competitor="City College">
                        <td class="tw:font-medium">City College</td>
                        <td class="tw:text-muted">FE College</td>
                        <td class="tw:text-muted">Good</td>
                        <td class="tw:font-bold tw:text-danger">28</td>
                        <td class="tw:text-muted">25</td>
                        <td class="tw:text-body-xs tw:leading-body-xs tw:text-danger"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i> worsening</td>
                        <td class="tw:text-muted">Vocational courses (Y11 leavers)</td>
                        <td><button type="button" class="tw-btn tw-btn-secondary tw-btn-sm" data-action="click->mat-retention#toggleCompetitor" data-competitor="City College">Detail</button></td>
                      </tr>
                      <tr class="tw-table-row-clickable" data-action="click->mat-retention#toggleCompetitor" data-competitor="Other / Private">
                        <td class="tw:font-medium">Other / Private</td>
                        <td class="tw:text-muted">Mixed</td>
                        <td class="tw:text-muted">—</td>
                        <td class="tw:font-bold tw:text-warning">11</td>
                        <td class="tw:text-muted">13</td>
                        <td class="tw:text-body-xs tw:leading-body-xs tw:text-success"><i class="fa-solid fa-arrow-down" aria-hidden="true"></i> improving</td>
                        <td class="tw:text-muted">Various</td>
                        <td><button type="button" class="tw-btn tw-btn-secondary tw-btn-sm" data-action="click->mat-retention#toggleCompetitor" data-competitor="Other / Private">Detail</button></td>
                      </tr>
                      <tr class="tw:hidden" data-mat-retention-target="competitorDetailRow">
                        <td colspan="8" class="tw:bg-neutral-100">
                          <div data-mat-retention-target="competitorDetailBody"></div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <!-- ===== Student Detail modal (filled by mat-retention#prepareStudent, shown by popup#show) ===== -->
          <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div>
          <div class="tw-popup-panel tw-popup-lg" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="retStudentModalTitle">
            <div class="tw-popup-header">
              <h2 class="tw-popup-header-title" id="retStudentModalTitle" data-mat-retention-target="modalTitle">Student Profile</h2>
              <button class="tw-popup-close" type="button" aria-label="Close" data-action="click->popup#close"><i class="fa-solid fa-xmark" aria-hidden="true"></i></button>
            </div>
            <div class="tw-popup-body" data-mat-retention-target="modalBody"></div>
          </div>
        </div>
      </main>
    </div>
  </div>
</div>