complete admin CSS refactor: delete utilities.css, add layout primitives

- Delete utilities.css (701 lines / 24 KB of Tailwind utility clones)
- Add layout.css with admin-stack, admin-row, admin-cluster, admin-grid
  primitives and gap variants (sm, md, lg, xl)
- Add transitions.css import and layout.css import to admin.css entry point
- Replace all Tailwind utility classes across 26 admin templates with
  semantic admin-*/theme-*/page-specific CSS classes
- Replace all non-dynamic inline styles with semantic classes
- Add ~100 new semantic classes to components.css (analytics, dashboard,
  order detail, settings, theme editor, generic utilities)
- Fix stray text-error → admin-text-error in media.ex
- Add missing .truncate definition to admin CSS
- Only remaining inline styles are dynamic data values (progress bars,
  chart dimensions) and one JS.toggle target

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

lib/berrypod_web/live/admin/media.ex

@@ -260,7 +260,7 @@ defmodule BerrypodWeb.Admin.Media do
               name="value"
               value={@upload_alt}
               placeholder="Alt text (recommended)"
-              class="admin-input flex-1"
+              class="admin-input admin-input-fill"
               phx-debounce="200"
             />
           </div>
@@ -272,12 +272,12 @@ defmodule BerrypodWeb.Admin.Media do
           </div>
         <% end %>
         <%= for err <- upload_errors(@uploads.media_upload) do %>
-          <p class="text-error text-sm">{Phoenix.Naming.humanize(err)}</p>
+          <p class="admin-error">{Phoenix.Naming.humanize(err)}</p>
         <% end %>
       </div>
 
       <%!-- filter bar --%>
-      <div class="flex gap-2 mt-6 mb-4 flex-wrap items-center">
+      <div class="admin-filter-row">
         <form phx-change="filter_type" class="contents">
           <select name="type" class="admin-select">
             <option value="" selected={is_nil(@filter_type)}>All types</option>
@@ -294,7 +294,7 @@ defmodule BerrypodWeb.Admin.Media do
           value={@filter_search}
           phx-keyup="filter_search"
           phx-debounce="300"
-          class="admin-input flex-1"
+          class="admin-input admin-input-fill"
         />
         <button
           phx-click="toggle_orphans"
@@ -342,7 +342,7 @@ defmodule BerrypodWeb.Admin.Media do
                 <span class="media-card-filename" title={image.filename}>{image.filename}</span>
                 <div class="media-card-meta">
                   <span class={type_badge_class(image.image_type)}>{image.image_type}</span>
-                  <span class="text-xs">{format_file_size(image.file_size)}</span>
+                  <span class="media-card-size">{format_file_size(image.file_size)}</span>
                 </div>
                 <span
                   :if={!image.alt || image.alt == ""}
@@ -419,14 +419,14 @@ defmodule BerrypodWeb.Admin.Media do
 
           <div class="media-detail-actions">
             <%= if @confirm_delete do %>
-              <p class="text-sm text-error">
+              <p class="admin-error">
                 <%= if @selected_usages != [] do %>
                   This image is in use. Deleting it may break pages.
                 <% else %>
                   Are you sure?
                 <% end %>
               </p>
-              <div class="flex gap-2">
+              <div class="admin-row">
                 <button phx-click="delete_image" class="admin-btn admin-btn-sm admin-btn-danger">
                   Yes, delete
                 </button>
@@ -437,7 +437,7 @@ defmodule BerrypodWeb.Admin.Media do
             <% else %>
               <button
                 phx-click="confirm_delete"
-                class="admin-btn admin-btn-sm admin-btn-ghost text-error"
+                class="admin-btn admin-btn-sm admin-btn-ghost admin-text-error"
               >
                 <.icon name="hero-trash" class="size-4" /> Delete image
               </button>