refactor: admin left panel — wider, less cluttered, persistent bulk action bar

- Left panel widened to 340px (was 280px)
- Removed redundant edit pencil icons from unit rows — clicking the row selects it
- Group names truncate with ellipsis instead of wrapping
- Added select-all/none checkbox per group header (with indeterminate state)
- Bulk action bar is now persistent at top of left panel, always visible
- Bulk actions use two-dropdown pattern: Action (Move to group) → Target group
- 'Add unit' text shortened to '+ Add unit', no more wrapping
- Delete-group orphan label clarified: 'Delete group only — keep units as Ungrouped'

src/routes/admin/+page.svelte

@@ -5,7 +5,8 @@
   let unitsData = $state<UnitsData>({ units: [], groups: [] });
   let selectedItem = $state<{ type: 'unit' | 'group'; id: string } | null>(null);
   let checkedUnitIds = $state<Set<string>>(new Set());
-  let moveTargetGroupId = $state<string>('');
+  let bulkAction = $state<string>('');         // '' | 'move'
+  let bulkMoveTargetGroupId = $state<string>('');
   let expandedGroups = $state<Set<string>>(new Set());
   let deleteGroupTarget = $state<Group | null>(null);
   let deleteGroupAction = $state<'reassign' | 'orphan'>('reassign');
@@ -22,7 +23,7 @@
   let groupForm = $state<Partial<Group>>({});
   let groupFormNew = $state(false);
 
-  // ── Load data on mount ───────────────────────────────────────────────────────
+  // ── Load data ────────────────────────────────────────────────────────────────
   async function loadData() {
     const [res, gres] = await Promise.all([
       fetch('/admin/api/units'),
@@ -32,16 +33,11 @@
     const units: Unit[] = await res.json();
     const groups: Group[] = gres.ok ? await gres.json() : [];
     unitsData = { units, groups };
-    // Expand all groups — use assignment for consistent reactive update
     expandedGroups = new Set([...expandedGroups, ...groups.map((g) => g.id)]);
   }
 
-  // ── Load on mount ────────────────────────────────────────────────────────────
-  $effect(() => {
-    loadData();
-  });
+  $effect(() => { loadData(); });
 
-  /** Extract a server error message from a non-ok response. */
   async function extractError(res: Response, fallback: string): Promise<string> {
     const body = await res.json().catch(() => ({}));
     return (body as Record<string, string>).error ?? fallback;
@@ -58,10 +54,6 @@
     return map;
   });
 
-  function getBaseUnit(group: Group): Unit | undefined {
-    return unitsData.units.find((u) => u.id === group.baseUnitId);
-  }
-
   // ── Selection ────────────────────────────────────────────────────────────────
   function selectUnit(unit: Unit) {
     selectedItem = { type: 'unit', id: unit.id };
@@ -99,29 +91,75 @@
     formSuccess = null;
   }
 
-  // ── Unit form submit ─────────────────────────────────────────────────────────
+  // ── Checkbox helpers ─────────────────────────────────────────────────────────
+  function toggleCheck(unitId: string) {
+    const next = new Set(checkedUnitIds);
+    if (next.has(unitId)) next.delete(unitId);
+    else next.add(unitId);
+    checkedUnitIds = next;
+  }
+
+  function toggleGroupCheck(groupId: string | null) {
+    const groupUnits = unitsByGroup.get(groupId) ?? [];
+    const allChecked = groupUnits.every((u) => checkedUnitIds.has(u.id));
+    const next = new Set(checkedUnitIds);
+    for (const u of groupUnits) {
+      if (allChecked) next.delete(u.id);
+      else next.add(u.id);
+    }
+    checkedUnitIds = next;
+  }
+
+  function groupAllChecked(groupId: string | null): boolean {
+    const units = unitsByGroup.get(groupId) ?? [];
+    return units.length > 0 && units.every((u) => checkedUnitIds.has(u.id));
+  }
+
+  function groupSomeChecked(groupId: string | null): boolean {
+    const units = unitsByGroup.get(groupId) ?? [];
+    return units.some((u) => checkedUnitIds.has(u.id)) && !groupAllChecked(groupId);
+  }
+
+  // ── Bulk move ────────────────────────────────────────────────────────────────
+  async function executeBulkAction() {
+    if (bulkAction === 'move') {
+      if (!bulkMoveTargetGroupId || checkedUnitIds.size === 0) return;
+      formError = null;
+      const results = await Promise.all(
+        [...checkedUnitIds].map((unitId) =>
+          fetch(`/admin/api/units/${unitId}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ group: bulkMoveTargetGroupId })
+          })
+        )
+      );
+      const failed = results.filter((r) => !r.ok);
+      if (failed.length) formError = `${failed.length} unit(s) failed to move`;
+      checkedUnitIds = new Set();
+      bulkAction = '';
+      bulkMoveTargetGroupId = '';
+      await loadData();
+    }
+  }
+
+  // ── Unit save/delete ─────────────────────────────────────────────────────────
   async function saveUnit() {
     formError = null;
     formSuccess = null;
     try {
-      let res: Response;
-      if (unitFormNew) {
-        res = await fetch('/admin/api/units', {
+      const res = unitFormNew
+        ? await fetch('/admin/api/units', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify(unitForm)
-        });
-      } else {
-        res = await fetch(`/admin/api/units/${selectedItem?.id}`, {
+          })
+        : await fetch(`/admin/api/units/${selectedItem?.id}`, {
             method: 'PUT',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify(unitForm)
           });
-      }
-      if (!res.ok) {
-        formError = await extractError(res, 'Save failed');
-        return;
-      }
+      if (!res.ok) { formError = await extractError(res, 'Save failed'); return; }
       formSuccess = unitFormNew ? 'Unit created.' : 'Unit saved.';
       if (unitFormNew) {
         const created = (await res.json()) as Unit;
@@ -129,9 +167,7 @@
         selectedItem = { type: 'unit', id: created.id ?? '' };
       }
       await loadData();
-    } catch {
-      formError = 'Network error';
-    }
+    } catch { formError = 'Network error'; }
   }
 
   async function deleteUnit() {
@@ -139,41 +175,30 @@
     if (!confirm(`Delete unit "${unitForm.label}"?`)) return;
     try {
       const res = await fetch(`/admin/api/units/${selectedItem.id}`, { method: 'DELETE' });
-      if (!res.ok) {
-        formError = await extractError(res, 'Delete failed');
-        return;
-      }
+      if (!res.ok) { formError = await extractError(res, 'Delete failed'); return; }
       selectedItem = null;
       unitForm = {};
       await loadData();
-    } catch {
-      formError = 'Network error';
-    }
+    } catch { formError = 'Network error'; }
   }
 
-  // ── Group form submit ────────────────────────────────────────────────────────
+  // ── Group save/delete ─────────────────────────────────────────────────────────
   async function saveGroup() {
     formError = null;
     formSuccess = null;
     try {
-      let res: Response;
-      if (groupFormNew) {
-        res = await fetch('/admin/api/groups', {
+      const res = groupFormNew
+        ? await fetch('/admin/api/groups', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify(groupForm)
-        });
-      } else {
-        res = await fetch(`/admin/api/groups/${selectedItem?.id}`, {
+          })
+        : await fetch(`/admin/api/groups/${selectedItem?.id}`, {
             method: 'PUT',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify(groupForm)
           });
-      }
-      if (!res.ok) {
-        formError = await extractError(res, 'Save failed');
-        return;
-      }
+      if (!res.ok) { formError = await extractError(res, 'Save failed'); return; }
       formSuccess = groupFormNew ? 'Group created.' : 'Group saved.';
       if (groupFormNew) {
         const created = (await res.json()) as Group;
@@ -181,12 +206,9 @@
         selectedItem = { type: 'group', id: created.id ?? '' };
       }
       await loadData();
-    } catch {
-      formError = 'Network error';
-    }
+    } catch { formError = 'Network error'; }
   }
 
-  // ── Delete group modal ───────────────────────────────────────────────────────
   function openDeleteGroup(group: Group) {
     deleteGroupTarget = group;
     deleteGroupAction = 'reassign';
@@ -195,83 +217,36 @@
     formError = null;
   }
 
-  function closeDeleteGroup() {
-    deleteGroupTarget = null;
-  }
+  function closeDeleteGroup() { deleteGroupTarget = null; }
 
   async function confirmDeleteGroup() {
     if (!deleteGroupTarget) return;
     const unitsCount = (unitsByGroup.get(deleteGroupTarget.id) ?? []).length;
-
-    let body: Record<string, unknown>;
-    if (unitsCount === 0) {
-      body = { action: 'orphan' };
-    } else if (deleteGroupAction === 'reassign') {
-      body = {
-        action: 'reassign',
-        targetGroupId: deleteGroupTargetId,
-        toBaseAction: deleteGroupToBaseAction
-      };
-    } else {
-      body = { action: 'orphan' };
-    }
-
+    const body: Record<string, unknown> = unitsCount === 0 || deleteGroupAction === 'orphan'
+      ? { action: 'orphan' }
+      : { action: 'reassign', targetGroupId: deleteGroupTargetId, toBaseAction: deleteGroupToBaseAction };
     try {
       const res = await fetch(`/admin/api/groups/${deleteGroupTarget.id}`, {
         method: 'DELETE',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(body)
       });
-      if (!res.ok) {
-        formError = await extractError(res, 'Delete failed');
-        return;
-      }
+      if (!res.ok) { formError = await extractError(res, 'Delete failed'); return; }
       deleteGroupTarget = null;
       selectedItem = null;
       groupForm = {};
       await loadData();
-    } catch {
-      formError = 'Network error';
-    }
+    } catch { formError = 'Network error'; }
   }
 
-  // ── Multi-select move ────────────────────────────────────────────────────────
-  async function moveCheckedUnits() {
-    if (!moveTargetGroupId || checkedUnitIds.size === 0) return;
-    formError = null;
-    const results = await Promise.all(
-      [...checkedUnitIds].map((unitId) =>
-        fetch(`/admin/api/units/${unitId}`, {
-          method: 'PUT',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ group: moveTargetGroupId })
-        })
-      )
-    );
-    const failed = results.filter((r) => !r.ok);
-    if (failed.length) {
-      formError = `${failed.length} unit(s) failed to move`;
-    }
-    checkedUnitIds = new Set();
-    moveTargetGroupId = '';
-    await loadData();
-  }
-
-  function toggleCheck(unitId: string) {
-    const next = new Set(checkedUnitIds);
-    if (next.has(unitId)) next.delete(unitId);
-    else next.add(unitId);
-    checkedUnitIds = next;
-  }
-
-  // ── Live toBase hint ─────────────────────────────────────────────────────────
+  // ── toBase hint ──────────────────────────────────────────────────────────────
   let toBaseHint = $derived.by(() => {
     const g = unitsData.groups.find((gr) => gr.id === unitForm.group);
     if (!g) return null;
     const base = unitsData.units.find((u) => u.id === g.baseUnitId);
-    const sym = unitForm.symbol ?? '?';
+    const sym = unitForm.symbol || '?';
     const tb = unitForm.toBase ?? 1;
-    const baseSymbol = base?.symbol ?? 'base units';
+    const baseSymbol = base?.symbol ?? 'base';
     return `1 ${sym} = ${tb} ${baseSymbol}`;
   });
 
@@ -290,81 +265,128 @@
   <button class="outline secondary logout-btn" onclick={logout}>Log out</button>
 </div>
 
-{#if checkedUnitIds.size > 0}
-  <div class="bulk-actions">
-    <span>{checkedUnitIds.size} unit{checkedUnitIds.size === 1 ? '' : 's'} selected</span>
-    <select bind:value={moveTargetGroupId}>
-      <option value="">Move to group…</option>
+<div class="admin-panels">
+  <!-- ── Left panel ─────────────────────────────────────────────────────────── -->
+  <aside class="admin-tree">
+
+    <!-- Persistent bulk-action bar -->
+    <div class="bulk-bar">
+      <span class="bulk-count">
+        {#if checkedUnitIds.size > 0}
+          {checkedUnitIds.size} selected
+        {:else}
+          0 selected
+        {/if}
+      </span>
+      <div class="bulk-controls">
+        <select
+          bind:value={bulkAction}
+          disabled={checkedUnitIds.size === 0}
+          aria-label="Bulk action"
+        >
+          <option value="">Action…</option>
+          <option value="move">Move to group</option>
+        </select>
+        {#if bulkAction === 'move'}
+          <select bind:value={bulkMoveTargetGroupId} aria-label="Target group">
+            <option value="">Group…</option>
             {#each unitsData.groups as g}
               <option value={g.id}>{g.label}</option>
             {/each}
+            <option value="__orphan__">Ungrouped</option>
           </select>
-    <button onclick={moveCheckedUnits} disabled={!moveTargetGroupId}>Move</button>
-    <button class="outline secondary" onclick={() => (checkedUnitIds = new Set())}>Clear</button>
+        {/if}
+        <button
+          class="bulk-go"
+          disabled={checkedUnitIds.size === 0 || !bulkAction || (bulkAction === 'move' && !bulkMoveTargetGroupId)}
+          onclick={executeBulkAction}
+        >Go</button>
+        {#if checkedUnitIds.size > 0}
+          <button class="bulk-clear plain" onclick={() => { checkedUnitIds = new Set(); bulkAction = ''; bulkMoveTargetGroupId = ''; }} title="Clear selection">✕</button>
+        {/if}
+      </div>
     </div>
-{/if}
 
-<div class="admin-panels">
-  <!-- Left panel: tree -->
-  <aside class="admin-tree">
+    <!-- Group tree -->
     {#each unitsData.groups as group (group.id)}
       {@const groupUnits = unitsByGroup.get(group.id) ?? []}
       <div class="tree-group">
         <div class="tree-group-header">
+          <!-- Expand toggle -->
           <button
-            class="tree-expand plain"
+            class="plain expand-btn"
             onclick={() => {
               const next = new Set(expandedGroups);
               if (next.has(group.id)) next.delete(group.id);
               else next.add(group.id);
               expandedGroups = next;
             }}
-          >
-            {expandedGroups.has(group.id) ? '▾' : '▸'}
-          </button>
-          <button class="tree-group-label plain" onclick={() => selectGroup(group)}>
+            aria-label={expandedGroups.has(group.id) ? 'Collapse' : 'Expand'}
+          >{expandedGroups.has(group.id) ? '▾' : '▸'}</button>
+
+          <!-- Select-all checkbox -->
+          <input
+            class="group-check"
+            type="checkbox"
+            checked={groupAllChecked(group.id)}
+            indeterminate={groupSomeChecked(group.id)}
+            onchange={() => toggleGroupCheck(group.id)}
+            title="Select all units in this group"
+          />
+
+          <!-- Group name (click to edit) -->
+          <button class="plain tree-group-name" onclick={() => selectGroup(group)}>
             <strong>{group.label}</strong>
-            <small class="muted">{groupUnits.length} unit{groupUnits.length === 1 ? '' : 's'}</small>
+            <small class="muted"> · {groupUnits.length} unit{groupUnits.length === 1 ? '' : 's'}</small>
           </button>
-          <div class="tree-group-actions">
-            <button class="icon-btn plain" title="Edit group" onclick={() => selectGroup(group)}>✏️</button>
-            <button class="icon-btn plain" title="Delete group" onclick={() => openDeleteGroup(group)}>🗑️</button>
-          </div>
+
+          <!-- Delete only — edit is via click on name -->
+          <button class="plain icon-btn" title="Delete group" onclick={() => openDeleteGroup(group)}>🗑</button>
         </div>
 
         {#if expandedGroups.has(group.id)}
           <div class="tree-units">
             {#each groupUnits as unit (unit.id)}
-              <div class="tree-unit-row" class:selected={selectedItem?.id === unit.id && selectedItem?.type === 'unit'}>
+              <div
+                class="tree-unit-row"
+                class:selected={selectedItem?.id === unit.id && selectedItem?.type === 'unit'}
+              >
                 <input
                   type="checkbox"
                   checked={checkedUnitIds.has(unit.id)}
                   onchange={() => toggleCheck(unit.id)}
                 />
-                <button class="tree-unit-label plain" onclick={() => selectUnit(unit)}>
+                <button class="plain tree-unit-btn" onclick={() => selectUnit(unit)}>
                   {unit.label}
                   <span class="muted">({unit.symbol})</span>
                   {#if unit.id === group.baseUnitId}
                     <span class="base-badge" title="Base unit">★</span>
                   {/if}
                 </button>
-                <button class="icon-btn plain" title="Edit" onclick={() => selectUnit(unit)}>✏️</button>
               </div>
             {/each}
-            <button class="add-unit-btn plain" onclick={() => startNewUnit(group.id)}>
-              + Add Unit to {group.label}
+            <button class="plain add-unit-btn" onclick={() => startNewUnit(group.id)}>
+              + Add unit
             </button>
           </div>
         {/if}
       </div>
     {/each}
 
-    <!-- Ungrouped section -->
+    <!-- Ungrouped -->
     {#if (unitsByGroup.get(null) ?? []).length > 0}
       {@const orphaned = unitsByGroup.get(null) ?? []}
       <div class="tree-group">
         <div class="tree-group-header">
-          <span class="tree-group-label"><strong>Ungrouped</strong> <small class="muted">{orphaned.length}</small></span>
+          <input
+            class="group-check"
+            type="checkbox"
+            checked={groupAllChecked(null)}
+            indeterminate={groupSomeChecked(null)}
+            onchange={() => toggleGroupCheck(null)}
+            title="Select all ungrouped units"
+          />
+          <span class="tree-group-name"><strong>Ungrouped</strong> <small class="muted">· {orphaned.length}</small></span>
         </div>
         <div class="tree-units">
           {#each orphaned as unit (unit.id)}
@@ -374,10 +396,9 @@
                 checked={checkedUnitIds.has(unit.id)}
                 onchange={() => toggleCheck(unit.id)}
               />
-              <button class="tree-unit-label plain" onclick={() => selectUnit(unit)}>
+              <button class="plain tree-unit-btn" onclick={() => selectUnit(unit)}>
                 {unit.label} <span class="muted">({unit.symbol})</span>
               </button>
-              <button class="icon-btn plain" onclick={() => selectUnit(unit)}>✏️</button>
             </div>
           {/each}
         </div>
@@ -390,26 +411,20 @@
     </div>
   </aside>
 
-  <!-- Right panel: form -->
+  <!-- ── Right panel ────────────────────────────────────────────────────────── -->
   <section class="admin-form-panel">
     {#if formError}
-      <p class="form-error" role="alert">{formError}</p>
+      <p class="form-msg form-error" role="alert">{formError}</p>
     {/if}
     {#if formSuccess}
-      <p class="form-success" role="status">{formSuccess}</p>
+      <p class="form-msg form-success" role="status">{formSuccess}</p>
     {/if}
 
-    {#if (selectedItem?.type === 'unit' || unitFormNew)}
-      <!-- Unit form -->
+    {#if selectedItem?.type === 'unit' || unitFormNew}
       <h3>{unitFormNew ? 'New Unit' : 'Edit Unit'}</h3>
       <label>
-        ID {#if !unitFormNew}<small>(readonly)</small>{/if}
-        <input
-          type="text"
-          bind:value={unitForm.id}
-          readonly={!unitFormNew}
-          placeholder="e.g. my-unit"
-        />
+        ID {#if !unitFormNew}<small class="muted">(readonly)</small>{/if}
+        <input type="text" bind:value={unitForm.id} readonly={!unitFormNew} placeholder="e.g. my-unit" />
       </label>
       <label>
         Label
@@ -440,23 +455,17 @@
         {/if}
       </label>
       <div class="form-actions">
-        <button onclick={saveUnit}>{unitFormNew ? 'Create Unit' : 'Save Unit'}</button>
+        <button onclick={saveUnit}>{unitFormNew ? 'Create' : 'Save'}</button>
         {#if !unitFormNew}
           <button class="outline secondary" onclick={deleteUnit}>Delete</button>
         {/if}
       </div>
 
-    {:else if (selectedItem?.type === 'group' || groupFormNew)}
-      <!-- Group form -->
+    {:else if selectedItem?.type === 'group' || groupFormNew}
       <h3>{groupFormNew ? 'New Group' : 'Edit Group'}</h3>
       <label>
-        ID {#if !groupFormNew}<small>(readonly)</small>{/if}
-        <input
-          type="text"
-          bind:value={groupForm.id}
-          readonly={!groupFormNew}
-          placeholder="e.g. my-group"
-        />
+        ID {#if !groupFormNew}<small class="muted">(readonly)</small>{/if}
+        <input type="text" bind:value={groupForm.id} readonly={!groupFormNew} placeholder="e.g. my-group" />
       </label>
       <label>
         Label
@@ -464,7 +473,7 @@
       </label>
       <label>
         Base Unit
-        <small>Changing the base unit will auto-recalculate all toBase values in this group.</small>
+        <small class="muted">Changing this auto-recalculates all toBase values in the group.</small>
         <select bind:value={groupForm.baseUnitId}>
           <option value="">None</option>
           {#each unitsData.units.filter((u) => u.group === groupForm.id) as u}
@@ -474,13 +483,11 @@
       </label>
       <label>
         To Universal
-        <small title="Relative scale for cross-group YOLO conversions. Arbitrary — make it up.">
-          Relative scale for cross-group conversions.
-        </small>
+        <small class="muted">Relative scale for cross-group (YOLO) conversions. Arbitrary.</small>
         <input type="number" bind:value={groupForm.toUniversal} min="0.000001" step="any" />
       </label>
       <div class="form-actions">
-        <button onclick={saveGroup}>{groupFormNew ? 'Create Group' : 'Save Group'}</button>
+        <button onclick={saveGroup}>{groupFormNew ? 'Create' : 'Save'}</button>
         {#if !groupFormNew}
           <button
             class="outline secondary"
@@ -493,7 +500,7 @@
       </div>
 
     {:else}
-      <p class="select-hint">Select a unit or group to edit</p>
+      <p class="select-hint">Select a unit or group to edit, or add a new one.</p>
     {/if}
   </section>
 </div>
@@ -507,21 +514,14 @@
     <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
     <article class="modal-card" onclick={(e) => e.stopPropagation()}>
       <h3>Delete "{deleteGroupTarget.label}"</h3>
-
       {#if unitsCount === 0}
         <p>This group has no units. Delete it?</p>
         <div class="form-actions">
-          <button
-            onclick={() => {
-              deleteGroupAction = 'orphan';
-              confirmDeleteGroup();
-            }}
-          >Delete Group</button>
+          <button onclick={confirmDeleteGroup}>Delete Group</button>
           <button class="outline secondary" onclick={closeDeleteGroup}>Cancel</button>
         </div>
       {:else}
         <p>This group contains <strong>{unitsCount}</strong> unit{unitsCount === 1 ? '' : 's'}.</p>
-
         <fieldset>
           <legend>What to do with these units?</legend>
           <label>
@@ -529,24 +529,25 @@
             Reassign to another group
           </label>
           {#if deleteGroupAction === 'reassign'}
-            <select bind:value={deleteGroupTargetId} style="margin: 0.5rem 0;">
+            <div class="reassign-options">
+              <select bind:value={deleteGroupTargetId}>
                 <option value="">Select target group…</option>
                 {#each unitsData.groups.filter((g) => g.id !== deleteGroupTarget?.id) as g}
                   <option value={g.id}>{g.label}</option>
                 {/each}
               </select>
-            <div>
-              <label><input type="radio" bind:group={deleteGroupToBaseAction} value="keep" /> Keep toBase values</label>
-              <label><input type="radio" bind:group={deleteGroupToBaseAction} value="recalculate" /> Recalculate (scale by toUniversal ratio)</label>
-              <label><input type="radio" bind:group={deleteGroupToBaseAction} value="reset" /> Reset to 1.0</label>
+              <div class="radio-stack">
+                <label><input type="radio" bind:group={deleteGroupToBaseAction} value="keep" /> Keep toBase values unchanged</label>
+                <label><input type="radio" bind:group={deleteGroupToBaseAction} value="recalculate" /> Recalculate via toUniversal ratio</label>
+                <label><input type="radio" bind:group={deleteGroupToBaseAction} value="reset" /> Reset all toBase to 1.0</label>
+              </div>
             </div>
           {/if}
           <label>
             <input type="radio" bind:group={deleteGroupAction} value="orphan" />
-            Delete Group, Keep Units (Orphan)
+            Delete group only — keep units as Ungrouped
           </label>
         </fieldset>
-
         <div class="form-actions">
           <button
             onclick={confirmDeleteGroup}
@@ -568,83 +569,194 @@
     justify-content: space-between;
     margin-bottom: 1.5rem;
   }
-
-  .admin-header h2 {
-    margin: 0;
-  }
-
-  .bulk-actions {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-    margin-bottom: 1rem;
-    padding: 0.75rem;
-    background: var(--pico-card-background-color);
-    border: 1px solid var(--pico-card-border-color);
-    border-radius: var(--pico-border-radius);
-  }
+  .admin-header h2 { margin: 0; }
 
   .admin-panels {
     display: grid;
-    grid-template-columns: 280px 1fr;
+    grid-template-columns: 340px 1fr;
     gap: 1.5rem;
     align-items: start;
   }
-
-  @media (max-width: 720px) {
+  @media (max-width: 800px) {
     .admin-panels { grid-template-columns: 1fr; }
   }
 
+  /* ── Left panel ────────────────────────────────────────────────────────────── */
   .admin-tree {
     background: var(--pico-card-background-color);
     border: 1px solid var(--pico-card-border-color);
     border-radius: var(--pico-border-radius);
-    padding: 0.75rem;
+    overflow: hidden; /* clean edges */
   }
 
-  .tree-group { margin-bottom: 0.5rem; }
+  /* Persistent bulk-action bar */
+  .bulk-bar {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid var(--pico-card-border-color);
+    background: var(--pico-secondary-background, rgba(0,0,0,0.03));
+    min-height: 2.75rem;
+  }
+  .bulk-count {
+    font-size: 0.8rem;
+    color: var(--pico-muted-color);
+    white-space: nowrap;
+    min-width: 5rem;
+  }
+  .bulk-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    flex: 1;
+  }
+  .bulk-controls select {
+    flex: 1;
+    min-width: 0;
+    padding: 0.2rem 0.4rem;
+    font-size: 0.8rem;
+    margin: 0;
+    height: 2rem;
+  }
+  .bulk-go {
+    padding: 0.2rem 0.6rem;
+    font-size: 0.8rem;
+    margin: 0;
+    white-space: nowrap;
+    height: 2rem;
+  }
+  .bulk-clear {
+    font-size: 0.75rem;
+    color: var(--pico-muted-color);
+    padding: 0.15rem 0.3rem;
+  }
+  .bulk-clear:hover { color: var(--pico-color); }
+
+  /* Tree groups */
+  .tree-group {
+    border-bottom: 1px solid var(--pico-card-border-color);
+  }
+  .tree-group:last-of-type { border-bottom: none; }
 
   .tree-group-header {
     display: flex;
     align-items: center;
-    gap: 0.25rem;
-  }
-
-  .tree-group-label {
-    flex: 1;
-    text-align: left;
-    display: flex;
     gap: 0.4rem;
-    align-items: baseline;
+    padding: 0.5rem 0.75rem;
   }
 
-  .tree-group-actions {
-    display: flex;
-    gap: 0.25rem;
+  .expand-btn {
+    color: var(--pico-muted-color);
+    font-size: 0.75rem;
+    flex-shrink: 0;
+    width: 1.2rem;
+    text-align: center;
   }
 
+  .group-check {
+    flex-shrink: 0;
+    margin: 0;
+    width: 1rem;
+    height: 1rem;
+    cursor: pointer;
+  }
+
+  .tree-group-name {
+    flex: 1;
+    min-width: 0;
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.3;
+  }
+
+  /* Tree units */
   .tree-units {
-    margin-left: 1.5rem;
-    margin-top: 0.25rem;
+    padding: 0.25rem 0.75rem 0.5rem 2.8rem;
   }
 
   .tree-unit-row {
     display: flex;
     align-items: center;
-    gap: 0.4rem;
-    padding: 0.15rem 0.25rem;
-    border-radius: var(--pico-border-radius);
+    gap: 0.5rem;
+    padding: 0.2rem 0.3rem;
+    border-radius: calc(var(--pico-border-radius) / 2);
   }
-
   .tree-unit-row.selected {
     background: var(--pico-primary-background);
   }
-
-  .tree-unit-label {
+  .tree-unit-row input[type=checkbox] {
+    flex-shrink: 0;
+    margin: 0;
+    width: 1rem;
+    height: 1rem;
+    cursor: pointer;
+  }
+  .tree-unit-btn {
     flex: 1;
     text-align: left;
+    font-size: 0.9rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
+  .add-unit-btn {
+    font-size: 0.8rem;
+    color: var(--pico-primary);
+    margin-top: 0.25rem;
+    padding: 0.15rem 0;
+  }
+
+  .tree-footer {
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    border-top: 1px solid var(--pico-card-border-color);
+  }
+  .tree-footer button {
+    flex: 1;
+    font-size: 0.85rem;
+    margin: 0;
+    padding: 0.4rem 0.5rem;
+  }
+
+  /* ── Right panel ───────────────────────────────────────────────────────────── */
+  .admin-form-panel {
+    background: var(--pico-card-background-color);
+    border: 1px solid var(--pico-card-border-color);
+    border-radius: var(--pico-border-radius);
+    padding: 1.25rem;
+  }
+  .select-hint {
+    color: var(--pico-muted-color);
+    font-style: italic;
+    margin: 2rem 0;
+    text-align: center;
+  }
+  .form-actions {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: 1rem;
+  }
+  .form-msg {
+    padding: 0.5rem 0.75rem;
+    border-radius: var(--pico-border-radius);
+    font-size: 0.9rem;
+    margin-bottom: 1rem;
+  }
+  .form-error { color: var(--pico-del-color, #e74c3c); background: rgba(231,76,60,0.1); }
+  .form-success { color: var(--pico-ins-color, #2ecc71); background: rgba(46,204,113,0.1); }
+  .tobase-hint {
+    display: block;
+    color: var(--pico-muted-color);
+    margin-top: 0.25rem;
+    font-style: italic;
+  }
+
+  /* ── Shared ────────────────────────────────────────────────────────────────── */
   .plain {
     background: none;
     border: none;
@@ -654,90 +766,13 @@
     color: inherit;
     font: inherit;
   }
-
-  .icon-btn {
-    font-size: 0.9rem;
-    opacity: 0.6;
-  }
-
+  .icon-btn { opacity: 0.5; font-size: 0.85rem; }
   .icon-btn:hover { opacity: 1; }
+  .base-badge { color: var(--pico-primary); font-size: 0.75rem; margin-left: 0.2rem; }
+  .muted { color: var(--pico-muted-color); font-size: 0.85rem; }
+  .logout-btn { width: auto; padding: 0.3rem 0.75rem; margin-bottom: 0; font-size: 0.9rem; }
 
-  .base-badge {
-    color: var(--pico-primary);
-    font-size: 0.8rem;
-  }
-
-  .muted {
-    color: var(--pico-muted-color);
-    font-size: 0.85rem;
-  }
-
-  .add-unit-btn {
-    font-size: 0.85rem;
-    color: var(--pico-primary);
-    padding: 0.2rem 0.25rem;
-    margin-top: 0.25rem;
-  }
-
-  .tree-footer {
-    display: flex;
-    gap: 0.5rem;
-    margin-top: 0.75rem;
-    padding-top: 0.75rem;
-    border-top: 1px solid var(--pico-card-border-color);
-  }
-
-  .admin-form-panel {
-    background: var(--pico-card-background-color);
-    border: 1px solid var(--pico-card-border-color);
-    border-radius: var(--pico-border-radius);
-    padding: 1.25rem;
-  }
-
-  .select-hint {
-    color: var(--pico-muted-color);
-    font-style: italic;
-    margin: 2rem 0;
-    text-align: center;
-  }
-
-  .form-actions {
-    display: flex;
-    gap: 0.5rem;
-    margin-top: 1rem;
-  }
-
-  .form-error {
-    color: var(--pico-del-color, #e74c3c);
-    background: rgba(231, 76, 60, 0.1);
-    padding: 0.5rem 0.75rem;
-    border-radius: var(--pico-border-radius);
-    font-size: 0.9rem;
-  }
-
-  .form-success {
-    color: var(--pico-ins-color, #2ecc71);
-    background: rgba(46, 204, 113, 0.1);
-    padding: 0.5rem 0.75rem;
-    border-radius: var(--pico-border-radius);
-    font-size: 0.9rem;
-  }
-
-  .tobase-hint {
-    display: block;
-    color: var(--pico-muted-color);
-    margin-top: 0.25rem;
-    font-style: italic;
-  }
-
-  .logout-btn {
-    width: auto;
-    padding: 0.3rem 0.75rem;
-    margin-bottom: 0;
-    font-size: 0.9rem;
-  }
-
-  /* Modal */
+  /* ── Modal ─────────────────────────────────────────────────────────────────── */
   .modal-backdrop {
     position: fixed;
     inset: 0;
@@ -747,10 +782,7 @@
     justify-content: center;
     z-index: 100;
   }
-
-  .modal-card {
-    width: 100%;
-    max-width: 480px;
-    margin: 0 1rem;
-  }
+  .modal-card { width: 100%; max-width: 480px; margin: 0 1rem; }
+  .reassign-options { margin: 0.5rem 0 0.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
+  .radio-stack { display: flex; flex-direction: column; gap: 0.25rem; }
 </style>