<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>
    <div class="tw-topbar-right">
      <!-- Action Buttons -->
      <button type="button" class="tw-btn tw-btn-outline-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-outline-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-outline-primary tw-btn-multiline" data-controller="tooltip" data-tooltip-content-value="Support & Feature Requests" data-tooltip-placement-value="bottom">
        <i class="fa-solid fa-comment-question tw-icon-16"></i>
        Support<br>
         & Requests
      </button>
      <div class="tw-topbar-action-icons">
        <!-- Notification Icon -->
        <button type="button" class="tw-btn tw-btn-tertiary tw-btn-icon tw-topbar-notification-btn" aria-label="Notifications" data-controller="tooltip" data-tooltip-content-value="Notification" data-tooltip-placement-value="bottom">
          <i class="fa-solid fa-bell tw-icon-16"></i>
        </button>
      </div>
      <div class="tw-topbar-divider"></div>
      <!-- User Avatar Dropdown -->
      <div class="tw-dropdown tw-dropdown-icon tw-dropdown-borderless" data-controller="dropdown">
        <button type="button" class="tw-dropdown-trigger tw-topbar-avatar"
              aria-label="User menu"
              aria-haspopup="true"
              aria-expanded="false"
              data-dropdown-target="trigger"
              data-action="click->dropdown#toggle keydown->dropdown#keydown">
          <div class="tw-avatar tw-avatar-primary" role="img" aria-label="Jane Doe">
            <span>JD</span>
          </div>
        </button>
        <div class="tw-dropdown-menu tw-dropdown-menu-end" role="menu" data-dropdown-target="menu" tabindex="-1">
          <div class="tw-dropdown-header">John Doe</div>
          <div class="tw-dropdown-divider"></div>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-circle-sterling tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Referrals & billing</span>
          </button>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-lock tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Password & security</span>
          </button>
          <div class="tw-dropdown-divider"></div>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-layer-group tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Multiple form</span>
          </button>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-envelope tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Email preferences</span>
          </button>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-right-from-bracket tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Logout</span>
          </button>
        </div>
      </div>
    </div>
  </header>
  <main class="tw-sidebar-topbar-content-offset tw:bg-background tw-min-h-screen-offset">
    <div class="tw-container-fluid tw-page-container" data-controller="tabs la-settings">
      <!-- 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, 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">RONI / NEET Calculator</button>
            <button class="tw-tab" 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-neutral-500" 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-neutral-500 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-neutral-500 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-neutral-500 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-neutral-500 tw:mt-1.5 tw:mb-0">Full access incl. staff & billing</p>
              </div>
            </div>
            <!-- Staff list -->
            <div class="tw:divide-y tw:divide-neutral-200 tw:border-t tw:border-neutral-200" data-la-settings-target="staffList">
              <!-- Jade — superadmin, locked (YOU) -->
              <div class="tw:flex tw:items-center tw:gap-3 tw:py-3" 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" role="img" aria-label="Jade Adeyemi" data-staff-avatar><span>JA</span></div>
                <div class="tw:flex-1 tw:min-w-0">
                  <div class="tw:flex tw:items-center tw:gap-2">
                    <span class="tw:font-semibold tw:text-body-s tw:text-neutral-900" data-staff-name>Jade Adeyemi</span>
                    <span class="tw-badge tw-badge-primary-subtle tw-badge-sm">YOU</span>
                  </div>
                  <div class="tw:text-body-xs tw:text-neutral-500 tw:truncate" data-staff-email-text>j.adeyemi@hackney.gov.uk</div>
                </div>
                <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-outline-danger" aria-label="Remove Jade Adeyemi" disabled data-action="click->la-settings#removeStaff">Remove</button>
              </div>
              <!-- Sarah — admin -->
              <div class="tw:flex tw:items-center tw:gap-3 tw:py-3" 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" role="img" aria-label="Sarah Bennett" data-staff-avatar><span>SB</span></div>
                <div class="tw:flex-1 tw:min-w-0">
                  <div class="tw:flex tw:items-center tw:gap-2">
                    <span class="tw:font-semibold tw:text-body-s tw:text-neutral-900" data-staff-name>Sarah Bennett</span>
                  </div>
                  <div class="tw:text-body-xs tw:text-neutral-500 tw:truncate" data-staff-email-text>s.bennett@hackney.gov.uk</div>
                </div>
                <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-outline-danger" aria-label="Remove Sarah Bennett" data-action="click->la-settings#removeStaff">Remove</button>
              </div>
              <!-- Mark — write -->
              <div class="tw:flex tw:items-center tw:gap-3 tw:py-3" 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" role="img" aria-label="Mark Lewis" data-staff-avatar><span>ML</span></div>
                <div class="tw:flex-1 tw:min-w-0">
                  <div class="tw:flex tw:items-center tw:gap-2">
                    <span class="tw:font-semibold tw:text-body-s tw:text-neutral-900" data-staff-name>Mark Lewis</span>
                  </div>
                  <div class="tw:text-body-xs tw:text-neutral-500 tw:truncate" data-staff-email-text>m.lewis@hackney.gov.uk</div>
                </div>
                <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-outline-danger" aria-label="Remove Mark Lewis" data-action="click->la-settings#removeStaff">Remove</button>
              </div>
              <!-- Priya — read, INVITED -->
              <div class="tw:flex tw:items-center tw:gap-3 tw:py-3" 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" role="img" aria-label="Priya Shah" data-staff-avatar><span>PS</span></div>
                <div class="tw:flex-1 tw:min-w-0">
                  <div class="tw:flex tw:items-center tw:gap-2">
                    <span class="tw:font-semibold tw:text-body-s tw:text-neutral-900" data-staff-name>Priya Shah</span>
                    <span class="tw-badge tw-badge-warning-subtle tw-badge-sm">INVITED</span>
                  </div>
                  <div class="tw:text-body-xs tw:text-neutral-500 tw:truncate" data-staff-email-text>p.shah@hackney.gov.uk</div>
                </div>
                <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-outline-danger" aria-label="Remove Priya Shah" data-action="click->la-settings#removeStaff">Remove</button>
              </div>
            </div>
            <!-- New-row template (cloned by la-settings#addStaff; all classes here are scanned) -->
            <template data-la-settings-target="rowTemplate">
              <div class="tw:flex tw:items-center tw:gap-3 tw:py-3" data-staff-row data-staff-email="" data-staff-role="read">
                <div class="tw-avatar tw-avatar-sm" role="img" data-staff-avatar><span></span></div>
                <div class="tw:flex-1 tw:min-w-0">
                  <div class="tw:flex tw:items-center tw:gap-2">
                    <span class="tw:font-semibold tw:text-body-s tw:text-neutral-900" data-staff-name></span>
                    <span class="tw-badge tw-badge-warning-subtle tw-badge-sm">INVITED</span>
                  </div>
                  <div class="tw:text-body-xs tw:text-neutral-500 tw:truncate" data-staff-email-text></div>
                </div>
                <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-outline-danger" data-action="click->la-settings#removeStaff">Remove</button>
              </div>
            </template>
            <!-- Add a staff account -->
            <div class="tw:border-t tw:border-neutral-200 tw:pt-4 tw:mt-4">
              <p class="tw:text-body-xs tw:font-bold tw:uppercase tw:tracking-wide tw:text-neutral-500 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 tw:divide-y tw:divide-neutral-200">
            <div class="tw:flex tw:items-center tw:justify-between tw:gap-4 tw:py-3">
              <div>
                <div class="tw:text-body-s tw:font-semibold tw:text-neutral-900">Email alerts</div>
                <div class="tw:text-body-xs tw:text-neutral-500">Receive email when student records change status</div>
              </div>
              <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 class="tw:flex tw:items-center tw:justify-between tw:gap-4 tw:py-3">
              <div>
                <div class="tw:text-body-s tw:font-semibold tw:text-neutral-900">NEET risk alerts</div>
                <div class="tw:text-body-xs tw:text-neutral-500">Immediate alert when a student is flagged at high NEET risk</div>
              </div>
              <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 class="tw:flex tw:items-center tw:justify-between tw:gap-4 tw:py-3">
              <div>
                <div class="tw:text-body-s tw:font-semibold tw:text-neutral-900">Weekly digest</div>
                <div class="tw:text-body-xs tw:text-neutral-500">Summary of borough activity every Monday morning</div>
              </div>
              <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>
        <!-- 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 tw:divide-y tw:divide-neutral-200">
            <div class="tw:flex tw:items-center tw:justify-between tw:gap-4 tw:py-3">
              <div>
                <div class="tw:text-body-s tw:font-semibold tw:text-neutral-900">Share anonymised data</div>
                <div class="tw:text-body-xs tw:text-neutral-500">Contribute anonymised destination data to regional benchmarking</div>
              </div>
              <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 class="tw:flex tw:items-center tw:justify-between tw:gap-4 tw:py-3">
              <div>
                <div class="tw:text-body-s tw:font-semibold tw:text-neutral-900">Auto-confirm destinations</div>
                <div class="tw:text-body-xs tw:text-neutral-500">Automatically confirm destinations once a school submits enrolment</div>
              </div>
              <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 class="tw:flex tw:items-center tw:justify-between tw:gap-4 tw:py-3">
              <div>
                <div class="tw:text-body-s tw:font-semibold tw:text-neutral-900">Data retention</div>
                <div class="tw:text-body-xs tw:text-neutral-500">How long student tracking records are kept after Year 11</div>
              </div>
              <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>
        <!-- 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 tw:divide-y tw:divide-neutral-200">
            <div class="tw:flex tw:items-center tw:justify-between tw:gap-4 tw:py-3">
              <div>
                <div class="tw:text-body-s tw:font-semibold tw:text-neutral-900">Default academic year</div>
                <div class="tw:text-body-xs tw:text-neutral-500">Year shown when the dashboard first loads</div>
              </div>
              <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 class="tw:flex tw:items-center tw:justify-between tw:gap-4 tw:py-3">
              <div>
                <div class="tw:text-body-s tw:font-semibold tw:text-neutral-900">Default landing page</div>
                <div class="tw:text-body-xs tw:text-neutral-500">The page shown immediately after sign-in</div>
              </div>
              <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 class="tw:flex tw:items-center tw:justify-between tw:gap-4 tw:py-3">
              <div>
                <div class="tw:text-body-s tw:font-semibold tw:text-neutral-900">Compact layout</div>
                <div class="tw:text-body-xs tw:text-neutral-500">Reduce spacing to fit more on screen</div>
              </div>
              <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>
        <!-- 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: 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>20</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-neutral-500">5 factors · max 20 pts</span>
          </div>
          <div class="tw-card-body tw:divide-y tw:divide-neutral-200">
            <!-- 01 Attendance -->
            <div class="tw:py-3">
              <div class="tw:flex tw:items-baseline tw:gap-2 tw:mb-2">
                <span class="tw:text-body-xs tw:font-bold tw:text-neutral-500 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-neutral-500">Overall attendance rate across the year</span>
              </div>
              <div class="tw:flex tw:flex-wrap tw:gap-2">
                <span class="tw-badge tw-badge-secondary-subtle">95%+ <span class="tw:ml-1 tw:font-bold">+0</span></span>
                <span class="tw-badge tw-badge-primary-subtle">90–94% <span class="tw:ml-1 tw:font-bold">+1</span></span>
                <span class="tw-badge tw-badge-warning-subtle">85–89% <span class="tw:ml-1 tw:font-bold">+3</span></span>
                <span class="tw-badge tw-badge-danger-subtle">80–84% <span class="tw:ml-1 tw:font-bold">+5</span></span>
                <span class="tw-badge tw-badge-danger-subtle">Below 80% <span class="tw:ml-1 tw:font-bold">+7</span></span>
              </div>
            </div>
            <!-- 02 SEN status -->
            <div class="tw:py-3">
              <div class="tw:flex tw:items-baseline tw:gap-2 tw:mb-2">
                <span class="tw:text-body-xs tw:font-bold tw:text-neutral-500 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-neutral-500">Special educational needs & disabilities</span>
              </div>
              <div class="tw:flex tw:flex-wrap tw:gap-2">
                <span class="tw-badge tw-badge-secondary-subtle">No SEN <span class="tw:ml-1 tw:font-bold">+0</span></span>
                <span class="tw-badge tw-badge-primary-subtle">SEN Support <span class="tw:ml-1 tw:font-bold">+2</span></span>
                <span class="tw-badge tw-badge-warning-subtle">EHCP <span class="tw:ml-1 tw:font-bold">+3</span></span>
              </div>
            </div>
            <!-- 03 FSM / Pupil Premium -->
            <div class="tw:py-3">
              <div class="tw:flex tw:items-baseline tw:gap-2 tw:mb-2">
                <span class="tw:text-body-xs tw:font-bold tw:text-neutral-500 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-neutral-500">Disadvantage funding eligibility</span>
              </div>
              <div class="tw:flex tw:flex-wrap tw:gap-2">
                <span class="tw-badge tw-badge-secondary-subtle">Not eligible <span class="tw:ml-1 tw:font-bold">+0</span></span>
                <span class="tw-badge tw-badge-primary-subtle">Eligible <span class="tw:ml-1 tw:font-bold">+2</span></span>
              </div>
            </div>
            <!-- 04 LAC / CiN status -->
            <div class="tw:py-3">
              <div class="tw:flex tw:items-baseline tw:gap-2 tw:mb-2">
                <span class="tw:text-body-xs tw:font-bold tw:text-neutral-500 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-neutral-500">Looked-after child or child in need</span>
              </div>
              <div class="tw:flex tw:flex-wrap tw:gap-2">
                <span class="tw-badge tw-badge-secondary-subtle">None <span class="tw:ml-1 tw:font-bold">+0</span></span>
                <span class="tw-badge tw-badge-warning-subtle">Child in Need <span class="tw:ml-1 tw:font-bold">+3</span></span>
                <span class="tw-badge tw-badge-warning-subtle">Looked-after <span class="tw:ml-1 tw:font-bold">+4</span></span>
              </div>
            </div>
            <!-- 05 Prior attainment -->
            <div class="tw:py-3">
              <div class="tw:flex tw:items-baseline tw:gap-2 tw:mb-2">
                <span class="tw:text-body-xs tw:font-bold tw:text-neutral-500 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-neutral-500">Predicted KS4 attainment band</span>
              </div>
              <div class="tw:flex tw:flex-wrap tw:gap-2">
                <span class="tw-badge tw-badge-secondary-subtle">At / above expected <span class="tw:ml-1 tw:font-bold">+0</span></span>
                <span class="tw-badge tw-badge-primary-subtle">Below expected <span class="tw:ml-1 tw:font-bold">+2</span></span>
                <span class="tw-badge tw-badge-warning-subtle">Well below expected <span class="tw:ml-1 tw:font-bold">+4</span></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-1 tw:sm:grid-cols-3 tw:gap-3 tw:mb-2">
              <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-la-settings-target="lowRange">0 – 3</div>
                <div class="tw:text-body-xs tw:text-neutral-500">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-la-settings-target="medRange">4 – 7</div>
                <div class="tw:text-body-xs tw:text-neutral-500">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-la-settings-target="highRange">8+</div>
                <div class="tw:text-body-xs tw:text-neutral-500">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-neutral-500">Students scoring at or below this total are Low risk</div>
              </div>
              <div class="tw:w-20">
                <input type="number" min="0" max="6" value="3" class="tw-form-control tw-form-control-sm tw:text-center" aria-label="Low risk maximum" data-la-settings-target="lowMax" data-action="input->la-settings#recalcBands">
              </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-neutral-500">Students scoring above this total are flagged High risk</div>
              </div>
              <div class="tw:w-20">
                <input type="number" min="4" max="20" value="7" class="tw-form-control tw-form-control-sm tw:text-center" aria-label="Medium risk maximum" data-la-settings-target="medMax" data-action="input->la-settings#recalcBands">
              </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">Recalculate nightly</div>
                <div class="tw:text-body-xs tw:text-neutral-500">Re-run RONI scoring automatically as attendance and data refresh</div>
              </div>
              <div class="tw-form-check tw-form-switch tw:mb-0">
                <input class="tw-form-check-input tw:mt-0" type="checkbox" id="roniNightly" checked data-la-settings-target="roniNightly">
                <label class="tw-form-check-label tw:sr-only" for="roniNightly">Recalculate nightly</label>
              </div>
            </div>
          </div>
        </div>
        <!-- Action 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#resetRoni">Reset to defaults</button>
          <button type="button" class="tw-btn tw-btn-primary" data-action="click->la-settings#saveRoni">Save model</button>
        </div>
      </div>
      <!-- ===================== PANEL 3: 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-neutral-500">4 available</span>
          </div>
          <div class="tw-card-body tw:divide-y tw:divide-neutral-200">
            <div class="tw:flex tw:items-center tw:justify-between tw:gap-4 tw:py-3">
              <div class="tw:min-w-0">
                <div class="tw:text-body-s tw:font-semibold tw:text-neutral-900">Borough audit report</div>
                <div class="tw:text-body-xs tw:text-neutral-500">Full statutory destinations & participation summary</div>
              </div>
              <div class="tw:flex tw:items-center tw:gap-3 tw:flex-none">
                <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:flex tw:items-center tw:justify-between tw:gap-4 tw:py-3">
              <div class="tw:min-w-0">
                <div class="tw:text-body-s tw:font-semibold tw:text-neutral-900">Destinations summary</div>
                <div class="tw:text-body-xs tw:text-neutral-500">Confirmed, pending & unknown destinations by school</div>
              </div>
              <div class="tw:flex tw:items-center tw:gap-3 tw:flex-none">
                <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:flex tw:items-center tw:justify-between tw:gap-4 tw:py-3">
              <div class="tw:min-w-0">
                <div class="tw:text-body-s tw:font-semibold tw:text-neutral-900">NEET risk register</div>
                <div class="tw:text-body-xs tw:text-neutral-500">Students flagged Medium or High RONI risk</div>
              </div>
              <div class="tw:flex tw:items-center tw:gap-3 tw:flex-none">
                <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:flex tw:items-center tw:justify-between tw:gap-4 tw:py-3">
              <div class="tw:min-w-0">
                <div class="tw:text-body-s tw:font-semibold tw:text-neutral-900">Provision gap analysis</div>
                <div class="tw:text-body-xs tw:text-neutral-500">Demand vs. local offer — courses with no in-borough provision</div>
              </div>
              <div class="tw:flex tw:items-center tw:gap-3 tw:flex-none">
                <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>
        <!-- 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 tw:divide-y tw:divide-neutral-200">
            <div class="tw:flex tw:items-center tw:justify-between tw:gap-4 tw:py-3">
              <div>
                <div class="tw:text-body-s tw:font-semibold tw:text-neutral-900">Weekly digest</div>
                <div class="tw:text-body-xs tw:text-neutral-500">Email a summary of borough activity on a set day each week</div>
              </div>
              <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 class="tw:flex tw:items-center tw:justify-between tw:gap-4 tw:py-3">
              <div>
                <div class="tw:text-body-s tw:font-semibold tw:text-neutral-900">Send to</div>
                <div class="tw:text-body-xs tw:text-neutral-500">Which staff roles receive scheduled reports</div>
              </div>
              <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 class="tw:flex tw:items-center tw:justify-between tw:gap-4 tw:py-3">
              <div>
                <div class="tw:text-body-s tw:font-semibold tw:text-neutral-900">Delivery day</div>
                <div class="tw:text-body-xs tw:text-neutral-500">Day of the week scheduled reports are sent</div>
              </div>
              <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 class="tw:flex tw:items-center tw:justify-between tw:gap-4 tw:py-3">
              <div>
                <div class="tw:text-body-s tw:font-semibold tw:text-neutral-900">Default format</div>
                <div class="tw:text-body-xs tw:text-neutral-500">File format used for scheduled and exported reports</div>
              </div>
              <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>
        <!-- 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"></div>
    </div>
  </main>
</div>