<div data-controller="sidebar">
  <aside class="tw-sidebar">
    <!-- Logo -->
    <div class="tw-sidebar-logo">
      <a href="#" class="tw-sidebar-logo-link">
        <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M37.47 38L29.43 17.99H26.34L18.27 38H21.12L22.89 33.53H32.85L34.62 38H37.47ZM32.13 31.34H23.64L27.87 20.54L32.13 31.34Z" fill="white"/>
          <path d="M39 18V14H37V18H33V20H37V24H39V20H43V18H39Z" fill="#EC634B"/>
        </svg>
      </a>
    </div>
    <!-- Navigation -->
    <nav class="tw-sidebar-nav" role="navigation" aria-label="Main navigation">
      <!-- Insights -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="insights"
        data-label="Insights"
        aria-expanded="false">
        <i class="fa-light fa-chart-mixed tw-sidebar-icon"></i>
        <span class="tw:sr-only">Insights</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">New</span>
      </button>
      <!-- Parents & Enquiries -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="parents"
        data-label="Parents & Enquiries"
        aria-expanded="false">
        <i class="fa-light fa-user-group tw-sidebar-icon"></i>
        <span class="tw:sr-only">Parents & Enquiries</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">New</span>
      </button>
      <!-- Communications & Events -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="communications"
        data-label="Communications & Events"
        aria-expanded="false">
        <i class="fa-light fa-comment-alt-lines tw-sidebar-icon"></i>
        <span class="tw:sr-only">Communications & Events</span>
      </button>
      <!-- Registered Students -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="students"
        data-label="Registered Students"
        aria-expanded="false">
        <i class="fa-light fa-users tw-sidebar-icon"></i>
        <span class="tw:sr-only">Registered Students</span>
      </button>
      <!-- Marketing -->
      <!-- <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
            data-drawer="marketing"
            data-label="Marketing"
            aria-expanded="false">
      <svg class="tw-sidebar-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M14.7461 2.38281C13.875 2.13281 12.9531 2 12 2C6.47656 2 2 6.47656 2 12C2 17.5234 6.47656 22 12 22C17.5234 22 22 17.5234 22 12C22 11.0469 21.8672 10.125 21.6172 9.25391L20.7266 10.2461C20.6836 10.293 20.6445 10.3359 20.5977 10.3789C20.6953 10.9062 20.7461 11.4453 20.7461 12C20.7461 16.832 16.8281 20.75 11.9961 20.75C7.16406 20.75 3.25 16.832 3.25 12C3.25 7.16797 7.16797 3.25 12 3.25C12.5547 3.25 13.0977 3.30078 13.6211 3.39844C13.6641 3.35547 13.707 3.3125 13.7539 3.26953L14.7461 2.38281ZM12.7266 5.79297C12.4883 5.76562 12.2461 5.75 12 5.75C8.54687 5.75 5.75 8.54687 5.75 12C5.75 15.4531 8.54687 18.25 12 18.25C15.4531 18.25 18.25 15.4531 18.25 12C18.25 11.7539 18.2344 11.5117 18.207 11.2734C18.1016 11.2656 17.9961 11.2539 17.8906 11.2383L16.9141 11.0742C16.9687 11.375 17 11.6836 17 12C17 14.7617 14.7617 17 12 17C9.23828 17 7 14.7617 7 12C7 9.23828 9.23828 7 12 7C12.3164 7 12.625 7.03125 12.9258 7.08594L12.7617 6.10937C12.7422 6.00391 12.7305 5.89844 12.7266 5.79297ZM15.3398 9.54687L18.0898 10.0039C18.7266 10.1094 19.3711 9.88281 19.8008 9.39844L21.5156 7.46875C21.9727 6.95703 21.7422 6.14453 21.0859 5.94922L18.7539 5.25L18.0508 2.91406C17.8555 2.25781 17.043 2.02734 16.5312 2.48437L14.6016 4.19922C14.1211 4.62891 13.8906 5.27344 13.9961 5.91016L14.4531 8.66016L11.5547 11.5586C11.3125 11.8008 11.3125 12.1992 11.5547 12.4414C11.7969 12.6836 12.1953 12.6836 12.4375 12.4414L15.3359 9.54297L15.3398 9.54687ZM16.4258 8.46094L18.4297 6.45703L20.2578 7.00391L18.8672 8.56641C18.7227 8.72656 18.5078 8.80469 18.2969 8.76953L16.4258 8.45703V8.46094ZM17.543 5.57422L15.5391 7.57813L15.2266 5.70703C15.1914 5.49609 15.2656 5.28125 15.4297 5.13672L16.9922 3.74609L17.5391 5.57422H17.543Z" fill="currentColor" stroke="none"/>
      </svg>
      <span class="tw:sr-only">Marketing</span>
      <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">128</span>
    </button> -->
      <!-- Enrolments -->
      <button type="button"
            class="tw-sidebar-item tw-active"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="enrolments"
        data-label="Enrolments"
        aria-expanded="false">
        <i class="fa-light fa-file-alt tw-sidebar-icon"></i>
        <span class="tw:sr-only">Enrolments</span>
      </button>
      <!-- Applicaa Futures -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="applicaafutures"
        data-label="Applicaa Futures"
        aria-expanded="false">
        <i class="fa-light fa-graduation-cap tw-sidebar-icon"></i>
        <span class="tw:sr-only">Applicaa Futures</span>
      </button>
      <!-- Data -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="data"
        data-label="Data"
        aria-expanded="false">
        <i class="fa-light fa-cloud-upload tw-sidebar-icon"></i>
        <span class="tw:sr-only">Data</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">160</span>
      </button>
      <!-- Manage Users -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="manageusers"
        data-label="Manage Users"
        aria-expanded="false">
        <i class="fa-light fa-users-cog tw-sidebar-icon"></i>
        <span class="tw:sr-only">Manage Users</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">218</span>
      </button>
      <!-- Platform Essentials -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="essentials"
        data-label="Platform Essentials"
        aria-expanded="false">
        <i class="fa-light fa-bell tw-sidebar-icon"></i>
        <span class="tw:sr-only">Platform Essentials</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">90</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="settings"
        data-label="Settings"
        aria-expanded="false">
        <i class="fa-light fa-cogs tw-sidebar-icon"></i>
        <span class="tw:sr-only">Settings</span>
      </button>
    </div>
  </aside>
  <!-- Parents & Enquiries Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="parents"
     aria-label="Parents & Enquiries navigation">
    <div class="tw-sidebar-drawer-header">PARENTS & ENQUIRIES</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item tw-disabled">
        <span class="tw-drawer-item-label">Parents</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enquiries</span>
      </a>
    </nav>
  </div>
  <!-- Insights Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="insights"
     aria-label="Insights navigation">
    <div class="tw-sidebar-drawer-header">INSIGHTS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Summary</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Pipeline</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Map view</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Feeder schools</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Events</span>
      </a>
    </nav>
  </div>
  <!-- Registered Students Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="students"
     aria-label="Registered Students navigation">
    <div class="tw-sidebar-drawer-header">REGISTERED STUDENTS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Incomplete</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Awaiting Reference
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Completed
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Declined</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Withdrawn</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Deadline Missed</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Skipped Payment</span>
      </a>
    </nav>
  </div>
  <!-- Enrolments Drawer -->
  <div class="tw-sidebar-drawer tw-open"
     data-sidebar-target="drawer"
     data-drawer-id="enrolments"
     aria-label="Enrolments navigation">
    <div class="tw-sidebar-drawer-header">BULK ENROLMENT</div>
    <nav class="tw-drawer-nav">
      <a href="/lookbook/preview/projects/enrolment/bulk_enrolment" class="tw-drawer-item tw-active">
        <span class="tw-drawer-item-label">Bulk Enrolment</span>
      </a>
    </nav>
    <div class="tw-sidebar-drawer-header">
      ENROLMENT
      <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive tw:normal-case"
          data-controller="demo"
          data-action="click->demo#show"
        data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
        data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
        data-demo-learn-more="https://helpdesk.applicaa.com/">
        <i class="fa-regular fa-clapperboard-play"></i>
        Demo
      </span>
    </div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Details to be checked</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Ready to Enrol</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolled</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Waiting</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Declined</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Activities</span>
      </a>
    </nav>
    <div class="tw-sidebar-drawer-header">REPORT</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Report</span>
      </a>
    </nav>
    <div class="tw-sidebar-drawer-header">POST ENROLMENT</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">CTF/File Request</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Transition Tool</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Sorting Hat</span>
      </a>
    </nav>
  </div>
  <!-- Applicaa Futures Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="applicaafutures"
     aria-label="Applicaa Futures navigation">
    <div class="tw-sidebar-drawer-header">APPLICAA FUTURES</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">One Reference</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Destination Tracker</span>
      </a>
    </nav>
  </div>
  <!-- Data Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="data"
     aria-label="Data navigation">
    <div class="tw-sidebar-drawer-header">DATA</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Import</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Export
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Uploaded Files</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          First Media Applications
          <span class="tw-badge tw-badge-danger tw-badge-sm">182</span>
        </span>
      </a>
    </nav>
  </div>
  <!-- Manage Users Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="manageusers"
     aria-label="Manage Users navigation">
    <div class="tw-sidebar-drawer-header">MANAGE USERS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Manually Add People</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Duplicate Students
          <span class="tw-badge tw-badge-danger tw-badge-sm">211</span>
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Duplicate Agencies
          <span class="tw-badge tw-badge-danger tw-badge-sm">7</span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Duplicate Contacts</span>
      </a>
    </nav>
  </div>
  <!-- Platform Essentials Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="essentials"
     aria-label="Platform Essentials navigation">
    <div class="tw-sidebar-drawer-header">PLATFORM ESSENTIALS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Applicaa Journey
          <span class="tw-badge tw-badge-danger tw-badge-sm">13</span>
        </span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Product Requests & Updates</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Feature Requests</a>
        <a href="#" class="tw-drawer-subitem">Road Map</a>
        <a href="#" class="tw-drawer-subitem">Vote</a>
        <a href="#" class="tw-drawer-subitem">Recent Updates</a>
      </div>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Time Saved With Admissions+</span>
      </a>
    </nav>
  </div>
  <!-- Communications & Events Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="communications"
     aria-label="Communications & Events navigation">
    <div class="tw-sidebar-drawer-header">COMMUNICATIONS & EVENTS</div>
    <nav class="tw-drawer-nav">
      <!-- Communications Section (expandable) -->
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">
          Communications
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">
          <i class="fa-regular fa-circle-info"></i>
          Manual Messages
        </a>
        <a href="#" class="tw-drawer-subitem">
          <i class="fa-regular fa-circle-info"></i>
          Automated Messages
        </a>
        <a href="#" class="tw-drawer-subitem">
          <i class="fa-regular fa-circle-info"></i>
          Scheduled Messages
        </a>
        <a href="#" class="tw-drawer-subitem">Message Summary</a>
      </div>
      <!-- Meetings (single item) -->
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Meetings
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <!-- Events Section (expandable) -->
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">
          Events
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Event Calendar</a>
        <a href="#" class="tw-drawer-subitem">Event Guests</a>
        <a href="#" class="tw-drawer-subitem">Event Waitlists</a>
        <a href="#" class="tw-drawer-subitem">Event Forms</a>
      </div>
      <!-- Taster Day Section (expandable with secondary color) -->
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">
          Taster Day
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Taster Day Configuration</a>
        <a href="#" class="tw-drawer-subitem">Student Submissions & Timetables</a>
      </div>
    </nav>
  </div>
  <!-- Marketing & Events Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="marketing"
     aria-label="Marketing & Events navigation">
    <div class="tw-sidebar-drawer-header">MARKETING & EVENTS</div>
    <nav class="tw-drawer-nav">
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Marketing Campaigns</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Campaigns</a>
        <a href="#" class="tw-drawer-subitem">Reports</a>
      </div>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Workflows</span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Emails</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Manual Emails</a>
        <a href="#" class="tw-drawer-subitem">Automated Emails</a>
        <a href="#" class="tw-drawer-subitem">Email Templates</a>
      </div>
      <a href="#" class="tw-drawer-item tw-disabled">
        <span class="tw-drawer-item-label">Notifications</span>
      </a>
      <a href="#" class="tw-drawer-item tw-disabled">
        <span class="tw-drawer-item-label">SMS</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Meeting</span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Events</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Calendar</a>
        <a href="#" class="tw-drawer-subitem">Guests</a>
        <a href="#" class="tw-drawer-subitem">Waitlists</a>
        <a href="#" class="tw-drawer-subitem">Forms</a>
      </div>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Taster Day</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Configurations</a>
        <a href="#" class="tw-drawer-subitem">Submissions & Timetables</a>
      </div>
    </nav>
  </div>
  <!-- Settings Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="settings"
     aria-label="Settings navigation">
    <div class="tw-sidebar-drawer-header">SETTINGS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Application Form</span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Subject Options</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Form Settings</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">School Settings</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Settings</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Navigator</span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Properties</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Security</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
    </nav>
  </div>
  <header class="tw-topbar" role="banner">
    <div class="tw-topbar-left">
      <!-- Context Dropdown -->
      <div class="tw-dropdown tw-dropdown-borderless" data-controller="dropdown" data-dropdown-auto-highlight-value="true">
        <button class="tw-dropdown-trigger tw-topbar-dropdown-trigger"
              type="button"
              aria-haspopup="listbox"
              aria-expanded="false"
              data-dropdown-target="trigger"
              data-action="click->dropdown#toggle keydown->dropdown#keydown">
          <span class="tw-dropdown-label tw-dropdown-primary" data-dropdown-target="label">2024/2025 - Year 7 Main Entry</span>
          <svg class="tw-dropdown-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="m2 5 6 6 6-6"/>
          </svg>
        </button>
        <div class="tw-dropdown-menu tw-dropdown-menu-wide tw-dropdown-menu-scrollable" role="listbox" data-dropdown-target="menu" tabindex="-1">
          <button class="tw-dropdown-item tw-active" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y7-main">
            <span class="tw-dropdown-item-text">2024/2025 - Year 7 Main Entry</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y7-late">
            <span class="tw-dropdown-item-text">2024/2025 - Year 7 Late Entry</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y8">
            <span class="tw-dropdown-item-text">2024/2025 - Year 8 Admissions</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y9">
            <span class="tw-dropdown-item-text">2024/2025 - Year 9 In-Year</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2025-y7-main">
            <span class="tw-dropdown-item-text">2025/2026 - Year 7 Main Entry</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2025-y7-late">
            <span class="tw-dropdown-item-text">2025/2026 - Year 7 Late Entry</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2025-y8">
            <span class="tw-dropdown-item-text">2025/2026 - Year 8 Admissions</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2025-y9">
            <span class="tw-dropdown-item-text">2025/2026 - Year 9 In-Year</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2026-y7-main">
            <span class="tw-dropdown-item-text">2026/2027 - Year 7 Main Entry</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2026-y8">
            <span class="tw-dropdown-item-text">2026/2027 - Year 8 Admissions</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2023-y12">
            <span class="tw-dropdown-item-text">2023/2024 - Year 12 Sixth Form</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y12">
            <span class="tw-dropdown-item-text">2024/2025 - Year 12 Sixth Form</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
      <!-- Search -->
      <div class="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...">
        </div>
      </div>
    </div>
    <div class="tw-topbar-right">
      <!-- Action Buttons -->
      <button type="button" class="tw-btn tw-btn-outline-success tw-btn-multiline" 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" 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" 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">
        <!-- Notification Icon -->
        <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>
  <main class="tw-sidebar-topbar-content-offset tw:bg-background tw:min-h-screen">
    <div class="tw-container-fluid tw-page-header-container">
      <div class="tw-page-header">
        <div class="tw-page-header-main">
          <a href="/lookbook/preview/projects/enrolment/bulk_enrolment" data-turbo="false" class="tw-page-header-back" aria-label="Back to Enrolment Runs">
            <i class="fa-solid fa-chevron-left tw-page-header-back-icon"></i>
          </a>
          <div class="tw-page-header-title-group">
            <h1 class="tw-page-header-title">New Bulk Enrolment</h1>
          </div>
        </div>
        <div class="tw-page-header-slot">
          <div class="tw-steps-header" id="stepsHeader">
            <div class="tw-step" onclick="handleStepClick(0)">
              <div class="tw-step-indicator">1</div>
              <div class="tw-step-label">Add Students</div>
            </div>
            <div class="tw-step" onclick="handleStepClick(1)" id="stepReviewOrder" data-controller="tooltip" data-tooltip-content-value="0 students added to this Run" data-tooltip-placement-value="bottom">
              <div class="tw-step-indicator">2</div>
              <div class="tw-step-label">Review & Order <span class="tw-badge tw-badge-secondary-subtle tw-badge-sm tw:hidden" id="runCountBadge">0</span></div>
            </div>
            <div class="tw-step" onclick="handleStepClick(2)">
              <div class="tw-step-indicator">3</div>
              <div class="tw-step-label">Allocation Results</div>
            </div>
            <div class="tw-step" onclick="handleStepClick(3)">
              <div class="tw-step-indicator">4</div>
              <div class="tw-step-label">Schedule Release</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tw-steps" id="stepsWizard">
      <div class="tw-steps-content">
        <!-- ========== STEP 1: Add Students ========== -->
        <div class="tw-steps-panel tw-active">
          <div class="tw-container-fluid tw-page-container tw:flex tw:gap-4">
            <div class="tw-card tw:w-[300px]">
              <div class="tw:sticky tw:top-16">
                <div class="tw-card-header">
                  <h2 class="tw-card-title tw:mb-0">Configure Enrolment Run</h2>
                </div>
                <div class="tw-card-body">
                  <div class="tw:mb-4">
                    <label class="tw-form-label" for="runName">Run Name</label>
                    <input type="text" class="tw-form-control" id="runName" value="September 2026 Intake">
                  </div>
                  <div class="tw:mb-4">
                    <label class="tw-form-label" for="appGroup">Application Group</label>
                    <select class="tw-form-select" id="appGroup">
                      <option value="all">All Groups</option>
                      <option value="year11" selected>Year 11 into Year 12</option>
                      <option value="year12">Year 12 into Year 13</option>
                      <option value="external">External Applicants</option>
                    </select>
                  </div>
                  <div class="tw:mb-4">
                    <label class="tw-form-label" for="eligBasis">Eligibility Basis</label>
                    <select class="tw-form-select" id="eligBasis">
                      <option value="applied" selected>Applied Subjects</option>
                      <option value="offered">Offered Subjects</option>
                    </select>
                  </div>
                  <div class="tw:mb-4">
                    <label class="tw-form-label" for="studentType" id="studentTypeLabel">Student Type</label>
                    <select class="tw-form-select" id="studentType" onchange="applyAllFilters()">
                      <option value="internal">Internal</option>
                      <option value="both" selected>Both</option>
                      <option value="external">External</option>
                    </select>
                  </div>
                  <div class="tw:mb-4">
                    <label class="tw-form-label" for="eligFilter">Eligibility</label>
                    <select class="tw-form-select" id="eligFilter" onchange="applyAllFilters()">
                      <option value="green">Green Only</option>
                      <option value="greenamber" selected>Green + Amber</option>
                      <option value="all">All</option>
                    </select>
                  </div>
                  <!-- Advanced Filter Button -->
                  <button class="tw-btn tw-btn-secondary tw-btn tw-btn-block" type="button" onclick="openFilterDrawer()">
                    <i class="fa-regular fa-filter"></i> Advanced Filters <span class="tw-badge tw-badge-primary tw-badge-sm tw:ms-1 tw:hidden" id="filterBadge">0</span>
                  </button>
                </div>
              </div>
            </div>
            <!-- Student List -->
            <div class="tw-data-table tw-card tw:flex-1" id="studentListPanel">
              <div class="tw-data-table-toolbar tw:px-4 tw-card-header-sticky">
                <div class="tw-data-table-toolbar-start">
                  <h2 class="tw-card-title tw:mb-0">Students <span class="tw-badge tw-badge-secondary tw-badge-sm tw:font-normal"><span id="filteredCount">0</span> found</span></h2>
                </div>
                <div class="tw-data-table-toolbar-end tw:-my-1">
                  <button class="tw-btn tw-btn-secondary tw-btn-sm" type="button" onclick="selectAll(true)">Select All</button>
                  <button class="tw-btn tw-btn-secondary tw-btn-sm" type="button" onclick="selectAll(false)">Deselect All</button>
                  <button class="tw-btn tw-btn-primary tw-btn-sm" type="button" id="addStudentsBtn" onclick="addStudentsToRun()" disabled>Add 0 Students to Run</button>
                </div>
              </div>
              <div class="tw-data-table-body tw-card-body tw:p-0">
                <table class="tw-table tw-table-hover">
                  <thead>
                    <tr>
                      <th class="tw-table-cell-check"><input type="checkbox" class="tw-form-check-input" id="studentSelectAll" aria-label="Select all students" onchange="selectAll(this.checked)"></th>
                      <th>Name</th>
                      <th>Type</th>
                      <th>TPS</th>
                      <th>Eligibility</th>
                      <th>Subjects</th>
                    </tr>
                  </thead>
                  <tbody id="studentListBody"></tbody>
                </table>
              </div>
              <div class="tw-data-table-footer tw:px-4">
                <span class="tw:font-semibold"><span id="selectedCount">0</span> students selected</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- ========== STEP 2: Review & Order ========== -->
    <div class="tw-steps-panel">
      <div class="tw-container-fluid tw-page-container">
        <div class="tw:grid tw:grid-cols-2 tw:gap-4 tw:mb-5">
          <!-- Priority Criteria Panel -->
          <div class="tw-card">
            <div class="tw-card-header tw:flex tw:items-center tw:justify-between">
              <h2 class="tw-card-title tw:mb-0">Priority Criteria</h2>
              <span class="tw-badge tw-badge-info-subtle">Drag to reorder</span>
            </div>
            <div class="tw-card-body">
              <div class="tw:bg-neutral-100 tw:rounded-lg tw:p-3" id="priorityCriteria"></div>
              <div class="tw:flex tw:gap-2 tw:mt-3 tw:items-center">
                <div class="tw-dropdown tw-dropdown-block tw:flex-1" data-controller="dropdown" id="criterionDropdown">
                  <button class="tw-dropdown-trigger" type="button"
                              data-dropdown-target="trigger"
                              data-action="click->dropdown#toggle keydown->dropdown#keydown"
                    aria-haspopup="true" aria-expanded="false">
                    <span class="tw-dropdown-label tw-dropdown-placeholder" data-dropdown-target="label">Select a criterion</span>
                    <svg class="tw-dropdown-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6l4 4 4-4"></path></svg>
                  </button>
                  <div class="tw-dropdown-menu tw-dropdown-menu-scrollable" role="listbox" data-dropdown-target="menu" tabindex="-1" id="criterionDropdownMenu">
                  </div>
                </div>
                <button class="tw-btn tw-btn-secondary" type="button" onclick="addCriterion()">Add criteria</button>
              </div>
            </div>
          </div>
          <!-- Summary Card -->
          <div class="tw-card">
            <div class="tw-card-header">
              <h2 class="tw-card-title tw:mb-0">Run Summary</h2>
            </div>
            <div class="tw-card-body">
              <div class="tw-card tw-card-flat tw-card-high-priority tw:p-3 tw:mb-4">
                <div class="tw:text-3xl tw:font-bold tw:leading-tight" id="reviewCount">0</div>
                <div class="tw:mt-1 tw:text-sm text-muted">Students in this run</div>
              </div>
              <p class="text-body-s text-muted tw:mb-4">Students are ranked by your priority criteria from top to bottom. When two students have equal priority on all criteria, the tiebreaker (distance from school) determines their final position.</p>
            </div>
          </div>
        </div>
        <!-- Ranked Student List -->
        <div class="tw-card">
          <div class="tw-card-header tw-card-header-sticky">
            <h2 class="tw-card-title tw:mb-0">Ranked Student List</h2>
          </div>
          <div class="tw-card-body tw:p-0">
            <div class="tw-table-responsive">
              <table class="tw-table tw-table-hover">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Subjects</th>
                    <th>Type</th>
                    <th>Priority</th>
                    <th>TPS</th>
                    <th>Eligibility</th>
                    <th class="tw-table-cell-actions"></th>
                  </tr>
                </thead>
                <tbody id="reviewBody"></tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- ========== STEP 3: Allocation Results ========== -->
    <div class="tw-steps-panel">
      <div class="tw-container-fluid tw-page-container">
        <div class="tw:grid tw:grid-cols-1 tw:sm:grid-cols-2 tw:md:grid-cols-3 tw:gap-4 tw:mb-5" id="allocStats"></div>
        <!-- Class Fill Overview -->
        <div class="tw-card tw:mb-4">
          <div class="tw-card-header tw:flex tw:items-center tw:justify-between tw-card-header-sticky">
            <h2 class="tw-card-title tw:mb-0">Class Fill Overview</h2>
            <div id="fillViewTabs">
              <div class="tw-btn-group">
                <input type="radio" class="tw-btn-check" name="fillView" id="fillViewTable" value="table" autocomplete="off" checked onchange="showFillView(this.value)">
                <label class="tw-btn tw-btn-secondary" for="fillViewTable">
                  <i class="fa-regular fa-table-list"></i> Table View
                </label>
                <input type="radio" class="tw-btn-check" name="fillView" id="fillViewBlock" value="block" autocomplete="off" onchange="showFillView(this.value)">
                <label class="tw-btn tw-btn-secondary" for="fillViewBlock">
                  <i class="fa-regular fa-grid-2"></i> Block View
                </label>
              </div>
            </div>
          </div>
          <div id="fillTableView" class="tw-tab-panel tw-active" role="tabpanel" aria-labelledby="fillTableTab">
            <div class="tw-card-body tw:p-0">
              <div class="tw-table-responsive">
                <table class="tw-table tw-table-hover">
                  <thead>
                    <tr>
                      <th>Course</th>
                      <th>Block</th>
                      <th>Classes</th>
                      <th>Existing</th>
                      <th>Pre-enrolled</th>
                      <th>Total</th>
                      <th>Capacity</th>
                      <th>Fill %</th>
                    </tr>
                  </thead>
                  <tbody id="classFillBody"></tbody>
                </table>
              </div>
            </div>
          </div>
          <div id="fillBlockView" class="tw-tab-panel tw:hidden" role="tabpanel" aria-labelledby="fillBlockTab">
            <div class="tw-card-body tw:p-0">
              <div class="tw-table-responsive">
                <table class="tw-table tw-table-inner-bordered" id="blockViewTable">
                  <thead>
                    <tr>
                      <th>Course</th>
                      <th>Block A</th>
                      <th>Block B</th>
                      <th>Block C</th>
                      <th>Block D</th>
                      <th>Block Enrichment</th>
                      <th>Block PSHE</th>
                    </tr>
                  </thead>
                  <tbody id="blockViewBody"></tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <!-- Could Not Fully Allocate -->
        <div class="tw-card tw:mb-4 tw:hidden" id="unallocPanel">
          <div class="tw-card-header tw-card-header-sticky">
            <h2 class="tw-card-title tw:mb-0 tw:text-danger">Could Not Fully Allocate</h2>
          </div>
          <div class="tw-card-body tw:p-0">
            <div class="tw-table-responsive">
              <table class="tw-table">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Issue</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody id="unallocBody"></tbody>
              </table>
            </div>
          </div>
        </div>
        <!-- Student Allocations -->
        <div class="tw-card tw:mb-4">
          <div class="tw-card-header tw-card-header-sticky">
            <h2 class="tw-card-title tw:mb-0">Student Allocations</h2>
          </div>
          <div class="tw-card-body tw:p-0">
            <div class="tw-table-responsive">
              <table class="tw-table tw-table-hover">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>TPS</th>
                    <th>Status</th>
                    <th>Subjects</th>
                    <th class="tw-table-cell-actions">Action</th>
                  </tr>
                </thead>
                <tbody id="allocDetailBody"></tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- ========== STEP 4: Schedule Release ========== -->
    <div class="tw-steps-panel">
      <div class="tw-container-fluid tw-page-container">
        <div id="lockNotification" class="tw:mb-4">
          <div class="tw-inline-notification tw-inline-notification-highlight" role="status">
            <div class="tw-inline-notification-icon"><i class="fa-solid fa-circle-check"></i></div>
            <div class="tw-inline-notification-content">
              <p class="tw-inline-notification-title">Pre-enrolment locked. <span id="lockedCount">0</span> students are ready for release.</p>
            </div>
          </div>
        </div>
        <div class="tw-inline-notification tw-inline-notification-info tw:mb-4" role="status">
          <div class="tw-inline-notification-icon"><i class="fa-solid fa-envelope"></i></div>
          <div class="tw-inline-notification-content">
            <p class="tw-inline-notification-title">Emails will be sent to: <strong>Students</strong></p>
            <p class="tw-inline-notification-message">Based on your school settings. To change the recipient, update "Email recipient" in Enrolment Settings.</p>
          </div>
        </div>
        <div id="scheduleConfirm" class="tw:hidden tw:mb-4">
          <div class="tw-inline-notification tw-inline-notification-success" role="status">
            <div class="tw-inline-notification-icon"><i class="fa-solid fa-bullhorn"></i></div>
            <div class="tw-inline-notification-content">
              <p class="tw-inline-notification-title" id="scheduleConfirmText"></p>
            </div>
          </div>
        </div>
        <div class="tw:grid tw:grid-cols-2 tw:gap-4">
          <div class="tw-card">
            <div class="tw-card-header">
              <h2 class="tw-card-title tw:mb-0">Release Schedule</h2>
            </div>
            <div class="tw-card-body">
              <div class="tw:mb-3">
                <label class="tw-form-label" for="releaseDate">Release Date and Time</label>
                <input type="datetime-local" class="tw-form-control" id="releaseDate">
              </div>
              <div class="tw:mb-3">
                <label class="tw-form-label" for="responseDeadline">Response Deadline</label>
                <select class="tw-form-select" id="responseDeadline">
                  <option value="24">24 hours</option>
                  <option value="48" selected>48 hours</option>
                  <option value="72">72 hours</option>
                  <option value="168">1 week</option>
                  <option value="custom">Custom</option>
                </select>
              </div>
            </div>
          </div>
          <div class="tw-card">
            <div class="tw-card-header">
              <h2 class="tw-card-title tw:mb-0">Notification Summary</h2>
            </div>
            <div class="tw-card-body">
              <div class="tw:bg-neutral-100 tw:rounded-lg tw:p-4 tw:mb-4">
                <p class="text-body-s text-muted tw:mb-0">Students will receive:</p>
                <p class="tw:text-lg tw:font-semibold tw:mb-3">Email notification with course details</p>
                <p class="text-body-s text-muted tw:mb-0">They will be asked to:</p>
                <p class="tw:text-lg tw:font-semibold">Log in and confirm their pre-enrolment</p>
              </div>
              <div class="tw:grid tw:grid-cols-2 tw:gap-3">
                <div class="tw-card tw-card-flat tw-card-high-priority tw:p-3">
                  <div class="tw:font-bold tw:leading-tight tw-text-heading-1 tw:mb-0 fw-bold" id="releaseStudentCount">0</div>
                  <div class="tw:mt-1 tw:text-sm text-muted">Students to notify</div>
                </div>
                <div class="tw-card tw-card-flat tw:p-3">
                  <div class="tw:font-bold tw:leading-tight tw-text-heading-1 tw:mb-0 fw-bold" id="releaseCourseCount">0</div>
                  <div class="tw:mt-1 tw:text-sm text-muted">Courses assigned</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Email Template -->
        <div class="tw-card tw:mt-4">
          <div class="tw-card-header">
            <h2 class="tw-card-title tw:mb-0">Email Template</h2>
          </div>
          <div class="tw-card-body tw:space-y-4">
            <!-- Sender & Reply-to -->
            <div class="tw:grid tw:grid-cols-2 tw:gap-4">
              <div>
                <label for="be-sender" class="tw-form-label">Sender Email</label>
                <input type="email" id="be-sender" class="tw-form-control" value="admissions@oakwood-academy.edu" placeholder="admissions@school.edu">
              </div>
              <div>
                <label for="be-replyto" class="tw-form-label">Reply-to Email</label>
                <input type="email" id="be-replyto" class="tw-form-control" value="admissions@oakwood-academy.edu" placeholder="admissions@school.edu">
              </div>
            </div>
            <!-- Subject -->
            <div>
              <label for="be-subject" class="tw-form-label tw-form-label-required">Subject</label>
              <input type="text" id="be-subject" class="tw-form-control" value="Course Pre-Enrolment Notification — {school_name}" aria-required="true">
            </div>
            <!-- Key Email toggle -->
            <div>
              <div class="tw:flex tw:items-center tw:justify-between">
                <div>
                  <span class="tw:text-body-s tw:text-neutral-700"><strong>Key Email</strong></span>
                  <p class="tw-form-text tw:mb-0"><em>If enabled, this email will be used for tracking engagement score calculation.</em></p>
                </div>
                <div class="tw-form-switch">
                  <input class="tw-form-check-input" type="checkbox" id="be-keyEmail" role="switch">
                  <label class="tw:sr-only" for="be-keyEmail">Key Email</label>
                </div>
              </div>
            </div>
            <!-- Attachments -->
            <div>
              <label for="be-attachments" class="tw-form-label">Attachments</label>
              <div class="tw-file-upload" data-controller="file-upload">
                <input type="file" class="tw:sr-only" data-file-upload-target="input"
                           data-action="change->file-upload#changed" aria-label="Upload attachment from computer">
                <div class="tw:flex tw:gap-2">
                  <select id="be-attachments" class="tw-form-select tw:flex-1">
                    <option value="">Select from uploaded files</option>
                    <option value="handbook">Student Handbook 2025.pdf</option>
                    <option value="timetable">Draft Timetable.pdf</option>
                    <option value="campus-map">Campus Map.pdf</option>
                  </select>
                  <button class="tw-btn tw-btn-secondary tw-btn-sm" type="button"
                              data-action="click->file-upload#browse">
                    <i class="fa-regular fa-arrow-up-from-bracket tw:mr-1"></i>Upload
                  </button>
                </div>
                <div class="tw-file-upload-list" data-file-upload-target="list"></div>
              </div>
            </div>
            <!-- Mail Merge Field -->
            <div>
              <label for="be-mailMerge" class="tw-form-label">Mail Merge Field</label>
              <span class="tw-form-text tw:mb-1">By using personalisation tokens, you can mail merge personalised content to your recipients.</span>
              <div class="tw:flex tw:gap-2">
                <select id="be-mailMerge" class="tw-form-select tw:flex-1">
                  <option value="">Type here to select token</option>
                  <optgroup label="Student">
                    <option value="student_first_name">Student First Name</option>
                    <option value="student_last_name">Student Last Name</option>
                    <option value="student_full_name">Student Full Name</option>
                  </optgroup>
                  <optgroup label="School">
                    <option value="school_name">School Name</option>
                  </optgroup>
                  <optgroup label="Enrolment">
                    <option value="courses_list">Courses List</option>
                    <option value="response_deadline">Response Deadline</option>
                    <option value="portal_link">Portal Link</option>
                  </optgroup>
                </select>
                <button class="tw-btn tw-btn-primary tw-btn-sm" type="button"
                            data-controller="tooltip"
                            data-tooltip-content-value="Select a merge field and click Insert to add a personalisation token into the email content"
                            data-tooltip-placement-value="top">
                  <i class="fa-solid fa-plus tw:mr-1"></i>Insert Field
                  <i class="fa-regular fa-circle-info tw:ml-1"></i>
                </button>
              </div>
            </div>
            <!-- Content (RTE) -->
            <div>
              <label id="be-content-label" class="tw-form-label tw-form-label-required">Content</label>
              <div class="tw-rte">
                <div class="tw-rte-toolbar" role="toolbar" aria-label="Formatting options">
                  <div class="tw-rte-toolbar-group" role="group" aria-label="Block format">
                    <button class="tw-rte-toolbar-select" type="button">
                      Paragraph <i class="fa-solid fa-chevron-down tw-rte-toolbar-select-chevron"></i>
                    </button>
                  </div>
                  <div class="tw-rte-toolbar-group" role="group" aria-label="Text formatting">
                    <button class="tw-rte-toolbar-btn" type="button" aria-label="Bold" aria-pressed="false">
                      <i class="fa-solid fa-bold"></i>
                    </button>
                    <button class="tw-rte-toolbar-btn" type="button" aria-label="Italic" aria-pressed="false">
                      <i class="fa-solid fa-italic"></i>
                    </button>
                    <button class="tw-rte-toolbar-btn" type="button" aria-label="Underline" aria-pressed="false">
                      <i class="fa-solid fa-underline"></i>
                    </button>
                  </div>
                  <div class="tw-rte-toolbar-group" role="group" aria-label="Alignment">
                    <button class="tw-rte-toolbar-btn tw-active" type="button" aria-label="Align left" aria-pressed="true">
                      <i class="fa-solid fa-align-left"></i>
                    </button>
                    <button class="tw-rte-toolbar-btn" type="button" aria-label="Align center" aria-pressed="false">
                      <i class="fa-solid fa-align-center"></i>
                    </button>
                    <button class="tw-rte-toolbar-btn" type="button" aria-label="Align right" aria-pressed="false">
                      <i class="fa-solid fa-align-right"></i>
                    </button>
                    <button class="tw-rte-toolbar-btn" type="button" aria-label="Align justify" aria-pressed="false">
                      <i class="fa-solid fa-align-justify"></i>
                    </button>
                  </div>
                  <div class="tw-rte-toolbar-group" role="group" aria-label="Insert">
                    <button class="tw-rte-toolbar-btn" type="button" aria-label="Strikethrough" aria-pressed="false">
                      <i class="fa-solid fa-strikethrough"></i>
                    </button>
                    <button class="tw-rte-toolbar-btn" type="button" aria-label="Insert link">
                      <i class="fa-solid fa-link"></i>
                    </button>
                    <button class="tw-rte-toolbar-btn" type="button" aria-label="More options">
                      <i class="fa-solid fa-ellipsis-vertical"></i>
                    </button>
                  </div>
                </div>
                <div class="tw-rte-content" contenteditable="true" role="textbox" aria-multiline="true" aria-labelledby="be-content-label" aria-required="true">
                  <p>Dear <span class="tw-badge tw-badge-info-subtle">{{STUDENT_FIRST_NAME}}</span>,</p>
                  <p>Congratulations! We are pleased to inform you that you have been pre-enrolled into the following courses at <span class="tw-badge tw-badge-info-subtle">{{SCHOOL_NAME}}</span> for the upcoming academic year:</p>
                  <p><span class="tw-badge tw-badge-info-subtle">{{COURSES_LIST}}</span></p>
                  <p>To confirm your place, please log in to your Applicaa portal and review your course allocations. You will need to confirm your acceptance within the response deadline.</p>
                  <p>If you have any questions about your course selections or would like to discuss alternative options, please contact our admissions team.</p>
                  <p>Kind regards,<br>
                    The Admissions Team</p>
                </div>
                <div class="tw-rte-footer">Please press Shift + Enter for new line</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Wizard Action Bar -->
<div class="tw-action-bar" id="wizardActionBar">
  <div class="tw-action-bar-start" id="wizardActionBarStart"></div>
  <div class="tw-action-bar-end" id="wizardActionBarEnd"></div>
</div>
<!-- Allocation Progress Overlay -->
<div class="tw:fixed tw:inset-0 tw:z-[200] tw:flex tw:items-center tw:justify-center tw:bg-black/50 tw:hidden" id="allocOverlay">
  <div class="tw:w-[90%] tw:max-w-sm">
    <div class="tw-card tw-card-prominent">
      <div class="tw-card-body tw:text-center tw:p-5">
        <h2 class="tw-h3 tw:mb-3">Running Bulk Allocation</h2>
        <p class="text-muted tw:mb-4" id="allocProgressLabel">Analysing student preferences...</p>
        <div class="tw-progress tw-progress-lg tw:mb-3">
          <div class="tw-progress-bar tw-progress-bar-primary" id="allocProgressBar"></div>
        </div>
        <p class="text-body-s text-muted" id="allocProgressText">0%</p>
      </div>
    </div>
  </div>
</div>
<!-- Edit Allocation Popup -->
<div data-controller="popup" id="editPopupWrapper">
  <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick" id="editOverlay"></div>
  <div class="tw-popup-panel tw-popup-2xl" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="editPopupTitle" id="editPanel">
    <div class="tw-popup-header">
      <div>
        <h2 class="tw-popup-header-title" id="editPopupTitle">Edit Allocation</h2>
      </div>
      <button class="tw-popup-close" type="button" aria-label="Close" data-action="click->popup#close" onclick="closeEditModal()">
        <i class="fa-solid fa-xmark"></i>
      </button>
    </div>
    <div class="tw-popup-body" id="editModalBody"></div>
    <div class="tw-popup-footer">
      <button class="tw-btn tw-btn-secondary" type="button" data-action="click->popup#close" onclick="closeEditModal()">Cancel</button>
      <button class="tw-btn tw-btn-primary" type="button" onclick="saveEdit()">Save Changes</button>
    </div>
  </div>
</div>
<!-- Create Custom Property Popup -->
<div data-controller="popup" id="customPropPopupWrapper">
  <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick" id="customPropOverlay"></div>
  <div class="tw-popup-panel tw-popup-lg" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="customPropTitle" id="customPropPanel">
    <div class="tw-popup-header">
      <div>
        <h2 class="tw-popup-header-title" id="customPropTitle">Create Custom Property</h2>
        <p class="text-body-s text-muted tw:mt-1 tw:mb-0">Define a custom criterion based on student data fields</p>
      </div>
      <button class="tw-popup-close" type="button" aria-label="Close" data-action="click->popup#close" onclick="closeCustomPropertyModal()">
        <i class="fa-solid fa-xmark"></i>
      </button>
    </div>
    <div class="tw-popup-body">
      <div class="tw:mb-4">
        <label class="tw-form-label" for="customPropName">Property Name</label>
        <input type="text" class="tw-form-control" id="customPropName" placeholder="e.g. Religion, SEN Status, Bursary Type">
      </div>
      <div class="tw:mb-4">
        <label class="tw-form-label" for="customPropSource">Data Source</label>
        <select class="tw-form-select" id="customPropSource" onchange="onCustomSourceChange()">
          <option value="">Select a data source...</option>
        </select>
        <p class="text-body-xs text-muted tw:mt-1">Which student data field does this property map to?</p>
      </div>
      <div class="tw:mb-4">
        <label class="tw-form-label">Qualifying Values <span class="text-muted fw-normal">(ranked #1 = highest priority)</span></label>
        <div class="tw:flex tw:gap-2 tw:mb-3">
          <div class="tw-dropdown tw-dropdown-block tw:flex-1" data-controller="dropdown" data-dropdown-multiple-value="true" id="customPropValueDropdown">
            <button class="tw-dropdown-trigger" type="button"
                        data-dropdown-target="trigger"
                        data-action="click->dropdown#toggle keydown->dropdown#keydown"
              aria-haspopup="true" aria-expanded="false">
              <span class="tw-dropdown-label tw-dropdown-placeholder" data-dropdown-target="label">Select a value...</span>
              <svg class="tw-dropdown-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6l4 4 4-4"></path></svg>
            </button>
            <div class="tw-dropdown-menu tw-dropdown-menu-scrollable" role="listbox" data-dropdown-target="menu" tabindex="-1" id="customPropValueMenu">
              <label class="tw-dropdown-check"><input type="checkbox" class="tw-dropdown-check-input" value="EHCP" data-dropdown-target="item" data-action="change->dropdown#check"><span class="tw-dropdown-check-label">EHCP</span></label>
              <label class="tw-dropdown-check"><input type="checkbox" class="tw-dropdown-check-input" value="SEN Support" data-dropdown-target="item" data-action="change->dropdown#check"><span class="tw-dropdown-check-label">SEN Support</span></label>
              <label class="tw-dropdown-check"><input type="checkbox" class="tw-dropdown-check-input" value="No SEN" data-dropdown-target="item" data-action="change->dropdown#check"><span class="tw-dropdown-check-label">No SEN</span></label>
            </div>
          </div>
          <button class="tw-btn tw-btn-outline-primary tw-btn-sm" type="button" onclick="addCustomPropValue()">
            <i class="fa-regular fa-plus"></i> Add Value
          </button>
        </div>
        <div id="customPropRankedValues"></div>
      </div>
    </div>
    <div class="tw-popup-footer">
      <button class="tw-btn tw-btn-secondary" type="button" data-action="click->popup#close" onclick="closeCustomPropertyModal()">Cancel</button>
      <button class="tw-btn tw-btn-primary" type="button" onclick="saveCustomProperty()">
        <i class="fa-regular fa-check"></i> Create Property
      </button>
    </div>
  </div>
</div>
<!-- Advanced Filter Drawer -->
<div data-controller="drawer" id="filterDrawerWrapper">
  <button id="filterDrawerTrigger" type="button" class="tw:hidden" data-action="click->drawer#open" aria-label="Open advanced filters"></button>
  <div class="tw-drawer-backdrop" data-drawer-target="backdrop" data-action="click->drawer#close" aria-hidden="true"></div>
  <div class="tw-drawer" data-drawer-target="panel" role="dialog" aria-modal="true" aria-labelledby="filterDrawerTitle" aria-hidden="true">
    <div class="tw-drawer-header">
      <h2 class="tw-drawer-title" id="filterDrawerTitle">Advanced Filters</h2>
      <button class="tw-btn tw-btn-icon tw-btn-tertiary" type="button" data-action="click->drawer#close" aria-label="Close drawer">
        <i class="fa-solid fa-xmark"></i>
      </button>
    </div>
    <div class="tw-drawer-body">
      <div id="filterRows"></div>
      <button class="tw-btn tw-btn-outline-primary tw-btn-sm tw:mt-3" type="button" onclick="addFilterRow()">
        <i class="fa-regular fa-plus"></i> Add Filter
      </button>
    </div>
    <div class="tw-drawer-footer">
      <button class="tw-btn tw-btn-secondary" type="button" onclick="clearAllFilters()">Clear All</button>
      <button class="tw-btn tw-btn-primary" type="button" onclick="applyAllFilters(); resetFilterDrawer()">Apply Filters</button>
    </div>
  </div>
</div>
<script>
  // ============================================================
  // DATA GENERATION
  // ============================================================
  const SUBJECTS = [
    'Mathematics','Further Maths','Physics','Chemistry','Biology',
    'English Literature','English Language','History','Geography',
    'Psychology','Economics','Business Studies','Computer Science',
    'Art','French','Spanish'
  ];
  const BLOCKS = ['A','B','C','D','E'];
  const BLOCK_VIEW_COLUMNS = ['A', 'B', 'C', 'D', 'Enrichment', 'PSHE'];
  const FIRST_NAMES_M = ['Oliver','James','William','Thomas','George','Henry','Alexander','Samuel','Benjamin','Daniel','Matthew','Ethan','Jack','Harry','Noah','Liam','Owen','Callum','Ryan','Finley','Isaac','Max','Leo','Oscar','Dylan','Jake','Charlie','Connor','Cameron','Aaron','Sean'];
  const FIRST_NAMES_F = ['Emily','Charlotte','Amelia','Sophia','Isabella','Olivia','Mia','Ava','Grace','Lily','Hannah','Chloe','Zara','Ella','Lucy','Freya','Ruby','Phoebe','Alice','Megan','Bethany','Jasmine','Sarah','Emma','Holly','Jessica','Abigail','Molly','Katie','Rebecca'];
  const LAST_NAMES = ['Anderson','Baker','Brown','Campbell','Carter','Clark','Collins','Cooper','Davies','Edwards','Evans','Fisher','Garcia','Green','Hall','Harris','Hill','Hughes','Jackson','James','Johnson','Jones','King','Knight','Lee','Lewis','Martin','Miller','Mitchell','Moore','Morgan','Murphy','Nelson','Owen','Palmer','Parker','Patel','Phillips','Price','Quinn','Reed','Roberts','Robinson','Scott','Shaw','Singh','Smith','Taylor','Thomas','Thompson','Turner','Walker','Ward','Watson','White','Williams','Wilson','Wood','Wright','Young'];
  function rand(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
  function pick(arr) { return arr[rand(0, arr.length - 1)]; }
  function pickN(arr, n) {
    const copy = [...arr];
    const result = [];
    for (let i = 0; i < n && copy.length; i++) {
      const idx = rand(0, copy.length - 1);
      result.push(copy.splice(idx, 1)[0]);
    }
    return result;
  }
  const subjectBlocks = {};
  SUBJECTS.forEach((s, i) => { subjectBlocks[s] = BLOCKS[i % BLOCKS.length]; });
  const classData = {};
  SUBJECTS.forEach(s => {
    const numClasses = rand(1, 2);
    const classes = [];
    for (let c = 0; c < numClasses; c++) {
      classes.push({
        name: s + ' ' + String.fromCharCode(65 + c),
        code: s.substring(0, 3).toUpperCase() + '-' + subjectBlocks[s] + (c + 1),
        capacity: rand(20, 28),
        existing: rand(6, 16),
        preEnrolled: 0
      });
    }
    classData[s] = { block: subjectBlocks[s], classes };
  });
  const classCaps = {};
  SUBJECTS.forEach(s => {
    const cd = classData[s];
    classCaps[s] = { capacity: cd.classes[0].capacity, existing: cd.classes[0].existing, classes: cd.classes.length };
  });
  // Block View independent mock data
  function generateBlockViewData() {
    const courses = [
      { name: 'A Level Chemistry', abbrev: 'Chem' },
      { name: 'A Level Computer Science', abbrev: 'CS' },
      { name: 'A Level History', abbrev: 'Hist' },
      { name: 'A Level Mathematics', abbrev: 'Maths' },
      { name: 'A Level Physics', abbrev: 'Phys' },
      { name: 'A Level Biology', abbrev: 'Bio' },
      { name: 'A Level Economics', abbrev: 'Econ' },
      { name: 'A Level English Literature', abbrev: 'Eng Lit' },
      { name: 'A Level French', abbrev: 'Fr' },
      { name: 'A Level Geography', abbrev: 'Geog' },
      { name: 'A Level Psychology', abbrev: 'Psych' },
      { name: 'A Level Business Studies', abbrev: 'Bus' },
    ];
    return courses.map(course => {
      const classes = {};
      const numBlocks = rand(2, 4);
      const chosenBlocks = pickN([...BLOCK_VIEW_COLUMNS], numBlocks);
      chosenBlocks.forEach((block, idx) => {
        const classLetter = String.fromCharCode(65 + idx);
        const className = '12 ' + course.abbrev + ' ' + classLetter;
        const capacity = rand(12, 18);
        const fill = rand(0, capacity);
        classes[block] = [{ name: className, fill: fill, capacity: capacity }];
      });
      return { course: course.name, classes: classes };
    });
  }
  const blockViewData = generateBlockViewData();
  function generateStudents() {
    const students = [];
    const usedNames = new Set();
    for (let i = 0; i < 57; i++) {
      const isInternal = i < 45;
      const isFemale = Math.random() > 0.48;
      let first, last, name;
      do {
        first = isFemale ? pick(FIRST_NAMES_F) : pick(FIRST_NAMES_M);
        last = pick(LAST_NAMES);
        name = first + ' ' + last;
      } while (usedNames.has(name));
      usedNames.add(name);
      const aps = (rand(52, 89) / 10);
      let eligibility;
      if (i >= 55) eligibility = 'red';
      else if (Math.random() < 0.18) eligibility = 'amber';
      else eligibility = 'green';
      const numSubjects = rand(3, 5);
      const subjects = pickN(SUBJECTS, numSubjects);
      let ehcp = false, lac = false, sibling = false, staffChild = false;
      if (i === 0 || i === 1) ehcp = true;
      if (i === 2) lac = true;
      if (i === 3 || i === 4) sibling = true;
      const distance = (rand(5, 150) / 10);
      const yearGroups = ['Year 12', 'Year 13'];
      const offerStatuses = ['Conditional Offer', 'Unconditional Offer', 'No Offer'];
      const religions = ['Christian', 'Muslim', 'Hindu', 'Sikh', 'Buddhist', 'Jewish', 'No Religion', 'Other'];
      const senStatuses = ['EHCP', 'SEN Support', 'No SEN'];
      const ethnicities = ['White British', 'White Other', 'Asian', 'Black African', 'Black Caribbean', 'Mixed', 'Chinese', 'Other'];
      const bursaryTypes = ['16-19 Bursary', 'Free School Meals', 'Pupil Premium', 'None'];
      const catchments = ['In Catchment', 'Adjacent Catchment', 'Out of Catchment'];
      const feeder = isInternal ? 'Oakwood Academy' : pick(["St Mary's", "King Edward's", "Riverside College", "Park Lane Academy"]);
      students.push({
        id: i + 1, name, firstName: first, internal: isInternal, aps, eligibility, subjects,
        selected: false, added: false, allocStatus: null, allocatedSubjects: [], unallocatedSubjects: [],
        unallocReason: '', responseStatus: null, responseTime: null, rejectionReason: null,
        changeRequestedSubjects: null, ehcp, lac, sibling, staffChild, distance,
        priorityRank: null, priorityCriterion: null,
        gender: isFemale ? 'Female' : 'Male',
        yearGroup: pick(yearGroups),
        applicationGroup: isInternal ? 'Year 11 into Year 12' : 'External Applicants',
        feederSchool: feeder,
        offerStatus: pick(offerStatuses),
        applicationStatus: pick(['Submitted', 'Under Review', 'Accepted']),
        religion: pick(religions),
        senStatus: ehcp ? 'EHCP' : pick(senStatuses),
        ethnicity: pick(ethnicities),
        bursaryType: pick(bursaryTypes),
        catchmentArea: pick(catchments),
        enrolled: false,
        inRun: null
      });
    }
    // Mark a few students as already enrolled
    students[4].enrolled = true;
    students[10].enrolled = true;
    students[22].enrolled = true;
    // Mark a few students as in another active run
    students[7].inRun = 'Year 7 Sept Intake';
    students[15].inRun = 'Scholarship Candidates';
    return students;
  }
  let allStudents = generateStudents();
  let runStudents = [];
  let currentStep = 0;
  let maxStep = 0;
  let allocRun = false;
  let locked = false;
  let released = false;
  let viewingHistoricRun = false;
  const existingRuns = [
    { name: 'Year 12 Results Day 2025', date: '2025-08-15', count: 180, status: 'completed', viewType: 'monitor', monitorData: { total: 180, confirmed: 165, pending: 0, rejected: 8, expired: 7, changeRequested: 0 } },
    { name: 'Year 7 September Intake', date: '2025-09-01', count: 95, status: 'released', viewType: 'monitor', monitorData: { total: 95, confirmed: 62, pending: 18, rejected: 10, expired: 5, changeRequested: 0 } },
    { name: 'Scholarship Candidates', date: '2025-11-20', count: 12, status: 'draft', viewType: 'review', reviewStudentCount: 12 },
  ];
  // ============================================================
  // PRIORITY CRITERIA
  // ============================================================
  const ALL_CRITERIA = [
    { id: 'aps', name: 'Total Point Score', desc: 'Highest total point score first' },
    { id: 'sibling', name: 'Sibling Priority', desc: 'Students with siblings at the school rank higher' },
    { id: 'feeder', name: 'Feeder School', desc: 'Students from feeder schools rank higher' },
    { id: 'catchment', name: 'Catchment Area', desc: 'Students within catchment area rank higher' },
    { id: 'interview', name: 'Interview Score', desc: 'Highest interview score first' },
    { id: 'bursary', name: 'Bursary Eligibility', desc: 'Bursary-eligible students rank higher' },
  ];
  let activeCriteria = ['aps'];
  // ============================================================
  // CUSTOM PROPERTY SYSTEM
  // ============================================================
  const CUSTOM_PROPERTY_SOURCES = [
    { id: 'ehcp', name: 'EHCP Status', values: ['Yes', 'No'] },
    { id: 'lac', name: 'Looked After Children', values: ['Yes', 'No'] },
    { id: 'sibling', name: 'Sibling at School', values: ['Yes', 'No'] },
    { id: 'staffChild', name: 'Staff Child', values: ['Yes', 'No'] },
    { id: 'religion', name: 'Religion', values: ['Christian', 'Muslim', 'Hindu', 'Sikh', 'Buddhist', 'Jewish', 'No Religion', 'Other'] },
    { id: 'senStatus', name: 'SEN Status', values: ['EHCP', 'SEN Support', 'No SEN'] },
    { id: 'ethnicity', name: 'Ethnicity', values: ['White British', 'White Other', 'Asian', 'Black African', 'Black Caribbean', 'Mixed', 'Chinese', 'Other'] },
    { id: 'bursaryType', name: 'Bursary Type', values: ['16-19 Bursary', 'Free School Meals', 'Pupil Premium', 'None'] },
    { id: 'feederSchool', name: 'Feeder School', values: ["Oakwood Academy", "St Mary's", "King Edward's", "Riverside College", "Park Lane Academy"] },
    { id: 'catchmentArea', name: 'Catchment Area', values: ['In Catchment', 'Adjacent Catchment', 'Out of Catchment'] },
  ];
  let customCriteria = [];
  let customPropCounter = 0;
  let tempRankedValues = [];
  // ============================================================
  // ADVANCED FILTER
  // ============================================================
  const FILTER_FIELDS = [
    { value: 'studentType', label: 'Student Type', options: ['Internal', 'External'] },
    { value: 'eligibility', label: 'Eligibility', options: ['Green', 'Amber', 'Red'] },
    { value: 'applicationStatus', label: 'Application Status', options: ['Submitted', 'Under Review', 'Accepted'] },
    { value: 'yearGroup', label: 'Year Group', options: ['Year 7','Year 8','Year 9','Year 10','Year 11','Year 12','Year 13'] },
    { value: 'applicationGroup', label: 'Application Group', options: ['Year 11 into Year 12','Year 12 into Year 13','External Applicants'] },
    { value: 'feederSchool', label: 'Feeder School', options: ["Oakwood Academy","St Mary's","King Edward's","Riverside College","Park Lane Academy"] },
    { value: 'gender', label: 'Gender', options: ['Male', 'Female'] },
    { value: 'offerStatus', label: 'Offer Status', options: ['Conditional Offer','Unconditional Offer','No Offer'] },
  ];
  const FILTER_OPERATORS = ['is', 'is not', 'contains', 'is empty'];
  let filterRowsData = [];
  let filterRowCounter = 0;
  function addFilterRow(fieldVal, opVal, valVal) {
    const rowId = 'frow-' + (++filterRowCounter);
    filterRowsData.push({ id: rowId, field: fieldVal || '', operator: opVal || 'is', value: valVal || '' });
    renderFilterRows();
  }
  function removeFilterRow(rowId) {
    filterRowsData = filterRowsData.filter(r => r.id !== rowId);
    renderFilterRows();
  }
  function renderFilterRows() {
    const container = document.getElementById('filterRows');
    if (filterRowsData.length === 0) {
      container.innerHTML = '<p class="text-body-s text-muted tw:py-2">No active filters. Click "Add Filter" to narrow results.</p>';
      return;
    }
    container.innerHTML = filterRowsData.map((row, idx) => {
      const fieldDef = FILTER_FIELDS.find(f => f.value === row.field);
      const options = fieldDef ? fieldDef.options : [];
      const connector = idx > 0 ? '<div class="tw:flex tw:items-center tw:py-1 tw:ms-2"><span class="tw-badge tw-badge-primary tw-badge-sm tw:rounded-full tw:px-2.5 tw:py-0.5 tw:text-[11px] tw:font-bold">AND</span></div>' : '';
      return `${connector}<div class="tw:flex tw:items-center tw:gap-2 tw:mb-2 tw:flex-wrap" data-row-id="${row.id}">
        <select class="tw-form-select tw-form-select-sm tw:w-auto" onchange="updateFilterRow('${row.id}', 'field', this.value)">
          <option value="">Select field...</option>
          ${FILTER_FIELDS.map(f => '<option value="' + f.value + '"' + (f.value === row.field ? ' selected' : '') + '>' + f.label + '</option>').join('')}
        </select>
        <select class="tw-form-select tw-form-select-sm tw:w-auto" onchange="updateFilterRow('${row.id}', 'operator', this.value)">
          ${FILTER_OPERATORS.map(op => '<option value="' + op + '"' + (op === row.operator ? ' selected' : '') + '>' + op + '</option>').join('')}
        </select>
        ${row.operator !== 'is empty' ? '<select class="tw-form-select tw-form-select-sm tw:w-auto" onchange="updateFilterRow(\'' + row.id + '\', \'value\', this.value)"><option value="">Select value...</option>' + options.map(o => '<option value="' + o + '"' + (o === row.value ? ' selected' : '') + '>' + o + '</option>').join('') + '</select>' : '<span class="text-body-s text-muted tw:px-2">(no value needed)</span>'}
        <button class="tw-btn tw-btn-icon tw-btn-sm tw-btn-tertiary text-danger" type="button" aria-label="Remove filter" onclick="removeFilterRow('${row.id}')">
          <i class="fa-regular fa-xmark"></i>
        </button>
      </div>`;
    }).join('');
  }
  function updateFilterRow(rowId, prop, val) {
    const row = filterRowsData.find(r => r.id === rowId);
    if (!row) return;
    row[prop] = val;
    if (prop === 'field') { row.value = ''; renderFilterRows(); }
    if (prop === 'operator' && val === 'is empty') { row.value = ''; renderFilterRows(); }
  }
  function clearAllFilters() {
    filterRowsData = [];
    renderFilterRows();
    resetToggleGroup('studentType', 'both');
    resetToggleGroup('eligFilter', 'greenamber');
    applyAllFilters();
    resetFilterDrawer();
  }
  function resetToggleGroup(groupId, activeVal) {
    const el = document.getElementById(groupId);
    if (el) el.value = activeVal;
  }
  function getFilteredStudents() {
    const type = getActiveToggle('studentType');
    const elig = getActiveToggle('eligFilter');
    let filtered = allStudents.filter(s => !s.added);
    if (type === 'internal') filtered = filtered.filter(s => s.internal);
    else if (type === 'external') filtered = filtered.filter(s => !s.internal);
    if (elig === 'green') filtered = filtered.filter(s => s.eligibility === 'green');
    else if (elig === 'greenamber') filtered = filtered.filter(s => s.eligibility !== 'red');
    filterRowsData.forEach(row => {
      if (!row.field) return;
      filtered = filtered.filter(s => {
        let sVal = '';
        switch (row.field) {
          case 'studentType': sVal = s.internal ? 'Internal' : 'External'; break;
          case 'eligibility': sVal = s.eligibility.charAt(0).toUpperCase() + s.eligibility.slice(1); break;
          case 'applicationStatus': sVal = s.applicationStatus || ''; break;
          case 'yearGroup': sVal = s.yearGroup || ''; break;
          case 'applicationGroup': sVal = s.applicationGroup || ''; break;
          case 'feederSchool': sVal = s.feederSchool || ''; break;
          case 'gender': sVal = s.gender || ''; break;
          case 'offerStatus': sVal = s.offerStatus || ''; break;
        }
        switch (row.operator) {
          case 'is': return sVal === row.value;
          case 'is not': return sVal !== row.value;
          case 'contains': return sVal.toLowerCase().includes((row.value || '').toLowerCase());
          case 'is empty': return !sVal || sVal.trim() === '';
        }
        return true;
      });
    });
    return filtered.sort((a, b) => b.aps - a.aps);
  }
  function openFilterDrawer() {
    document.getElementById('filterDrawerTrigger').click();
  }
  function resetFilterDrawer() {
    const closeBtn = document.querySelector('#filterDrawerWrapper button[data-action*="drawer#close"]');
    if (closeBtn) closeBtn.click();
  }
  function applyAllFilters() {
    const filtered = getFilteredStudents();
    document.getElementById('filteredCount').textContent = filtered.length;
    const tbody = document.getElementById('studentListBody');
    tbody.innerHTML = filtered.map(s => {
      const eligBadge = s.eligibility === 'green' ? 'tw-badge-success-subtle' : s.eligibility === 'amber' ? 'tw-badge-warning-subtle' : 'tw-badge-danger-subtle';
      const eligLabel = s.eligibility.charAt(0).toUpperCase() + s.eligibility.slice(1);
      const isDisabled = s.enrolled || s.inRun;
      let statusBadge = '';
      let tooltipText = '';
      if (s.enrolled) {
        statusBadge = ' <span class="tw-badge tw-badge-secondary-subtle tw:ms-1">Enrolled</span>';
        tooltipText = 'This student is already enrolled.';
      } else if (s.inRun) {
        statusBadge = ' <span class="tw-badge tw-badge-warning-subtle tw:ms-1">In Run: ' + s.inRun + '</span>';
        tooltipText = 'This student is already in run: ' + s.inRun;
      }
      const checkboxCell = isDisabled
        ? '<td class="tw-table-cell-check"><input type="checkbox" class="tw-form-check-input" disabled></td>'
        : '<td class="tw-table-cell-check"><input type="checkbox" class="tw-form-check-input"' + (s.selected ? ' checked' : '') + ' onchange="toggleStudent(' + s.id + ', this.checked)"></td>';
      return '<tr' + (isDisabled ? ' class="tw:opacity-60" data-controller="tooltip" data-tooltip-content-value="' + tooltipText + '" data-tooltip-placement-value="bottom"' : '') + '>' +
        checkboxCell +
        '<td class="tw:font-semibold tw:text-neutral-800">' + s.name + statusBadge + '</td>' +
        '<td><span class="tw-badge ' + (s.internal ? 'tw-badge-info' : 'tw-badge-magenta') + '">' + (s.internal ? 'Internal' : 'External') + '</span></td>' +
        '<td>' + s.aps.toFixed(1) + '</td>' +
        '<td><span class="tw-badge tw-badge-dot ' + eligBadge + '">' + eligLabel + '</span></td>' +
        '<td>' + s.subjects.length + '</td>' +
        '</tr>';
    }).join('');
    updateSelectedCount();
  }
  // ============================================================
  // STEP NAVIGATION
  // ============================================================
  function handleStepClick(idx) {
    if (idx > maxStep) return;
    goToStep(idx);
  }
  function goToStep(n) {
    viewingHistoricRun = false;
    currentStep = n;
    if (n > maxStep) maxStep = n;
    updateActionBar(n);
    const panels = document.querySelectorAll('.tw-steps-panel');
    panels.forEach((p, i) => p.classList.toggle('tw-active', i === n));
    const steps = document.querySelectorAll('.tw-steps-header .tw-step');
    steps.forEach((s, i) => {
      s.classList.remove('tw-active', 'tw-completed');
      if (i === n) s.classList.add('tw-active');
      else if (i < n) s.classList.add('tw-completed');
    });
    steps.forEach((s, i) => {
      const indicator = s.querySelector('.tw-step-indicator');
      if (i < n) {
        indicator.innerHTML = '<i class="fa-solid fa-check"></i>';
      } else {
        indicator.textContent = (i + 1).toString();
      }
    });
    window.scrollTo(0, 0);
    if (n === 0) { renderFilterRows(); applyAllFilters(); updateContinueBtn(); }
    if (n === 1) renderReviewTable();
    if (n === 3) renderSchedule();
  }
  function updateActionBar(stepIndex) {
    const startEl = document.getElementById('wizardActionBarStart');
    const endEl = document.getElementById('wizardActionBarEnd');
    if (!startEl || !endEl) return;
    // Back button on steps 1–3, plus unlock on step 4
    let startHtml = '';
    if (stepIndex > 0) {
      startHtml += `<button class="tw-btn tw-btn-secondary" type="button" onclick="goToStep(${stepIndex - 1})">
           <i class="fa-regular fa-chevron-left"></i> Back
         </button>`;
    }
    if (stepIndex === 3) {
      startHtml += `<button class="tw-btn tw-btn-secondary" type="button" onclick="unlockAllocation()">
           <i class="fa-regular fa-lock-open"></i> Unlock Allocation
         </button>`;
    }
    startEl.innerHTML = startHtml;
    // Primary action per step
    const primaryActions = [
      `<button class="tw-btn tw-btn-primary" type="button" id="continueToReviewBtn" onclick="goToStep(1)" disabled>Continue to Review & Order <i class="fa-regular fa-chevron-right"></i></button>`,
      `<button class="tw-btn tw-btn-primary" type="button" onclick="runAllocation()"><i class="fa-regular fa-play"></i> Run Bulk Allocation</button>`,
      `<button class="tw-btn tw-btn-primary" type="button" onclick="lockIn()"><i class="fa-regular fa-lock"></i> Lock In Pre-Enrolment</button>`,
      `<button class="tw-btn tw-btn-primary" type="button" onclick="scheduleRelease()"><i class="fa-regular fa-paper-plane"></i> Schedule Release</button>`,
    ];
    endEl.innerHTML = primaryActions[stepIndex] || '';
  }
  // ============================================================
  // TOGGLE HELPERS
  // ============================================================
  function getActiveToggle(groupId) {
    const el = document.getElementById(groupId);
    return el ? el.value : '';
  }
  // ============================================================
  // STEP 1: ADD STUDENTS
  // ============================================================
  function toggleStudent(id, checked) {
    const s = allStudents.find(x => x.id === id);
    if (s && !s.enrolled && !s.inRun) s.selected = checked;
    updateSelectedCount();
  }
  function selectAll(val) {
    const visibleIds = new Set(getFilteredStudents().map(student => student.id));
    allStudents.forEach(student => {
      if (!student.added && !student.enrolled && !student.inRun && visibleIds.has(student.id)) student.selected = val;
    });
    applyAllFilters();
  }
  let _updateSelectedCountFrame;
  function updateSelectedCount() {
    cancelAnimationFrame(_updateSelectedCountFrame);
    _updateSelectedCountFrame = requestAnimationFrame(() => {
      const count = allStudents.filter(s => s.selected && !s.added && !s.enrolled && !s.inRun).length;
      document.getElementById('selectedCount').textContent = count;
      const btn = document.getElementById('addStudentsBtn');
      if (btn) {
        btn.textContent = 'Add ' + count + ' Students to Run';
        btn.disabled = count === 0;
      }
      // Sync thead select-all checkbox
      const selectAllCb = document.getElementById('studentSelectAll');
      if (selectAllCb) {
        const filtered = getFilteredStudents().filter(s => !s.enrolled && !s.inRun);
        const totalVisible = filtered.length;
        const selectedVisible = filtered.filter(s => s.selected).length;
        selectAllCb.checked = totalVisible > 0 && selectedVisible === totalVisible;
        selectAllCb.indeterminate = selectedVisible > 0 && selectedVisible < totalVisible;
      }
    });
  }
  function updateContinueBtn() {
    const btn = document.getElementById('continueToReviewBtn');
    if (btn) btn.disabled = runStudents.length === 0;
    const count = runStudents.length;
    const badge = document.getElementById('runCountBadge');
    if (badge) {
      badge.textContent = count;
      badge.classList.toggle('tw:hidden', count === 0);
    }
    const stepEl = document.getElementById('stepReviewOrder');
    if (stepEl) stepEl.dataset.tooltipContentValue = count + ' students added to this Run';
  }
  function addStudentsToRun() {
    const toAdd = allStudents.filter(s => s.selected && !s.added && !s.enrolled);
    if (!toAdd.length) return;
    toAdd.forEach(s => { s.added = true; s.selected = false; });
    runStudents = allStudents.filter(s => s.added);
    applyAllFilters();
    updateContinueBtn();
  }
  // ============================================================
  // STEP 2: REVIEW & ORDER
  // ============================================================
  function getCriterionDef(cId) {
    const builtin = ALL_CRITERIA.find(x => x.id === cId);
    if (builtin) return builtin;
    const custom = customCriteria.find(x => x.id === cId);
    if (custom) return { id: custom.id, name: custom.name, desc: 'Custom property: ' + custom.name, isCustom: true, rankedValues: custom.rankedValues, sourceId: custom.sourceId };
    return null;
  }
  function renderPriorityCriteria() {
    const container = document.getElementById('priorityCriteria');
    const usedIds = new Set(activeCriteria);
    container.innerHTML = activeCriteria.map((cId, i) => {
      const c = getCriterionDef(cId);
      if (!c) return '';
      const isCustom = c.isCustom || false;
      let customBadge = '';
      let customValuesHtml = '';
      if (isCustom) {
        customBadge = ' <span class="tw-badge tw-badge-warning-subtle tw-badge-sm tw:ms-1">Custom</span>';
        if (c.rankedValues && c.rankedValues.length > 0) {
          customValuesHtml = '<div class="tw:mt-1">' + c.rankedValues.map((v, vi) =>
            '<span class="tw:inline-flex tw:items-center tw:gap-1 tw:rounded-full tw:border tw:border-blue-200 tw:bg-blue-100 tw:px-2 tw:py-0.5 tw:text-xs tw:text-blue-800 tw:me-1 tw:mb-1"><span class="tw:font-bold text-primary">#' + (vi+1) + '</span> ' + v + '</span>'
          ).join('') + '</div>';
        }
      }
      const editBtn = isCustom
        ? '<button class="tw-btn tw-btn-icon tw-btn-sm tw-btn-tertiary" type="button" aria-label="Edit criterion" onclick="editCriterion(\'' + cId + '\')">' +
          '<i class="fa-regular fa-pen"></i></button>'
        : '';
      return '<div class="tw-card tw-card-flat tw:p-3 tw:mb-2 tw:flex tw:items-center tw:gap-3" draggable="true" ondragstart="onCriterionDragStart(event, ' + i + ')" ondragover="onCriterionDragOver(event, ' + i + ')" ondrop="onCriterionDrop(event, ' + i + ')" ondragend="onCriterionDragEnd(event)">' +
        '<i class="fa-solid fa-grip-dots-vertical tw:text-neutral-400 tw:cursor-grab"></i>' +
        '<span class="tw-badge tw-badge-primary tw-badge-circle">' + (i+1) + '</span>' +
        '<div class="tw:flex-1 tw:min-w-0"><div class="tw:font-semibold text-body-s">' + c.name + customBadge + '</div><div class="text-body-xs text-muted">' + c.desc + '</div>' + customValuesHtml + '</div>' +
        editBtn +
        '<button class="tw-btn tw-btn-icon tw-btn-sm tw-btn-tertiary text-danger" type="button" aria-label="Remove criterion" onclick="removeCriterion(' + i + ')"><i class="fa-regular fa-xmark"></i></button>' +
        '</div>';
    }).join('') +
      '<div class="tw-card tw-card-flat tw-card-caution tw:p-3 tw:mt-3 tw:flex tw:items-center tw:gap-3" data-controller="tooltip" data-tooltip-content-value="Shortest distance first (always applied when students have equal priority)" data-tooltip-placement-value="bottom">' +
      '<span class="tw-badge tw-badge-warning tw-badge-sm">TIEBREAKER</span>' +
      '<div class="tw:flex-1"><div class="tw:font-semibold text-body-s">Distance from School</div></div>' +
      '</div>';
    const menu = document.getElementById('criterionDropdownMenu');
    const labelEl = document.querySelector('#criterionDropdown [data-dropdown-target="label"]');
    if (menu) {
      const allAvailable = ALL_CRITERIA.filter(c => !usedIds.has(c.id));
      const customAvailable = customCriteria.filter(c => !usedIds.has(c.id));
      const checkSvg = '<svg class="tw-dropdown-item-check" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 8l4 4 6-7"></path></svg>';
      let itemsHtml = '';
      allAvailable.forEach(function(c) {
        itemsHtml += '<button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="' + c.id + '">' +
          '<span class="tw-dropdown-item-text">' + c.name + '</span>' + checkSvg + '</button>';
      });
      if (customAvailable.length > 0) {
        itemsHtml += '<div class="tw-dropdown-divider"></div>';
        itemsHtml += '<div class="tw-dropdown-header">Custom Properties</div>';
        customAvailable.forEach(function(c) {
          itemsHtml += '<button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="' + c.id + '">' +
            '<span class="tw-dropdown-item-text">' + c.name + '</span>' + checkSvg + '</button>';
        });
      }
      itemsHtml += '<div class="tw-dropdown-divider"></div>';
      itemsHtml += '<button class="tw-dropdown-item" type="button" onclick="event.stopPropagation(); openCustomPropertyModal(); document.querySelector(\'#criterionDropdown [data-dropdown-target=trigger]\').click();">' +
        '<i class="fa-regular fa-plus tw-dropdown-item-icon"></i>' +
        '<span class="tw-dropdown-item-text">Create custom property</span>' +
      '</button>';
      menu.innerHTML = itemsHtml;
      if (labelEl) {
        labelEl.textContent = 'Select a criterion';
        labelEl.classList.add('tw-dropdown-placeholder');
      }
    }
  }
  function moveCriterion(idx, dir) {
    const newIdx = idx + dir;
    if (newIdx < 0 || newIdx >= activeCriteria.length) return;
    const tmp = activeCriteria[idx];
    activeCriteria[idx] = activeCriteria[newIdx];
    activeCriteria[newIdx] = tmp;
    renderPriorityCriteria();
    if (!viewingHistoricRun) rankStudents();
  }
  function removeCriterion(idx) {
    activeCriteria.splice(idx, 1);
    renderPriorityCriteria();
    if (!viewingHistoricRun) rankStudents();
  }
  // Drag-and-drop reorder for priority criteria
  let dragCriterionIdx = null;
  function onCriterionDragStart(e, idx) {
    dragCriterionIdx = idx;
    e.currentTarget.classList.add('tw:opacity-50');
    e.dataTransfer.effectAllowed = 'move';
  }
  function onCriterionDragOver(e, idx) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
  }
  function onCriterionDrop(e, idx) {
    e.preventDefault();
    if (dragCriterionIdx === null || dragCriterionIdx === idx) return;
    const item = activeCriteria.splice(dragCriterionIdx, 1)[0];
    activeCriteria.splice(idx, 0, item);
    dragCriterionIdx = null;
    renderPriorityCriteria();
    if (!viewingHistoricRun) rankStudents();
  }
  function onCriterionDragEnd(e) {
    e.currentTarget.classList.remove('tw:opacity-50');
    dragCriterionIdx = null;
  }
  // Edit custom criterion
  let editingCustomId = null;
  function editCriterion(cId) {
    const c = customCriteria.find(x => x.id === cId);
    if (!c) return;
    editingCustomId = cId;
    tempRankedValues = [...c.rankedValues];
    document.getElementById('customPropName').value = c.name;
    const sourceSelect = document.getElementById('customPropSource');
    sourceSelect.innerHTML = '<option value="">Select a data source...</option>' +
      CUSTOM_PROPERTY_SOURCES.map(s => '<option value="' + s.id + '"' + (s.id === c.sourceId ? ' selected' : '') + '>' + s.name + '</option>').join('');
    const source = CUSTOM_PROPERTY_SOURCES.find(s => s.id === c.sourceId);
    const menu = document.getElementById('customPropValueMenu');
    if (source) {
      menu.innerHTML = source.values.map(v =>
        '<label class="tw-dropdown-check"><input type="checkbox" class="tw-dropdown-check-input" value="' + v + '" data-dropdown-target="item" data-action="change->dropdown#check"><span class="tw-dropdown-check-label">' + v + '</span></label>'
      ).join('');
    }
    const dropdownLabel = document.querySelector('#customPropValueDropdown [data-dropdown-target="label"]');
    if (dropdownLabel) { dropdownLabel.textContent = 'Select a value...'; dropdownLabel.classList.add('tw-dropdown-placeholder'); }
    document.getElementById('customPropTitle').textContent = 'Edit Custom Property';
    const saveBtn = document.querySelector('#customPropPanel .tw-popup-footer .tw-btn-primary');
    if (saveBtn) saveBtn.innerHTML = '<i class="fa-regular fa-check"></i> Save Changes';
    renderCustomPropValues();
    document.getElementById('customPropOverlay').classList.add('tw-popup-visible');
    document.getElementById('customPropPanel').classList.add('tw-popup-visible');
  }
  function addCriterion() {
    const menu = document.getElementById('criterionDropdownMenu');
    const activeItem = menu ? menu.querySelector('.tw-dropdown-item.tw-active') : null;
    if (!activeItem) return;
    const value = activeItem.dataset.value;
    if (!value) return;
    activeCriteria.push(value);
    renderPriorityCriteria();
    if (!viewingHistoricRun) rankStudents();
  }
  function getCustomCriterionScore(student, customCrit) {
    let studentVal = student[customCrit.sourceId];
    if (typeof studentVal === 'boolean') studentVal = studentVal ? 'Yes' : 'No';
    studentVal = studentVal || '';
    const ranked = customCrit.rankedValues;
    const idx = ranked.indexOf(studentVal);
    if (idx === -1) return 0;
    return (ranked.length - idx) / ranked.length;
  }
  function getStudentCustomValue(student, customCrit) {
    let val = student[customCrit.sourceId];
    if (typeof val === 'boolean') val = val ? 'Yes' : 'No';
    return val || '';
  }
  function getCriterionShortName(cId) {
    switch (cId) {
      case 'aps': return 'TPS';
      case 'sibling': return 'Sibling';
      case 'feeder': return 'Feeder';
      case 'catchment': return 'Catchment';
      case 'interview': return 'Interview';
      case 'bursary': return 'Bursary';
      default:
        const c = customCriteria.find(x => x.id === cId);
        return c ? c.name : cId;
    }
  }
  function getCriterionDisplayValue(s, cId) {
    switch (cId) {
      case 'aps': return s.aps.toFixed(1);
      case 'sibling': return s.sibling ? 'Yes' : 'No';
      case 'feeder': return s.feederSchool || 'N/A';
      case 'catchment': return s.catchmentArea || 'N/A';
      case 'interview': return 'N/A';
      case 'bursary': return s.bursaryType || 'N/A';
      default:
        const c = customCriteria.find(x => x.id === cId);
        return c ? (getStudentCustomValue(s, c) || 'N/A') : 'N/A';
    }
  }
  function rankStudents() {
    runStudents.forEach(s => {
      s._priorityScores = [];
      activeCriteria.forEach(cId => {
        switch(cId) {
          case 'aps': s._priorityScores.push(s.aps); break;
          default:
            const custom = customCriteria.find(x => x.id === cId);
            if (custom) {
              s._priorityScores.push(getCustomCriterionScore(s, custom));
            } else {
              s._priorityScores.push(0);
            }
            break;
        }
      });
    });
    runStudents.sort((a, b) => {
      for (let i = 0; i < activeCriteria.length; i++) {
        const diff = (b._priorityScores[i] || 0) - (a._priorityScores[i] || 0);
        if (Math.abs(diff) > 0.001) return diff;
      }
      return (a.distance || 99) - (b.distance || 99);
    });
    runStudents.forEach((s, i) => {
      s.priorityRank = i + 1;
      // Build full breakdown: one entry per active criterion
      s.priorityBreakdown = activeCriteria.map((cId, ci) => ({
        name: getCriterionShortName(cId),
        value: getCriterionDisplayValue(s, cId),
        score: s._priorityScores[ci] || 0
      }));
      // Determine deciding criterion by comparing with student above
      if (i === 0) {
        s.decidingCriterionIdx = 0;
      } else {
        const prev = runStudents[i - 1];
        s.decidingCriterionIdx = -1; // default: distance
        for (let ci = 0; ci < activeCriteria.length; ci++) {
          const diff = Math.abs((prev._priorityScores[ci] || 0) - (s._priorityScores[ci] || 0));
          if (diff > 0.001) { s.decidingCriterionIdx = ci; break; }
        }
      }
    });
    renderReviewBody();
  }
  function renderReviewTable() {
    renderPriorityCriteria();
    if (runStudents.length > 0) rankStudents();
    document.getElementById('reviewCount').textContent = runStudents.length;
  }
  function renderReviewBody() {
    const tbody = document.getElementById('reviewBody');
    // Demo: seed a long criterion on row 2 to showcase truncation + tooltip
    if (runStudents[1] && runStudents[1].priorityBreakdown && !runStudents[1]._longDemoInjected) {
      runStudents[1].priorityBreakdown.unshift({
        name: 'Applicants religion sport scholarships please tick the sport scholarships for which you are applying',
        value: 'you can attach supporting documents later',
        score: 0
      });
      runStudents[1]._longDemoInjected = true;
    }
    tbody.innerHTML = runStudents.map((s) => {
      const eligBadge = s.eligibility === 'green' ? 'tw-badge-success-subtle' : s.eligibility === 'amber' ? 'tw-badge-warning-subtle' : 'tw-badge-danger-subtle';
      // Build priority chips — one per criterion, deciding one highlighted
      const breakdown = (s.priorityBreakdown || []);
      const decidingIdx = s.decidingCriterionIdx;
      let priorityChips = breakdown.map((b, ci) => {
        const isDeciding = ci === decidingIdx;
        const tagClass = isDeciding ? 'tw-tag-info-subtle' : 'tw-tag-secondary-subtle';
        return '<span class="tw-tag tw-tag-sm ' + tagClass + ' tw:max-w-[240px]"><span class="tw:truncate tw:min-w-0">' + b.name + ': ' + b.value + '</span></span>';
      }).join('');
      // Add distance tag if that was the decider
      if (decidingIdx === -1) {
        priorityChips += '<span class="tw-tag tw-tag-sm tw-tag-info-subtle tw:max-w-[240px]"><span class="tw:truncate tw:min-w-0">Distance: ' + (s.distance || 0).toFixed(1) + 'km</span></span>';
      }
      return '<tr><td>' + s.priorityRank + '</td><td class="tw:font-semibold">' + s.name + '</td>' +
        '<td><div class="tw:flex tw:flex-wrap tw:gap-1 tw:items-center">' + s.subjects.map(sub => '<span class="tw-tag tw-tag-sm tw-tag-secondary-subtle tw-tag-pill">' + sub + ' (Block ' + subjectBlocks[sub] + ')</span>').join('') + '</div></td>' +
        '<td><span class="tw-badge ' + (s.internal ? 'tw-badge-info' : 'tw-badge-magenta') + '">' + (s.internal ? 'Internal' : 'External') + '</span></td>' +
        '<td><div class="tw:flex tw:flex-wrap tw:gap-1">' + priorityChips + '</div></td>' +
        '<td>' + s.aps.toFixed(1) + '</td>' +
        '<td><span class="tw-badge tw-badge-dot ' + eligBadge + '">' + s.eligibility.charAt(0).toUpperCase() + s.eligibility.slice(1) + '</span></td>' +
        '<td class="tw-table-cell-actions"><button class="tw-btn tw-btn-icon tw-btn-sm tw-btn-tertiary text-danger" type="button" aria-label="Remove student" onclick="removeStudent(' + s.id + ')"><i class="fa-regular fa-xmark"></i></button></td></tr>';
    }).join('');
    document.getElementById('reviewCount').textContent = runStudents.length;
    // Attach tooltip only to priority chips whose text is actually truncated
    tbody.querySelectorAll('.tw-tag .tw\\:truncate').forEach(inner => {
      if (inner.scrollWidth > inner.clientWidth + 1) {
        const tag = inner.parentElement;
        tag.setAttribute('data-controller', 'tooltip');
        tag.setAttribute('data-tooltip-content-value', inner.textContent);
        tag.setAttribute('data-tooltip-placement-value', 'top');
      }
    });
  }
  function removeStudent(id) {
    const s = allStudents.find(x => x.id === id);
    if (s) s.added = false;
    runStudents = allStudents.filter(s => s.added);
    renderReviewTable();
  }
  // ============================================================
  // STEP 3: ALLOCATION
  // ============================================================
  function runAllocation() {
    if (!runStudents.length) return;
    const overlay = document.getElementById('allocOverlay');
    overlay.classList.remove('tw:hidden');
    const bar = document.getElementById('allocProgressBar');
    const text = document.getElementById('allocProgressText');
    const label = document.getElementById('allocProgressLabel');
    const phases = [
      { pct: 15, msg: 'Analysing student preferences...' },
      { pct: 35, msg: 'Checking class availability...' },
      { pct: 55, msg: 'Running allocation algorithm...' },
      { pct: 75, msg: 'Resolving block conflicts...' },
      { pct: 90, msg: 'Finalising allocations...' },
      { pct: 100, msg: 'Complete!' },
    ];
    let phase = 0;
    const interval = setInterval(() => {
      if (phase >= phases.length) {
        clearInterval(interval);
        setTimeout(() => {
          overlay.classList.add('tw:hidden');
          performAllocation();
          allocRun = true;
          goToStep(2);
        }, 500);
        return;
      }
      bar.style.width = phases[phase].pct + '%';
      text.textContent = phases[phase].pct + '%';
      label.textContent = phases[phase].msg;
      phase++;
    }, 200);
  }
  function performAllocation() {
    const unallocIds = new Set();
    const redStudents = runStudents.filter(s => s.eligibility === 'red');
    redStudents.forEach(s => unallocIds.add(s.id));
    if (unallocIds.size < 3) {
      const ambers = runStudents.filter(s => s.eligibility === 'amber' && !unallocIds.has(s.id));
      while (unallocIds.size < 3 && ambers.length) unallocIds.add(ambers.pop().id);
    }
    const unallocReasons = ['Class full: Further Maths (Block C) at capacity','Block clash: Physics and Computer Science both in Block B','Class full: Chemistry (Block A) at capacity'];
    let reasonIdx = 0;
    SUBJECTS.forEach(s => { classData[s].classes.forEach(c => c.preEnrolled = 0); });
    runStudents.forEach(s => {
      s._originalSubjects = [...s.subjects];
      if (unallocIds.has(s.id)) {
        const allocCount = Math.max(1, s.subjects.length - rand(1,2));
        s.allocatedSubjects = s.subjects.slice(0, allocCount);
        s.unallocatedSubjects = s.subjects.slice(allocCount);
        s.allocStatus = s.allocatedSubjects.length === 0 ? 'none' : 'partial';
        s.unallocReason = unallocReasons[reasonIdx % unallocReasons.length];
        reasonIdx++;
      } else {
        s.allocatedSubjects = [...s.subjects];
        s.unallocatedSubjects = [];
        s.allocStatus = 'full';
        s.unallocReason = '';
      }
      s.allocatedSubjects.forEach(sub => {
        const cd = classData[sub];
        if (cd && cd.classes.length > 0) {
          let assigned = false;
          for (const cls of cd.classes) {
            if (cls.existing + cls.preEnrolled < cls.capacity) { cls.preEnrolled++; assigned = true; break; }
          }
          if (!assigned) cd.classes[0].preEnrolled++;
        }
      });
    });
    renderAllocationResults();
  }
  function renderAllocationResults() {
    const full = runStudents.filter(s => s.allocStatus === 'full').length;
    const partial = runStudents.filter(s => s.allocStatus === 'partial').length;
    const none = runStudents.filter(s => s.allocStatus === 'none').length;
    document.getElementById('allocStats').innerHTML =
      '<div class="tw-card tw-card-positive tw:p-4"><div class="tw:text-3xl tw:font-bold tw:leading-tight">' + full + '</div><div class="tw:mt-1 tw:text-sm text-muted">Successfully Allocated</div></div>' +
      '<div class="tw-card tw-card-caution tw:p-4"><div class="tw:text-3xl tw:font-bold tw:leading-tight">' + partial + '</div><div class="tw:mt-1 tw:text-sm text-muted">Partially Allocated</div></div>' +
      '<div class="tw-card tw-card-negative tw:p-4"><div class="tw:text-3xl tw:font-bold tw:leading-tight">' + none + '</div><div class="tw:mt-1 tw:text-sm text-muted">Could Not Allocate</div></div>';
    const preEnrolled = {};
    runStudents.forEach(s => s.allocatedSubjects.forEach(sub => { preEnrolled[sub] = (preEnrolled[sub] || 0) + 1; }));
    document.getElementById('classFillBody').innerHTML = SUBJECTS.map(sub => {
      const c = classCaps[sub]; const pre = preEnrolled[sub] || 0; const total = c.existing + pre;
      const cap = c.capacity * c.classes; const pct = Math.round((total / cap) * 100);
      const barClass = pct > 90 ? 'tw-progress-bar-danger' : pct > 75 ? 'tw-progress-bar-warning' : 'tw-progress-bar-info';
      return '<tr><td class="tw:font-semibold">' + sub + '</td><td>' + subjectBlocks[sub] + '</td><td>' + c.classes + '</td>' +
        '<td>' + c.existing + '</td><td class="fw-bold">' + pre + '</td><td>' + total + '</td><td>' + cap + '</td>' +
        '<td><div class="tw:flex tw:items-center tw:gap-2"><div class="tw-progress" style="width:80px;"><div class="tw-progress-bar ' + barClass + '" style="width:' + Math.min(pct,100) + '%;"></div></div><span class="tw:font-semibold text-body-s">' + pct + '%</span></div></td></tr>';
    }).join('');
    renderBlockView();
    const unalloc = runStudents.filter(s => s.allocStatus === 'partial' || s.allocStatus === 'none');
    const unallocPanel = document.getElementById('unallocPanel');
    if (unalloc.length) {
      unallocPanel.classList.remove('tw:hidden');
      document.getElementById('unallocBody').innerHTML = unalloc.map(s =>
        '<tr><td class="tw:font-semibold">' + s.name + '</td><td>' + s.unallocReason + '</td>' +
        '<td class="tw-table-cell-actions"><button class="tw-btn tw-btn-secondary tw-btn-sm" type="button" onclick="openEditModal(' + s.id + ')">Edit Allocation</button></td></tr>'
      ).join('');
    } else {
      unallocPanel.classList.add('tw:hidden');
    }
    const sorted = [...runStudents].sort((a, b) => (a.priorityRank || 999) - (b.priorityRank || 999));
    document.getElementById('allocDetailBody').innerHTML = sorted.map(s => {
      const statusBadge = s.allocStatus === 'full' ? 'tw-badge-success-subtle' : s.allocStatus === 'partial' ? 'tw-badge-warning-subtle' : 'tw-badge-danger-subtle';
      const statusLabel = s.allocStatus === 'full' ? 'Fully Allocated' : s.allocStatus === 'partial' ? 'Partially Allocated' : 'Not Allocated';
      return '<tr>' +
        '<td class="tw:font-semibold">' + s.name + '</td>' +
        '<td>' + s.aps.toFixed(1) + '</td>' +
        '<td><span class="tw-badge ' + statusBadge + '">' + statusLabel + '</span></td>' +
        '<td><div class="tw:flex tw:flex-wrap tw:gap-1 tw:items-center">' +
        s.allocatedSubjects.map(sub => '<span class="tw-tag tw-tag-sm tw-tag-success-subtle tw-tag-pill"><i class="fa-solid fa-check"></i> ' + sub + '</span>').join('') +
        s.unallocatedSubjects.map(sub => '<span class="tw-tag tw-tag-sm tw-tag-danger-subtle tw-tag-pill"><i class="fa-solid fa-xmark"></i> ' + sub + '</span>').join('') +
        '</div></td>' +
        '<td class="tw-table-cell-actions"><button class="tw-btn tw-btn-secondary tw-btn-sm" type="button" onclick="openEditModal(' + s.id + ')">Edit</button></td>' +
        '</tr>';
    }).join('');
  }
  function renderBlockView() {
    var tbody = document.getElementById('blockViewBody');
    tbody.innerHTML = blockViewData.map(function(row) {
      var courseCell = '<td class="tw:font-semibold tw:text-neutral-800 tw:whitespace-nowrap tw:align-middle">' +
        row.course + '</td>';
      var blockCells = BLOCK_VIEW_COLUMNS.map(function(block) {
        var blockClasses = row.classes[block];
        if (!blockClasses || blockClasses.length === 0) return '<td></td>';
        var chips = blockClasses.map(function(cls) {
          var pct = Math.round((cls.fill / cls.capacity) * 100);
          var fillLabel = cls.fill + '/' + cls.capacity;
          var tagColor = pct >= 80 ? 'warning' : 'info';
          return '<span class="tw-tag tw-tag-outline-' + tagColor + ' tw-tag-neutral-text tw:justify-between tw:gap-2 tw:w-[stretch] tw:-mx-2 tw:-my-1">' +
            cls.name +
            ' <span class="tw-badge tw-badge-rounded tw-badge-' + tagColor + '">' + fillLabel + '</span>' +
            '</span>';
        }).join('<i class="tw:block tw:p-1"></i>');
        return '<td class="tw-data-table-cell-block">' + chips + '</td>';
      }).join('');
      return '<tr>' + courseCell + blockCells + '</tr>';
    }).join('');
  }
  function showFillView(view) {
    const showingTable = view === 'table';
    const tablePanel = document.getElementById('fillTableView');
    const blockPanel = document.getElementById('fillBlockView');
    tablePanel.classList.toggle('tw:hidden', !showingTable);
    blockPanel.classList.toggle('tw:hidden', showingTable);
    tablePanel.classList.toggle('tw-active', showingTable);
    blockPanel.classList.toggle('tw-active', !showingTable);
  }
  // ============================================================
  // EDIT MODAL
  // ============================================================
  let editingStudentId = null;
  function openEditModal(id) {
    editingStudentId = id;
    const s = allStudents.find(x => x.id === id);
    if (!s) return;
    document.getElementById('editPopupTitle').textContent = 'Edit Allocation: ' + s.name;
    const body = document.getElementById('editModalBody');
    // Student details header
    var detailsHtml = '<div class="tw:bg-neutral-100 tw:rounded-lg tw:p-3 tw:mb-4 tw:flex tw:items-center tw:justify-between">' +
      '<div><span class="fw-bold">' + s.name + '</span> <span class="tw-badge tw:ms-2 ' + (s.internal ? 'tw-badge-primary' : 'tw-badge-secondary') + '">' + (s.internal ? 'Internal' : 'External') + '</span></div>' +
      '<div class="text-body-s text-muted">TPS: <strong>' + s.aps.toFixed(1) + '</strong> | Priority: <strong>#' + (s.priorityRank || '-') + '</strong></div></div>';
    // Build Block View-style table
    var originals = s._originalSubjects || s.subjects;
    var tableHtml = '<div class="tw-table-responsive">' +
      '<table class="tw-table tw-table-inner-bordered">' +
      '<thead><tr><th>Course</th>';
    BLOCKS.forEach(function(b) { tableHtml += '<th>Block ' + b + '</th>'; });
    tableHtml += '</tr></thead><tbody>';
    // One row per student subject
    s.subjects.forEach(function(sub) {
      var block = subjectBlocks[sub];
      var isAllocated = s.allocatedSubjects.includes(sub);
      var isUnallocated = s.unallocatedSubjects.includes(sub);
      var isExtra = !originals.includes(sub);
      tableHtml += '<tr>';
      // Course name with indicator for unallocated
      var courseLabel = sub;
      if (isUnallocated) {
        courseLabel = '<span class="text-danger"><i class="fa-solid fa-circle-exclamation tw:me-1"></i>' + sub + '</span>';
      } else if (isAllocated) {
        courseLabel = '<span class="text-success"><i class="fa-solid fa-check-circle tw:me-1"></i>' + sub + '</span>';
      }
      tableHtml += '<td class="tw:font-semibold tw:whitespace-nowrap tw:align-middle">' + courseLabel + '</td>';
      BLOCKS.forEach(function(b) {
        if (b !== block) {
          tableHtml += '<td></td>';
          return;
        }
        var cd = classData[sub];
        var chips = cd.classes.map(function(cls) {
          var total = cls.existing + (cls.preEnrolled || 0);
          var pct = Math.round((total / cls.capacity) * 100);
          var isFull = total >= cls.capacity;
          var fillLabel = total + '/' + cls.capacity;
          // Determine tag color based on state
          var tagColor, interactiveClass;
          if (isAllocated) {
            tagColor = 'success';
            interactiveClass = 'tw-tag-interactive';
          } else if (isFull) {
            tagColor = 'danger';
            interactiveClass = 'tw-tag-disabled';
          } else if (pct >= 80) {
            tagColor = 'warning';
            interactiveClass = 'tw-tag-interactive';
          } else {
            tagColor = 'secondary';
            interactiveClass = 'tw-tag-interactive';
          }
          var onclickAttr = isFull ? '' : ' onclick="toggleEditSubject(' + s.id + ',\'' + sub + '\',\'' + b + '\')"';
          return '<span class="tw-tag ' + interactiveClass + ' tw-tag-outline-' + tagColor + ' tw-tag-neutral-text tw:justify-between tw:gap-2 tw:w-[stretch] tw:-mx-2 tw:-my-1"' + onclickAttr + '>' +
            cls.name +
            ' <span class="tw-badge tw-badge-rounded tw-badge-' + tagColor + '">' + fillLabel + '</span>' +
            '</span>';
        }).join('<i class="tw:block tw:p-1"></i>');
        tableHtml += '<td class="tw-data-table-cell-block">' + chips + '</td>';
      });
      tableHtml += '</tr>';
    });
    tableHtml += '</tbody></table></div>';
    // Confirm Subjects block (above the table)
    var availableSubjects = SUBJECTS.filter(function(sub) { return !s.subjects.includes(sub); });
    var subjectListHtml = s.subjects.map(function(sub) {
      var isAllocated = s.allocatedSubjects.includes(sub);
      var isExtra = !originals.includes(sub);
      var statusLabel = isAllocated
        ? ' <span class="tw-badge tw-badge-success-subtle tw-badge-sm tw:ms-1">enrolled</span>'
        : ' <span class="tw-badge tw-badge-warning-subtle tw-badge-sm tw:ms-1">not allocated</span>';
      var removeBtn = isExtra
        ? '<button class="tw-btn tw-btn-icon tw-btn-sm tw-btn-tertiary tw:text-neutral-400" type="button" aria-label="Remove ' + sub + '" onclick="removeSubjectFromEdit(' + s.id + ',\'' + sub + '\')"><i class="fa-regular fa-trash-can"></i></button>'
        : '';
      return '<div class="tw:flex tw:items-center tw:justify-between tw:py-2 tw:border-b tw:border-neutral-200">' +
        '<div><span class="tw:font-semibold ' + (isAllocated ? 'text-primary' : 'text-danger') + '">' + sub + '</span>' + statusLabel + '</div>' +
        removeBtn +
      '</div>';
    }).join('');
    var addRowHtml = '';
    if (availableSubjects.length > 0) {
      addRowHtml = '<div class="tw:flex tw:gap-2 tw:items-center tw:mt-3">' +
        '<select class="tw-form-select tw:flex-1" id="editAddSubjectSelect">' +
        '<option value="">Select a Course</option>' +
        availableSubjects.map(function(sub) { return '<option value="' + sub + '">' + sub + ' (Block ' + subjectBlocks[sub] + ')</option>'; }).join('') +
        '</select>' +
        '<button class="tw-btn tw-btn-primary tw-btn-icon" type="button" aria-label="Add subject" onclick="addSubjectToEdit(' + s.id + ')"><i class="fa-regular fa-plus"></i></button>' +
        '</div>';
    }
    var confirmSubjectsHtml = '<div class="tw:mb-4">' +
      '<h3 class="tw:font-semibold tw:mb-2">Confirm Subjects</h3>' +
      subjectListHtml +
      addRowHtml +
    '</div>';
    // Validation checklist
    var allocatedCount = s.allocatedSubjects.length;
    var unallocatedSubs = s.unallocatedSubjects;
    var minHours = 100, maxHours = 900, minSubjects = 2, maxSubjects = 5;
    var currentHours = allocatedCount * 150; // ~150 hours per subject
    var checks = [
      { label: 'Minimum learning hours: ' + minHours, pass: currentHours >= minHours },
      { label: 'Maximum learning hours: ' + maxHours, pass: currentHours <= maxHours },
      { label: 'Maximum subjects to be selected: ' + maxSubjects, pass: allocatedCount <= maxSubjects },
      { label: 'Minimum subjects to be selected: ' + minSubjects, pass: allocatedCount >= minSubjects },
      { label: 'Select class for all compulsory courses', pass: true },
      { label: 'Select class for every selected subjects', pass: unallocatedSubs.length === 0, failItems: unallocatedSubs },
    ];
    var validationHtml = '<div class="tw:bg-neutral-100 tw:rounded-lg tw:p-3"><div class="tw:space-y-1">' +
      checks.map(function(c) {
        var icon = c.pass
          ? '<i class="fa-solid fa-check tw:text-green-600 tw:me-2"></i>'
          : '<i class="fa-solid fa-exclamation tw:text-red-500 tw:me-2"></i>';
        var line = '<div class="text-body-s">' + icon + c.label + '</div>';
        if (!c.pass && c.failItems && c.failItems.length > 0) {
          line += c.failItems.map(function(sub) { return '<div class="tw:ps-6 text-body-s fw-bold">' + sub + '</div>'; }).join('');
        }
        return line;
      }).join('') +
    '</div></div>';
    // Confirmed subjects block
    var confirmedHtml = '<div class="tw:bg-neutral-100 tw:rounded-lg tw:p-3"><div class="fw-bold text-body-s tw:mb-2">Confirmed Subjects</div><div class="tw:flex tw:flex-wrap tw:gap-1">' +
      s.allocatedSubjects.map(function(sub) { return '<span class="tw-tag tw-tag-success-subtle tw-tag-pill"><i class="fa-solid fa-check"></i> ' + sub + ' (Block ' + subjectBlocks[sub] + ')</span>'; }).join('') +
      s.unallocatedSubjects.map(function(sub) { return '<span class="tw-tag tw-tag-danger-subtle tw-tag-pill"><i class="fa-solid fa-xmark"></i> ' + sub + ' (Block ' + subjectBlocks[sub] + ')</span>'; }).join('') +
      '</div></div>';
    // Side-by-side: Confirmed Subjects (left) + Validation (right)
    var bottomRowHtml = '<div class="tw:grid tw:grid-cols-2 tw:gap-4 tw:mt-4">' + confirmedHtml + validationHtml + '</div>';
    body.innerHTML = detailsHtml + confirmSubjectsHtml + tableHtml + bottomRowHtml;
    // Show popup
    document.getElementById('editOverlay').classList.add('tw-popup-visible');
    document.getElementById('editPanel').classList.add('tw-popup-visible');
  }
  function addSubjectToEdit(studentId) {
    var sel = document.getElementById('editAddSubjectSelect');
    var sub = sel ? sel.value : '';
    if (!sub) return;
    var s = allStudents.find(function(x) { return x.id === studentId; });
    if (!s || s.subjects.includes(sub)) return;
    s.subjects.push(sub);
    s.unallocatedSubjects.push(sub);
    openEditModal(studentId);
  }
  function removeSubjectFromEdit(studentId, subject) {
    var s = allStudents.find(function(x) { return x.id === studentId; });
    if (!s) return;
    s.subjects = s.subjects.filter(function(x) { return x !== subject; });
    s.allocatedSubjects = s.allocatedSubjects.filter(function(x) { return x !== subject; });
    s.unallocatedSubjects = s.unallocatedSubjects.filter(function(x) { return x !== subject; });
    openEditModal(studentId);
  }
  function toggleEditSubject(studentId, subject, block) {
    const s = allStudents.find(x => x.id === studentId);
    if (!s) return;
    if (s.allocatedSubjects.includes(subject)) {
      s.allocatedSubjects = s.allocatedSubjects.filter(x => x !== subject);
      if (!s.unallocatedSubjects.includes(subject)) s.unallocatedSubjects.push(subject);
    } else {
      const existingInBlock = s.allocatedSubjects.find(sub => subjectBlocks[sub] === block);
      if (existingInBlock) {
        s.allocatedSubjects = s.allocatedSubjects.filter(x => x !== existingInBlock);
        if (!s.unallocatedSubjects.includes(existingInBlock)) s.unallocatedSubjects.push(existingInBlock);
      }
      s.allocatedSubjects.push(subject);
      s.unallocatedSubjects = s.unallocatedSubjects.filter(x => x !== subject);
      if (!s.subjects.includes(subject)) s.subjects.push(subject);
    }
    openEditModal(studentId);
  }
  function closeEditModal() {
    document.getElementById('editOverlay').classList.remove('tw-popup-visible');
    document.getElementById('editPanel').classList.remove('tw-popup-visible');
    editingStudentId = null;
  }
  function saveEdit() {
    if (!editingStudentId) return;
    const s = allStudents.find(x => x.id === editingStudentId);
    if (s.unallocatedSubjects.length === 0) { s.allocStatus = 'full'; s.unallocReason = ''; }
    else if (s.allocatedSubjects.length > 0) s.allocStatus = 'partial';
    else s.allocStatus = 'none';
    closeEditModal();
    renderAllocationResults();
  }
  function lockIn() {
    locked = true;
    maxStep = 3;
    goToStep(3);
  }
  function unlockAllocation() {
    locked = false;
    goToStep(2);
  }
  // ============================================================
  // STEP 4: SCHEDULE RELEASE
  // ============================================================
  function renderSchedule() {
    const tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 1);
    tomorrow.setHours(9, 0, 0, 0);
    document.getElementById('releaseDate').value = tomorrow.toISOString().slice(0, 16);
    document.getElementById('lockedCount').textContent = runStudents.length;
    document.getElementById('releaseStudentCount').textContent = runStudents.length;
    const totalCourses = runStudents.reduce((sum, s) => sum + s.allocatedSubjects.length, 0);
    document.getElementById('releaseCourseCount').textContent = totalCourses;
  }
  function scheduleRelease() {
    const dt = document.getElementById('releaseDate').value;
    if (!dt) { alert('Please select a release date and time.'); return; }
    const d = new Date(dt);
    const formatted = d.toLocaleDateString('en-GB', { weekday:'long', year:'numeric', month:'long', day:'numeric' });
    const time = d.toLocaleTimeString('en-GB', { hour:'2-digit', minute:'2-digit' });
    // Swap top notification
    document.getElementById('lockNotification').classList.add('tw:hidden');
    document.getElementById('scheduleConfirm').classList.remove('tw:hidden');
    document.getElementById('scheduleConfirmText').textContent =
      'Release scheduled for ' + formatted + ' at ' + time + '. ' + runStudents.length + ' students will be notified.';
    released = true;
    // Update action bar end: disabled Reschedule + View Responses Dashboard
    const endEl = document.getElementById('wizardActionBarEnd');
    if (endEl) endEl.innerHTML = `
      <button class="tw-btn tw-btn-secondary" type="button" disabled>
        <i class="fa-regular fa-paper-plane"></i> Reschedule Release
      </button>
      <a href="/lookbook/preview/projects/enrolment/bulk_enrolment_responses" data-turbo="false" class="tw-btn tw-btn-primary">
        <i class="fa-regular fa-chart-line"></i> View Responses Dashboard
      </a>`;
  }
  // ============================================================
  // CUSTOM PROPERTY MODAL
  // ============================================================
  function openCustomPropertyModal() {
    editingCustomId = null;
    tempRankedValues = [];
    document.getElementById('customPropName').value = '';
    document.getElementById('customPropTitle').textContent = 'Create Custom Property';
    const saveBtn = document.querySelector('#customPropPanel .tw-popup-footer .tw-btn-primary');
    if (saveBtn) saveBtn.innerHTML = '<i class="fa-regular fa-check"></i> Create Property';
    const sourceSelect = document.getElementById('customPropSource');
    sourceSelect.innerHTML = '<option value="">Select a data source...</option>' +
      CUSTOM_PROPERTY_SOURCES.map(s => '<option value="' + s.id + '">' + s.name + '</option>').join('');
    const defaultValues = ['EHCP', 'SEN Support', 'No SEN'];
    document.getElementById('customPropValueMenu').innerHTML = defaultValues.map(v =>
      '<label class="tw-dropdown-check"><input type="checkbox" class="tw-dropdown-check-input" value="' + v + '" data-dropdown-target="item" data-action="change->dropdown#check"><span class="tw-dropdown-check-label">' + v + '</span></label>'
    ).join('');
    const dropdownLabel = document.querySelector('#customPropValueDropdown [data-dropdown-target="label"]');
    if (dropdownLabel) { dropdownLabel.textContent = 'Select a value...'; dropdownLabel.classList.add('tw-dropdown-placeholder'); }
    renderCustomPropValues();
    document.getElementById('customPropOverlay').classList.add('tw-popup-visible');
    document.getElementById('customPropPanel').classList.add('tw-popup-visible');
  }
  function closeCustomPropertyModal() {
    document.getElementById('customPropOverlay').classList.remove('tw-popup-visible');
    document.getElementById('customPropPanel').classList.remove('tw-popup-visible');
  }
  function onCustomSourceChange() {
    const sourceId = document.getElementById('customPropSource').value;
    const source = CUSTOM_PROPERTY_SOURCES.find(s => s.id === sourceId);
    const menu = document.getElementById('customPropValueMenu');
    const label = document.querySelector('#customPropValueDropdown [data-dropdown-target="label"]');
    if (source) {
      menu.innerHTML = source.values.map(v =>
        '<label class="tw-dropdown-check">' +
          '<input type="checkbox" class="tw-dropdown-check-input" value="' + v + '" data-dropdown-target="item" data-action="change->dropdown#check">' +
          '<span class="tw-dropdown-check-label">' + v + '</span>' +
        '</label>'
      ).join('');
    } else {
      menu.innerHTML = '';
    }
    if (label) { label.textContent = 'Select a value...'; label.classList.add('tw-dropdown-placeholder'); }
    // Auto-fill property name if empty
    const nameInput = document.getElementById('customPropName');
    if (!nameInput.value && source) nameInput.value = source.name;
    tempRankedValues = [];
    renderCustomPropValues();
  }
  function addCustomPropValue() {
    const menu = document.getElementById('customPropValueMenu');
    const checked = menu.querySelectorAll('.tw-dropdown-check-input:checked');
    let added = false;
    checked.forEach(cb => {
      if (!tempRankedValues.includes(cb.value)) {
        tempRankedValues.push(cb.value);
        added = true;
      }
      cb.checked = false;
    });
    if (!added) return;
    // Reset dropdown label
    const label = document.querySelector('#customPropValueDropdown [data-dropdown-target="label"]');
    if (label) { label.textContent = 'Select a value...'; label.classList.add('tw-dropdown-placeholder'); }
    renderCustomPropValues();
  }
  function removeCustomPropValue(idx) {
    tempRankedValues.splice(idx, 1);
    renderCustomPropValues();
  }
  function moveCustomPropValue(idx, dir) {
    const newIdx = idx + dir;
    if (newIdx < 0 || newIdx >= tempRankedValues.length) return;
    const tmp = tempRankedValues[idx];
    tempRankedValues[idx] = tempRankedValues[newIdx];
    tempRankedValues[newIdx] = tmp;
    renderCustomPropValues();
  }
  function renderCustomPropValues() {
    const container = document.getElementById('customPropRankedValues');
    if (tempRankedValues.length === 0) {
      container.innerHTML = '<p class="tw-form-text tw:py-2">No qualifying values added yet. Select values above and click "Add Value".</p>';
      return;
    }
    container.innerHTML = '<div class="tw:flex tw:flex-col tw:gap-1">' +
      tempRankedValues.map((v, i) =>
        '<div class="tw:flex tw:items-center tw:gap-2" draggable="true" ondragstart="onQualValDragStart(event, ' + i + ')" ondragover="onQualValDragOver(event, ' + i + ')" ondrop="onQualValDrop(event, ' + i + ')" ondragend="onQualValDragEnd(event)">' +
          '<i class="fa-solid fa-grip-dots-vertical tw:text-neutral-400 tw:cursor-grab"></i>' +
          '<span class="tw-tag tw-tag-secondary-subtle">' +
            '<span class="tw:font-bold tw:mr-1">#' + (i+1) + '</span>' +
            v +
            '<button class="tw-tag-close" type="button" aria-label="Remove ' + v + '" onclick="removeCustomPropValue(' + i + ')"><i class="fa-solid fa-xmark"></i></button>' +
          '</span>' +
        '</div>'
      ).join('') +
    '</div>';
  }
  // Drag-and-drop reorder for qualifying values
  let qualValDragIdx = null;
  function onQualValDragStart(e, idx) {
    qualValDragIdx = idx;
    e.currentTarget.style.opacity = '0.4';
    e.dataTransfer.effectAllowed = 'move';
  }
  function onQualValDragOver(e, idx) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
  }
  function onQualValDrop(e, idx) {
    e.preventDefault();
    if (qualValDragIdx === null || qualValDragIdx === idx) return;
    const item = tempRankedValues.splice(qualValDragIdx, 1)[0];
    tempRankedValues.splice(idx, 0, item);
    qualValDragIdx = null;
    renderCustomPropValues();
  }
  function onQualValDragEnd(e) {
    e.currentTarget.style.opacity = '';
    qualValDragIdx = null;
  }
  function saveCustomProperty() {
    const name = document.getElementById('customPropName').value.trim();
    const sourceId = document.getElementById('customPropSource').value;
    if (!name) { alert('Please enter a property name.'); return; }
    if (!sourceId) { alert('Please select a data source.'); return; }
    if (tempRankedValues.length === 0) { alert('Please add at least one qualifying value.'); return; }
    if (editingCustomId) {
      const existing = customCriteria.find(x => x.id === editingCustomId);
      if (existing) {
        existing.name = name;
        existing.sourceId = sourceId;
        existing.rankedValues = [...tempRankedValues];
      }
      editingCustomId = null;
    } else {
      const id = 'custom_' + (++customPropCounter);
      customCriteria.push({ id, name, sourceId, rankedValues: [...tempRankedValues] });
      activeCriteria.push(id);
    }
    closeCustomPropertyModal();
    renderPriorityCriteria();
    if (!viewingHistoricRun && runStudents.length > 0) rankStudents();
    renderReviewBody();
  }
  // ============================================================
  // FILTER BADGE UPDATE
  // ============================================================
  const origRenderFilterRows = renderFilterRows;
  renderFilterRows = function() {
    origRenderFilterRows();
    const count = filterRowsData.filter(r => r.field).length;
    const badge = document.getElementById('filterBadge');
    if (badge) {
      badge.textContent = count;
      badge.classList.toggle('tw:hidden', count === 0);
    }
    const warn = count > 0;
    const stSelect = document.getElementById('studentType');
    const stLabel = document.getElementById('studentTypeLabel');
    if (stSelect) stSelect.classList.toggle('tw-is-warning', warn);
    if (stLabel) {
      stLabel.classList.toggle('tw-is-warning', warn);
      if (warn) {
        stLabel.setAttribute('data-tooltip-content-value', 'This field conflicts with the active Advanced Filters.');
        stLabel.setAttribute('data-tooltip-placement-value', 'top');
        stLabel.setAttribute('data-controller', 'tooltip');
      } else {
        stLabel.removeAttribute('data-controller');
        stLabel.removeAttribute('data-tooltip-content-value');
        stLabel.removeAttribute('data-tooltip-placement-value');
      }
    }
  };
  // ============================================================
  // HISTORIC REVIEW (for URL param support)
  // ============================================================
  function showHistoricReview(run) {
    goToStep(1);
    viewingHistoricRun = true;
    document.getElementById('reviewCount').textContent = run.reviewStudentCount || 12;
    const synthStudents = [];
    for (let i = 0; i < (run.reviewStudentCount || 12); i++) {
      const isFemale = Math.random() > 0.48;
      const first = isFemale ? pick(FIRST_NAMES_F) : pick(FIRST_NAMES_M);
      const last = pick(LAST_NAMES);
      synthStudents.push({
        id: 1000+i, name: first+' '+last, internal: Math.random() > 0.3, aps: (rand(52,89)/10),
        eligibility: Math.random() < 0.15 ? 'amber' : 'green', subjects: pickN(SUBJECTS, rand(3,5)),
        ehcp: i===0, lac: false, sibling: i===1, staffChild: false, distance: (rand(5,100)/10)
      });
    }
    const tbody = document.getElementById('reviewBody');
    tbody.innerHTML = synthStudents.map((s, i) => {
      let priorityLabel = '#' + (i+1) + ' - TPS ' + s.aps.toFixed(1);
      if (s.ehcp) priorityLabel = '#' + (i+1) + ' - EHCP';
      if (s.sibling) priorityLabel = '#' + (i+1) + ' - Sibling';
      const eligBadge = s.eligibility === 'green' ? 'tw-badge-success-subtle' : 'tw-badge-warning-subtle';
      return '<tr><td>' + (i+1) + '</td><td class="tw:font-semibold">' + s.name + '</td>' +
        '<td>' + s.subjects.map(sub => '<span class="tw-tag tw-tag-info-subtle tw-tag-pill tw:me-2 tw:mb-1">' + sub + ' (Block ' + subjectBlocks[sub] + ')</span>').join('') + '</td>' +
        '<td><span class="tw-badge ' + (s.internal ? 'tw-badge-primary' : 'tw-badge-secondary') + '">' + (s.internal ? 'Internal' : 'External') + '</span></td>' +
        '<td><span class="tw-badge tw-badge-info-subtle">' + priorityLabel + '</span></td>' +
        '<td>' + s.aps.toFixed(1) + '</td>' +
        '<td><span class="tw-badge tw-badge-dot ' + eligBadge + '">' + s.eligibility.charAt(0).toUpperCase() + s.eligibility.slice(1) + '</span></td>' +
        '<td></td></tr>';
    }).join('');
    renderPriorityCriteria();
  }
  // ============================================================
  // INIT
  // ============================================================
  (function() {
    const params = new URLSearchParams(window.location.search);
    const runIdx = params.get('run');
    const type = params.get('type');
    if (runIdx !== null && type === 'review') {
      const run = existingRuns[parseInt(runIdx)];
      if (run) {
        showHistoricReview(run);
        return;
      }
    }
    // Default: start at step 0
    goToStep(0);
  })();
</script>
</main>
</div>