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/orders.ex

@@ -46,7 +46,7 @@ defmodule BerrypodWeb.Admin.Orders do
       Orders
     </.header>
 
-    <div class="flex gap-2 mt-6 mb-4 flex-wrap">
+    <div class="admin-filter-row">
       <.filter_tab
         status="all"
         label="All"
@@ -98,10 +98,10 @@ defmodule BerrypodWeb.Admin.Orders do
 
     <.admin_pagination :if={@order_count > 0} page={@pagination} patch={~p"/admin/orders"} />
 
-    <div :if={@order_count == 0} class="text-center py-12 text-base-content/60">
-      <.icon name="hero-inbox" class="size-12 mx-auto mb-4" />
-      <p class="text-lg font-medium">No orders yet</p>
-      <p class="text-sm mt-1">Orders will appear here once customers check out.</p>
+    <div :if={@order_count == 0} class="admin-empty-state">
+      <.icon name="hero-inbox" class="admin-empty-state-icon" />
+      <p class="admin-empty-state-title">No orders yet</p>
+      <p class="admin-empty-state-text">Orders will appear here once customers check out.</p>
     </div>
     """
   end
@@ -123,41 +123,27 @@ defmodule BerrypodWeb.Admin.Orders do
       ]}
     >
       {@label}
-      <span :if={@count > 0} class="admin-badge admin-badge-sm ml-1">{@count}</span>
+      <span :if={@count > 0} class="admin-badge admin-badge-sm admin-badge-count">
+        {@count}
+      </span>
     </button>
     """
   end
 
   defp status_badge(assigns) do
-    {bg, text, ring, icon} =
+    {color, icon} =
       case assigns.status do
-        "paid" ->
-          {"bg-green-50", "text-green-700", "ring-green-600/20", "hero-check-circle-mini"}
-
-        "pending" ->
-          {"bg-amber-50", "text-amber-700", "ring-amber-600/20", "hero-clock-mini"}
-
-        "failed" ->
-          {"bg-red-50", "text-red-700", "ring-red-600/20", "hero-x-circle-mini"}
-
-        "refunded" ->
-          {"bg-base-200/50", "text-base-content/60", "ring-base-content/10",
-           "hero-arrow-uturn-left-mini"}
-
-        _ ->
-          {"bg-base-200/50", "text-base-content/60", "ring-base-content/10",
-           "hero-question-mark-circle-mini"}
+        "paid" -> {"green", "hero-check-circle-mini"}
+        "pending" -> {"amber", "hero-clock-mini"}
+        "failed" -> {"red", "hero-x-circle-mini"}
+        "refunded" -> {"zinc", "hero-arrow-uturn-left-mini"}
+        _ -> {"zinc", "hero-question-mark-circle-mini"}
       end
 
-    assigns = assign(assigns, bg: bg, text: text, ring: ring, icon: icon)
+    assigns = assign(assigns, color: color, icon: icon)
 
     ~H"""
-    <span class={[
-      "inline-flex items-center gap-1 rounded-full px-2 py-1 text-xs font-medium ring-1 ring-inset",
-      @bg,
-      @text,
-      @ring
-    ]}>
+    <span class={["admin-status-pill", "admin-status-pill-#{@color}"]}>
       <.icon name={@icon} class="size-3" /> {@status}
     </span>
     """
@@ -168,41 +154,21 @@ defmodule BerrypodWeb.Admin.Orders do
   end
 
   defp fulfilment_badge(assigns) do
-    {bg, text, ring, icon} =
+    {color, icon} =
       case assigns.status do
-        "submitted" ->
-          {"bg-blue-50", "text-blue-700", "ring-blue-600/20", "hero-paper-airplane-mini"}
-
-        "processing" ->
-          {"bg-amber-50", "text-amber-700", "ring-amber-600/20", "hero-cog-6-tooth-mini"}
-
-        "shipped" ->
-          {"bg-purple-50", "text-purple-700", "ring-purple-600/20", "hero-truck-mini"}
-
-        "delivered" ->
-          {"bg-green-50", "text-green-700", "ring-green-600/20", "hero-check-circle-mini"}
-
-        "failed" ->
-          {"bg-red-50", "text-red-700", "ring-red-600/20", "hero-x-circle-mini"}
-
-        "cancelled" ->
-          {"bg-base-200/50", "text-base-content/60", "ring-base-content/10",
-           "hero-no-symbol-mini"}
-
-        _ ->
-          {"bg-base-200/50", "text-base-content/60", "ring-base-content/10",
-           "hero-minus-circle-mini"}
+        "submitted" -> {"blue", "hero-paper-airplane-mini"}
+        "processing" -> {"amber", "hero-cog-6-tooth-mini"}
+        "shipped" -> {"purple", "hero-truck-mini"}
+        "delivered" -> {"green", "hero-check-circle-mini"}
+        "failed" -> {"red", "hero-x-circle-mini"}
+        "cancelled" -> {"zinc", "hero-no-symbol-mini"}
+        _ -> {"zinc", "hero-minus-circle-mini"}
       end
 
-    assigns = assign(assigns, bg: bg, text: text, ring: ring, icon: icon)
+    assigns = assign(assigns, color: color, icon: icon)
 
     ~H"""
-    <span class={[
-      "inline-flex items-center gap-1 rounded-full px-2 py-1 text-xs font-medium ring-1 ring-inset",
-      @bg,
-      @text,
-      @ring
-    ]}>
+    <span class={["admin-status-pill", "admin-status-pill-#{@color}"]}>
       <.icon name={@icon} class="size-3" /> {@status}
     </span>
     """