Define btn-secondary to match btn-primary sizing and alignment.

Secondary actions were unstyled links beside pill buttons; add shared btn-group helper for form rows.

Co-authored-by: Cursor <cursoragent@cursor.com>

resources/css/app.css

@@ -147,6 +147,45 @@ html.qr-mobile-page body {
         padding: 0.625rem 1.25rem;
     }
 
+    .btn-secondary {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        border-radius: 9999px;
+        border: 1px solid rgb(226 232 240);
+        background-color: #fff;
+        padding: 0.5rem 1rem;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        font-weight: 600;
+        color: rgb(51 65 85);
+        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+        transition: background-color 0.15s ease, border-color 0.15s ease;
+    }
+
+    .btn-secondary:hover {
+        background-color: rgb(248 250 252);
+        border-color: rgb(203 213 225);
+    }
+
+    .btn-secondary:disabled {
+        opacity: 0.6;
+        pointer-events: none;
+    }
+
+    .btn-group {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .btn-group > form {
+        display: inline-flex;
+        margin: 0;
+    }
+
     .btn-fab {
         display: inline-flex;
         height: 2.75rem;

resources/views/qms/console/show.blade.php

@@ -7,10 +7,12 @@
     </div>
     <div class="flex flex-wrap items-center gap-2">
       <x-counter-status :status="$counter->status" />
+      <div class="btn-group">
         <form method="POST" action="{{ route('qms.console.action', $counter) }}">@csrf<input type="hidden" name="action" value="available"><button class="btn-secondary text-sm">Mark available</button></form>
         <form method="POST" action="{{ route('qms.console.action', $counter) }}">@csrf<input type="hidden" name="action" value="offline"><button class="btn-secondary text-sm">Go offline</button></form>
       </div>
     </div>
+  </div>
 
   @if ($currentTicket)
     <section class="mt-6 overflow-hidden rounded-2xl border border-indigo-200 bg-gradient-to-br from-indigo-50 via-white to-white shadow-sm">

resources/views/qms/counters/index.blade.php

@@ -21,7 +21,7 @@
           <span class="font-medium text-slate-700">Queues:</span>
           {{ $counter->serviceQueues->pluck('name')->join(', ') ?: 'None assigned' }}
         </p>
-        <div class="mt-5 flex gap-2">
+        <div class="mt-5 btn-group">
           <a href="{{ route('qms.console.show', $counter) }}" class="btn-primary flex-1 text-center text-sm">Open console</a>
           <a href="{{ route('qms.counters.show', $counter) }}" class="btn-secondary text-sm">Details</a>
         </div>

resources/views/qms/counters/show.blade.php

@@ -8,7 +8,7 @@
       </div>
       <p class="mt-1 text-sm text-slate-500">{{ $counter->branch?->name }} · {{ $counter->code ?: 'No desk code' }}</p>
     </div>
-    <div class="flex flex-wrap gap-2">
+    <div class="btn-group">
       @if ($canManage)
         <a href="{{ route('qms.counters.edit', $counter) }}" class="btn-secondary">Edit counter</a>
       @endif

resources/views/qms/queues/create.blade.php

@@ -7,7 +7,7 @@
             @csrf
             @include('qms.queues._form', ['queue' => null])
 
-            <div class="flex gap-3">
+            <div class="btn-group w-full">
                 <a href="{{ route('qms.queues.index') }}" class="btn-secondary flex-1 justify-center">Cancel</a>
                 <button type="submit" class="btn-primary flex-1">Create queue</button>
             </div>