<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="LA Dashboard navigation">
      <!-- Overview (navigates to the Overview page) -->
      <a href="/lookbook/preview/projects/la_dashboard/overview"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="Overview">
        <i class="fa-light fa-chart-pie tw-sidebar-icon"></i>
        <span class="tw:sr-only">Overview</span>
      </a>
      <!-- Comparison (navigates to the Comparison page) -->
      <a href="/lookbook/preview/projects/la_dashboard/comparison"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="Comparison">
        <i class="fa-light fa-chart-column tw-sidebar-icon"></i>
        <span class="tw:sr-only">Comparison</span>
      </a>
      <!-- Schools (navigates to the Schools page) -->
      <a href="/lookbook/preview/projects/la_dashboard/schools"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="Schools">
        <i class="fa-light fa-school tw-sidebar-icon"></i>
        <span class="tw:sr-only">Schools</span>
      </a>
      <!-- Students (navigates to the Students page) -->
      <a href="/lookbook/preview/projects/la_dashboard/students"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="Students">
        <i class="fa-light fa-users tw-sidebar-icon"></i>
        <span class="tw:sr-only">Students</span>
      </a>
      <!-- Destination Tracker (navigates to the Destination Tracker page) -->
      <a href="/lookbook/preview/projects/la_dashboard/destination_tracker"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="Destination Tracker">
        <i class="fa-light fa-location-dot tw-sidebar-icon"></i>
        <span class="tw:sr-only">Destination Tracker</span>
      </a>
      <!-- Transitions (navigates to the Transitions page) -->
      <a href="/lookbook/preview/projects/la_dashboard/transitions"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="Transitions">
        <i class="fa-light fa-right-left tw-sidebar-icon"></i>
        <span class="tw:sr-only">Transitions</span>
      </a>
      <!-- SEND & NEET (navigates to the SEND & NEET page) -->
      <a href="/lookbook/preview/projects/la_dashboard/send_neet"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="SEND & NEET">
        <i class="fa-light fa-person-circle-exclamation tw-sidebar-icon"></i>
        <span class="tw:sr-only">SEND & NEET</span>
      </a>
    </nav>
    <!-- Bottom Section -->
    <div class="tw-sidebar-bottom">
      <a href="/lookbook/preview/projects/la_dashboard/settings"
       data-turbo="false"
       class="tw-sidebar-item tw-active"
       data-label="Settings">
        <i class="fa-light fa-cogs tw-sidebar-icon"></i>
        <span class="tw:sr-only">Settings</span>
      </a>
    </div>
  </aside>
  <header class="tw-topbar" role="banner">
    <div class="tw-topbar-left">
      <!-- LA brand lockup (logo placeholder + authority name) -->
      <div class="tw:flex tw:items-center tw:gap-3">
        <div class="tw-avatar tw-avatar-square tw-avatar-icon" role="img" aria-label="Hackney logo">
          <i class="fa-regular fa-building-columns tw:text-base"></i>
        </div>
        <h2 class="tw-h2 tw:text-neutral-800 tw:mb-0">Hackney</h2>
      </div>
    </div>
    <!-- UNUSED FOR NOW, JUST KEEP IT HERE -->
    <div class="tw-topbar-right">
      <!-- Action Buttons -->
      <!-- UNUSED FOR NOW, JUST KEEP IT HERE -->
      <!-- <button type="button" class="tw-btn tw-btn-soft-success tw-btn-multiline tw:hidden" 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-soft-primary tw-btn-multiline tw:hidden" 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-soft-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> -->
      <!-- UNUSED FOR NOW, JUST KEEP IT HERE -->
      <div class="tw-topbar-action-icons tw:hidden">
        <!-- 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> -->
      <!-- UNUSED FOR NOW, JUST KEEP IT HERE -->
      <!-- 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-offset">
    <div class="tw-container-fluid tw-page-container" data-controller="tabs la-settings send-field-mapping roni-calculator">
      <!-- Page header: breadcrumb + title + subtitle + tabs -->
      <div class="tw-page-header tw:mb-4">
        <div class="tw-page-header-breadcrumb">
          <nav aria-label="Breadcrumb">
            <ol class="tw-breadcrumb">
              <li class="tw-breadcrumb-item">
                <a href="/lookbook/preview/projects/la_dashboard/overview" data-turbo="false" aria-label="Home">
                  <i class="fa-solid fa-house tw-breadcrumb-item-icon"></i>
                </a>
              </li>
              <li class="tw-breadcrumb-item tw-active" aria-current="page">Settings</li>
            </ol>
          </nav>
        </div>
        <div class="tw-page-header-main">
          <div class="tw-page-header-title-group">
            <h1 class="tw-page-header-title">Settings</h1>
            <span class="tw-page-header-subtitle">Manage staff access, SEND field mapping, the NEET risk calculator and reporting for the Hackney dashboard</span>
          </div>
        </div>
        <div class="tw-page-header-tabs">
          <div class="tw-tabs" role="tablist">
            <button class="tw-tab tw-active" role="tab" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown" aria-selected="true" type="button">Staff & Access</button>
            <button class="tw-tab" role="tab" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown" aria-selected="false" type="button">SEND Field Mapping</button>
            <button class="tw-tab" role="tab" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown" aria-selected="false" type="button">RONI / NEET Calculator</button>
            <button class="tw-tab tw:hidden disabled" role="tab" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown" aria-selected="false" type="button">Reports</button>
          </div>
        </div>
      </div>
      <!-- ===================== PANEL 1: Staff & Access ===================== -->
      <div data-tabs-target="panel" role="tabpanel" class="tw:pt-4 tw-active">
        <div class="tw-card tw:mb-4">
          <div class="tw-card-header tw:flex tw:items-center tw:gap-2">
            <i class="fa-regular fa-users tw:text-primary-500"></i>
            <span class="tw:text-body-xs tw:font-bold tw:uppercase tw:tracking-wide tw:text-neutral-900">Staff & Access</span>
            <span class="tw:ml-auto tw:text-body-xs tw:text-muted" data-la-settings-target="accountCount">4 accounts</span>
          </div>
          <div class="tw-card-body">
            <!-- Role legend -->
            <div class="tw:grid tw:grid-cols-2 tw:md:grid-cols-4 tw:gap-3 tw:mb-4">
              <div class="tw:rounded-lg tw:border tw:border-neutral-200 tw:p-3">
                <span class="tw-badge tw-badge-secondary-subtle tw-badge-sm">Read only</span>
                <p class="tw:text-body-xs tw:text-muted tw:mt-1.5 tw:mb-0">View dashboards & reports</p>
              </div>
              <div class="tw:rounded-lg tw:border tw:border-neutral-200 tw:p-3">
                <span class="tw-badge tw-badge-primary-subtle tw-badge-sm">Write</span>
                <p class="tw:text-body-xs tw:text-muted tw:mt-1.5 tw:mb-0">Edit student records & destinations</p>
              </div>
              <div class="tw:rounded-lg tw:border tw:border-neutral-200 tw:p-3">
                <span class="tw-badge tw-badge-warning-subtle tw-badge-sm">Admin</span>
                <p class="tw:text-body-xs tw:text-muted tw:mt-1.5 tw:mb-0">Manage schools, data & settings</p>
              </div>
              <div class="tw:rounded-lg tw:border tw:border-neutral-200 tw:p-3">
                <span class="tw-badge tw-badge-magenta-subtle tw-badge-sm">Super admin</span>
                <p class="tw:text-body-xs tw:text-muted tw:mt-1.5 tw:mb-0">Full access incl. staff & billing</p>
              </div>
            </div>
            <!-- Staff list -->
            <div class="tw-list-group tw-list-group-flush" data-la-settings-target="staffList">
              <!-- Jade — superadmin, locked (YOU) -->
              <div class="tw-list-group-item" data-staff-row data-staff-email="j.adeyemi@hackney.gov.uk" data-staff-role="superadmin">
                <div class="tw-avatar tw-avatar-sm tw-avatar-magenta tw-list-group-item-media" role="img" aria-label="Jade Adeyemi" data-staff-avatar><span>JA</span></div>
                <div class="tw-list-group-item-content">
                  <div class="tw:flex tw:items-center tw:gap-2">
                    <span class="tw-list-group-item-title" data-staff-name>Jade Adeyemi</span>
                    <span class="tw-badge tw-badge-primary-subtle tw-badge-sm">YOU</span>
                  </div>
                  <div class="tw-list-group-item-description" data-staff-email-text>j.adeyemi@hackney.gov.uk</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-36">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Role for Jade Adeyemi" disabled data-action="change->la-settings#changeRole">
                      <option value="read">Read only</option>
                      <option value="write">Write</option>
                      <option value="admin">Admin</option>
                      <option value="superadmin" selected>Super admin</option>
                    </select>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-soft-danger" aria-label="Remove Jade Adeyemi" disabled data-action="click->la-settings#removeStaff">Remove</button>
                </div>
              </div>
              <!-- Sarah — admin -->
              <div class="tw-list-group-item" data-staff-row data-staff-email="s.bennett@hackney.gov.uk" data-staff-role="admin">
                <div class="tw-avatar tw-avatar-sm tw-avatar-orange tw-list-group-item-media" role="img" aria-label="Sarah Bennett" data-staff-avatar><span>SB</span></div>
                <div class="tw-list-group-item-content">
                  <div class="tw:flex tw:items-center tw:gap-2">
                    <span class="tw-list-group-item-title" data-staff-name>Sarah Bennett</span>
                  </div>
                  <div class="tw-list-group-item-description" data-staff-email-text>s.bennett@hackney.gov.uk</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-36">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Role for Sarah Bennett" data-action="change->la-settings#changeRole">
                      <option value="read">Read only</option>
                      <option value="write">Write</option>
                      <option value="admin" selected>Admin</option>
                      <option value="superadmin">Super admin</option>
                    </select>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-soft-danger" aria-label="Remove Sarah Bennett" data-action="click->la-settings#removeStaff">Remove</button>
                </div>
              </div>
              <!-- Mark — write -->
              <div class="tw-list-group-item" data-staff-row data-staff-email="m.lewis@hackney.gov.uk" data-staff-role="write">
                <div class="tw-avatar tw-avatar-sm tw-avatar-primary tw-list-group-item-media" role="img" aria-label="Mark Lewis" data-staff-avatar><span>ML</span></div>
                <div class="tw-list-group-item-content">
                  <div class="tw:flex tw:items-center tw:gap-2">
                    <span class="tw-list-group-item-title" data-staff-name>Mark Lewis</span>
                  </div>
                  <div class="tw-list-group-item-description" data-staff-email-text>m.lewis@hackney.gov.uk</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-36">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Role for Mark Lewis" data-action="change->la-settings#changeRole">
                      <option value="read">Read only</option>
                      <option value="write" selected>Write</option>
                      <option value="admin">Admin</option>
                      <option value="superadmin">Super admin</option>
                    </select>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-soft-danger" aria-label="Remove Mark Lewis" data-action="click->la-settings#removeStaff">Remove</button>
                </div>
              </div>
              <!-- Priya — read, INVITED -->
              <div class="tw-list-group-item" data-staff-row data-staff-email="p.shah@hackney.gov.uk" data-staff-role="read">
                <div class="tw-avatar tw-avatar-sm tw-avatar-blue tw-list-group-item-media" role="img" aria-label="Priya Shah" data-staff-avatar><span>PS</span></div>
                <div class="tw-list-group-item-content">
                  <div class="tw:flex tw:items-center tw:gap-2">
                    <span class="tw-list-group-item-title" data-staff-name>Priya Shah</span>
                    <span class="tw-badge tw-badge-warning-subtle tw-badge-sm">INVITED</span>
                  </div>
                  <div class="tw-list-group-item-description" data-staff-email-text>p.shah@hackney.gov.uk</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-36">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Role for Priya Shah" data-action="change->la-settings#changeRole">
                      <option value="read" selected>Read only</option>
                      <option value="write">Write</option>
                      <option value="admin">Admin</option>
                      <option value="superadmin">Super admin</option>
                    </select>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-soft-danger" aria-label="Remove Priya Shah" data-action="click->la-settings#removeStaff">Remove</button>
                </div>
              </div>
            </div>
            <!-- New-row template (cloned by la-settings#addStaff; all classes here are scanned) -->
            <template data-la-settings-target="rowTemplate">
              <div class="tw-list-group-item" data-staff-row data-staff-email="" data-staff-role="read">
                <div class="tw-avatar tw-avatar-sm tw-list-group-item-media" role="img" data-staff-avatar><span></span></div>
                <div class="tw-list-group-item-content">
                  <div class="tw:flex tw:items-center tw:gap-2">
                    <span class="tw-list-group-item-title" data-staff-name></span>
                    <span class="tw-badge tw-badge-warning-subtle tw-badge-sm">INVITED</span>
                  </div>
                  <div class="tw-list-group-item-description" data-staff-email-text></div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-36">
                    <select class="tw-form-select tw-form-select-sm" data-action="change->la-settings#changeRole">
                      <option value="read">Read only</option>
                      <option value="write">Write</option>
                      <option value="admin">Admin</option>
                      <option value="superadmin">Super admin</option>
                    </select>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-soft-danger" data-action="click->la-settings#removeStaff">Remove</button>
                </div>
              </div>
            </template>
            <!-- Add a staff account -->
            <div class="tw:border-t tw:border-neutral-200 tw:pt-4 tw:mt-4">
              <p class="tw-overline tw:mb-2">Add a staff account</p>
              <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-2">
                <input type="text" class="tw-form-control tw:flex-1 tw:min-w-[180px]" placeholder="Full name" aria-label="Staff name" data-la-settings-target="nameInput">
                <input type="email" class="tw-form-control tw:flex-1 tw:min-w-[220px]" placeholder="name@hackney.gov.uk" aria-label="Staff email" data-la-settings-target="emailInput">
                <div class="tw:w-40">
                  <select class="tw-form-select" aria-label="Access level" data-la-settings-target="roleInput">
                    <option value="read" selected>Read only</option>
                    <option value="write">Write</option>
                    <option value="admin">Admin</option>
                    <option value="superadmin">Super admin</option>
                  </select>
                </div>
                <button type="button" class="tw-btn tw-btn-primary" data-action="click->la-settings#addStaff">
                  <i class="fa-regular fa-paper-plane tw:mr-1"></i> Send invite
                </button>
              </div>
            </div>
          </div>
        </div>
        <!-- Notifications -->
        <div class="tw-card tw:mb-4">
          <div class="tw-card-header tw:flex tw:items-center tw:gap-2">
            <i class="fa-regular fa-bell tw:text-primary-500"></i>
            <span class="tw:text-body-xs tw:font-bold tw:uppercase tw:tracking-wide tw:text-neutral-900">Notifications</span>
          </div>
          <div class="tw-card-body">
            <div class="tw-list-group tw-list-group-flush">
              <div class="tw-list-group-item">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">Email alerts</div>
                  <div class="tw-list-group-item-description">Receive email when student records change status</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw-form-check tw-form-switch tw:mb-0">
                    <input class="tw-form-check-input tw:mt-0" type="checkbox" id="setEmailAlerts" checked>
                    <label class="tw-form-check-label tw:sr-only" for="setEmailAlerts">Email alerts</label>
                  </div>
                </div>
              </div>
              <div class="tw-list-group-item">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">NEET risk alerts</div>
                  <div class="tw-list-group-item-description">Immediate alert when a student is flagged at high NEET risk</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw-form-check tw-form-switch tw:mb-0">
                    <input class="tw-form-check-input tw:mt-0" type="checkbox" id="setNeetAlerts" checked>
                    <label class="tw-form-check-label tw:sr-only" for="setNeetAlerts">NEET risk alerts</label>
                  </div>
                </div>
              </div>
              <div class="tw-list-group-item">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">Weekly digest</div>
                  <div class="tw-list-group-item-description">Summary of borough activity every Monday morning</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw-form-check tw-form-switch tw:mb-0">
                    <input class="tw-form-check-input tw:mt-0" type="checkbox" id="setWeeklyDigest">
                    <label class="tw-form-check-label tw:sr-only" for="setWeeklyDigest">Weekly digest</label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Data & Privacy -->
        <div class="tw-card tw:mb-4">
          <div class="tw-card-header tw:flex tw:items-center tw:gap-2">
            <i class="fa-regular fa-shield-halved tw:text-primary-500"></i>
            <span class="tw:text-body-xs tw:font-bold tw:uppercase tw:tracking-wide tw:text-neutral-900">Data & Privacy</span>
          </div>
          <div class="tw-card-body">
            <div class="tw-list-group tw-list-group-flush">
              <div class="tw-list-group-item">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">Share anonymised data</div>
                  <div class="tw-list-group-item-description">Contribute anonymised destination data to regional benchmarking</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw-form-check tw-form-switch tw:mb-0">
                    <input class="tw-form-check-input tw:mt-0" type="checkbox" id="setShareAnon" checked>
                    <label class="tw-form-check-label tw:sr-only" for="setShareAnon">Share anonymised data</label>
                  </div>
                </div>
              </div>
              <div class="tw-list-group-item">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">Auto-confirm destinations</div>
                  <div class="tw-list-group-item-description">Automatically confirm destinations once a school submits enrolment</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw-form-check tw-form-switch tw:mb-0">
                    <input class="tw-form-check-input tw:mt-0" type="checkbox" id="setAutoConfirm">
                    <label class="tw-form-check-label tw:sr-only" for="setAutoConfirm">Auto-confirm destinations</label>
                  </div>
                </div>
              </div>
              <div class="tw-list-group-item">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">Data retention</div>
                  <div class="tw-list-group-item-description">How long student tracking records are kept after Year 11</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-48">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Data retention">
                      <option value="1">1 year</option>
                      <option value="3" selected>3 years</option>
                      <option value="5">5 years</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Display -->
        <div class="tw-card tw:mb-4">
          <div class="tw-card-header tw:flex tw:items-center tw:gap-2">
            <i class="fa-regular fa-chart-pie tw:text-primary-500"></i>
            <span class="tw:text-body-xs tw:font-bold tw:uppercase tw:tracking-wide tw:text-neutral-900">Display</span>
          </div>
          <div class="tw-card-body">
            <div class="tw-list-group tw-list-group-flush">
              <div class="tw-list-group-item">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">Default academic year</div>
                  <div class="tw-list-group-item-description">Year shown when the dashboard first loads</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-48">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Default academic year">
                      <option selected>2025/2026</option>
                      <option>2024/2025</option>
                      <option>2023/2024</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="tw-list-group-item">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">Default landing page</div>
                  <div class="tw-list-group-item-description">The page shown immediately after sign-in</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-48">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Default landing page">
                      <option selected>Overview</option>
                      <option>Comparison</option>
                      <option>Schools</option>
                      <option>Destination Tracker</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="tw-list-group-item">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">Compact layout</div>
                  <div class="tw-list-group-item-description">Reduce spacing to fit more on screen</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw-form-check tw-form-switch tw:mb-0">
                    <input class="tw-form-check-input tw:mt-0" type="checkbox" id="setCompact">
                    <label class="tw-form-check-label tw:sr-only" for="setCompact">Compact layout</label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Save row -->
        <div class="tw:flex tw:justify-end tw:gap-2">
          <button type="button" class="tw-btn tw-btn-secondary" data-action="click->la-settings#cancelSettings">Cancel</button>
          <button type="button" class="tw-btn tw-btn-primary" data-action="click->la-settings#saveSettings">Save changes</button>
        </div>
      </div>
      <!-- ===================== PANEL 2: SEND Field Mapping ===================== -->
      <div data-tabs-target="panel" role="tabpanel" class="tw:pt-4" hidden data-action="tag:removed->send-field-mapping#chipRemoved">
        <h2 class="tw-h5 tw:mb-1">Normalise SEND codes across member schools</h2>
        <p class="tw:text-body-s tw:leading-body-s tw:text-muted tw:mb-4">Each school's MIS uses slightly different codes for the same SEND status. Map codes into the two categories Applicaa uses: EHCP and SEN Support. Auto-mapped codes follow the platform defaults — you confirm or correct the rest.</p>
        <!-- EHCP card (Category 01) -->
        <div class="tw-card tw:mb-4">
          <div class="tw-card-header tw:flex tw:items-center tw:gap-2">
            <i class="fa-regular fa-file-medical tw:text-primary-500"></i>
            <span class="tw:text-body-xs tw:font-bold tw:uppercase tw:tracking-wide tw:text-neutral-900">EHCP</span>
            <span class="tw-overline tw:ml-auto">Category 01</span>
          </div>
          <div class="tw-card-body">
            <p class="tw:text-body-xs tw:text-muted tw:mb-3">Codes that should count as Education, Health and Care Plan.</p>
            <div class="tw-tag-group tw:mb-3" data-send-field-mapping-target="ehcpChips">
              <span class="tw-tag tw-tag-success-subtle" data-controller="tag" data-value="Education, Health and Care Plan">
                Education, Health and Care Plan
                <button class="tw-tag-close" type="button" aria-label="Remove Education, Health and Care Plan" data-action="click->tag#remove"><i class="fa-regular fa-xmark"></i></button>
              </span>
              <span class="tw-tag tw-tag-success-subtle" data-controller="tag" data-value="Education Health and Care Plan">
                Education Health and Care Plan
                <button class="tw-tag-close" type="button" aria-label="Remove Education Health and Care Plan" data-action="click->tag#remove"><i class="fa-regular fa-xmark"></i></button>
              </span>
              <span class="tw-tag tw-tag-primary-subtle" data-controller="tag" data-value="E">
                E
                <button class="tw-tag-close" type="button" aria-label="Remove E" data-action="click->tag#remove"><i class="fa-regular fa-xmark"></i></button>
              </span>
            </div>
            <div class="tw-dropdown tw-dropdown-search tw-dropdown-block" data-controller="dropdown" data-category="ehcp" data-action="dropdown:select->send-field-mapping#addCode">
              <div class="tw-dropdown-trigger" data-dropdown-target="trigger" data-action="click->dropdown#focusSearchInput">
                <input type="text" id="ehcpCodePicker" class="tw-dropdown-search-input" placeholder="Add another SEN code from member schools…" autocomplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="ehcpCodeMenu" data-dropdown-target="searchInput" data-action="input->dropdown#filter focus->dropdown#open keydown->dropdown#keydown">
                <i class="fa-regular fa-chevron-down tw-dropdown-chevron" aria-hidden="true"></i>
              </div>
              <div id="ehcpCodeMenu" class="tw-dropdown-menu tw-dropdown-menu-scrollable" data-dropdown-target="menu" role="listbox">
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="No Special Educational Need" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">No Special Educational Need</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="N" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">N</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="K" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">K</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="S *" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">S *</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="Statement" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">Statement</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="(Statement)" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">(Statement)</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="Additional Learning Needs" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">Additional Learning Needs</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="Details" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">Details</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="Identify need" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">Identify need</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="In-school provision" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">In-school provision</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="Involve o/s agencies" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">Involve o/s agencies</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="LA Assessment" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">LA Assessment</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="LA IDP" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">LA IDP</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="Language" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">Language</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="Monitor Language Competence" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">Monitor Language Competence</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="Monitor Language Skills" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">Monitor Language Skills</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="Provision no longer needed" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">Provision no longer needed</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="SEN Intervention" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">SEN Intervention</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="School Action + and Stat Assmnt" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">School Action + and Stat Assmnt</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="School/Early Years Action+" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">School/Early Years Action+</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="School/Early Years Action." data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">School/Early Years Action.</span>
                </button>
              </div>
              <div class="tw-dropdown-status" role="status" aria-live="polite" data-dropdown-target="empty" hidden>No matches for "<span data-dropdown-target="emptyQuery"></span>"</div>
            </div>
            <p class="tw:flex tw:items-center tw:gap-4 tw:text-body-xs tw:text-muted tw:mt-3 tw:mb-0">
              <span class="tw:inline-flex tw:items-center tw:gap-1.5"><i class="fa-solid fa-circle tw:text-green-500 tw:text-[0.5rem]" aria-hidden="true"></i> Auto-mapped</span>
              <span class="tw:inline-flex tw:items-center tw:gap-1.5"><i class="fa-solid fa-circle tw:text-primary-500 tw:text-[0.5rem]" aria-hidden="true"></i> Manually added</span>
            </p>
          </div>
        </div>
        <!-- SEN Support card (Category 02) -->
        <div class="tw-card tw:mb-4">
          <div class="tw-card-header tw:flex tw:items-center tw:gap-2">
            <i class="fa-regular fa-hand-holding-heart tw:text-primary-500"></i>
            <span class="tw:text-body-xs tw:font-bold tw:uppercase tw:tracking-wide tw:text-neutral-900">SEN Support</span>
            <span class="tw-overline tw:ml-auto">Category 02</span>
          </div>
          <div class="tw-card-body">
            <p class="tw:text-body-xs tw:text-muted tw:mb-3">Codes that should count as SEN Support (formerly School Action / School Action Plus).</p>
            <div class="tw-tag-group tw:mb-3" data-send-field-mapping-target="senChips">
              <span class="tw-tag tw-tag-success-subtle" data-controller="tag" data-value="SEN Support">
                SEN Support
                <button class="tw-tag-close" type="button" aria-label="Remove SEN Support" data-action="click->tag#remove"><i class="fa-regular fa-xmark"></i></button>
              </span>
            </div>
            <div class="tw-dropdown tw-dropdown-search tw-dropdown-block" data-controller="dropdown" data-category="sen" data-action="dropdown:select->send-field-mapping#addCode">
              <div class="tw-dropdown-trigger" data-dropdown-target="trigger" data-action="click->dropdown#focusSearchInput">
                <input type="text" id="senCodePicker" class="tw-dropdown-search-input" placeholder="Add another SEN code from member schools…" autocomplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="senCodeMenu" data-dropdown-target="searchInput" data-action="input->dropdown#filter focus->dropdown#open keydown->dropdown#keydown">
                <i class="fa-regular fa-chevron-down tw-dropdown-chevron" aria-hidden="true"></i>
              </div>
              <div id="senCodeMenu" class="tw-dropdown-menu tw-dropdown-menu-scrollable" data-dropdown-target="menu" role="listbox">
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="No Special Educational Need" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">No Special Educational Need</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="N" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">N</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="K" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">K</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="S *" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">S *</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="Statement" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">Statement</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="(Statement)" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">(Statement)</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="Additional Learning Needs" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">Additional Learning Needs</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="Details" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">Details</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="Identify need" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">Identify need</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="In-school provision" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">In-school provision</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="Involve o/s agencies" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">Involve o/s agencies</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="LA Assessment" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">LA Assessment</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="LA IDP" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">LA IDP</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="Language" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">Language</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="Monitor Language Competence" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">Monitor Language Competence</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="Monitor Language Skills" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">Monitor Language Skills</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="Provision no longer needed" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">Provision no longer needed</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="SEN Intervention" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">SEN Intervention</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="School Action + and Stat Assmnt" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">School Action + and Stat Assmnt</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="School/Early Years Action+" data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">School/Early Years Action+</span>
                </button>
                <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="School/Early Years Action." data-action="click->dropdown#select">
                  <span class="tw-dropdown-item-text">School/Early Years Action.</span>
                </button>
              </div>
              <div class="tw-dropdown-status" role="status" aria-live="polite" data-dropdown-target="empty" hidden>No matches for "<span data-dropdown-target="emptyQuery"></span>"</div>
            </div>
          </div>
        </div>
        <!-- Unmapped codes detected (REVIEW) -->
        <div class="tw-card tw:mb-4">
          <div class="tw-card-header tw:flex tw:items-center tw:gap-2">
            <i class="fa-regular fa-circle-question tw:text-primary-500"></i>
            <span class="tw:text-body-xs tw:font-bold tw:uppercase tw:tracking-wide tw:text-neutral-900">Unmapped codes detected</span>
            <span class="tw-badge tw-badge-warning-subtle tw-badge-sm tw:ml-auto">Review</span>
          </div>
          <div class="tw-card-body">
            <p class="tw:text-body-xs tw:text-muted tw:mb-1">Found in member schools' MIS but not yet assigned to a category. These will be treated as "No SEN" until mapped.</p>
            <p class="tw:text-body-xs tw:text-neutral-400 tw:mb-2"><span data-send-field-mapping-target="reviewCount">21 codes</span></p>
            <div class="tw-list-group tw-list-group-flush" data-send-field-mapping-target="reviewList">
              <div class="tw-list-group-item" data-code-row data-code="No Special Educational Need">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">"No Special Educational Need"</div>
                  <div class="tw-list-group-item-description" data-code-meta>2 schools · 2,380 students</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-48">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Map No Special Educational Need">
                      <option value="ignore" selected>Ignore (treat as No SEN)</option>
                      <option value="sen">Map to SEN Support</option>
                      <option value="ehcp">Map to EHCP</option>
                    </select>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-primary" data-action="click->send-field-mapping#applyUnmapped">Apply</button>
                </div>
              </div>
              <div class="tw-list-group-item" data-code-row data-code="N">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">"N"</div>
                  <div class="tw-list-group-item-description" data-code-meta>2 schools · 1,847 students</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-48">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Map N">
                      <option value="ignore" selected>Ignore (treat as No SEN)</option>
                      <option value="sen">Map to SEN Support</option>
                      <option value="ehcp">Map to EHCP</option>
                    </select>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-primary" data-action="click->send-field-mapping#applyUnmapped">Apply</button>
                </div>
              </div>
              <div class="tw-list-group-item" data-code-row data-code="K">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">"K"</div>
                  <div class="tw-list-group-item-description" data-code-meta>2 schools · 61 students</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-48">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Map K">
                      <option value="ignore" selected>Ignore (treat as No SEN)</option>
                      <option value="sen">Map to SEN Support</option>
                      <option value="ehcp">Map to EHCP</option>
                    </select>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-primary" data-action="click->send-field-mapping#applyUnmapped">Apply</button>
                </div>
              </div>
              <div class="tw-list-group-item" data-code-row data-code="S *">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">"S *"</div>
                  <div class="tw-list-group-item-description" data-code-meta>2 schools · 1 student</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-48">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Map S *">
                      <option value="ignore" selected>Ignore (treat as No SEN)</option>
                      <option value="sen">Map to SEN Support</option>
                      <option value="ehcp">Map to EHCP</option>
                    </select>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-primary" data-action="click->send-field-mapping#applyUnmapped">Apply</button>
                </div>
              </div>
              <div class="tw-list-group-item" data-code-row data-code="Statement">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">"Statement"</div>
                  <div class="tw-list-group-item-description" data-code-meta>2 schools · 1 student</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-48">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Map Statement">
                      <option value="ignore" selected>Ignore (treat as No SEN)</option>
                      <option value="sen">Map to SEN Support</option>
                      <option value="ehcp">Map to EHCP</option>
                    </select>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-primary" data-action="click->send-field-mapping#applyUnmapped">Apply</button>
                </div>
              </div>
              <div class="tw-list-group-item" data-code-row data-code="(Statement)">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">"(Statement)"</div>
                  <div class="tw-list-group-item-description" data-code-meta>3 schools · 0 students</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-48">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Map (Statement)">
                      <option value="ignore" selected>Ignore (treat as No SEN)</option>
                      <option value="sen">Map to SEN Support</option>
                      <option value="ehcp">Map to EHCP</option>
                    </select>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-primary" data-action="click->send-field-mapping#applyUnmapped">Apply</button>
                </div>
              </div>
              <div class="tw-list-group-item" data-code-row data-code="Additional Learning Needs">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">"Additional Learning Needs"</div>
                  <div class="tw-list-group-item-description" data-code-meta>2 schools · 0 students</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-48">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Map Additional Learning Needs">
                      <option value="ignore" selected>Ignore (treat as No SEN)</option>
                      <option value="sen">Map to SEN Support</option>
                      <option value="ehcp">Map to EHCP</option>
                    </select>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-primary" data-action="click->send-field-mapping#applyUnmapped">Apply</button>
                </div>
              </div>
              <div class="tw-list-group-item" data-code-row data-code="Details">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">"Details"</div>
                  <div class="tw-list-group-item-description" data-code-meta>2 schools · 0 students</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-48">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Map Details">
                      <option value="ignore" selected>Ignore (treat as No SEN)</option>
                      <option value="sen">Map to SEN Support</option>
                      <option value="ehcp">Map to EHCP</option>
                    </select>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-primary" data-action="click->send-field-mapping#applyUnmapped">Apply</button>
                </div>
              </div>
              <div class="tw-list-group-item" data-code-row data-code="Identify need">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">"Identify need"</div>
                  <div class="tw-list-group-item-description" data-code-meta>3 schools · 0 students</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-48">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Map Identify need">
                      <option value="ignore" selected>Ignore (treat as No SEN)</option>
                      <option value="sen">Map to SEN Support</option>
                      <option value="ehcp">Map to EHCP</option>
                    </select>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-primary" data-action="click->send-field-mapping#applyUnmapped">Apply</button>
                </div>
              </div>
              <div class="tw-list-group-item" data-code-row data-code="In-school provision">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">"In-school provision"</div>
                  <div class="tw-list-group-item-description" data-code-meta>3 schools · 0 students</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-48">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Map In-school provision">
                      <option value="ignore" selected>Ignore (treat as No SEN)</option>
                      <option value="sen">Map to SEN Support</option>
                      <option value="ehcp">Map to EHCP</option>
                    </select>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-primary" data-action="click->send-field-mapping#applyUnmapped">Apply</button>
                </div>
              </div>
              <div class="tw-list-group-item" data-code-row data-code="Involve o/s agencies">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">"Involve o/s agencies"</div>
                  <div class="tw-list-group-item-description" data-code-meta>3 schools · 0 students</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-48">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Map Involve o/s agencies">
                      <option value="ignore" selected>Ignore (treat as No SEN)</option>
                      <option value="sen">Map to SEN Support</option>
                      <option value="ehcp">Map to EHCP</option>
                    </select>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-primary" data-action="click->send-field-mapping#applyUnmapped">Apply</button>
                </div>
              </div>
              <div class="tw-list-group-item" data-code-row data-code="LA Assessment">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">"LA Assessment"</div>
                  <div class="tw-list-group-item-description" data-code-meta>3 schools · 0 students</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-48">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Map LA Assessment">
                      <option value="ignore" selected>Ignore (treat as No SEN)</option>
                      <option value="sen">Map to SEN Support</option>
                      <option value="ehcp">Map to EHCP</option>
                    </select>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-primary" data-action="click->send-field-mapping#applyUnmapped">Apply</button>
                </div>
              </div>
              <div class="tw-list-group-item" data-code-row data-code="LA IDP">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">"LA IDP"</div>
                  <div class="tw-list-group-item-description" data-code-meta>2 schools · 0 students</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-48">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Map LA IDP">
                      <option value="ignore" selected>Ignore (treat as No SEN)</option>
                      <option value="sen">Map to SEN Support</option>
                      <option value="ehcp">Map to EHCP</option>
                    </select>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-primary" data-action="click->send-field-mapping#applyUnmapped">Apply</button>
                </div>
              </div>
              <div class="tw-list-group-item" data-code-row data-code="Language">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">"Language"</div>
                  <div class="tw-list-group-item-description" data-code-meta>2 schools · 0 students</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-48">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Map Language">
                      <option value="ignore" selected>Ignore (treat as No SEN)</option>
                      <option value="sen">Map to SEN Support</option>
                      <option value="ehcp">Map to EHCP</option>
                    </select>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-primary" data-action="click->send-field-mapping#applyUnmapped">Apply</button>
                </div>
              </div>
              <div class="tw-list-group-item" data-code-row data-code="Monitor Language Competence">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">"Monitor Language Competence"</div>
                  <div class="tw-list-group-item-description" data-code-meta>2 schools · 0 students</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-48">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Map Monitor Language Competence">
                      <option value="ignore" selected>Ignore (treat as No SEN)</option>
                      <option value="sen">Map to SEN Support</option>
                      <option value="ehcp">Map to EHCP</option>
                    </select>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-primary" data-action="click->send-field-mapping#applyUnmapped">Apply</button>
                </div>
              </div>
              <div class="tw-list-group-item" data-code-row data-code="Monitor Language Skills">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">"Monitor Language Skills"</div>
                  <div class="tw-list-group-item-description" data-code-meta>2 schools · 0 students</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-48">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Map Monitor Language Skills">
                      <option value="ignore" selected>Ignore (treat as No SEN)</option>
                      <option value="sen">Map to SEN Support</option>
                      <option value="ehcp">Map to EHCP</option>
                    </select>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-primary" data-action="click->send-field-mapping#applyUnmapped">Apply</button>
                </div>
              </div>
              <div class="tw-list-group-item" data-code-row data-code="Provision no longer needed">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">"Provision no longer needed"</div>
                  <div class="tw-list-group-item-description" data-code-meta>3 schools · 0 students</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-48">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Map Provision no longer needed">
                      <option value="ignore" selected>Ignore (treat as No SEN)</option>
                      <option value="sen">Map to SEN Support</option>
                      <option value="ehcp">Map to EHCP</option>
                    </select>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-primary" data-action="click->send-field-mapping#applyUnmapped">Apply</button>
                </div>
              </div>
              <div class="tw-list-group-item" data-code-row data-code="SEN Intervention">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">"SEN Intervention"</div>
                  <div class="tw-list-group-item-description" data-code-meta>2 schools · 0 students</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-48">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Map SEN Intervention">
                      <option value="ignore" selected>Ignore (treat as No SEN)</option>
                      <option value="sen">Map to SEN Support</option>
                      <option value="ehcp">Map to EHCP</option>
                    </select>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-primary" data-action="click->send-field-mapping#applyUnmapped">Apply</button>
                </div>
              </div>
              <div class="tw-list-group-item" data-code-row data-code="School Action + and Stat Assmnt">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">"School Action + and Stat Assmnt"</div>
                  <div class="tw-list-group-item-description" data-code-meta>3 schools · 0 students</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-48">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Map School Action + and Stat Assmnt">
                      <option value="ignore" selected>Ignore (treat as No SEN)</option>
                      <option value="sen">Map to SEN Support</option>
                      <option value="ehcp">Map to EHCP</option>
                    </select>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-primary" data-action="click->send-field-mapping#applyUnmapped">Apply</button>
                </div>
              </div>
              <div class="tw-list-group-item" data-code-row data-code="School/Early Years Action+">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">"School/Early Years Action+"</div>
                  <div class="tw-list-group-item-description" data-code-meta>3 schools · 0 students</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-48">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Map School/Early Years Action+">
                      <option value="ignore" selected>Ignore (treat as No SEN)</option>
                      <option value="sen">Map to SEN Support</option>
                      <option value="ehcp">Map to EHCP</option>
                    </select>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-primary" data-action="click->send-field-mapping#applyUnmapped">Apply</button>
                </div>
              </div>
              <div class="tw-list-group-item" data-code-row data-code="School/Early Years Action.">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">"School/Early Years Action."</div>
                  <div class="tw-list-group-item-description" data-code-meta>3 schools · 0 students</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-48">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Map School/Early Years Action.">
                      <option value="ignore" selected>Ignore (treat as No SEN)</option>
                      <option value="sen">Map to SEN Support</option>
                      <option value="ehcp">Map to EHCP</option>
                    </select>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-primary" data-action="click->send-field-mapping#applyUnmapped">Apply</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Ignored codes (IGNORED) -->
        <div class="tw-card tw:mb-4">
          <div class="tw-card-header tw:flex tw:items-center tw:gap-2">
            <i class="fa-regular fa-eye-slash tw:text-primary-500"></i>
            <span class="tw:text-body-xs tw:font-bold tw:uppercase tw:tracking-wide tw:text-neutral-900">Ignored codes</span>
            <span class="tw-badge tw-badge-secondary-subtle tw-badge-sm tw:ml-auto">Ignored</span>
          </div>
          <div class="tw-card-body">
            <p class="tw:text-body-xs tw:text-muted tw:mb-1">Treated as "No SEN" everywhere on the dashboard. Remap a code at any time to bring its students back into the SEND counts.</p>
            <p class="tw:text-body-xs tw:text-neutral-400 tw:mb-2"><span data-send-field-mapping-target="ignoredCount">1 code</span></p>
            <div class="tw-list-group tw-list-group-flush" data-send-field-mapping-target="ignoredList">
              <div class="tw-list-group-item" data-code-row data-code="School IDP">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title" data-code-name>"School IDP"</div>
                  <div class="tw-list-group-item-description" data-code-meta>2 schools · 0 students</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-48">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Remap School IDP">
                      <option value="ehcp">Map to EHCP</option>
                      <option value="sen">Map to SEN Support</option>
                      <option value="remove">Remove from ignored</option>
                    </select>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-primary" data-action="click->send-field-mapping#applyIgnored">Apply</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Templates (cloned by send_field_mapping_controller; every class is scanned literally) -->
        <template data-send-field-mapping-target="chipTemplate">
          <span class="tw-tag tw-tag-primary-subtle" data-controller="tag" data-value="">
            <span data-chip-label></span>
            <button class="tw-tag-close" type="button" data-action="click->tag#remove"><i class="fa-regular fa-xmark"></i></button>
          </span>
        </template>
        <template data-send-field-mapping-target="ignoredRowTemplate">
          <div class="tw-list-group-item" data-code-row data-code="">
            <div class="tw-list-group-item-content">
              <div class="tw-list-group-item-title" data-code-name></div>
              <div class="tw-list-group-item-description" data-code-meta></div>
            </div>
            <div class="tw-list-group-item-actions">
              <div class="tw:w-48">
                <select class="tw-form-select tw-form-select-sm" aria-label="Remap code">
                  <option value="ehcp">Map to EHCP</option>
                  <option value="sen">Map to SEN Support</option>
                  <option value="remove">Remove from ignored</option>
                </select>
              </div>
              <button type="button" class="tw-btn tw-btn-sm tw-btn-primary" data-action="click->send-field-mapping#applyIgnored">Apply</button>
            </div>
          </div>
        </template>
      </div>
      <!-- ===================== PANEL 3: RONI / NEET Calculator ===================== -->
      <div data-tabs-target="panel" role="tabpanel" class="tw:pt-4" hidden>
        <!-- Explainer -->
        <div class="tw-inline-notification tw-inline-notification-info tw:mb-4">
          <div class="tw-inline-notification-icon"><i class="fa-regular fa-chart-pie"></i></div>
          <div class="tw-inline-notification-content">
            <div class="tw-inline-notification-message">
              The <strong>RONI</strong> (Risk of NEET Indicator) calculator scores every student against the factors below. Scores are summed (max <strong data-roni-calculator-target="maxDisplay">21</strong>) and mapped to a risk band that drives the NEET column and alerts.
            </div>
          </div>
        </div>
        <!-- Scoring factors -->
        <div class="tw-card tw:mb-4">
          <div class="tw-card-header tw:flex tw:items-center tw:gap-2">
            <i class="fa-regular fa-list-check tw:text-primary-500"></i>
            <span class="tw:text-body-xs tw:font-bold tw:uppercase tw:tracking-wide tw:text-neutral-900">Scoring factors</span>
            <span class="tw:ml-auto tw:text-body-xs tw:text-muted">5 scored factors · max <span data-roni-calculator-target="maxDisplay">21</span> pts</span>
          </div>
          <div class="tw-card-body tw:divide-y tw:divide-neutral-200">
            <div class="tw:py-3" data-roni-factor>
              <div class="tw:flex tw:items-center tw:gap-2 tw:mb-2">
                <span class="tw:text-body-xs tw:font-bold tw:text-muted tw:tabular-nums">01</span>
                <span class="tw:text-body-s tw:font-bold tw:text-neutral-900">Attendance</span>
                <span class="tw:text-body-xs tw:text-muted">Overall attendance rate across the year</span>
                <span class="tw-badge tw-badge-secondary-subtle tw-badge-sm tw:ml-2" data-roni-not-scored hidden>Not scored</span>
                <div class="tw-form-check tw-form-switch tw:mb-0 tw:ml-auto">
                  <input class="tw-form-check-input tw:mt-0" type="checkbox" id="roniFactorAttendance" checked data-roni-toggle data-action="change->roni-calculator#toggleFactor">
                  <label class="tw-form-check-label tw:sr-only" for="roniFactorAttendance">Enable Attendance</label>
                </div>
              </div>
              <p class="tw:text-body-xs tw:text-muted tw:mb-2">A student is scored on the <span class="tw:font-semibold">highest band they reach</span> — lower attendance adds more risk points.</p>
              <div data-roni-calculator-target="attendanceList">
                <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-x-3 tw:gap-y-2 tw:py-2" data-roni-band>
                  <div class="tw:flex tw:items-center tw:gap-2 tw:w-52 tw:shrink-0">
                    <span class="tw:text-body-s tw:text-neutral-700">At / above</span>
                    <div class="tw:w-20 tw:shrink-0">
                      <div class="tw-input-group tw-input-group-sm">
                        <input type="number" class="tw-form-control tw-form-control-sm tw:text-center" value="95" min="1" max="100" step="1" aria-label="Attendance threshold" data-roni-threshold data-default="95" data-action="input->roni-calculator#recompute">
                        <div class="tw-input-group-stepper">
                          <button type="button" class="tw-input-group-stepper-btn" aria-label="Increase Attendance threshold" data-action="click->roni-calculator#stepUp"><i class="fa-solid fa-chevron-up"></i></button>
                          <button type="button" class="tw-input-group-stepper-btn" aria-label="Decrease Attendance threshold" data-action="click->roni-calculator#stepDown"><i class="fa-solid fa-chevron-down"></i></button>
                        </div>
                      </div>
                    </div>
                    <span class="tw:text-body-s tw:text-neutral-700">%</span>
                  </div>
                  <span class="tw:text-body-xs tw:text-muted">adds</span>
                  <div class="tw:w-20 tw:shrink-0">
                    <div class="tw-input-group tw-input-group-sm">
                      <input type="number" class="tw-form-control tw-form-control-sm tw:text-center" value="1" min="0" max="20" step="1" aria-label="Attendance band points" data-roni-points data-default="1" data-action="input->roni-calculator#recompute">
                      <div class="tw-input-group-stepper">
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Increase Attendance band points" data-action="click->roni-calculator#stepUp"><i class="fa-solid fa-chevron-up"></i></button>
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Decrease Attendance band points" data-action="click->roni-calculator#stepDown"><i class="fa-solid fa-chevron-down"></i></button>
                      </div>
                    </div>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-soft-danger" aria-label="Remove band" data-roni-remove-band data-action="click->roni-calculator#removeBand"><i class="fa-regular fa-xmark"></i></button>
                </div>
                <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-x-3 tw:gap-y-2 tw:py-2" data-roni-band>
                  <div class="tw:flex tw:items-center tw:gap-2 tw:w-52 tw:shrink-0">
                    <span class="tw:text-body-s tw:text-neutral-700">At / above</span>
                    <div class="tw:w-20 tw:shrink-0">
                      <div class="tw-input-group tw-input-group-sm">
                        <input type="number" class="tw-form-control tw-form-control-sm tw:text-center" value="90" min="1" max="100" step="1" aria-label="Attendance threshold" data-roni-threshold data-default="90" data-action="input->roni-calculator#recompute">
                        <div class="tw-input-group-stepper">
                          <button type="button" class="tw-input-group-stepper-btn" aria-label="Increase Attendance threshold" data-action="click->roni-calculator#stepUp"><i class="fa-solid fa-chevron-up"></i></button>
                          <button type="button" class="tw-input-group-stepper-btn" aria-label="Decrease Attendance threshold" data-action="click->roni-calculator#stepDown"><i class="fa-solid fa-chevron-down"></i></button>
                        </div>
                      </div>
                    </div>
                    <span class="tw:text-body-s tw:text-neutral-700">%</span>
                  </div>
                  <span class="tw:text-body-xs tw:text-muted">adds</span>
                  <div class="tw:w-20 tw:shrink-0">
                    <div class="tw-input-group tw-input-group-sm">
                      <input type="number" class="tw-form-control tw-form-control-sm tw:text-center" value="2" min="0" max="20" step="1" aria-label="Attendance band points" data-roni-points data-default="2" data-action="input->roni-calculator#recompute">
                      <div class="tw-input-group-stepper">
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Increase Attendance band points" data-action="click->roni-calculator#stepUp"><i class="fa-solid fa-chevron-up"></i></button>
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Decrease Attendance band points" data-action="click->roni-calculator#stepDown"><i class="fa-solid fa-chevron-down"></i></button>
                      </div>
                    </div>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-soft-danger" aria-label="Remove band" data-roni-remove-band data-action="click->roni-calculator#removeBand"><i class="fa-regular fa-xmark"></i></button>
                </div>
                <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-x-3 tw:gap-y-2 tw:py-2" data-roni-band>
                  <div class="tw:flex tw:items-center tw:gap-2 tw:w-52 tw:shrink-0">
                    <span class="tw:text-body-s tw:text-neutral-700">At / above</span>
                    <div class="tw:w-20 tw:shrink-0">
                      <div class="tw-input-group tw-input-group-sm">
                        <input type="number" class="tw-form-control tw-form-control-sm tw:text-center" value="85" min="1" max="100" step="1" aria-label="Attendance threshold" data-roni-threshold data-default="85" data-action="input->roni-calculator#recompute">
                        <div class="tw-input-group-stepper">
                          <button type="button" class="tw-input-group-stepper-btn" aria-label="Increase Attendance threshold" data-action="click->roni-calculator#stepUp"><i class="fa-solid fa-chevron-up"></i></button>
                          <button type="button" class="tw-input-group-stepper-btn" aria-label="Decrease Attendance threshold" data-action="click->roni-calculator#stepDown"><i class="fa-solid fa-chevron-down"></i></button>
                        </div>
                      </div>
                    </div>
                    <span class="tw:text-body-s tw:text-neutral-700">%</span>
                  </div>
                  <span class="tw:text-body-xs tw:text-muted">adds</span>
                  <div class="tw:w-20 tw:shrink-0">
                    <div class="tw-input-group tw-input-group-sm">
                      <input type="number" class="tw-form-control tw-form-control-sm tw:text-center" value="3" min="0" max="20" step="1" aria-label="Attendance band points" data-roni-points data-default="3" data-action="input->roni-calculator#recompute">
                      <div class="tw-input-group-stepper">
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Increase Attendance band points" data-action="click->roni-calculator#stepUp"><i class="fa-solid fa-chevron-up"></i></button>
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Decrease Attendance band points" data-action="click->roni-calculator#stepDown"><i class="fa-solid fa-chevron-down"></i></button>
                      </div>
                    </div>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-soft-danger" aria-label="Remove band" data-roni-remove-band data-action="click->roni-calculator#removeBand"><i class="fa-regular fa-xmark"></i></button>
                </div>
                <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-x-3 tw:gap-y-2 tw:py-2" data-roni-band>
                  <div class="tw:flex tw:items-center tw:gap-2 tw:w-52 tw:shrink-0">
                    <span class="tw:text-body-s tw:text-neutral-700">At / above</span>
                    <div class="tw:w-20 tw:shrink-0">
                      <div class="tw-input-group tw-input-group-sm">
                        <input type="number" class="tw-form-control tw-form-control-sm tw:text-center" value="80" min="1" max="100" step="1" aria-label="Attendance threshold" data-roni-threshold data-default="80" data-action="input->roni-calculator#recompute">
                        <div class="tw-input-group-stepper">
                          <button type="button" class="tw-input-group-stepper-btn" aria-label="Increase Attendance threshold" data-action="click->roni-calculator#stepUp"><i class="fa-solid fa-chevron-up"></i></button>
                          <button type="button" class="tw-input-group-stepper-btn" aria-label="Decrease Attendance threshold" data-action="click->roni-calculator#stepDown"><i class="fa-solid fa-chevron-down"></i></button>
                        </div>
                      </div>
                    </div>
                    <span class="tw:text-body-s tw:text-neutral-700">%</span>
                  </div>
                  <span class="tw:text-body-xs tw:text-muted">adds</span>
                  <div class="tw:w-20 tw:shrink-0">
                    <div class="tw-input-group tw-input-group-sm">
                      <input type="number" class="tw-form-control tw-form-control-sm tw:text-center" value="4" min="0" max="20" step="1" aria-label="Attendance band points" data-roni-points data-default="4" data-action="input->roni-calculator#recompute">
                      <div class="tw-input-group-stepper">
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Increase Attendance band points" data-action="click->roni-calculator#stepUp"><i class="fa-solid fa-chevron-up"></i></button>
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Decrease Attendance band points" data-action="click->roni-calculator#stepDown"><i class="fa-solid fa-chevron-down"></i></button>
                      </div>
                    </div>
                  </div>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-soft-danger" aria-label="Remove band" data-roni-remove-band data-action="click->roni-calculator#removeBand"><i class="fa-regular fa-xmark"></i></button>
                </div>
                <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-x-3 tw:gap-y-2 tw:py-2" data-roni-below>
                  <div class="tw:w-52 tw:shrink-0">
                    <span class="tw:text-body-s tw:font-semibold tw:text-neutral-900" data-roni-below-range>Below 80%</span>
                  </div>
                  <span class="tw:text-body-xs tw:text-muted">adds</span>
                  <div class="tw:w-20 tw:shrink-0">
                    <div class="tw-input-group tw-input-group-sm">
                      <input type="number" class="tw-form-control tw-form-control-sm tw:text-center" value="7" min="0" max="20" step="1" aria-label="Below lowest points" data-roni-points data-default="7" data-action="input->roni-calculator#recompute">
                      <div class="tw-input-group-stepper">
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Increase Below lowest points" data-action="click->roni-calculator#stepUp"><i class="fa-solid fa-chevron-up"></i></button>
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Decrease Below lowest points" data-action="click->roni-calculator#stepDown"><i class="fa-solid fa-chevron-down"></i></button>
                      </div>
                    </div>
                  </div>
                  <span class="tw:text-body-xs tw:text-muted">everyone below the lowest band</span>
                </div>
              </div>
              <button type="button" class="tw-btn tw-btn-sm tw-btn-soft-primary tw:mt-2" data-roni-add-band data-action="click->roni-calculator#addBand"><i class="fa-regular fa-plus tw:mr-1"></i> Add threshold band</button>
            </div>
            <div class="tw:py-3" data-roni-factor>
              <div class="tw:flex tw:items-center tw:gap-2 tw:mb-2">
                <span class="tw:text-body-xs tw:font-bold tw:text-muted tw:tabular-nums">02</span>
                <span class="tw:text-body-s tw:font-bold tw:text-neutral-900">SEN status</span>
                <span class="tw:text-body-xs tw:text-muted">Special educational needs & disabilities</span>
                <span class="tw-badge tw-badge-secondary-subtle tw-badge-sm tw:ml-2" data-roni-not-scored hidden>Not scored</span>
                <div class="tw-form-check tw-form-switch tw:mb-0 tw:ml-auto">
                  <input class="tw-form-check-input tw:mt-0" type="checkbox" id="roniFactorSen" checked data-roni-toggle data-action="change->roni-calculator#toggleFactor">
                  <label class="tw-form-check-label tw:sr-only" for="roniFactorSen">Enable SEN status</label>
                </div>
              </div>
              <div class="tw:flex tw:flex-wrap tw:gap-x-6 tw:gap-y-2.5">
                <div class="tw:flex tw:flex-col tw:gap-0.5 tw:w-44">
                  <span class="tw:text-body-s tw:text-neutral-700">No SEN</span>
                  <div class="tw:w-20 tw:shrink-0">
                    <div class="tw-input-group tw-input-group-sm">
                      <input type="number" class="tw-form-control tw-form-control-sm tw:text-center" value="0" min="0" max="20" step="1" aria-label="No SEN points" data-roni-points data-default="0" data-action="input->roni-calculator#recompute">
                      <div class="tw-input-group-stepper">
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Increase No SEN points" data-action="click->roni-calculator#stepUp"><i class="fa-solid fa-chevron-up"></i></button>
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Decrease No SEN points" data-action="click->roni-calculator#stepDown"><i class="fa-solid fa-chevron-down"></i></button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tw:flex tw:flex-col tw:gap-0.5 tw:w-44">
                  <span class="tw:text-body-s tw:text-neutral-700">SEN Support</span>
                  <div class="tw:w-20 tw:shrink-0">
                    <div class="tw-input-group tw-input-group-sm">
                      <input type="number" class="tw-form-control tw-form-control-sm tw:text-center" value="3" min="0" max="20" step="1" aria-label="SEN Support points" data-roni-points data-default="3" data-action="input->roni-calculator#recompute">
                      <div class="tw-input-group-stepper">
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Increase SEN Support points" data-action="click->roni-calculator#stepUp"><i class="fa-solid fa-chevron-up"></i></button>
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Decrease SEN Support points" data-action="click->roni-calculator#stepDown"><i class="fa-solid fa-chevron-down"></i></button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tw:flex tw:flex-col tw:gap-0.5 tw:w-44">
                  <span class="tw:text-body-s tw:text-neutral-700">EHCP</span>
                  <div class="tw:w-20 tw:shrink-0">
                    <div class="tw-input-group tw-input-group-sm">
                      <input type="number" class="tw-form-control tw-form-control-sm tw:text-center" value="3" min="0" max="20" step="1" aria-label="EHCP points" data-roni-points data-default="3" data-action="input->roni-calculator#recompute">
                      <div class="tw-input-group-stepper">
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Increase EHCP points" data-action="click->roni-calculator#stepUp"><i class="fa-solid fa-chevron-up"></i></button>
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Decrease EHCP points" data-action="click->roni-calculator#stepDown"><i class="fa-solid fa-chevron-down"></i></button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tw:py-3" data-roni-factor>
              <div class="tw:flex tw:items-center tw:gap-2 tw:mb-2">
                <span class="tw:text-body-xs tw:font-bold tw:text-muted tw:tabular-nums">03</span>
                <span class="tw:text-body-s tw:font-bold tw:text-neutral-900">FSM / Pupil Premium</span>
                <span class="tw:text-body-xs tw:text-muted">Disadvantage funding eligibility</span>
                <span class="tw-badge tw-badge-secondary-subtle tw-badge-sm tw:ml-2" data-roni-not-scored hidden>Not scored</span>
                <div class="tw-form-check tw-form-switch tw:mb-0 tw:ml-auto">
                  <input class="tw-form-check-input tw:mt-0" type="checkbox" id="roniFactorFsm" checked data-roni-toggle data-action="change->roni-calculator#toggleFactor">
                  <label class="tw-form-check-label tw:sr-only" for="roniFactorFsm">Enable FSM / Pupil Premium</label>
                </div>
              </div>
              <div class="tw:flex tw:flex-wrap tw:gap-x-6 tw:gap-y-2.5">
                <div class="tw:flex tw:flex-col tw:gap-0.5 tw:w-44">
                  <span class="tw:text-body-s tw:text-neutral-700">Not eligible</span>
                  <div class="tw:w-20 tw:shrink-0">
                    <div class="tw-input-group tw-input-group-sm">
                      <input type="number" class="tw-form-control tw-form-control-sm tw:text-center" value="0" min="0" max="20" step="1" aria-label="Not eligible points" data-roni-points data-default="0" data-action="input->roni-calculator#recompute">
                      <div class="tw-input-group-stepper">
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Increase Not eligible points" data-action="click->roni-calculator#stepUp"><i class="fa-solid fa-chevron-up"></i></button>
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Decrease Not eligible points" data-action="click->roni-calculator#stepDown"><i class="fa-solid fa-chevron-down"></i></button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tw:flex tw:flex-col tw:gap-0.5 tw:w-44">
                  <span class="tw:text-body-s tw:text-neutral-700">Eligible</span>
                  <div class="tw:w-20 tw:shrink-0">
                    <div class="tw-input-group tw-input-group-sm">
                      <input type="number" class="tw-form-control tw-form-control-sm tw:text-center" value="3" min="0" max="20" step="1" aria-label="Eligible points" data-roni-points data-default="3" data-action="input->roni-calculator#recompute">
                      <div class="tw-input-group-stepper">
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Increase Eligible points" data-action="click->roni-calculator#stepUp"><i class="fa-solid fa-chevron-up"></i></button>
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Decrease Eligible points" data-action="click->roni-calculator#stepDown"><i class="fa-solid fa-chevron-down"></i></button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tw:py-3" data-roni-factor>
              <div class="tw:flex tw:items-center tw:gap-2 tw:mb-2">
                <span class="tw:text-body-xs tw:font-bold tw:text-muted tw:tabular-nums">04</span>
                <span class="tw:text-body-s tw:font-bold tw:text-neutral-900">LAC / CiN status</span>
                <span class="tw:text-body-xs tw:text-muted">Looked-after child or child in need</span>
                <span class="tw-badge tw-badge-secondary-subtle tw-badge-sm tw:ml-2" data-roni-not-scored hidden>Not scored</span>
                <div class="tw-form-check tw-form-switch tw:mb-0 tw:ml-auto">
                  <input class="tw-form-check-input tw:mt-0" type="checkbox" id="roniFactorLac" checked data-roni-toggle data-action="change->roni-calculator#toggleFactor">
                  <label class="tw-form-check-label tw:sr-only" for="roniFactorLac">Enable LAC / CiN status</label>
                </div>
              </div>
              <div class="tw:flex tw:flex-wrap tw:gap-x-6 tw:gap-y-2.5">
                <div class="tw:flex tw:flex-col tw:gap-0.5 tw:w-44">
                  <span class="tw:text-body-s tw:text-neutral-700">None</span>
                  <div class="tw:w-20 tw:shrink-0">
                    <div class="tw-input-group tw-input-group-sm">
                      <input type="number" class="tw-form-control tw-form-control-sm tw:text-center" value="0" min="0" max="20" step="1" aria-label="None points" data-roni-points data-default="0" data-action="input->roni-calculator#recompute">
                      <div class="tw-input-group-stepper">
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Increase None points" data-action="click->roni-calculator#stepUp"><i class="fa-solid fa-chevron-up"></i></button>
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Decrease None points" data-action="click->roni-calculator#stepDown"><i class="fa-solid fa-chevron-down"></i></button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tw:flex tw:flex-col tw:gap-0.5 tw:w-44">
                  <span class="tw:text-body-s tw:text-neutral-700">Child in Need</span>
                  <div class="tw:w-20 tw:shrink-0">
                    <div class="tw-input-group tw-input-group-sm">
                      <input type="number" class="tw-form-control tw-form-control-sm tw:text-center" value="4" min="0" max="20" step="1" aria-label="Child in Need points" data-roni-points data-default="4" data-action="input->roni-calculator#recompute">
                      <div class="tw-input-group-stepper">
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Increase Child in Need points" data-action="click->roni-calculator#stepUp"><i class="fa-solid fa-chevron-up"></i></button>
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Decrease Child in Need points" data-action="click->roni-calculator#stepDown"><i class="fa-solid fa-chevron-down"></i></button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tw:flex tw:flex-col tw:gap-0.5 tw:w-44">
                  <span class="tw:text-body-s tw:text-neutral-700">Looked-after</span>
                  <div class="tw:w-20 tw:shrink-0">
                    <div class="tw-input-group tw-input-group-sm">
                      <input type="number" class="tw-form-control tw-form-control-sm tw:text-center" value="3" min="0" max="20" step="1" aria-label="Looked-after points" data-roni-points data-default="3" data-action="input->roni-calculator#recompute">
                      <div class="tw-input-group-stepper">
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Increase Looked-after points" data-action="click->roni-calculator#stepUp"><i class="fa-solid fa-chevron-up"></i></button>
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Decrease Looked-after points" data-action="click->roni-calculator#stepDown"><i class="fa-solid fa-chevron-down"></i></button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tw:py-3" data-roni-factor>
              <div class="tw:flex tw:items-center tw:gap-2 tw:mb-2">
                <span class="tw:text-body-xs tw:font-bold tw:text-muted tw:tabular-nums">05</span>
                <span class="tw:text-body-s tw:font-bold tw:text-neutral-900">Prior attainment</span>
                <span class="tw:text-body-xs tw:text-muted">Predicted KS4 attainment band</span>
                <span class="tw-badge tw-badge-secondary-subtle tw-badge-sm tw:ml-2" data-roni-not-scored hidden>Not scored</span>
                <div class="tw-form-check tw-form-switch tw:mb-0 tw:ml-auto">
                  <input class="tw-form-check-input tw:mt-0" type="checkbox" id="roniFactorPrior" checked data-roni-toggle data-action="change->roni-calculator#toggleFactor">
                  <label class="tw-form-check-label tw:sr-only" for="roniFactorPrior">Enable Prior attainment</label>
                </div>
              </div>
              <div class="tw:flex tw:flex-wrap tw:gap-x-6 tw:gap-y-2.5">
                <div class="tw:flex tw:flex-col tw:gap-0.5 tw:w-44">
                  <span class="tw:text-body-s tw:text-neutral-700">At / above expected</span>
                  <div class="tw:w-20 tw:shrink-0">
                    <div class="tw-input-group tw-input-group-sm">
                      <input type="number" class="tw-form-control tw-form-control-sm tw:text-center" value="0" min="0" max="20" step="1" aria-label="At / above expected points" data-roni-points data-default="0" data-action="input->roni-calculator#recompute">
                      <div class="tw-input-group-stepper">
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Increase At / above expected points" data-action="click->roni-calculator#stepUp"><i class="fa-solid fa-chevron-up"></i></button>
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Decrease At / above expected points" data-action="click->roni-calculator#stepDown"><i class="fa-solid fa-chevron-down"></i></button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tw:flex tw:flex-col tw:gap-0.5 tw:w-44">
                  <span class="tw:text-body-s tw:text-neutral-700">Below expected</span>
                  <div class="tw:w-20 tw:shrink-0">
                    <div class="tw-input-group tw-input-group-sm">
                      <input type="number" class="tw-form-control tw-form-control-sm tw:text-center" value="2" min="0" max="20" step="1" aria-label="Below expected points" data-roni-points data-default="2" data-action="input->roni-calculator#recompute">
                      <div class="tw-input-group-stepper">
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Increase Below expected points" data-action="click->roni-calculator#stepUp"><i class="fa-solid fa-chevron-up"></i></button>
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Decrease Below expected points" data-action="click->roni-calculator#stepDown"><i class="fa-solid fa-chevron-down"></i></button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tw:flex tw:flex-col tw:gap-0.5 tw:w-44">
                  <span class="tw:text-body-s tw:text-neutral-700">Well below expected</span>
                  <div class="tw:w-20 tw:shrink-0">
                    <div class="tw-input-group tw-input-group-sm">
                      <input type="number" class="tw-form-control tw-form-control-sm tw:text-center" value="4" min="0" max="20" step="1" aria-label="Well below expected points" data-roni-points data-default="4" data-action="input->roni-calculator#recompute">
                      <div class="tw-input-group-stepper">
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Increase Well below expected points" data-action="click->roni-calculator#stepUp"><i class="fa-solid fa-chevron-up"></i></button>
                        <button type="button" class="tw-input-group-stepper-btn" aria-label="Decrease Well below expected points" data-action="click->roni-calculator#stepDown"><i class="fa-solid fa-chevron-down"></i></button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tw:py-3">
              <div class="tw:flex tw:items-center tw:gap-2">
                <span class="tw:text-body-xs tw:font-bold tw:text-muted tw:tabular-nums">06</span>
                <span class="tw:text-body-s tw:font-bold tw:text-neutral-900">No destinations</span>
                <span class="tw:text-body-xs tw:text-muted">Student has no applications or destinations recorded — flagged High risk regardless of score.</span>
                <span class="tw-badge tw-badge-warning-subtle tw-badge-sm tw:ml-auto tw:whitespace-nowrap">Forces High risk · always on</span>
              </div>
            </div>
            <div class="tw:py-3">
              <div class="tw:flex tw:items-center tw:gap-2">
                <span class="tw:text-body-xs tw:font-bold tw:text-muted tw:tabular-nums">07</span>
                <span class="tw:text-body-s tw:font-bold tw:text-neutral-900">All destinations inactive</span>
                <span class="tw:text-body-xs tw:text-muted">Every destination is inactive (declined / withdrawn / deadline missed, etc.) — flagged High risk regardless of score.</span>
                <span class="tw-badge tw-badge-warning-subtle tw-badge-sm tw:ml-auto tw:whitespace-nowrap">Forces High risk · always on</span>
              </div>
            </div>
          </div>
        </div>
        <!-- Risk band thresholds -->
        <div class="tw-card tw:mb-4">
          <div class="tw-card-header tw:flex tw:items-center tw:gap-2">
            <i class="fa-regular fa-sliders tw:text-primary-500"></i>
            <span class="tw:text-body-xs tw:font-bold tw:uppercase tw:tracking-wide tw:text-neutral-900">Risk band thresholds</span>
          </div>
          <div class="tw-card-body">
            <div class="tw:grid tw:grid-cols-2 tw:sm:grid-cols-4 tw:gap-3 tw:mb-4">
              <div class="tw:rounded-lg tw:border tw:border-neutral-200 tw:p-3">
                <span class="tw-badge tw-badge-secondary-subtle tw-badge-sm">No risk</span>
                <div class="tw:text-xl tw:font-bold tw:text-neutral-900 tw:tabular-nums tw:mt-2">0</div>
                <div class="tw:text-body-xs tw:text-muted">points</div>
              </div>
              <div class="tw:rounded-lg tw:border tw:border-neutral-200 tw:p-3">
                <span class="tw-badge tw-badge-success-subtle tw-badge-sm">Low risk</span>
                <div class="tw:text-xl tw:font-bold tw:text-neutral-900 tw:tabular-nums tw:mt-2" data-roni-calculator-target="lowRange">1 – 4</div>
                <div class="tw:text-body-xs tw:text-muted">points</div>
              </div>
              <div class="tw:rounded-lg tw:border tw:border-neutral-200 tw:p-3">
                <span class="tw-badge tw-badge-warning-subtle tw-badge-sm">Medium risk</span>
                <div class="tw:text-xl tw:font-bold tw:text-neutral-900 tw:tabular-nums tw:mt-2" data-roni-calculator-target="medRange">5 – 8</div>
                <div class="tw:text-body-xs tw:text-muted">points</div>
              </div>
              <div class="tw:rounded-lg tw:border tw:border-neutral-200 tw:p-3">
                <span class="tw-badge tw-badge-danger-subtle tw-badge-sm">High risk</span>
                <div class="tw:text-xl tw:font-bold tw:text-neutral-900 tw:tabular-nums tw:mt-2" data-roni-calculator-target="highRange">9+</div>
                <div class="tw:text-body-xs tw:text-muted">points</div>
              </div>
            </div>
            <div class="tw:flex tw:items-center tw:justify-between tw:gap-4 tw:py-3 tw:border-t tw:border-neutral-200">
              <div>
                <div class="tw:text-body-s tw:font-semibold tw:text-neutral-900">Low / Medium boundary</div>
                <div class="tw:text-body-xs tw:text-muted">A score of 0 is No risk; 1 up to this total is Low risk</div>
              </div>
              <div class="tw:w-20 tw:shrink-0">
                <div class="tw-input-group tw-input-group-sm">
                  <input type="number" class="tw-form-control tw-form-control-sm tw:text-center" value="4" min="1" max="21" step="1" aria-label="Low risk maximum" data-roni-calculator-target="lowMax" data-default="4" data-action="input->roni-calculator#recompute">
                  <div class="tw-input-group-stepper">
                    <button type="button" class="tw-input-group-stepper-btn" aria-label="Increase Low risk maximum" data-action="click->roni-calculator#stepUp"><i class="fa-solid fa-chevron-up"></i></button>
                    <button type="button" class="tw-input-group-stepper-btn" aria-label="Decrease Low risk maximum" data-action="click->roni-calculator#stepDown"><i class="fa-solid fa-chevron-down"></i></button>
                  </div>
                </div>
              </div>
            </div>
            <div class="tw:flex tw:items-center tw:justify-between tw:gap-4 tw:py-3 tw:border-t tw:border-neutral-200">
              <div>
                <div class="tw:text-body-s tw:font-semibold tw:text-neutral-900">Medium / High boundary</div>
                <div class="tw:text-body-xs tw:text-muted">Students scoring above this total are flagged High risk</div>
              </div>
              <div class="tw:w-20 tw:shrink-0">
                <div class="tw-input-group tw-input-group-sm">
                  <input type="number" class="tw-form-control tw-form-control-sm tw:text-center" value="8" min="1" max="21" step="1" aria-label="Medium risk maximum" data-roni-calculator-target="medMax" data-default="8" data-action="input->roni-calculator#recompute">
                  <div class="tw-input-group-stepper">
                    <button type="button" class="tw-input-group-stepper-btn" aria-label="Increase Medium risk maximum" data-action="click->roni-calculator#stepUp"><i class="fa-solid fa-chevron-up"></i></button>
                    <button type="button" class="tw-input-group-stepper-btn" aria-label="Decrease Medium risk maximum" data-action="click->roni-calculator#stepDown"><i class="fa-solid fa-chevron-down"></i></button>
                  </div>
                </div>
              </div>
            </div>
            <div class="tw:flex tw:items-center tw:gap-2 tw:py-3 tw:border-t tw:border-neutral-200">
              <i class="fa-regular fa-moon tw:text-neutral-400"></i>
              <span class="tw:text-body-xs tw:text-muted">Scores recalculate automatically every night — configuration changes take effect on the next nightly run.</span>
            </div>
          </div>
        </div>
        <!-- Attendance band template (cloned by roni_calculator_controller; classes scanned) -->
        <template data-roni-calculator-target="bandTemplate">
          <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-x-3 tw:gap-y-2 tw:py-2" data-roni-band>
            <div class="tw:flex tw:items-center tw:gap-2 tw:w-52 tw:shrink-0">
              <span class="tw:text-body-s tw:text-neutral-700">At / above</span>
              <div class="tw:w-20 tw:shrink-0">
                <div class="tw-input-group tw-input-group-sm">
                  <input type="number" class="tw-form-control tw-form-control-sm tw:text-center" value="75" min="1" max="100" step="1" aria-label="Attendance threshold" data-roni-threshold data-default="75" data-action="input->roni-calculator#recompute">
                  <div class="tw-input-group-stepper">
                    <button type="button" class="tw-input-group-stepper-btn" aria-label="Increase Attendance threshold" data-action="click->roni-calculator#stepUp"><i class="fa-solid fa-chevron-up"></i></button>
                    <button type="button" class="tw-input-group-stepper-btn" aria-label="Decrease Attendance threshold" data-action="click->roni-calculator#stepDown"><i class="fa-solid fa-chevron-down"></i></button>
                  </div>
                </div>
              </div>
              <span class="tw:text-body-s tw:text-neutral-700">%</span>
            </div>
            <span class="tw:text-body-xs tw:text-muted">adds</span>
            <div class="tw:w-20 tw:shrink-0">
              <div class="tw-input-group tw-input-group-sm">
                <input type="number" class="tw-form-control tw-form-control-sm tw:text-center" value="5" min="0" max="20" step="1" aria-label="Attendance band points" data-roni-points data-default="5" data-action="input->roni-calculator#recompute">
                <div class="tw-input-group-stepper">
                  <button type="button" class="tw-input-group-stepper-btn" aria-label="Increase Attendance band points" data-action="click->roni-calculator#stepUp"><i class="fa-solid fa-chevron-up"></i></button>
                  <button type="button" class="tw-input-group-stepper-btn" aria-label="Decrease Attendance band points" data-action="click->roni-calculator#stepDown"><i class="fa-solid fa-chevron-down"></i></button>
                </div>
              </div>
            </div>
            <button type="button" class="tw-btn tw-btn-sm tw-btn-soft-danger" aria-label="Remove band" data-roni-remove-band data-action="click->roni-calculator#removeBand"><i class="fa-regular fa-xmark"></i></button>
          </div>
        </template>
        <!-- Action row -->
        <div class="tw:flex tw:justify-end tw:gap-2">
          <button type="button" class="tw-btn tw-btn-secondary" data-action="click->roni-calculator#reset">Reset to defaults</button>
          <button type="button" class="tw-btn tw-btn-primary" data-action="click->roni-calculator#save">Save model</button>
        </div>
      </div>
      <!-- ===================== PANEL 4: Reports ===================== -->
      <div data-tabs-target="panel" role="tabpanel" class="tw:pt-4" hidden>
        <!-- Standard reports -->
        <div class="tw-card tw:mb-4">
          <div class="tw-card-header tw:flex tw:items-center tw:gap-2">
            <i class="fa-regular fa-file-lines tw:text-primary-500"></i>
            <span class="tw:text-body-xs tw:font-bold tw:uppercase tw:tracking-wide tw:text-neutral-900">Standard reports</span>
            <span class="tw:ml-auto tw:text-body-xs tw:text-muted">4 available</span>
          </div>
          <div class="tw-card-body">
            <div class="tw-list-group tw-list-group-flush">
              <div class="tw-list-group-item">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">Borough audit report</div>
                  <div class="tw-list-group-item-description">Full statutory destinations & participation summary</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <span class="tw-badge tw-badge-secondary-subtle tw-badge-sm">PDF</span>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-primary" data-report="Borough audit report" data-action="click->la-settings#generateReport">Generate</button>
                </div>
              </div>
              <div class="tw-list-group-item">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">Destinations summary</div>
                  <div class="tw-list-group-item-description">Confirmed, pending & unknown destinations by school</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <span class="tw-badge tw-badge-secondary-subtle tw-badge-sm">PDF · CSV</span>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-primary" data-report="Destinations summary" data-action="click->la-settings#generateReport">Generate</button>
                </div>
              </div>
              <div class="tw-list-group-item">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">NEET risk register</div>
                  <div class="tw-list-group-item-description">Students flagged Medium or High RONI risk</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <span class="tw-badge tw-badge-secondary-subtle tw-badge-sm">CSV</span>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-primary" data-report="NEET risk register" data-action="click->la-settings#generateReport">Generate</button>
                </div>
              </div>
              <div class="tw-list-group-item">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">Provision gap analysis</div>
                  <div class="tw-list-group-item-description">Demand vs. local offer — courses with no in-borough provision</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <span class="tw-badge tw-badge-secondary-subtle tw-badge-sm">PDF · CSV</span>
                  <button type="button" class="tw-btn tw-btn-sm tw-btn-primary" data-report="Provision gap analysis" data-action="click->la-settings#generateReport">Generate</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Scheduled reports -->
        <div class="tw-card tw:mb-4">
          <div class="tw-card-header tw:flex tw:items-center tw:gap-2">
            <i class="fa-regular fa-bell tw:text-primary-500"></i>
            <span class="tw:text-body-xs tw:font-bold tw:uppercase tw:tracking-wide tw:text-neutral-900">Scheduled reports</span>
          </div>
          <div class="tw-card-body">
            <div class="tw-list-group tw-list-group-flush">
              <div class="tw-list-group-item">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">Weekly digest</div>
                  <div class="tw-list-group-item-description">Email a summary of borough activity on a set day each week</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw-form-check tw-form-switch tw:mb-0">
                    <input class="tw-form-check-input tw:mt-0" type="checkbox" id="rptDigest" checked>
                    <label class="tw-form-check-label tw:sr-only" for="rptDigest">Weekly digest</label>
                  </div>
                </div>
              </div>
              <div class="tw-list-group-item">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">Send to</div>
                  <div class="tw-list-group-item-description">Which staff roles receive scheduled reports</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-48">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Send to">
                      <option value="admin" selected>Admins & super admins</option>
                      <option value="write">Write access & above</option>
                      <option value="all">All staff</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="tw-list-group-item">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">Delivery day</div>
                  <div class="tw-list-group-item-description">Day of the week scheduled reports are sent</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-48">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Delivery day">
                      <option selected>Monday</option>
                      <option>Tuesday</option>
                      <option>Wednesday</option>
                      <option>Thursday</option>
                      <option>Friday</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="tw-list-group-item">
                <div class="tw-list-group-item-content">
                  <div class="tw-list-group-item-title">Default format</div>
                  <div class="tw-list-group-item-description">File format used for scheduled and exported reports</div>
                </div>
                <div class="tw-list-group-item-actions">
                  <div class="tw:w-48">
                    <select class="tw-form-select tw-form-select-sm" aria-label="Default format">
                      <option selected>PDF</option>
                      <option>CSV</option>
                      <option>Excel</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Action row -->
        <div class="tw:flex tw:justify-end">
          <button type="button" class="tw-btn tw-btn-primary" data-action="click->la-settings#saveReports">Save changes</button>
        </div>
      </div>
      <!-- Toast container (insertion target for la-settings#_toast) -->
      <div class="tw-toast-container" data-controller="toast" data-la-settings-target="toastContainer" data-send-field-mapping-target="toastContainer" data-roni-calculator-target="toastContainer"></div>
    </div>
  </main>
</div>