<div data-controller="sidebar">
  <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 tw-active"
         data-label="Insights"
         aria-current="page">
        <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"
         data-label="Student Retention"
         >
        <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 class="tw-sidebar-content-offset tw:bg-background tw:min-h-screen">
    <div data-controller="tabs">
      <!-- Full-width white tabs + filters bar (flush to sidebar, right, top) -->
      <div class="tw:bg-neutral-0">
        <!-- Tabs row -->
        <div class="tw-container-fluid tw:pt-3">
          <ul class="tw-tabs" role="tablist" aria-label="Insights sections">
            <li role="presentation">
              <button type="button" class="tw-tab tw-active" role="tab" aria-selected="true"
                    data-tabs-target="tab" data-action="click->tabs#select">
                Insights
              </button>
            </li>
            <li role="presentation">
              <button type="button" class="tw-tab" role="tab" aria-selected="false"
                    data-tabs-target="tab" data-action="click->tabs#select">
                Usage tracking
              </button>
            </li>
            <li role="presentation">
              <button type="button" class="tw-tab" role="tab" aria-selected="false"
                    data-tabs-target="tab" data-action="click->tabs#select">
                Future planning
                <span class="tw-badge tw-badge-success tw-badge-sm">NEW</span>
              </button>
            </li>
          </ul>
        </div>
        <!-- Filters row -->
        <div class="tw-container-fluid tw:py-4">
          <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-3">
            <!-- All schools dropdown -->
            <div class="tw-dropdown" data-controller="dropdown">
              <button class="tw-dropdown-trigger" type="button"
                    aria-haspopup="true" aria-expanded="false"
                    data-dropdown-target="trigger"
                    data-action="click->dropdown#toggle keydown->dropdown#keydown">
                <span class="tw-dropdown-label" data-dropdown-target="label">All schools</span>
                <i class="fa-solid fa-chevrons-up-down tw-dropdown-chevron"></i>
              </button>
              <div class="tw-dropdown-menu" role="menu" data-dropdown-target="menu" tabindex="-1">
                <button class="tw-dropdown-item tw-active" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">All schools</span>
                  <i class="fa-regular fa-check tw-dropdown-item-check"></i>
                </button>
                <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">Havelock Primary School, Nursery & Arp</span>
                  <i class="fa-regular fa-check tw-dropdown-item-check"></i>
                </button>
                <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">Applicaa Demo</span>
                  <i class="fa-regular fa-check tw-dropdown-item-check"></i>
                </button>
              </div>
            </div>
            <!-- "Filters" label -->
            <span class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:text-neutral-700">Filters</span>
            <!-- Date range -->
            <div class="tw:flex tw:items-center tw:gap-2">
              <input type="date" class="tw-form-control" value="2024-09-01" aria-label="From date">
              <span class="tw:text-neutral-500">—</span>
              <input type="date" class="tw-form-control" value="2025-08-31" aria-label="To date">
            </div>
            <!-- Year of Entry dropdown -->
            <div class="tw-dropdown" data-controller="dropdown">
              <button class="tw-dropdown-trigger" type="button"
                    aria-haspopup="true" aria-expanded="false"
                    data-dropdown-target="trigger"
                    data-action="click->dropdown#toggle keydown->dropdown#keydown">
                <span class="tw-dropdown-label" data-dropdown-target="label">Year of Entry (2025/2026)</span>
                <i class="fa-solid fa-chevrons-up-down tw-dropdown-chevron"></i>
              </button>
              <div class="tw-dropdown-menu" role="menu" data-dropdown-target="menu" tabindex="-1">
                <button class="tw-dropdown-item tw-active" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">2025/2026</span>
                  <i class="fa-regular fa-check tw-dropdown-item-check"></i>
                </button>
                <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">2024/2025</span>
                  <i class="fa-regular fa-check tw-dropdown-item-check"></i>
                </button>
              </div>
            </div>
            <!-- Terms of Entry dropdown -->
            <div class="tw-dropdown" data-controller="dropdown">
              <button class="tw-dropdown-trigger" type="button"
                    aria-haspopup="true" aria-expanded="false"
                    data-dropdown-target="trigger"
                    data-action="click->dropdown#toggle keydown->dropdown#keydown">
                <span class="tw-dropdown-placeholder" data-dropdown-target="label">Select Terms of Entry</span>
                <i class="fa-solid fa-chevrons-up-down tw-dropdown-chevron"></i>
              </button>
              <div class="tw-dropdown-menu" role="menu" data-dropdown-target="menu" tabindex="-1">
                <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">Autumn</span>
                  <i class="fa-regular fa-check tw-dropdown-item-check"></i>
                </button>
                <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">Spring</span>
                  <i class="fa-regular fa-check tw-dropdown-item-check"></i>
                </button>
                <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">Summer</span>
                  <i class="fa-regular fa-check tw-dropdown-item-check"></i>
                </button>
              </div>
            </div>
            <!-- Year Groups dropdown -->
            <div class="tw-dropdown" data-controller="dropdown">
              <button class="tw-dropdown-trigger" type="button"
                    aria-haspopup="true" aria-expanded="false"
                    data-dropdown-target="trigger"
                    data-action="click->dropdown#toggle keydown->dropdown#keydown">
                <span class="tw-dropdown-placeholder" data-dropdown-target="label">Select Year Groups</span>
                <i class="fa-solid fa-chevrons-up-down tw-dropdown-chevron"></i>
              </button>
              <div class="tw-dropdown-menu" role="menu" data-dropdown-target="menu" tabindex="-1">
                <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">Nursery</span>
                  <i class="fa-regular fa-check tw-dropdown-item-check"></i>
                </button>
                <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">Reception</span>
                  <i class="fa-regular fa-check tw-dropdown-item-check"></i>
                </button>
                <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">Year 7</span>
                  <i class="fa-regular fa-check tw-dropdown-item-check"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Tab panels -->
      <div role="tabpanel" data-tabs-target="panel" class="tw-active">
        <!-- Everything inside one container -->
        <div class="tw-container-fluid tw-page-container tw:pt-6 tw:space-y-4">
          <!-- Section title row -->
          <div class="tw:flex tw:items-center tw:justify-between">
            <h2 class="tw-h2 tw:mb-0">All 2 schools overview</h2>
            <button type="button" class="tw-btn tw-btn-secondary">
              <i class="fa-regular fa-arrow-up-from-bracket"></i>
              Export
            </button>
          </div>
          <!-- KPI strip -->
          <div class="tw:grid tw:grid-cols-6 tw:gap-3">
            <!-- 1. Event Registrations -->
            <div class="tw-card">
              <div class="tw-card-body">
                <div class="tw:flex tw:items-baseline tw:gap-2 tw:mb-2">
                  <span class="tw:font-heading tw:text-heading-1 tw:leading-heading-1 tw:font-bold tw:text-primary">2129</span>
                </div>
                <div class="tw:flex tw:items-center tw:gap-1.5 tw:mb-2">
                  <span class="tw-badge tw-badge-success-soft">
                    <i class="fa-solid fa-arrow-up"></i> 71.6%
                  </span>
                  <span class="tw:text-body-s tw:leading-body-s tw:text-neutral-600">vs last year</span>
                </div>
                <div class="tw:text-body-s tw:leading-body-s tw:text-neutral-700">
                  Event Registrations
                  <i class="fa-regular fa-circle-info tw:text-neutral-400 tw:ml-1" aria-label="More info"></i>
                </div>
              </div>
            </div>
            <!-- 2. Completed Applications -->
            <div class="tw-card">
              <div class="tw-card-body">
                <div class="tw:flex tw:items-baseline tw:gap-2 tw:mb-2">
                  <span class="tw:font-heading tw:text-heading-1 tw:leading-heading-1 tw:font-bold tw:text-primary">1402</span>
                  <span class="tw:text-body-s tw:leading-body-s tw:text-neutral-500">(51.1%)</span>
                </div>
                <div class="tw:flex tw:items-center tw:gap-1.5 tw:mb-2">
                  <span class="tw-badge tw-badge-success-soft">
                    <i class="fa-solid fa-arrow-up"></i> 24.6%
                  </span>
                  <span class="tw:text-body-s tw:leading-body-s tw:text-neutral-600">vs last year</span>
                </div>
                <div class="tw:text-body-s tw:leading-body-s tw:text-neutral-700">
                  Completed Applications
                  <i class="fa-regular fa-circle-info tw:text-neutral-400 tw:ml-1" aria-label="More info"></i>
                </div>
              </div>
            </div>
            <!-- 3. Incomplete Applications -->
            <div class="tw-card">
              <div class="tw-card-body">
                <div class="tw:flex tw:items-baseline tw:gap-2 tw:mb-2">
                  <span class="tw:font-heading tw:text-heading-1 tw:leading-heading-1 tw:font-bold tw:text-primary">1110</span>
                </div>
                <div class="tw:flex tw:items-center tw:gap-1.5 tw:mb-2">
                  <span class="tw-badge tw-badge-danger-soft">
                    <i class="fa-solid fa-arrow-down"></i> 14.8%
                  </span>
                  <span class="tw:text-body-s tw:leading-body-s tw:text-neutral-600">vs last year</span>
                </div>
                <div class="tw:text-body-s tw:leading-body-s tw:text-neutral-700">
                  Incomplete Applications
                  <i class="fa-regular fa-circle-info tw:text-neutral-400 tw:ml-1" aria-label="More info"></i>
                </div>
              </div>
            </div>
            <!-- 4. Offer Accepted -->
            <div class="tw-card">
              <div class="tw-card-body">
                <div class="tw:flex tw:items-baseline tw:gap-2 tw:mb-2">
                  <span class="tw:font-heading tw:text-heading-1 tw:leading-heading-1 tw:font-bold tw:text-primary">578</span>
                  <span class="tw:text-body-s tw:leading-body-s tw:text-neutral-500">(21.0%)</span>
                </div>
                <div class="tw:flex tw:items-center tw:gap-1.5 tw:mb-2">
                  <span class="tw-badge tw-badge-success-soft">
                    <i class="fa-solid fa-arrow-up"></i> 1.8%
                  </span>
                  <span class="tw:text-body-s tw:leading-body-s tw:text-neutral-600">vs last year</span>
                </div>
                <div class="tw:text-body-s tw:leading-body-s tw:text-neutral-700">
                  Offer Accepted
                  <i class="fa-regular fa-circle-info tw:text-neutral-400 tw:ml-1" aria-label="More info"></i>
                </div>
              </div>
            </div>
            <!-- 5. Enrolled -->
            <div class="tw-card">
              <div class="tw-card-body">
                <div class="tw:flex tw:items-baseline tw:gap-2 tw:mb-2">
                  <span class="tw:font-heading tw:text-heading-1 tw:leading-heading-1 tw:font-bold tw:text-primary">508</span>
                  <span class="tw:text-body-s tw:leading-body-s tw:text-neutral-500">(18.5%)</span>
                </div>
                <div class="tw:flex tw:items-center tw:gap-1.5 tw:mb-2">
                  <span class="tw-badge tw-badge-success-soft">
                    <i class="fa-solid fa-arrow-up"></i> 132.0%
                  </span>
                  <span class="tw:text-body-s tw:leading-body-s tw:text-neutral-600">vs last year</span>
                </div>
                <div class="tw:text-body-s tw:leading-body-s tw:text-neutral-700">
                  Enrolled
                  <i class="fa-regular fa-circle-info tw:text-neutral-400 tw:ml-1" aria-label="More info"></i>
                </div>
              </div>
            </div>
            <!-- 6. Average Engagement Score -->
            <div class="tw-card">
              <div class="tw-card-body">
                <div class="tw:flex tw:items-baseline tw:gap-2 tw:mb-2">
                  <span class="tw:font-heading tw:text-heading-1 tw:leading-heading-1 tw:font-bold tw:text-primary">13.8</span>
                </div>
                <div class="text-danger tw:font-semibold tw:text-body-s tw:leading-body-s tw:mb-2">Poor</div>
                <div class="tw:text-body-s tw:leading-body-s tw:text-neutral-700">
                  Average Engagement Score
                  <i class="fa-regular fa-circle-info tw:text-neutral-400 tw:ml-1" aria-label="More info"></i>
                </div>
              </div>
            </div>
          </div>
          <!-- School performance comparison — card with full-width table inside -->
          <div class="tw-card tw:overflow-hidden"
             data-controller="sortable-table"
             data-sortable-table-sort-key-value="totalApplicants"
             data-sortable-table-sort-dir-value="desc">
            <!-- Card title section (normal card-body padding) -->
            <div class="tw-card-body">
              <h3 class="tw-h3 tw-card-title tw:mb-2">School performance comparison (2 schools total)</h3>
              <p class="tw:text-body-s tw:leading-body-s text-muted tw:mb-0">
                Analyse performance across all schools in your group. Use this to identify trends and share best practices.
              </p>
            </div>
            <!-- Table sits flush inside the card (no .tw-card-body wrapper) -->
            <table class="tw-table">
              <thead>
                <tr>
                  <th class="tw-table-sortable" data-action="click->sortable-table#sort" data-sort-key="school">
                    <button type="button">
                      School
                      <span class="tw-table-sort-indicator">
                        <i class="fa-solid fa-arrow-up tw-table-sort-indicator-up"></i>
                        <i class="fa-solid fa-arrow-down tw-table-sort-indicator-down"></i>
                      </span>
                    </button>
                  </th>
                  <th class="tw-table-sortable tw-table-sort-desc" data-action="click->sortable-table#sort" data-sort-key="totalApplicants" aria-sort="descending">
                    <button type="button">
                      Total Applicants
                      <span class="tw-table-sort-indicator">
                        <i class="fa-solid fa-arrow-up tw-table-sort-indicator-up"></i>
                        <i class="fa-solid fa-arrow-down tw-table-sort-indicator-down"></i>
                      </span>
                    </button>
                  </th>
                  <th class="tw-table-sortable" data-action="click->sortable-table#sort" data-sort-key="eventRegistrations">
                    <button type="button">
                      Event Registrations
                      <span class="tw-table-sort-indicator">
                        <i class="fa-solid fa-arrow-up tw-table-sort-indicator-up"></i>
                        <i class="fa-solid fa-arrow-down tw-table-sort-indicator-down"></i>
                      </span>
                    </button>
                  </th>
                  <th class="tw-table-sortable" data-action="click->sortable-table#sort" data-sort-key="completedApplications">
                    <button type="button">
                      Completed Applications
                      <span class="tw-table-sort-indicator">
                        <i class="fa-solid fa-arrow-up tw-table-sort-indicator-up"></i>
                        <i class="fa-solid fa-arrow-down tw-table-sort-indicator-down"></i>
                      </span>
                    </button>
                  </th>
                  <th class="tw-table-sortable" data-action="click->sortable-table#sort" data-sort-key="incompleteApplications">
                    <button type="button">
                      Incomplete Applications
                      <span class="tw-table-sort-indicator">
                        <i class="fa-solid fa-arrow-up tw-table-sort-indicator-up"></i>
                        <i class="fa-solid fa-arrow-down tw-table-sort-indicator-down"></i>
                      </span>
                    </button>
                  </th>
                  <th class="tw-table-sortable" data-action="click->sortable-table#sort" data-sort-key="offerMade">
                    <button type="button">
                      Offer Made
                      <span class="tw-table-sort-indicator">
                        <i class="fa-solid fa-arrow-up tw-table-sort-indicator-up"></i>
                        <i class="fa-solid fa-arrow-down tw-table-sort-indicator-down"></i>
                      </span>
                    </button>
                  </th>
                  <th class="tw-table-sortable" data-action="click->sortable-table#sort" data-sort-key="offerAccepted">
                    <button type="button">
                      Offer Accepted
                      <span class="tw-table-sort-indicator">
                        <i class="fa-solid fa-arrow-up tw-table-sort-indicator-up"></i>
                        <i class="fa-solid fa-arrow-down tw-table-sort-indicator-down"></i>
                      </span>
                    </button>
                  </th>
                  <th class="tw-table-sortable" data-action="click->sortable-table#sort" data-sort-key="offerDeclined">
                    <button type="button">
                      Offer Declined
                      <span class="tw-table-sort-indicator">
                        <i class="fa-solid fa-arrow-up tw-table-sort-indicator-up"></i>
                        <i class="fa-solid fa-arrow-down tw-table-sort-indicator-down"></i>
                      </span>
                    </button>
                  </th>
                  <th class="tw-table-sortable" data-action="click->sortable-table#sort" data-sort-key="enrolled">
                    <button type="button">
                      Enrolled
                      <span class="tw-table-sort-indicator">
                        <i class="fa-solid fa-arrow-up tw-table-sort-indicator-up"></i>
                        <i class="fa-solid fa-arrow-down tw-table-sort-indicator-down"></i>
                      </span>
                    </button>
                  </th>
                  <th class="tw-table-sortable" data-action="click->sortable-table#sort" data-sort-key="engagement">
                    <button type="button">
                      Average Engagement Score
                      <span class="tw-table-sort-indicator">
                        <i class="fa-solid fa-arrow-up tw-table-sort-indicator-up"></i>
                        <i class="fa-solid fa-arrow-down tw-table-sort-indicator-down"></i>
                      </span>
                    </button>
                  </th>
                </tr>
              </thead>
              <tbody data-sortable-table-target="body">
                <tr>
                  <td><a href="#" class="tw:text-primary tw:font-medium">Havelock Primary School, Nursery & Arp</a></td>
                  <td class="tw:font-semibold tw:tabular-nums">2255</td>
                  <td class="tw:tabular-nums">1061</td>
                  <td class="tw:tabular-nums">1397 <span class="tw-badge tw-badge-success-soft"><i class="fa-solid fa-arrow-up"></i> 26.3%</span></td>
                  <td class="tw:tabular-nums">840 <span class="tw-badge tw-badge-danger-soft"><i class="fa-solid fa-arrow-down"></i> 19.2%</span></td>
                  <td class="tw:tabular-nums">163 <span class="tw-badge tw-badge-danger-soft"><i class="fa-solid fa-arrow-down"></i> 20.9%</span></td>
                  <td class="tw:tabular-nums">416 <span class="tw-badge tw-badge-success-soft"><i class="fa-solid fa-arrow-up"></i> 12.4%</span></td>
                  <td class="tw:tabular-nums">55 <span class="tw-badge tw-badge-danger-soft"><i class="fa-solid fa-arrow-down"></i> 25.7%</span></td>
                  <td class="tw:tabular-nums">508 <span class="tw-badge tw-badge-success-soft"><i class="fa-solid fa-arrow-up"></i> 132.0%</span></td>
                  <td class="tw:tabular-nums text-danger tw:font-semibold">11.4</td>
                </tr>
                <tr>
                  <td><a href="#" class="tw:text-primary tw:font-medium">Applicaa Demo</a></td>
                  <td class="tw:font-semibold tw:tabular-nums">491</td>
                  <td class="tw:tabular-nums">1068 <span class="tw-badge tw-badge-danger-soft"><i class="fa-solid fa-arrow-down"></i> 13.9%</span></td>
                  <td class="tw:tabular-nums">5 <span class="tw-badge tw-badge-danger-soft"><i class="fa-solid fa-arrow-down"></i> 73.7%</span></td>
                  <td class="tw:tabular-nums">270 <span class="tw-badge tw-badge-success-soft"><i class="fa-solid fa-arrow-up"></i> 2.7%</span></td>
                  <td class="tw:tabular-nums">4 <span class="tw-badge tw-badge-danger-soft"><i class="fa-solid fa-arrow-down"></i> 84.6%</span></td>
                  <td class="tw:tabular-nums">162 <span class="tw-badge tw-badge-danger-soft"><i class="fa-solid fa-arrow-down"></i> 18.2%</span></td>
                  <td class="tw:tabular-nums">28 <span class="tw-badge tw-badge-success-soft"><i class="fa-solid fa-arrow-up"></i> 0.0%</span></td>
                  <td class="tw:tabular-nums">0</td>
                  <td class="tw:tabular-nums text-danger tw:font-semibold">16.2</td>
                </tr>
              </tbody>
              <tfoot>
                <tr class="tw:bg-neutral-100 tw:font-semibold">
                  <td>Group total</td>
                  <td class="tw:tabular-nums">2746</td>
                  <td class="tw:tabular-nums">2129 <span class="tw-badge tw-badge-success-soft"><i class="fa-solid fa-arrow-up"></i> 71.6%</span></td>
                  <td class="tw:tabular-nums">1402 <span class="tw-badge tw-badge-success-soft"><i class="fa-solid fa-arrow-up"></i> 24.6%</span></td>
                  <td class="tw:tabular-nums">1110 <span class="tw-badge tw-badge-danger-soft"><i class="fa-solid fa-arrow-down"></i> 14.8%</span></td>
                  <td class="tw:tabular-nums">167 <span class="tw-badge tw-badge-danger-soft"><i class="fa-solid fa-arrow-down"></i> 28.0%</span></td>
                  <td class="tw:tabular-nums">578 <span class="tw-badge tw-badge-success-soft"><i class="fa-solid fa-arrow-up"></i> 1.8%</span></td>
                  <td class="tw:tabular-nums">83 <span class="tw-badge tw-badge-danger-soft"><i class="fa-solid fa-arrow-down"></i> 18.6%</span></td>
                  <td class="tw:tabular-nums">508 <span class="tw-badge tw-badge-success-soft"><i class="fa-solid fa-arrow-up"></i> 132.0%</span></td>
                  <td class="tw:tabular-nums text-danger tw:font-semibold">13.8</td>
                </tr>
              </tfoot>
            </table>
            <!-- Pagination section (normal card-body padding) -->
            <div class="tw-card-body tw:flex tw:items-center tw:justify-between">
              <p class="tw:text-body-s tw:leading-body-s text-muted tw:mb-0">Showing 1 to 2 of 2 entries</p>
              <ul class="tw-pagination tw:mb-0" aria-label="Page navigation">
                <li class="tw-page-item tw-disabled">
                  <a class="tw-page-link" href="#" aria-disabled="true" tabindex="-1">Previous</a>
                </li>
                <li class="tw-page-item tw-active">
                  <a class="tw-page-link" href="#" aria-current="page">1</a>
                </li>
                <li class="tw-page-item tw-disabled">
                  <a class="tw-page-link" href="#" aria-disabled="true" tabindex="-1">Next</a>
                </li>
              </ul>
            </div>
          </div>
          <!-- Bottom row: standard 2-col grid of .tw-card panels -->
          <div class="tw:grid tw:grid-cols-2 tw:gap-4">
            <!-- Pipeline distribution -->
            <div class="tw-card">
              <div class="tw-card-body">
                <h3 class="tw-h3 tw-card-title tw:mb-4">Pipeline distribution by school</h3>
                <div class="tw:space-y-3">
                  <!-- Havelock row -->
                  <div>
                    <div class="tw:flex tw:items-center tw:justify-between tw:mb-1">
                      <span class="tw:text-body-s tw:leading-body-s tw:font-medium">Havelock Primary School, Nursery & Arp</span>
                      <span class="tw:text-body-s tw:leading-body-s text-muted tw:tabular-nums">2255</span>
                    </div>
                    <div class="tw:flex tw:h-3 tw:rounded tw:overflow-hidden tw:bg-neutral-100" role="img" aria-label="Pipeline for Havelock">
                      <div class="tw:bg-info-light tw:w-[25%]"></div>
                      <div class="tw:bg-primary tw:w-[55%]"></div>
                      <div class="tw:bg-warning tw:w-[12%]"></div>
                      <div class="tw:bg-danger tw:w-[8%]"></div>
                    </div>
                  </div>
                  <!-- Applicaa Demo row -->
                  <div>
                    <div class="tw:flex tw:items-center tw:justify-between tw:mb-1">
                      <span class="tw:text-body-s tw:leading-body-s tw:font-medium">Applicaa Demo</span>
                      <span class="tw:text-body-s tw:leading-body-s text-muted tw:tabular-nums">491</span>
                    </div>
                    <div class="tw:flex tw:h-3 tw:rounded tw:overflow-hidden tw:bg-neutral-100" role="img" aria-label="Pipeline for Applicaa Demo">
                      <div class="tw:bg-info-light tw:w-[40%]"></div>
                      <div class="tw:bg-primary tw:w-[35%]"></div>
                      <div class="tw:bg-warning tw:w-[15%]"></div>
                      <div class="tw:bg-danger tw:w-[10%]"></div>
                    </div>
                  </div>
                </div>
                <!-- Legend -->
                <div class="tw:flex tw:flex-wrap tw:gap-3 tw:mt-4 tw:text-body-xs tw:leading-body-xs">
                  <span class="tw:flex tw:items-center tw:gap-1"><span class="tw:inline-block tw:w-2 tw:h-2 tw:rounded tw:bg-info-light"></span> Incomplete</span>
                  <span class="tw:flex tw:items-center tw:gap-1"><span class="tw:inline-block tw:w-2 tw:h-2 tw:rounded tw:bg-primary"></span> Awaiting reference</span>
                  <span class="tw:flex tw:items-center tw:gap-1"><span class="tw:inline-block tw:w-2 tw:h-2 tw:rounded tw:bg-warning"></span> Declined</span>
                  <span class="tw:flex tw:items-center tw:gap-1"><span class="tw:inline-block tw:w-2 tw:h-2 tw:rounded tw:bg-danger"></span> Deadline missed</span>
                </div>
                <div class="tw:flex tw:items-center tw:justify-between tw:mt-4">
                  <p class="tw:text-body-s tw:leading-body-s text-muted tw:mb-0">Page 1 of 1 (2 entries)</p>
                  <ul class="tw-pagination tw:mb-0" aria-label="Pipeline pagination">
                    <li class="tw-page-item tw-disabled">
                      <a class="tw-page-link" href="#" aria-disabled="true" tabindex="-1">Previous</a>
                    </li>
                    <li class="tw-page-item tw-active">
                      <a class="tw-page-link" href="#" aria-current="page">1</a>
                    </li>
                    <li class="tw-page-item tw-disabled">
                      <a class="tw-page-link" href="#" aria-disabled="true" tabindex="-1">Next</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <!-- Top marketing sources -->
            <div class="tw-card">
              <div class="tw-card-body">
                <h3 class="tw-h3 tw-card-title tw:mb-4">Top marketing sources across group</h3>
                <table class="tw-table">
                  <thead>
                    <tr>
                      <th>Sources <i class="fa-regular fa-circle-info tw:text-neutral-400" aria-label="More info"></i></th>
                      <th class="tw:tabular-nums">Count</th>
                      <th class="tw:tabular-nums">Ratio</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>Recommended by friends</td>
                      <td class="tw:tabular-nums">110</td>
                      <td class="tw:tabular-nums">22.45 %</td>
                    </tr>
                    <tr>
                      <td>Local Reputation</td>
                      <td class="tw:tabular-nums">87</td>
                      <td class="tw:tabular-nums">17.75 %</td>
                    </tr>
                    <tr>
                      <td>Walking In</td>
                      <td class="tw:tabular-nums">78</td>
                      <td class="tw:tabular-nums">15.92 %</td>
                    </tr>
                    <tr>
                      <td>Sibling at School</td>
                      <td class="tw:tabular-nums">56</td>
                      <td class="tw:tabular-nums">11.43 %</td>
                    </tr>
                    <tr>
                      <td>Open Day</td>
                      <td class="tw:tabular-nums">42</td>
                      <td class="tw:tabular-nums">8.57 %</td>
                    </tr>
                    <tr>
                      <td>Word of mouth</td>
                      <td class="tw:tabular-nums">39</td>
                      <td class="tw:tabular-nums">7.96 %</td>
                    </tr>
                    <tr>
                      <td>Recommended by Current School</td>
                      <td class="tw:tabular-nums">16</td>
                      <td class="tw:tabular-nums">3.27 %</td>
                    </tr>
                    <tr>
                      <td>Related to an OL</td>
                      <td class="tw:tabular-nums">14</td>
                      <td class="tw:tabular-nums">2.86 %</td>
                    </tr>
                    <tr>
                      <td>Prospectus on website</td>
                      <td class="tw:tabular-nums">10</td>
                      <td class="tw:tabular-nums">2.04 %</td>
                    </tr>
                    <tr>
                      <td>Recommended by Staff</td>
                      <td class="tw:tabular-nums">8</td>
                      <td class="tw:tabular-nums">1.63 %</td>
                    </tr>
                    <tr>
                      <td>Advert</td>
                      <td class="tw:tabular-nums">6</td>
                      <td class="tw:tabular-nums">1.22 %</td>
                    </tr>
                    <tr>
                      <td>Facebook</td>
                      <td class="tw:tabular-nums">1</td>
                      <td class="tw:tabular-nums">0.20 %</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div role="tabpanel" data-tabs-target="panel" hidden>
        <div class="tw-card">
          <div class="tw-card-body text-muted">Usage tracking — coming soon.</div>
        </div>
      </div>
      <div role="tabpanel" data-tabs-target="panel" hidden>
        <div class="tw-card">
          <div class="tw-card-body text-muted">Future planning — coming soon.</div>
        </div>
      </div>
    </div>
  </main>
</div>