refactor(ui) : improve styling, layout and responsive across all components

Rework CSS theme (app.css), navbar layout, dashboard page, machine detail,
catalog pages, and various form/display components for better consistency
and mobile responsiveness.

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

app/components/common/DataTable.vue

@@ -63,13 +63,13 @@
 
     <!-- Table (always shown when there are filterable columns, even during loading or with 0 rows) -->
     <template v-else>
-      <div class="overflow-x-auto overflow-y-clip relative">
+      <div class="overflow-x-auto overflow-y-clip relative rounded-lg border border-base-300/40">
         <!-- Loading overlay (keeps table & filter inputs visible) -->
         <div
           v-if="loading && hasFilterableColumns"
-          class="absolute inset-0 bg-base-100/50 z-10 flex items-center justify-center"
+          class="absolute inset-0 bg-base-100/60 backdrop-blur-[1px] z-10 flex items-center justify-center"
         >
-          <span class="loading loading-spinner" aria-hidden="true" />
+          <span class="loading loading-spinner text-primary" aria-hidden="true" />
         </div>
         <table :class="['table table-sm md:table-md', tableClass]">
           <thead>
@@ -175,7 +175,7 @@
               </tr>
               <!-- Expanded row -->
               <tr v-if="expandable && isExpanded(row)">
-                <td :colspan="columns.length + 1" class="bg-base-200/50 p-4">
+                <td :colspan="columns.length + 1" class="bg-base-200/30 p-4 border-t border-base-200/80">
                   <slot name="row-expanded" :row="row" :index="idx" />
                 </td>
               </tr>